20.1 서버 사이드 렌더링의 이해 클라이언트 사이드 렌더링 : UI 렌더링을 브라우저에서 모두 처리하는 것 ⇒ 리액트는 기본적으로 클라이언트 사이드 렌더링! 서버 사이드 렌더링 : UI를 서버에서 렌더링하는 것 [서버 사이드 렌더링의 장점] 웹 서비스의 검색 엔진 최적화 초기 렌더링 성능 개선 자바스크립트 파일이 다운로드되지 않은 시점에도 html 상에 사용자가 볼 수 있는 콘텐츠가 있어 대기 시간 최소화, 사용자 경험 향상 클라이언트 사이드 렌더링은 로딩되고 실행될 때까지 빈 페이지를 보며 대기해야 함 [서버 사이드 렌더링의 단점] 서버 리소스가 사용된다 ⇒ 사용자가 동시에 몰릴 시, 서버에 과부하 발생 고려사항이 많아 개발 어려움 서버 사이드 렌더링과 코드 스플리팅 충돌 서버 사이드 렌더링과 코드 ..

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

Intro 리액트 프로젝트를 사용자에게 제공할 때는 빌드 작업을 거쳐서 배포해야 한다. 빌드 작업에선 불필요한 주석, 경고 메시지, 공백 등을 제거해 파일 크기 최소화 JSX문법이나 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스파일 작업 진행 이미지와 같은 정적 파일의 경로 설정 과 같은 일을 한다. 빌드 작업은 웹팩 이라는 도구가 담당한다. 프로젝트의 모든 자바스크립트 파일 하나로 합치기 프로젝트의 모든 CSS 파일 하나로 합치기 스플리팅이란? 파일을 분리하는 작업 CRA를 통해 React 프로젝트를 만들 경우 기본으로 탑재되어있는 SplitChunks 기능을 통해 스플리팅이 되지만, 단순한 캐싱 효과만 있을 뿐이다. 애플리케이션의 규모가 커질 경우에 기본적인 스플리팅 기능만 이용하면 로딩..

21-22/21-22 리액트 마스터 2022. 1. 24. 18:05

1. 작업환경 준비 프로젝트 생성) $ yarn create react-app learn-redux-middleware 라이브러리 설치) $ yarn add redux react-redux redux-actions counter 리덕스 모듈 작성) ✅ 복습! 모듈이란 Ducks 패턴을 사용해 액션 타입, 액션 생성 함수, 리듀서를 작성한 코드를 말한다! import { createAction, handleActions } from "redux-actions"; //액션타입 정의 const INCREASE = "counter/INCREASE"; const DECREASE = "counter/DECREASE"; //액션 생성 함수 export const increase = createAction(INCREA..

21-22/21-22 리액트 마스터 2022. 1. 24. 18:05

리덕스 : 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직 분리 컴포넌트 상태 똑같게 공유 시, 여러 컴포넌트를 거치지 않고 상태 값 전달 및 업데이트 가능 전역 상태 관리 시, 효과적 코드의 유지 보수성 높여 줌 작업 효율 극대화 편리한 개발자 도구 지원 미들웨어 기능 제공하여 비동기 작업 효율적 관리 가능 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

들어가기 전 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

14.1 비동기 작업의 이해 작업 동기적 처리 : 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없음 작업 비동기적 처리 : 동시에 여러 가지 요청 처리 가능. 기다리는 과정에서 다른 함수도 호출 가능 → 자바스크립트에서 비동기 작업을 할 때 콜백 함수를 사용함 ex) setTimeout - 특정 작업 예약 function printMe() { console.log('Hello World'); } setTimeout(printMe, 3000); //3초 뒤 printMe 호출 console.log('대기 중...'); 콜백 지옥 : 콜백 안에 또 콜백을 넣어서 구현. 코드의 가독성↓ ⇒ 콜백 지옥 형성되지 않게 하는 방안 : Promise function increase(..

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

1. SPA란? SPA(Single Page Application) 한 개의 페이지로 이루어진 애플리케이션이라는 의미 1) 전통적인 웹 페이지와 SPA 비교 - 전통적인 웹 페이지 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아온다. 페이지를 로딩할 때마다 서버에서 리소르를 전달받아 해석한 뒤 화면에 보여준다. 사용자에게 보이는 화면을 서버 측에서 준비한다. 사전에 html파일을 만들어 제공하거나, 데이터에 따라 유동적인 html을 생성해 주는 템플릿 엔진을 사용한다. - SPA 먼저, SPA를 사용하는 이유에 대해 알아보자! 1. 웹에서 제공되는 정보가 많아 새로운 화면을 보여 줘야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. (트래픽 ↑, 서버 과부하) ..

21-22/21-22 리액트 마스터 2021. 12. 27. 13:00

객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하기가 매우 힘듦 전개연산자를 여러 번 사용하는 것보다 immer라는 라이브러리 사용하는 것이 더 쉽게 불변성 유지 가능 12.1 immer를 설치하고 사용법 알아보기 yarn create react-app immer-tutorial cd immer-tutorial yarn add immer ▼immer를 사용하지 않고 불변성 유지 하는 코드 더보기 //App.js import React, {useRef, useCallback, useState } from 'react'; const App = () => { const nextId = useRef(1); const [form, setForm] = useState({name:'', userna..

21-22/21-22 리액트 마스터 2021. 12. 27. 13:00

11.1 많은 데이터 렌더링하기 랙(lag) 경험을 위해 많은 데이터 렌더링 //App.js import React, {useState, useRef, useCallback} from 'react'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; function createBulkTodos() { const array = []; for (let i = 1; i { const [todos, setTodos] = useState(createBulkTodos); const nextId = u..

21-22/21-22 리액트 마스터 2021. 12. 27. 13:00

첫 번째 글에서는 express를 사용하지 않고, 오로지 react로만 메모장 기능을 구현해보았는데요, 이번 글에서는 express를 사용해 메모장 만들기 프로젝트를 진행해보겠습니다. ※ https://gngsn.tistory.com/17 를 바탕으로 만들었습니다. 원글에서는 클래스형 컴포넌트를 사용하였는데요. 저희는 함수형 컴포넌트를 이용해 메모장을 만들어보기로 하였으며, 새 메모장을 생성하는 기능뿐만 아니라, 기존 메모를 수정하고 삭제하는 기능까지 추가해보았습니다. 클래스형 컴포넌트로 만든 memo-project 구경하기 : https://github.com/Chanran33/memo-project 함수형 컴포넌트로 만든 memo-project 구경하기 : https://github.com/Chanr..

21-22/21-22 리액트 마스터 2021. 12. 1. 23:00

DB 연결 없는 Version const [memos, setMemos] = useState([ { id: 0, title: '제목1', author: '익명1', content: '메모1' }, { id: 1, title: '제목2', author: '익명2', content: '메모2' }, { id: 2, title: '제목3', author: '익명3', content: '메모3' }, ]); ⇒ 배열에 데이터 저장하여 사용 CREATE //App.js const nextId = useRef(3); const onInsert = useCallback( (title, author, content) => { const memo = { id: nextId.current, title, author, co..

21-22/21-22 리액트 마스터 2021. 12. 1. 23:00