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..
* 아래 코드는 Next.JS 14 환경에서 테스트하였습니다. React (JS ES6)에서 하나의 파일(Module)을 내보는 방식은 export default 방식과 named export 방식으로 구분된다. 데이터를 내보내는 측에서는 export keyword를 통해 내보낼 데이터를 명시하며, 데이터를 받는 측에서는 import keyword를 사용해 받을 데이터를 정의한다. export defaultexport default 방식은 단 하나의 데이터만을 내보낼 수 있으며 데이터 변수명을 재정의 가능하다.또한 export default는 모듈 당 하나만 정의할 수 있다. data.jslet data = 20export default data page.jsdata.js 모듈에서 받은 data를 my..
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 디렉토리 하위에 ..
JSX란?JavaScript XML의 줄임말로 JavaScript Code 내부에 테그 기반 문법을 사용할 수 있도록 해주는 기술이다. React Framework는 JSX를 웹 페이지가 이해 가능한 JavaScript Code로 변환한다. JSX Rule 1. return 메서드 내부에는 반드시 하나의 태그로 감싸야 한다. 아래와 같이 p태그 2개를 병렬로 중첩하는 형태는 불가능하다. return ( test1 test2 ) 여러 요소를 리턴하기 위해서는 하나의 태그로 감싸 주어야 한다. return ( test1 test2 ) 2. Tag에 class를 적용할 때 class 대신 className을 사용하자. html 코드에 style을 지..
