공부34 08. CSS Next.js에서 기본적인 CSS 사용 방법 루트 layout.js에서 globals.css를 import 하여 어떤 페이지를 방문하여도 해당 css파일이 로드된다. globals.css 파일은 전역적으로 디자인을 적용할 수 있다. 2023. 8. 24. 07. 정적 자원 사용하기 이미지와 같은 정적인 컨텐트를 사용하려면 public 폴더에다가 이미지와 같은 파일을 위치 시키면 된다. 위치 시키고 싶은 page.js에서 img 태그를 사용하면 된다. 2023. 8. 24. 06. Single Page Application Next.js 사용하면 그냥 좋아지는 Server Side Rendering 개발자 도구에서 Run command 클릭 disable javascript 클릭하면 자바스크립트 꺼짐 React는 javascript 기술이기 때문에 자바스크립트가 꺼지면 웹 페이지가 아예 렌더링이 되지 않는다. 하지만 Next.js로 만든 웹 페이지는 reload해도 렌더링이 잘 된다. 그 이유는 js가 서버 쪽에서 react를 실행해서 그 응답 결과를 .next에 저장해서 그것을 응답하기 때문이다. 즉 Next.js는 javascript가 아닌 html를 응답한다. 현재 웹 페이지에서는 링크를 옮길 때마다 페이지를 다운로드 받고, 또 이전에 방문했던 페이지로 돌아갈 때에도 다운로드 받게 되어있다. 이러한 문제점은 사용자에게.. 2023. 8. 24. 05.라우팅 라우팅 사용자가 접속한 URL의 path에 따라서 콘텐츠를 응답해주는 작업 어떤 프레임워크든 그 중심에는 반드시 라우팅 존재한다. 라우팅은 웹 개발의 가장 중요한 요소 중 하나이다. app 폴더 안에 layout.js, page.js 존재하는데 layout.js 파일이 웹 페이지의 기본적인 뼈대(골격)이다. 그리고 layout.js에 {children} 코드 위치에 page.js 파일에서의 return 값이 위치하게 된다. 이는 path가 없을 때 구성이고 각 a태그에 라우팅 기능을 부여하기 위한 절차는 다음과 같다. http://localhost:3000/create 로 이동했을 때의 페이지를 만들려면 app 폴더 안에 create 폴더 생성 create 폴더 안에 page.js 파일 생성 create.. 2023. 8. 24. 04. 뼈대 만들기 웹을 소개하는 튜토리얼 사이트 첫 번째 페이지를 방문하면 welcome 메시지 보여주기 Create, Update,Delete 기능 - welcome메시지 content는 src/app/page.js return하는 값 - 공통된 부분은 layout.js에서 다루는 것이 효과적 2023. 8. 24. 01. 설치와 실행 ~ 03. 배포 설치 > npx create-next-app@lastest . 실행 > npm run dev layout.js 파일이 기본 HTML layout.js 파일에서 children은 page.js파일에서 return한 값 개발 버전 기본적 용량이 6.4MB로 큼 -> 용량을 줄이고 불필요한 메시지 지우기 package.json 파일에서 "scripts" 아래에 프로젝트 유지보수를 위한 명령 존재 "dev"는 개발 버전 실행 명령 "build"는 실서버를 위한 배포판을 만드는 명령 "start"는 그 배포판을 서비스하는 명령 배포판은 용량이 302KB로 용량이 현저히 작음 2023. 8. 24. 이전 1 2 3 4 5 6 다음 728x90
