next.js 레이아웃2 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. 3. Next.js 페이지 레이아웃 만들기 이전글에 만들었던 탬플릿에 h4테그를 활용해서 "안녕"이라는 문구를 넣어서 웹페이지에 띄워 봤습니다.웹사이트 레이아웃은 리액트 버전 HTML과 CSS로 작성됩니다.크게 차이점은 없습니다. 리액트버전 HTML의 4가지 규칙이 있는데 다음과 같습니다. 1. 리액트버전 HTML을 JSX라고 부르는데 중요한건 아니구여 2. HTML을 작성할때 return( ) 안에 작성하게 됩니다. 3.테그들을 평행해서 사용이 불가능 합니다. 아래처럼 div의 같은줄에 div를 생성하게 되면 아래처럼 빨간줄이 나오게 되구여return () 안의 HTML을 넣을때 1개의 로 시작해서 끝내야 하구여이런 룰이 있기 때문에 위 코드 처럼 div안에 작성을 해야 하구여 4. HTML에 스타일을 집어넣고 싶으시다구여 그럼 아래처럼 cla.. 2024. 5. 30. 이전 1 다음
