React37 [유데미 | 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. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 기존 React + Spring Boot 소셜 로그인 코드 삭제하기 기존에 리액트와 스프링부트 지식이 없는 상태에서 인터넷에서 찾은 지식만으로 프로젝트를 만들었더니, 스프링 프로젝트를 켜지 않으면 리액트 프로젝트도 수정할 수 없는 매우 귀찮은 상태가 돼 버렸다. 어차피 앞으로 진행할 프로젝트의 백엔드 부분은 node.js와 express를 사용하게 될 테니 스프링부트 코드는 이제 쓸모가 없는 상황이다. 따라서 프로젝트를 다시 시작하기 전에 가장 먼저 해야 할 것이 리액트와 스프링부트 연동을 해제하는 일이었다. 인텔리제이 Run 활성화 스프링부트 실행 시 run 활성화가 되어 있지 않아서 구글링을 통해 해결방법을 찾아보았다. 아래 블로그를 보고 해결했다. [JAVA] intellij Run 비활성화 시 해결 방법 intellij Run 비활성화 시 해결 방법 intelli.. 2024. 1. 13. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 프로젝트 전체 기획 정리 1. 기획 소셜 가계부 서비스의 기획 의도는 사용자들이 자신의 소비 습관을 관리하고, 다양한 방식으로 소비 관련 정보를 교류하며 소비 습관을 향상하는 데에 있습니다. 아래는 소셜 가계부 서비스가 제공하는 주요 기획 의도입니다. 개인 소비 관리: 사용자들은 개인 소비 내역을 간편하게 기록하고 분석하여 자신의 소비 습관을 파악하고 관리할 수 있습니다. 이를 통해 예산을 효과적으로 관리하고 불필요한 지출을 줄일 수 있습니다. 소비 정보 교류: 커뮤니티 기능을 통해 사용자들은 소비 관련 정보를 서로 공유하고 의견을 나눌 수 있습니다. 다양한 소비 팁, 할인 정보, 경험 등이 교환되어 사용자들이 더 현명한 소비 결정을 할 수 있습니다. 소비목표(예산) 설정: 소비목표(예산)를 설정하고 동료들과 경쟁하며 목표를 달.. 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. [React / Socket.io] 채팅 구현하기 프로젝트 개발 당시 프론트는 리액트, 백엔드는 스프링으로 진행하기로 했는데 백엔드 인원이 갑작스레 빠지게 되면서 혼자 백엔드까지 구현 해야 하는 상황이 되었다. 스프링은 한번도 해본 적이 없어서 급하게 노드로 백엔드 서버를 만들고 리액트로 프론트를 구현하기로 했다.구글링을 통해 노드 채팅 코드를 검색했고 레퍼런스를 통해 코드의 구조를 대략적으로 이해하는 시간을 가졌다 .이후에 서버의 데이터를 프론트에서 받아 사용하는 코드를 작성했다. 🌅 서버 구현우선 아래 패키지를 모두 설치해준다.npm i nodemon express socket.io cors 📂 Server > 📄 index.js const httpServer = require("http").createServer(); //서버 객체 생성// .. 2023. 9. 13. [React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 14. Back end 메인화면 기능 구현2 (게시물 검색, 유저 정보 수정) 보호되어 있는 글 입니다. 2023. 6. 17. [React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 13. Back end 메인화면 기능 구현 (조회수 Top3, 전체 글 리스트, 인기검색어 GET) 보호되어 있는 글 입니다. 2023. 6. 15. 이전 1 2 3 4 다음 반응형
