INDEX 12장 immer를 사용하여 더 쉽게 불변성 유지하기 1. immer를 설치하고 사용법 알아보기 1.1 프로젝트 준비 1.2 immer를 사용하지 않고 불변성 유지 1.3 immer 사용법 1.4 App 컴포넌트에 immer 적용하기 1.5 useState의 함수형 업데이트와 immer 함께 쓰기 2. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 immer 라이브러리 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용해 불변성을 유지하며 업데이트할 수 있게 해주는 라이브러리 불변성을 유지하며 업데이트해야할 때 immer를 사용하지 않으면? 배열 또는 객체를 복사할 때: 전개 연산자(...)와 배열의 내장 함수 사용 객체의 구조가 엄청나게 깊어지면: 하나의 값을 업데..

21-22/21-22 리액트 스타터 -2 2022. 1. 17. 13:01

리덕스 : 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직 분리 컴포넌트 상태 똑같게 공유 시, 여러 컴포넌트를 거치지 않고 상태 값 전달 및 업데이트 가능 전역 상태 관리 시, 효과적 코드의 유지 보수성 높여 줌 작업 효율 극대화 편리한 개발자 도구 지원 미들웨어 기능 제공하여 비동기 작업 효율적 관리 가능 16.1 개념 미리 정리하기 1) 액션 상태에 변화가 필요하면 액션이 발생 액션은 객체로 표현되며, type 필드(액션의 이름)를 반드시 가지고 있어야 함 { type: 'TOGGLE_VALUE' data: { id:1, text:'리덕스 배우기' } } 2) 액션 생성 함수 액션 객체를 만들어주는 함수 → 직접 작성하기 번거롭거나, 실수하는 일을 방지하기 위함 function ad..

21-22/21-22 리액트 마스터 2022. 1. 17. 13:00

바닐라 자바스크립트 환경에서 리덕트 사용 시, store.dispatch나 store.subscribe 함수를 사용했으나, 리액트 애플리케이션에서 리덕트 사용 시, react-redux 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용 17.1 작업 환경 설정 $ yarn add redux react-redux //.prettierrc { "singleQuote":true, "semi":true, "useTabs":false, "tabWidth":2, "trailingComma":"all", "printWidth":80 } 17.2 UI 준비하기 리덕스에서 가장 많이 사용하는 패턴 : 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 분리 ⇒ 코드의 재사용도↑, UI 작성 시..

21-22/21-22 리액트 마스터 2022. 1. 17. 13:00

10장에서 만든 일정 관리 애플리케이션은 데이터가 많지 않아 사용하는 데 불편하지 않았습니다. 그러나 데이터가 무수히 많아지면 애플리케이션이 느려지는 것을 체감할 수 있습니다. 이번 11장에서는 성능을 최적화하는 방법에 대해 알아보겠습니다. 11.1 많은 데이터 렌더링하기 먼저 실제로 랙(lag)을 경험할 수 있도록 많은 데이터를 렌더링해 보겠습니다. 데이터를 일일이 입력하지 않고 코드를 사용하여 추가하겠습니다. App 컴포넌트를 다음과 같이 수정하세요. // App.js import { useState, useRef, useCallback } from 'react'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from..

21-22/21-22 리액트 스타터 -1 2022. 1. 17. 13:00

13.1 프로젝트 구조 갖추기 프로젝트 이름: NodeAuction // node-auction/package.json { "name": "node-auction", "version": "0.0.1", "description": "노드 경매 시스템", "main": "app.js", "scripts": { "start": "nodemon app" }, "author": "Zero Cho", "license": "ISC", "dependencies": { "bcrypt": "^3.0.7", "cookie-parser": "^1.4.4", "dotenv": "^8.2.0", "express": "^4.17.1", "express-session": "^1.17.0", "morgan": "^1.9.1", "mu..

21-22/21-22 Node.js 2022. 1. 17. 13:00

INDEX 11장 컴포넌트 성능 최적화 1. 많은 데이터 렌더링하기 2. 크롬 개발자 도구를 통한 성능 모니터링 3. 느려지는 원인 분석 4. React.memo를 사용하여 컴포넌트 성능 최적화 5. onToggle, onRemove 함수가 바뀌지 않게 하기 6. 불변성의 중요성 7. TodoList 컴포넌트 최적화하기 8. react-virtualized를 사용한 렌더링 최적화 9. Question 개념 정리 및 코드 문제 컴포넌트 성능 최적화 많은 데이터 렌더링하기 ->크롬 개발자 도구를 통한 성능 모니터링 ->React.memo를 통한 컴포넌트 리렌더링 성능 최적화 ->onToggle과 onRemove가 새로워지는 현상 방지하기 ->react-virtualized를 사용한 렌더링 최적화 1. 많은 ..

21-22/21-22 리액트 스타터 -2 2022. 1. 17. 13:00

