개발

1. NextJS의 핵심기능 파일 기반 라우팅 사전 렌더링을 위한 데이터 패칭 등 NextJS 기능 및 페이지들을 표준 React 기능과 컴포넌트 Context, Ref 등 React를 구성하는 모든 것들과 조합하는 방법 API 라우터를 NextJS로 풀스택 Application을 구축하는 방법 2. 프로덕션용 앱 구축을 위한 개념 최적화 가능성 (페지이 메타데이터 설정 방법, 이미지 최적화로 적은 이미지 제공하고지연 로딩하기) 내부에서 일어나는 작업 및 이론 앱의 배포 및 구성과 NextJS Application을 구축하는 다양한 방법 NextJS 프로젝트에서 인증 추가하는 방법 3. 요약 React 복습하기. 2023.11.30 - [Front-End/React] - React란? React란? 1...

Front-End/NextJs 2023. 11. 30. 16:49

● A fullstack framework for ReactJS 에 대한 의미 NextJS를 사용하면 개발자들이 React 프로젝트에 백엔드 코드를 추가하는 작업을 수월하게 할 수 있다. 서버 측 사전 렌더링을 통한 클라이언트 측 코드뿐만 아니라 예를 들어, 파일 시스템으로 작동을 하거나 데이터베이스로 전달이 되는 독립적인 백엔드 코드도 포함하는 풀스택 React 프로젝트가 있을 때, NextJS를 사용하면 NodeJS 코드를 통해 쉽게 백엔드 API를 React 프로젝트로 추가할 수 있음. DB, 파일로 데이터를 저장하는 코드, 데이터를 가져오기, 인증을 추가는 등의 코드를 추가하는 작업이 수월해진다. 그러면 독립적인 REST API 프로젝트를 구축할 필요 없이 하나의 프로젝트로 작업을 하면서 Reac..

Front-End/NextJs 2023. 11. 23. 17:00

● 파일 기반 라우팅이란 기존의 React에는 라우터가 아예 없다. 라우팅이란 사용자에게 여러 개의 페이지가 있는 듯한 착각을 불러일으키는 것으로 탐색하며 페이지를 로드하는게 라우터의 역할임. 일반적으로 React Router를 사용한다. 라우터는 URL을 확인해 URL이 변경될 때 브라우저가 요청을 서버로 보내는 기본 동작을 방지하고, 그 대신에 React를 통해 페이지 상에 다른 콘텐츠를 렌더링한다. 즉, 다른 컴포넌트를 보여주는 것으로 라우팅이다. 서버에 추가 요청을 보내지 않고도 URL에 기반해 화면에 나타나는 내용을 변경하는 것이다. 일반적으로, React를 통해 구축되는 SPA 상에 계속 머무르고 있는 것이다. React를 사용하면 라우팅은 통상적으로 코드에 설정되게 된다. React Rout..

Front-End/NextJs 2023. 11. 23. 16:48

● NextJS의 핵심기능 SSR(Server Side Rendering): Client가 아닌 서버 측의 페이지 상에 랜더링되는 콘텐츠에 대한 처리. React 만을 이용해서 구축된 Application에서는 기본적인 HTML 뼈대와 Entry point 및 id="root" 부분에만 React app이 로딩되고 랜더링 되므로. 랜더링 되는 전부는 React에 의해 처리가 됨. React는 CSR JS library이기 때문에 랜더링은 모두 Client에서 처리되므로 사용자의 브라우저에서 실행됨. 사용자 페이지를 방문했을 때 서버에서 클라이언트 측으로 전송되는 HTML 코드에서는 특별한 내용이 없음. 무엇을 구축하느냐에 따라 해당 부분이 문제가 될 수 있음.예를 들어, 일부 데이터를 화면에 '모임 약속..

Front-End/NextJs 2023. 11. 23. 16:20

● NextJS에 대한 정의 The React Framework for the Web : 리액트 앱을 쉽게 구축할 수 있도록 도와줌. 더보기 ▷React: React code, React components, use React features (props, state, context...) ▷Framework: built-in features that help solve common problemsd and clear guidance on how to use those features A fullStack framework for ReactJS: 리액트 상의 구축된 프레임워크. 코드 작성에 대한 규칙, 파일에 대한 구조화에 대한 가이드 라인을 준수해야 함. 따라서 리액트 상에 구축된 프레임 워크로 Rea..

Front-End/NextJs 2023. 11. 23. 13:46