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을 지..
vue.js 공식문서, GPT를 통해 학습한 내용을 정리합니다. 잘못된 내용을 포함하고 있을 수 있습니다. #v-forv-for 문법을 사용하면 반복되는 HTML 컴포넌트를 마치 일반 프로그래밍 언어의 For문을 사용하듯 반복할 수 있다. 예시로 아래와 같이 동일한 div 태그 컴포넌트가 3개 반복되는 구조가 있다고 가정해 보자. ID PW About ID PW About ID PW ..