12. immer 설치 및 사용법 전개 연산자를 여러 번 사용하는 것은 꽤 번거롭고 가독성 또한 좋지 않습니다. immer 라이브러리를 사용하면, 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해 줄 수 있습니다. 12.1 immer 설치 $ yarn add immer 12.2 immer 사용하지 않고 불변성 유지 immer를 사용하지 않고 불변성을 유지하면서 값을 업데이트하는 컴포넌트 // App.js import React, {useRef, useCallback, useState } from 'react'; const App = () => { const nextId = useRef(1); const [form, setForm] = useState({name: '', ..

21-22/21-22 리액트 스타터 -1 2022. 1. 17. 13:00

5. 미들웨어와 소켓 연결하기 입퇴장하는 사람의 ID를 보여주고 싶은데, 그 정보는 req.session.color에 저장되어 있으므로 Socket.IO에서 지금은 접근이 불가합니다. 이를 해결하기 위해 우리는 Socket.IO도 미들웨어 사용하다는 점을 이용해봅시다. (1) app.js Socket.IO도 미들웨어 사용이 가능하므로 express-session을 Socket에 공유하면 됩니다. 기존에는 app.use(session ~) 과 같은 형태로 세션을 use해주기만 했다면, 이제는 아래의 코드처럼 sessionMiddleware에 세션을 넣고 webSocket에도 담아주면 됩니다. //app.js // 미들웨어 설정 const sessionMiddleware = session({ resave: ..

21-22/21-22 Node.js 2022. 1. 10. 13:31

열심히 만든 웹 페이지를 혼자만 보는 것은 아깝겠지요? 이번 글에서는 10장에서 만든 일정 관리 웹 애플리케이션을 Netlify에서 배포하는 방법을 알아보겠습니다. 먼저, 배포하고자 하는 react 프로젝트가 github에 올라가 있어야 합니다. 1. github에 회원가입이 되어 있지 않은 경우에는 먼저 회원가입을 하고, 회원가입이 되어 있다면 새로운 Repository를 생성합니다. 2. Repository name에 원하는 프로젝트명을 입력하고 Create repository를 클릭합니다. 3. 저장소 주소(URL)를 복사하여 터미널에 다음과 같이 코드를 입력합니다. $ git remote add origin $ git add . $ git commit -m "코멘트" - 코멘트의 내용은 자유롭게 ..

21-22/21-22 리액트 스타터 -1 2022. 1. 10. 13:30

이번 10장에서는 일정 관리 애플리케이션을 만들어 보았습니다. 간단하게 컴포넌트 설명 후 코드 첨부하겠습니다. TodoTemplate: 화면을 가운데에 정렬시켜 주며, 앱 타이틀(일정 관리)을 보여줍니다. children으로 내부 JSX를 props로 받아 와서 렌더링해 줍니다. TodoInsert: 새로운 항목을 입력하고 추가할 수 있는 컴포넌트입니다. state를 통해 인풋의 상태를 관리합니다. TodoListItem: 각 할 일 항목에 대한 정보를 보여 주는 컴포넌트입니다. todo 객체를 props로 받아 와서 상태에 따라 다른 스타일의 UI를 보여 줍니다. TodoList: todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러 개의 TodoListItem 컴포..

21-22/21-22 리액트 스타터 -1 2022. 1. 10. 13:30

INDEX 10장 일정 관리 웹 애플리케이션 만들기 1. 프로젝트 준비하기 1.1 프로젝트 생성 및 필요한 라이브러리 설치 1.2 Prettier 설정 1.3 index.css 수정 1.4 App 컴포넌트 초기화 2. UI 구성하기 2.1 TodoTemplate 만들기 2.2 TodoInsert 만들기 2.3 TodoListItem과 TodoList 만들기 3. 기능 구현하기 3.1 App에서 todos 상태 사용하기 3.2 항목 추가 기능 구현하기 3.3 지우기 기능 구현하기 3.4 수정 기능 4. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 ⚙️ 애플리케이션을 만들어보자! 프로젝트 준비하기 UI 구성하기 기능 구현하기 1. 프로젝트 준비하기 1.1 프로젝트 생성 및 필요..

21-22/21-22 리액트 스타터 -2 2022. 1. 10. 13:00

들어가기 전 Context API란? 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능 ex) 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 Context API를 기반으로 구현된 것들 → 리덕스, 리액트 라우터, styled-components 1. Context API를 사용한 전역 상태 관리 흐름 이해하기 일반적인 전역 상태 관리 흐름) ex) App이 지닌 state값을 F, J, G로 전달 F : App → A → B → F J : App → H → J G : App → A→ B → E → G. 를 거쳐야 한다. Context API를 사용한 전역 상태 관리 흐름) Context를 생성해 한 번에 어느 컴포넌트든 한 번에 원하는 값을 받아 와서 사용할 수 있다. 1) 새 ..

21-22/21-22 리액트 마스터 2022. 1. 10. 13:00