웹 프로그래밍/Next.js7 [유데미 | winterlood 이정환] 프로젝트로 배우는 React.js & Next.js 마스터리 클래스 강의 내용 정리 (섹션 15 ~ 16: Next.js 렌더링 2 - SSG, Next.js 렌더링 3 - ISR) 섹션 15: Next.js 렌더링 2 - SSG SSG(정적 사이트 생성: Static Site Generation) 이해하기 SSR: 브라우저의 요청에 따라 실시간으로 서버 측에서 페이지를 렌더링 하는 것 SSG: 서버 측에서 페이지를 빌드 타임에 한 번만 렌더링 하는 것. 프로젝트 빌드 할 때 페이지가 미리 생성된다. 즉, 페이지 생성 시점에 따라 SSR, SSG의 차이가 나타난다. SSG 프로젝트를 빌드할 때 html 페이지가 미리 생성된다. 이후 브라우저가 페이지를 요청하면, 미리 생성되어 있는 html 파일을 반환해 준다 렌더링이 완료된 페이지를 화면에 그려준다. 4. hydration 과정을 거쳐 응답이 가능한 웹페이지를 생성한다. (SSR과 동일) 장점 SSR에 비해 응답 속도가 굉장히 빠르.. 2024. 1. 22. [유데미 | winterlood 이정환] 프로젝트로 배우는 React.js & Next.js 마스터리 클래스 강의 내용 정리 (섹션 14: Next.js 렌더링 1 - SSR) 섹션 14: Next.js 렌더링 1 - SSR SSR(서버 사이드 렌더링) 이해하기 첫 번째 렌더링: 리액트 컴포넌트와 같이 js로 작성된 페이지를 실제 html 코드로 변환하는 과정 두 번째 렌더링: 변환된 html을 화면(브라우저)에 실제로 그리는 것 js 코드와 html 요소들을 서로 연결함 👉 Hydration (수화) 동작하지 않는 html 요소들에 js 코드를 연결시켜주는 과정 이 과정을 거치면 버튼, 인풋 등 브라우저와 상호작용이 가능해진다. SSR(서버 사이드 렌더링) 적용하기 1 pages > index.js export default function Home({ name }) { return {name}; } // 해당 컴포넌트를 SSR 방식으로 동작하게 한다. export const.. 2024. 1. 22. [유데미 | winterlood 이정환] 프로젝트로 배우는 React.js & Next.js 마스터리 클래스 강의 내용 정리 (섹션 13: 페이지 라우터) 섹션 13: Next.js 페이지 라우터 페이지 라우터 _app.js / _document.js Next 앱에서 _app.js와 _document.js는 page의 역할을 하는 컴포넌트는 아니다. 대신 Next 앱에 반드시 존재해야 할 필수 컴포넌트를 정의하는 파일. 모든 페이지 or 모든 컴포넌트에 적용되어야 하는 공통 로직이나 데이터를 다루는 컴포넌트. _app.js import '@/styles/globals.css' export default function App({ Component, pageProps }) { return } _app.js는 리액트의 App.jsx와 유사한 역할을 수행한다. (모든 페이지의 root 컴포넌트 역할) 모든 페이지의 컴포넌트는 _app에 자식 컴포넌트로 배치되어 .. 2024. 1. 21. [유데미 | winterlood 이정환] 프로젝트로 배우는 React.js & Next.js 마스터리 클래스 강의 내용 정리 (섹션 12: Next.js 소개) 섹션 12: Next.js 소개 Next.js Vercel이 개발한 오픈소스 자바스크립트 프레임워크 기존의 리액트가 제공하지 않던 추가적인 기능을 이용할 수 있게 해준다. 👉 React.js의 확장판 다양한 기능을 제공함 👉 폴더 구조 기반의 페이지 라우팅 / 이미지, 글꼴, 스크립트 최적화 / 서버 사이드 렌더링 / 기타 등등... 프레임워크 vs 라이브러리 따라서, Next.js와 React는 다음과 같은 차이를 가진다. Next.js: 자유도 낮음, 많은 기능이 제공됨 👉 탈 것(특화된 기능이 있고 해당 기능과 연관된 기능도 함께 제공. 정해진 용도로만 활용이 가능함) React: 자유도 높음, 대다수의 기능 제공 안 됨 👉 도구(특화된 기능이 있으나 그 외의 기능은 제공하지 않음. 사용자가 원하는.. 2024. 1. 15. [유데미 | winterlood 이정환] 프로젝트로 배우는 React.js & Next.js 마스터리 클래스 강의 내용 정리 (섹션 10: Context) 섹션 10: Context Props Drilling TodoList 앱의 컴포넌트 트리 붉은 표시가 되어 있는 onUpdate, onDelete 함수는 TodoList 컴포넌트에 구현되어 있지만 실제로 컴포넌트에 직접적으로 필요한 함수는 아니다. App 컴포넌트에서 생성된 함수를 TodoItem으로 내려주어야 하기 때문에 구현되어 있을 뿐이다. 만약 이러한 현상이 tree depth가 깊은 앱에서 발생했다면, 의미 없이 아래 depth로 props를 내려주기만 하는 컴포넌트들이 많아지며 자연히 코드의 길이도 길어지고 코드 내용도 복잡해질 것이다. Props Drilling 해결 방안: Context Context: 자식 컴포넌트들에게 데이터를 직송으로 보내줄 수 있는 객체 Context 사용법 Cont.. 2024. 1. 13. [유데미 | winterlood 이정환] 프로젝트로 배우는 React.js & Next.js 마스터리 클래스 강의 내용 정리 (섹션 8 ~ 섹션 9) 섹션 8: useReducer로 상태관리 로직 분리하기 useReducer useState와의 공통점 새로운 state 생성 State를 업데이트시키는 함수 제공 useState vs useReducer useState: 컴포넌트 내부에 State 관리 로직을 작성해야 함 → 컴포넌트 내부에 들어갈 로직이 복잡해지고 길어질 수록 가독성이 매우 안 좋아짐 useReducer: 컴포넌트 외부에 State 관리 로직 분리 가능 → 컴포넌트 코드를 간결하게 유지 가능 (복잡한 상태관리 로직이 사용될 때 합리적) Reducer 사용X import { useState } from "react"; export default function A() { const [count, setCount] = useState(0).. 2024. 1. 13. [유데미 | winterlood 이정환] 프로젝트로 배우는 React.js & Next.js 마스터리 클래스 강의 내용 정리 (섹션 2 ~ 섹션 7) 섹션 2: React 시작하기 11. 2-2. 첫번째 리액트 앱 만들기 Vite 빌드 도구. 리액트 프로젝트 제작시 필요한 도구들이 자동으로 세팅되어 있는 리액트 앱을 생성해 준다. Vite를 이용한 리액트 앱 생성 명령어 npm create vite@latest 생성된 앱에는 node_modules 폴더와 package.json, package-lock.json이 없으므로 직접 생성해 주어야 한다. 설치 명령어 npm install vite.config.js: vite 설정 파일 리액트 앱 실행 명령어 npm run dev → 터미널에 뜬 주소를 복사해서 웹 브라우저에서 실행시킬 수 있다. 리액트 실행중단: q 섹션 5: React 라이프 사이클 useEffect useEffect(() => { con.. 2024. 1. 11. 이전 1 다음 반응형
