NextJS 환경에서 클라이언트(브라우저) 단에서 서버단으로 데이터를 전송하는 방식은 아래와 같이 크게 4가지로 구분할 수 있다.1. 태그를 활용한 전송2. Query String3. 다이나믹 라우팅 + URL Parameter4. fetch API를 사용해 body에 직접 데이터를 넣어서 전송하기 이번 포스팅에서는 위 4가지 방식의 장단점 그리고 사용 방법에 대해서 간략하게 정리하고자 한다. 1. 태그를 활용한 전송 page.jsform tag method 속성에 HTTP Method를 정의, action 속성에 api 요청 주소를 명시한다.export default function ServerComponent() { return ( 로그..
Next.js에서 Component는 Client Component와 Server Component로 구분한다. Client ComponentNext.js에서 의미하는 Client Component는 React의 Client Component와 동일하다. 즉, React에서의 Component를 Next.js 환경에서 Client Component라고 칭한다. Client Component를 생성하는 방법은 최상단에 'use client'라는 문구를 넣어 주기만 하면 된다. 다음 예제 코드는 Client Component 형태로 Hello Component를 정의한 뒤Hello! Button을 클릭하면 브라우저 콘솔에 Hello World!를 출력하는 React 예제 코드이다.'use client';i..
App RouterApp Router는 Next.js 13에서 도입된 app/ 디렉토리를 기반으로 하는 파일 기반 라우팅 방식이다. app/ directory 하위에 디렉토리를 하나 생성하면 해당 디렉토리가 라우팅 주소가 된다.예시로 app/ 바로 아래에 list directory를 생성, list directory 하위에 page.js 파일을 정의하면 웹 페이지 상에서 http://localhost:port/list 로 요청 시 list directory의 page.js가 출력된다. Next.js로 생성한 프로젝트 폴더 구조를 경로로 표시하면 아래와 같다. page.js는 하나의 경로에 단일 UI를 표시한다. layout.js위에 Next.js로 생성한 프로젝트 구조를 보면 app 디렉토리 하위에 ..
