IT/Next.js7 [node.js] 설치 #터미널npm initnpm install express --savenpm install --save-dev nodemon package.json에서 type필드를 설정"dependencies": { "express": "^4.21.1" }, "devDependencies": { "nodemon": "^3.1.7" }, "type": "module" //type 필드 추가 module설정 끝 2024. 11. 13. 6. Next.js html을 반복문으로 줄이고 싶으면 map export default function List() { let menu = ['Tomatoes', 'Pasta', 'Coconut'] let a = [10, 20, 30] return ( 상품목록 {menu[0]} $40 {menu[1]} $40 {menu[2]} $40 ) } array 자료형 변수를 사용하면 문자, 숫자 등을 잠깐 보관해둘 수 있다.변수 하나에 여러개 문자나 숫자를 보관하고 싶은 경우에는 array 자료형을 사용하면 된다. let a = [10, 20, 30];let b = ['김', '이'.. 2024. 5. 31. 5. Next.js 여러 페이지 만들기 (라우팅) 페이지를 나누는걸 전문용어로 라우팅이라고 합니다. url로 페이지를 나누는것을 라우팅이라고 하며 라우팅하려면 일반적인 웹서버들은누가 /list로 접속하면 상품목록 html을 보여달라는 코드를 서버에 짜놔야 하는데Next.js를 사용하면 그런 코드를 짤 필요가 없이 폴더와 파일 하나만 만들면 자동으로 됩니다. Next.js는 라우팅을 할때 다음과 같이 라우팅 합니다.1. app 폴더 안에 폴더를 생성하고 이름을 정합니다.2. 폴더에 page.js파일을 만들고 안에 html을 작성하면 자동으로 url과 페이지가 완성됩니다. 위 처럼 코드를 작성하고 url에 /list 라고 붙여서 검색하면 만들어놓은 페이지가 생성됩니다. layout.js 사용하기헤더같이 반복적으로 사용해야할 기능들이 있지요 그래서 lay.. 2024. 5. 30. 4. Next.js JSX문법_HTML안에 변수 { } JSX 문법 특징인데 변수를 html 중간에 바로 넣어서 보여줄수 있구여쌩javascript 사용하려면 HTML 찾아서 이 글자 다른걸로 바꿔주세요 라고 길게 써야 할텐데리액트는 그딴거 필요 없구여 변수를 HTML에 넣고 싶으면 { } 중괄호 열어서 변수명만 넣으면 되구여 className, id, href 이런 속성도 변수를 넣을 수 있는데 거기에도 { } 중괄호만 열면 됩니다. 이런식으로도 디자인을 줄 수 있습니다~ 2024. 5. 30. 이전 1 2 다음
