Hydration서버로 부터 받아온 HTML위에 React applicaiton(js 코드)를 실행함버튼에 이벤트를 추가한다던지 Link와 같은 상호작용 요소를 추가한다던지특정 컴포넌트는 이러한 Hydrate과정이 필요하겠지만 이런 과정이 필요하지 않은 컴포넌트도 존재한다.이런 경우엔 사용자가 모든 페이지의 JS파일을 다운받는 것이 아닌 상호작용 요소가 필요한 페이지에서만 js파일들을 다운 받게 해야 효율적이다.' use client '그럼 위와 같은 Hydrate 필요여부를 구분하는 방법이 바로 use client이다.이를 통해 어떤 컴포넌트가 Hydrate가 필요한지 구분할 수 있고, 이를 통해 서버 컴포넌트, 클라이언트 컴포넌트가 분류된다.'use client' 여부를 떠나 모든 컴포넌트는 SSR되..

Next에서의 Routing 방식app폴더 내부의 파일 시스템으로 경로를 표시해 라우팅을 제공최상단에 위치한 page.tsx는 '/' root경로에서 보여주는 페이지를 담당폴더에 page.tsx가 존재하지 않는경우 해당 폴더 경로로 접근 시 404오류 발생다만 폴더가 중간 경로로 사용되는 경우 경로명으로는 사용가능하단의 사진의 경우 middle/basement로 접근시 page.tsx의 내용에 해당하는 페이지를 보여줌Not Found 페이지 파일404오류가 발생할 때 보여주는 페이지not-found.tsx로 최상단에 생성Linknext/link에서 import해오며  기존의 a태그의 역할을 함. href에 이동하려는 폴더구조 경로를 입력한다.HomeusePathnamenext/navigation에서 가져..

수동 설치원하는 프로젝트 폴더명 선언 후 이동npm initnpm install react@latest next@latest react-dom@latest- 최신 버전 react, next, reactdom을 설치package.json에 다음 내용을 추가 (next js를 실행시키는 명령어 선언) "scripts": { "dev" : "next dev" },page.tsx 파일을 app이라는 폴더에 넣기기본적으로 next js가 해당 app폴더의 page파일을 찾아 실행시킴npm run dev 명령어를 실행 시 4번의 선언을 통해  next를 실행시키며 5번의 page파일의 확장자를 ts로 선언한 경우 자동으로 typescript가 설치가 됨이후 자동으로 layout.tsx또한 기본적인 구조로 ..

본 글은 하단의 링크의 글들을 공부하며 필사한 글임. Proxy 객체란?프록시 객체는 특정 객체와의 인터렉션을 조금 더 용이하게 컨트롤 할 수 있게 도와준다.마치 은행계좌와 신용카드, 현금이 있는경우 신용카드는 현금의 프록시로 작용한다.결제라는 같은 인터페이스를 구현하며, 소비자는 현금을 잃어버리거나 일일이 관리하지도 않아되는 편리함이 존재합니다.ex) 특정 객체의 값을 설정하거나 값을 조회할 때 등의 인터렉션을 직접 제어할 수 있다. 여기서 프록시(proxy)란 무언가의 대리인으로, JS에서도 해당객체를 다루는 것이 아닌 Proxy 객체와 인터렉션하게 된다.const student = { name: "minkyu", age: 25, major: "computer",};const studentPro..