NEXT.js 4

Next.js 'use client' 에러 고치는방법

Next.js를 사용한다면 클라이언트 컴포넌트와 서버 컴포넌트를 분리해서 컴포넌트를 생성한다. Next.js에서 클라이언트 컴포넌트를 사용하기위해서는 코드 최상단에 'use client'를 작성해두면되고, 이후에는 다양한 함수들을 사용할수있게 된다. 그런데 !!!!! 'use client'를 사용하면 error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse () 뭐 이런 에러가 자꾸 뜬다.. 공식문서에서 해보라는 대로해도 똑같고 뭐 자꾸 JSON.parse 파싱에러가 자꾸뜬다... 그렇다고 use client를 안쓰면 1 | // 'use client'; 2 | import { useState } from 'react' : ^..

NEXT.js 2023.04.25

NEXT.js의 라우팅에 대해.araboja

현재 NEXT.js는 계속 업데이트 되고있다. 지금은 13.3 버전임 ㅎ 12버전 선배님들은 app폴더랑 pages폴더가 따로 구분되어있었다. 그리고 pages폴더에서 만든 페이지들이 자동으로 라우팅이 됐었다. 그냥 pages폴더에 apple.tsx 파일만들면 localhost:3000/apple 가면 끝났음;; 근데 13버전으로 바뀌면서 pages 폴더가 사라졌다. 그래서 사용자가 직접 app폴더안에 라우팅 하고자하는 폴더를 만들고 그곳에 page파일을 만어야 한다. Q) 더 귀찮아진거 같은데.. 하향패치 아님? A) ㅇㅇ;; 더 귀찮아지긴했는데.. 공통 컴포넌트 사용면에있어서 상향됨.. 1. 정적 라우팅 app폴더 안에 라우팅 하기원하는 폴더 만들고 page파일 만들고, 하위 요소들 더 만들고싶으면 ..

NEXT.js 2023.04.16

NEXT.js는 CSR임? SSR임?

CSR과 SSR은 각자 장단점이 있다. CSR (Client Side Rendering) 장점 1. 한번만 로딩되면 나머지 동작에서 빠르다. (브라우저에서 한번에 다 다운받아서) 2. 서버의 부하가 적다. 단점 1. 페이지 로딩 시간이 길다. 2. SEO 최적화 is bad 3. 보안취약 SSR (Server Side Rendering) 장점 1. 페이지 로딩 빠름 2. SEO 최적화 is godd 3. 보안 good 4. 실시간 데이터 OK, 사용자별 데이터 OK 단점 1. 서버에 부하가 있을수 있다. 2. 요청할때마다 받아와서 조금 느릴수있다. NEXT.js를 사용하면? 얘는 하이브리드라서 CSR이 필요한 곳엔 CSR로, SSR이 필요한곳엔 SSR로, 한페이지라도 CSR+SSR 섞어서 사용가능함 ㄷㄷ..

NEXT.js 2023.04.16

Next.js 기본 폴더구조와 역할

Next.js를 설치하면 해당 폴더구조로 설치된다. app폴더: 코드를 직접 짜는 공간 page.js : 메인페이지, 리액트의 App.js layout.js: 메인페이지를 감싸는 용도. 리액트의 index.js public폴더: 이미지나 static 파일 보관하는 공간 api 폴더 : 서버기능 만드는 공간 next.config.js : nextjs 설정 파일 node_modules 폴더 : 설치한 라이브러리 보관용 폴더 package.json : 설치한 라이브러리 버전 기록용 파일 이렇게 구성되어있다. 일단 기존 리액트랑 비슷하다..! Next.js 설치방법 (터미널을 킨다) 1. npx create-next-app@latest --experimental-app 2. 프로젝트 명 설정하고, 타입스크립트니..

NEXT.js 2023.04.12