목록Frontend/Next.js (2)
gyeong3un2

VS Code에서 터미널을 열고 아래 명령어를 입력하여 next.js 개발환경을 설치하자. npx create-next-app@latest --experimental-app next.js를 실행하고 싶다면 아래 명령어를 입력하자. npm run dev page.js: 메인 페이지이다. layout.js: page.js를 감싸는 용도의 페이지이다. globals.css에 넣으면 모든 페이지에 적용된다. page.module.css라는 것은 특정 페이지에만 적용 가능한 것인데, 만약 생성하고 싶다면 xxx.module.css 파일을 생성하면 된다. api 폴더: 서버기능을 만드는 곳이다. node_modules 폴더: 설치한 라이브러리를 보관해줌 public 폴더: 이미지나 폰트 등 소스코드 이외 stati..
Client-side Rendering의 시대가 가고, Server-side Rendering의 시대가 오고 있다. html을 서버에서 만드는 것: Server-side Rendering React나 Vue 라이브러리를 사용하여 브라우저가 실시간으로 만들어주는 것: Client-side Rendering Client-side Rendering은 단점이 아래 두가지가 있는데, 이는 사이트 수익성에 악영향을 끼친다. 구글 검색 노출이 낮다. (되긴 하는데 오래 걸림) 페이지 로딩 속도가 낮다. Server-side Rendering은 html을 웹 페이지를 서버에서 다 만들고 보내기 때문에 유저에게 js 코드를 많이 보내지 않기에 가볍다. 다음은 Server-side Rendering의 장점이다. 위의 단점..