Next 13 공식문서 읽기 (3)

라우팅 기본 모든 애플리케이션의 뼈대는 라우팅이다. 라우팅의 기본 개념과 Next.js에서 라우팅 처리하는 방법에 대해서 소개한다. 용어 트리 (Tree) : 계층 구조를 시각화하기 위한 규칙. 부모 및 자식 구성 요소가 있는 구성 요소 트리 폴더 구조 하위 트리 : 트리의 일부, 새 루트(first)에서 시작하여 Leaves(last)에서 끝난다. 루트 : 트리 또는 하위트리 (예: 루트 레이아웃)의 첫 번째 노드 Leaf : URL 경로의 마지막 세그먼트와 같이 하위 트리에 자식이 없는 노드 URL 세그먼트 : 슬래시로 구분된 URL 경로의 일부 URL 경로 : 도메인 다음에 오는 URL의 일부 ( 세그먼트로 구성된다.) App Router Next.js v13은 React Server Compone..

• format_list_bulleted NEXT
• · 2023. 11. 7.
• textsms

Next 13 공식문서 읽기 (2)

Next.js 프로젝트 구조 최상위 파일 및 폴더, 구성파일 및 라우팅 규칙에 대한 내용을 설명한다. 최상위 폴더 app : 앱라우터 pages : 페이지 라우터 public : 서비스의 정적 자산(데이터) src : 애플리케이션 원본 폴더 (선택사항 ) 최상위 파일 next.config.js : Next.js에 대한 구성 파일 package.json : 프로젝트 종속성 및 스크립트 instrumentation.ts : OpenTelementry / instrumentation file (이 부분에 대한 개념은 아직... 애플리케이션의 모니터링을 위한 것 같다.) middleware.ts : Next.js 요청 미들웨어 .env : 환경변수 .env.local : 로컬 환경변수 .env.productio..

• format_list_bulleted NEXT
• · 2023. 11. 5.
• textsms

Next 13 공식문서 읽기 (1)

NextJS 공식문서 읽기 https://nextjs.org/docs Next.js란? 풀스택 웹 애플리케이션을 구축하기 위한 리액트 프레임워크이다. React 컴포넌트를 사용하여 UI를 구축하고 Next.js를 사용하여 추가적인 기능과 최적화 작업을 수행한다. Next.js에서 번들링, 컴파일 등 React에 필요한 툴링을 추상화하여 자동으로 구성한다. 이를 통해 설정에 시간을 할애하는 대신 애플리케이션 구축을 하는데에 집중할 수 있다. Next.js의 주요 특징 1. 라우팅 레이아웃, 중첩라우팅, 로딩, 에러 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터 2. 렌더링 클라이언트 및 서버 컴포넌트를 사용한 클라이언트 및 서버 측 렌더링 Next.js를 사용하는 서버에서 정적 및..

• format_list_bulleted NEXT
• · 2023. 11. 3.
• textsms

Recoil, Recoil-Persist를 이용한 상태관리

오늘 내가 배운 것 1. Recoil 2. Recoil 설치 3. Recoil 사용하기 4. 컴포넌트에서 Recoil 상태 값 사용하기 5. Recoil 상태 유지하기 (Recoil-Persist) 1. Recoil 현재 프로젝트에서 전역으로 상태를 관리하기 위해서 Recoil을 사용하고 있다. 기존에 Redux를 이용해서 상태를 관리하면서 프로젝트를 진행할 때 많은 불편함을 느꼈다. 프로젝트에서 관리할 상태가 많아지면 보일러플레이트 코드가 커지는 게 큰 단점이었는데, Recoil을 이용해서 간단하게 해결할 수 있었다. 이제 막 배워서 적용하는 단계라 많이 미숙하게 사용하고 있지만 Redux에 비해 편하게 사용할 수 있다는 장점으로 Recoil을 시작하여 배우고 있다. 2. Recoil 설치 $ npm ..

• format_list_bulleted React
• · 2023. 6. 30.
• textsms

Chrome Extenstion - React Developer Tools

React의 트리구조를 쉽게 볼 수 있게 도와주는 확장 프로그램 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 1a88fbb67 on 2/16/2023. chrome.google.com 리액트를 이용하여 개발하는 사람들에게 필수 확장 프로그램이라고 할 수 있다. 주요 기능은 `컴포넌트 트리 구조 확인`과 `컴포넌트의 상태 및 속성을 확인`이다. 1. 컴포넌트 트리 구조를 확인할 수 있다. ..

• format_list_bulleted React
• · 2023. 3. 15.
• textsms