마침 봄이니까 벚꽃 축제 안내 랜딩 페이지를 만들어보기로 했다. React, css, module.css를 사용하였고 netlify로 배포하였다.

Contents

1. 주요 기능들 1.1 ScrollTrigger 1.2 아래로 내려오는 요소 1.3 네비게이션 메뉴
2. 에러 해결
3. 개선할 점

1. 주요 기능들

1-1. ScrollTrigger

인터렉티브한 요소를 넣기 위해 스크롤하는것에 따라 요소를 움직이게 만드는 gsap의 scrollTrigger 라이브러리를 사용했다.

우선 gsap을 설치

npm i gsap
npm i @gsap/react

import로 가져온뒤 ScrollTrigger를 등록

import { useGSAP } from "@gsap/react"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import gsap from "gsap"

gsap.registerPlugin(ScrollTrigger);

사용법은 써보면 어렵진 않다. useEffect랑 비슷한 느낌. className이나 id로 gsap을 적용할 요소를 선택

useGSAP(() => {
    gsap.from("#timeline", {
      scrollTrigger: {
        trigger: "#timeline", // 요소가 뷰포트에 드러나는 순간부터 애니메이션이 작동
        start: "top bottom", // 애니메이션 시작지점, 마커 시작지점
        end: "bottom center", // 애니메이션 종료지점, 마커 종료 지점
        toggleActions: "play complete none reset",
      },
      yPercent: 100,
      opacity: 0,
      duration: 2,
    });

    ScrollTrigger.refresh();
  }, []);

• start: "top bottom" : 마커의 시작지점인 bottom과 요소 시작지점인 top이 만날때 애니메이션이 사작됨
• end: "bottom center" : 마커의 종료지점인 center와 요소의 종료지점인 bottom이 만날때 애니메이션이 종료됨

1-2. 아래로 내려오는 요소

FAQ와 공지사항을 만들때 질문을 누르면 답변이 숨겨져있다가 아래로 내려오면서 보이도록 구현하고 싶었다.

처음에는 grid-template-rows: 0fr로 주어 안보이게 함 클릭한 버튼의 id가 일치하는 경우 display 속성을 주어 1fr로 바꾸어서 보이도록 함 이렇게 하면 전체 요소의 크기가 자동으로 늘어나면서 다른 요소에 영향을 안미치면서 나타나게 할 수 있음

// js
<div
   className={`${styles.answer} ${
      clickedId === 1 ? `${styles.display}` : ""
   }`}
></div>

/* css */
.answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s, padding 0.3s;
  padding: 0;
  will-change: grid-template-rows, padding;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #333333;
}

.display {
  padding: 16px 0 0;
  grid-template-rows: 1fr;
}

1-3. 네비게이션 메뉴

element.scrollIntoView를 사용하면 스크롤을 원하는 위치로 이동시킬 수 있는데 이것을 이용하여 특정 요소로 바로 이동할 수 있는 hook을 만들어 사용함

// hook
function useMoveScroll() {
  const element = useRef(null);
  const onMoveToElement = () => {
    element.current?.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return { element, onMoveToElement };
}

// js
const navigationTabs = {
    0: useMoveScroll("행사 일정"),
    1: useMoveScroll("마켓 신청"),
    2: useMoveScroll("공지사항"),
    length: 3,
  };

<div
  onClick={navigationTabs[2].onMoveToElement}>
    공지사항 // 이걸 누르면
</div>

<section ref={navigationTabs[2].element}>
   <Notice /> // 이곳으로 이동
</section>

2. 에러 해결

2-1. 환경 변수

env 환경 변수 설정에 관련한 에러

2-2. netlify 배포

netlify 배포 후 발생한 에러

3. 개선할 점

css

원래는 tailwindcss를 쓰려고 했으나 tailwindcss가 익숙하지 않아서 결국 그냥 css와 혼용해서 쓰다가 css 중첩문제로 module.css까지 쓰게 되었다. 그야말로 혼돈의 장.. 나중에 꼭 리펙토링해서 정리해야겠다.

버튼 리스트 정리

FAQ와 공지사항 부분을 만들때 선택한 버튼의 요소를 구분하기 위해 clickedId === 1 ? : 이런식으로 하드코딩을 했다. 후에 이 부분 정리할 필요가 있을것 같다.

react 프로젝트를 netlify로 배포를 완료하였으나 링크에 접속하면 하얀화면만 나옴. 개발자 도구를 확인하니 카카오맵이 안불러와지는 것 같음 배포할 때 .env파일은 가져오지 않으므로 설정해놓은 환경변수를 불러오지 못하는 것

해결

netlify의 Environment variables에서 따로 환경변수 값을 넣어줘야함

이렇게 하고 Deploys에서 Options -> Retry with latest branch commit로 재배포

그런데도 하얀화면만 나옴

Kakao Developers에서 사이트 도메인 등록을 안해줬기 때문! 기존에 https://localhost:3000으로 되어있던 걸 배포된 url주소로 바꿔줌

이제야 사이트가 제대로 보임!

문제 상황

카카오 맵 api를 사용하기 위해 api key를 환경 변수로 설정하여 사용하려고 했다. npm i dotenv로 dotenv를 설치하고 env로 환경 변수를 설정한 뒤 사용하였는데 에러가 발생했다. 찾아보니 create-react-app으로 리액트 프로젝트를 만들면 자동으로 env를 사용할 수 있도록 설정이 되어있다고 한다.

해결

npm uninstall dotenv로 dotenv를 제거한다음 다시 환경 변수를 설정했다. cra에 내장된 env를 사용하려면 key값이 REACT_APP으로 시작해야 한다고 한다. ex) REACT_APP_KAKAO_API_KEY

jsx에서 사용하는 방법은 똑같이 process.env.REACT_APP_KAKAO_API_KEY 이런식으로 사용하면 됨

하지만 카카오 맵 api를 사용하려면 index.html에 api 키값을 넣어줘야 했음. html에 env 환경변수를 사용하는 방법은 다음과 같이 환경변수를 %%로 감싸서 사용해야 한다. ex) %REACT_APP_KAKAO_API_KEY%

Express는 웹 및 모바일 애플리케이션 구축을 위한 광범위한 기능을 제공하는 노드 JS 웹 애플리케이션 프레임워크. 단일 페이지, 다중 페이지 및 하이브리드 웹 애플리케이션을 빌드하는데 사용됨 -> Node.js의 API를 단순화하고 유용한 기능들을 더 추가하여 Node.js를 더 편리하고 유용하게 사용할 수 있도록 해줌

Express js를 사용하는 이유

• Node.js의 API를 쉽게 사용할 수 있게 함
• 많은 사람들이 사용중
• ExpressJS를 기반으로 하는 다른 프레임워크들도 만들어지고 있기 때문에, 이 프레임워크 하나만 배우면 다른 노드 js 프레임워크도 빠르게 배울 수 있음

36. res.json vs res.send

res.send와 res.json은 기능상으로 거의 동일

res.json 소스 코드

1. res.json(object)로 필요한 값들을 설정
   1. 먼저 object로 들어오는 value들을 JSON 문자열로 변환
   2. Content-Type 헤더가 셋팅되지 않았을 경우 this(res 객체)에 Content-Type으로 application/json을 셋팅
2. res.send(body)를 실행

res.send 소스 코드

1. res.send(object)로 body의 타입 체크
2. 타입이 object일 경우 res.json(object) 호출
   1. JSON 문자열로 변환
   2. 다시 res.send(string) 호출

결론

res.send와 res.json은 외부에서 볼때는 차이가 없어 보이지만 res.send를 사용하면 내부에서 호출이 한 번 더 일어남. 또한 object를 보낼 때에는 res.json()을 이용하는 것이 더 직관적이기도 하므로 res.json()을 이용하는 것을 추천!

37. res.send vs res.end

res.end()

response가 있고 데이터를 수집하거나 호출자에게 제공하고 싶은 다른 작업을 수행하면 마지막 단계로 세션을 종료해야 함. 이를 res.end()를 호출하여 수행할 수 있음

꼭 res.end()를 이용해서 세션을 종료해야 하나요?

• res.end()로 종료해야하는 때

  데이터를 제공하지 않고 응답을 종료하려면 res.end()를 사용할 수 있음. 이것은 404 페이지에 유용할 수 있음

• res.end()로 종료하지 않아도 되는 때

  데이터를 res.json()이나 res.send()로 보내면 알아서 종료됨

res.end('<p>some html</p>') vs. res.send('<p>some html</p>')

둘다 브라우저에 보이는 결과는 똑같음

하지만 Response Header 부분은 다름 res.end에는 Content-Type과 ETag가 없음

ETag 란? ETag HTTP 응답 헤더는 리소스의 특정 버전에 대한 식별자. 콘텐츠가 변경되지 않은 경우 웹 서버에서 전체 응답을 보낼 필요가 없으므로 캐시를 보다 효율적으로 사용하고 대역폭을 절약할 수 있음

38. 포스트맨

Postman은 개발한 API를 테스트하고, 테스트 결과를 공유하여 API 개발의 생산성을 높여주는 플랫폼

https://www.postman.com/downloads/

40. middleware

미들웨어 기능은 애플리케이션의 요청-응답 주기에서 요청 객체(req), 응답 객체(res), next 미들웨어 함수에 접근할 수 있는 기능. next 미들웨어 기능은 next라는 변수로 표시됨

const express = requrie('express')
const app = express()

// use -> register middleware
app.use(req, res, next) => {
  console.log('Time:', Date.now())
  next() // 다음 미들웨어로 이동
})

Express 애플리케이션은 본질적으로 일련의 미들웨어 기능 호출임 ex) request -> logger -> bodyParser -> cookieParser -> ... -> response

43. Model, View, Controller

MVC Pattern

MVC(모델-뷰-컨트롤러)는 관련 프로그램 로직을 상호 연결된 3개의 요소로 나누어 사용자 인터페이스를 개발하는 데 일반적으로 사용되는 소프트웨어 아키텍쳐 패턴 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 둠

ex) View: 장바구니에 담기 버튼을 클릭 --Request-->
Controller: Model에게 아이템을 추가하라고 알려줌 --Manipulate-->
Model: 아이템을 추가하고 변경된 모델을 View에게 알려서 화면이 업데이트 되게 함

Model

데이터와 비즈니스 로직을 관리 앱이 포함해야 할 데이터가 무엇인지 정의. 데이터의 상태가 변경되면 일반적으로 뷰에게 알리며 가끔 컨트롤러에게 알리기도 함 주로 어떤 종류의 데이터베이스에 포함되어 있던 것

View

레이아웃과 화면을 처리 앱의 데이터를 사용자에게 보여지는 방식을 정의. 표시할 데이터를 모델로부터 받음

Controller

명령을 모델과 뷰로 라우팅 사용자의 입력에 대한 응답으로 모델 또는 뷰를 업데이트하는 로직을 포함 단순히 데이터를 다른 형태로 나타내기 위해 뷰를 업데이트할 경우, (ex. 항목을 알파벳 순서로 정렬, 가격이 낮은 순으로 정렬) 컨트롤러는 모델을 업데이트할 필요 없이 바로 처리할 수 있음

45. Router, Controller

Router 란

클라이언트의 요청 경로(path)에 따라 이 요청을 처리할 수 있는 곳으로 기능을 전달해주는 것

46. Restful API

Restful API는 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스. 대부분의 비즈니스 애플리케이션은 다양한 태스크를 수행하기 위해 다른 내부 애플리케이션 및 서드 파티 애플리케이션과 통신해야함 -> 이런한 통신을 할 때 안전하고 효율적이게 하기위해 사용

Rest

REST(Representational State Transfer)는 처음에 인터넷과 같은 복잡한 네트워크에서 통신을 관리하기 위한 지침. REST 기반의 아키텍처를 사용해서 대규모 고성능 통신을 안정적으로 지원

• GET: 데이터를 서버로부터 받아옴
• POST: 무언가를 생성하기 위해 서버에 데이터 블록을 수락하도록 요청
• PUT: 데이터 전체를 업데이트
• PATCH: 데이터 일부를 업데이트
• DELETE: 데이터를 삭제
• 슬래시 구분자(/)는 계층 관계를 나타냄
• 띄어쓰기는 밑줄(_)보다는 하이픈(-) 사용

자바스크립트를 실행하려면 자바스크립트 엔진이 필요! 브라우저에는 이미 자바스크립트 엔진이 있기 때문에 자바스크립트를 실행할 수 있음

JavaScript 엔진은 자바스크립트 코드를 실행하는 소프트웨어 구성 요소. 최초의 JavaScript 엔진은 단순한 interpreter였지만, 모든 관련 최신 엔진은 성능 향상을 위해 Just-in-Time 컴파일을 사용. JavaScript 엔진은 일반적으로 웹 브라우저 공급업체에서 개발하며 모든 주요 브라우저에 하나가 있음

컴퓨터가 소스 코드를 이해하려면?

컴퓨터 프로세서는 오직 0과 1만 이해할 수 있기 때문에 우리가 작성한 소스 코드를 머신 코드로 변환해 줘야 함. 이 변환 과정은 컴파일과 인터프리터를 통해 일어남

Interpreter

High Level Language를 한 줄씩 번역하고 실행

Compiler

High Level Language를 한번에 기계어로 변환하여 실행

JIT Compilation (Just In Time)

interpreter는 코드를 한줄 한줄 해석하고 실행하기 때문에 매우 느림. 따라서 더 나은 퍼포먼스를 위해 JIT 컴파일 사용

JIT compilation은 ahead-of-time compilation(AOT)와 interpretation 두 가지 방식의 결합

자바스크립트 엔진의 종류

08. Module

Node.js에서 module은 '필요한 함수들의 집합' 사용하고자 하는 모든 기능을 처음부터 다 만들어서 사용할 수는 없음 다른 사람이 이미 만들어 놓은 모듈을 사용하거나 노드 JS에서 제공해주는 많은 모듈을 사용

모듈을 불러오는 방법

const module = require("module_name")

• Core Module

  Node.js에서 기본으로 제공하는 모듈

  • http: 서버를 생성하기 위한 클래스, 메소드, 이벤트를 포함
  • url: URL 확인 및 구문 분석을 위한 메소드 포함
  • querystring: 쿼리 문자열을 처리하는 메소드 포함
  • path: 파일 경로를 처리하는 메소드 포함
  • fs: 파일 I/O 작업을 위한 클래스, 메소드, 이벤트 포함
  • util: 프로그래머에게 유용한 유틸리티 기능이 포함

• Local Module

  Node.js 애플리케이션에 사용자가 로컬로 생성한 모듈 Node.js 커뮤니티에서 사용할 수 있도록 패키지로 만들어 NPM을 통해 배포할 수 도 있음

• Third Party Module

  다른 사람이 만든 모듈을 NPM을 통해 가져와 사용할 수 있음

13. CommonJS vs. ECMA script 모듈

CommonJS Module

module.exports로 내보내고 requrie로 가져오는 것은 CommonJS 이 CommonJS는 Node.js에서 기본 모듈로 사용되고 있음

ECMAScript Module

ECMAScript는 export, import를 이용해서 모듈을 내보내고 가져오는 Syntax 사용

• ES 모듈은 JavaScript의 표준이고 CommonJS는 Node.js의 기본값
• 모든 주요 브라우저는 ES 모듈을 지원하며 React 및 Vue.js와 같은 프레임워크에서도 ES 모듈의 import와 export를 사용할 수 있음 이러한 프레임워크는 Babel과 같은 transpiler를 사용하여 이전 Node.js 버전이 기본적으로 지원하는 require()로 컴파일함
• Node.js 13.2.0 버전부터 ECMAScript 모듈을 지원함

15. 모듈 캐싱

모듈에서 다른 모듈을 가져올 때 (load할 때) ECMAScript를 사용하든 CommonJS를 사용하든 해당 모듈을 캐싱함 따라서 한번 가져오면 다음에 다시 load할 필요없음

17. npm

npm 이란?

• 오픈 소스 Node.js 프로젝트 게시를 위한 온라인 레포지토리(저장소) NPM 레지스트리 모듈들이 저장되어 있는 곳
• 패키지 설치, 버전 관리 및 종속성 관리를 지원하는 해당 저장소와 상호 작용하기 위한 명령줄 유틸리티

21. package-lock.json

package-lock.json이 생성되는 시점의 의존성 트리(node_modules)에 대한 정보를 가지고 있는 파일

package-lock.json 파일을 사용하는 이유

• 이 파일은 소스 레포지토리에 커밋하기 위한 것이며 다양한 용도로 사용됨
• 팀원, 배포 및 지속적인 통합이 정확히 동일한 종속성을 절치하도록 보장하는 종속성 트리의 단일 표현을 설명함
• 사용자가 디렉토리 자체를 커밋하지 않고도 node_moduels의 이전 상태로 돌아갈 수 있는 기능을 제공
• 읽을 수 있는 소스 제어 diff를 통해 트리 변경 사항을 더 쉽게 볼 수 있음
• npm이 이전에 설치된 패키지에 대해 반복되는 메타데이터 확인을 건너뛸 수 있도록 하여 설치 프로세스를 최적화

22. npm audit

audit 명령은 프로젝트에 구성된 종속성에 대한 설명을 기본 레지스트리에 제출하고 알려진 취약성에 대한 보고서를 요청. 취약점이 발견되면 적절한 교정도 해줌. fix 인수가 제공되면 수정사항이 패키지 트리에 적용됨

24. Yarn

Yarn은 페이스북에서 만든 자바스크립트 패키지 매니저

원래는 npm만을 이용해서 패키지 관리를 했지만 Facebook에서 npm의 단점들(보안 및 성능)에 대응하기 위해 yarn을 개발하게 됨 Yarn은 npm보다 속도와 보안에서 더 향상된 성능을 가짐

• 패키지 병령 설치

  npm은 패키지들을 설치할 때 설치하는 패키지를 다 설치하고 난 후에 다른 패키지를 순차적으로 실행. yarn은 병렬로 패키지를 설치하기 때문에 더 빠르게 설치할 수 있음

• lock 파일 생성

  npm으로 패키지를 설치하면 package-lock.json 파일을 생성하는 것처럼 yarn으로 패키지를 설치하면 yarn.lock 파일을 생성하게 됨 package-lock.json과 마찬가지로 yarn.lock에도 최초 패키지 추가 시에 설치된 버전들이 들어 있음 yarn.lock 파일이 있으면 레지스트리에 패키지의 더 최신 버전이 있어서 yarn install로 패키지를 설치할때 yarn.lock에 있는 버전을 사용하므로 패키지 버전 문제를 최소화할 수 있음

• 향상된 보안

  yarn은 패키지를 다운로드하는 동안 백그라운드 프로세스로 보안 검사를 수행. 패키지 라이센스 정보를 사용하여 악성 스크립트를 다운로드하거나 종속성 충돌을 일으키지 않도록 함

리액트 네이티브에서 sreen간의 이동을 구현하기 위해서 React Navigation이라는 모듈 사용

필요한 모듈 설치

npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context
npm install @react-navigatin/native-stack

44. TailWindCSS

TailWindCSS 란?

HTML안에서 CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크

CSS 프레임워크란?

CSS 프레임워크는 레이아웃 및 여러 컴포넌트의 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음 애플리케이션을 더 빠르게 스타일링 하는데 도움을 줌

css 프레임워크 종류 for React JS

• Material UI
• React Bootstrap
• Semantic UI
• Ant Design
• Materialize

Tailwind CSS의 장점

Tailwind CSS는 부트스트랩과 비슷하게 m-1, flex와 같이 미리 셋팅된 Utility Class를 활용하는 방식으로 HTML에서 CSS를 스타일링 할 수 있음

• 따라서 빠르게 스타일링 작업이 가능
• class 혹은 id명을 작성하기 위한 고생을 하지 않아도 됨
• 유틸리티 클래스가 익숙해지기 위한 시간이 필요할 수 있지만 InteliiSense 플러그인이 제공되어 쉽게 익숙해 질 수 있음

45. Tailwind CSS 적용하기

https://www.nativewind.dev/quick-starts/expo

53. useLayoutEffect

useLayoutEffect는 useEffect와 사용 문법이 똑같음 useEffect는 모든 DOM의 mutation이 끝나고 나서 실행. useLayoutEffect는 브라우저에 페인트를 하기 전에 실행됨

72. React Navigation을 이용해서 라우팅 구현하기

index.js 엔트리 파일

AppRegistry는 모든 React Native 앱을 실행하기 위한 JS진입점 App 루트 컴포넌트는 AppRegistry.registerComponent에 자신을 등록해야함. 그러면 기본 시스템은 앱에 대한 번들을 로드한 다음 AppRegistry.runAplication을 호출하여 앱이 준비되면 앱을 실행할 수 있음

function AppRegistry.registerComponent(appKey: string, getComponentFunc: ComponentProvider, section?: boolean | undefined): string

appKey

appKey는 app.json에 있는 name

• name: 프로젝트에 사용되는 짧은 이름이며 TitleCase여야 함
• displayName: 홈 화면의 앱 이름

Stack vs Tab

Stack Navigator는 React Native 앱이 Stack을 사용하여 화면 간에 전환을 할 수 있는 방법을 제공 예를 들어 로그인에서 가입 화면으로 이동하면 가입 화면이 로그인 화면 맨위에 쌓이고 뒤로 이동하면 가입 화면이 스택에서 꺼짐

Tab Navigator는 화면 하단이나 상단에 Tab이 있는 Navigator이며 다른 화면 사이를 전환하는데 사용 Tab Navigator는 Screen을 Component로 사용하거나 Stack을 Component로 사용할 수 있음

React Native는 React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈소스 프레임워크 사용자 인터페이스(UI)를 구축하기 위한 React를 기반으로 하지만 React는 브라우저를 대상으로 하고 React Native는 모바일 플랫폼을 대상으로 함 대부분의 코드를 플랫폼 간에 공유할 수 있기 때문에 Android와 iOS 모두에서 동시에 쉽게 개발할 수 있음

리액트 네이티브의 장점

1. WebView를 사용하는 다른 크로스 플랫폼과는 다르게 실제 호스트 플랫폼의 표준 렌더링 API를 사용해서 렌더링함 => WebView를 사용하면 성능상의 문제와 Native에서 사용하는 기본 UI 요소나 애니메이션을 Javascript, HTML 및 CSS 조합으로 모방하려고 하게에 한계가 있음 => 타 플랫폼에서는 웹에서 만들고 그것을 앱에 임베딩해서 사용, React Native는 마크업 요소를 실제 네이티브 요소로 변환해서 사용함

2. 리액트 네이티브는 리액트와 마찬가지로 state와 props가 변경되면 React Native의 뷰를 다시 렌더링하는 것과 같이 React와 대부분의 기능이 비슷 React Native와 React의 주요 차이점은 React Native가 HTMl 및 CSS 마크업을 사용하는 대신 호스트 플랫폼의 UI 라이브러리를 활용한다는 것

3. 크로스 플랫폼이란 이름과 같이 대부분의 비슷한 소스 코드로 iOS와 Android 모두를 위한 앱 개발을 할 수 있음. 따라서 많은 시간과 비용을 절약해서 앱을 만들 수 있음

02. Core Components & Native Components

Native Components

Android 개발에서는 Kotlin 또는 Java로 View를 작성 iOS 개발에서는 Swift 또는 Objective-C를 사용 React Native를 사용하면 React Component를 사용하여 JavaScript로 이러한 View를 호출할 수 있음 런타임 시 React Native는 해당 구성 요소에 해당하는 Android 및 iOS View를 생성. React Native 구성 요소는 Android 및 iOS와 동일한 보기에서 지원되기 때문에 React Native 앱은 다른 앱과 같은 모양, 느낌 및 성능을 제공. 이러한 플랫폼 지원 구성 요소를 Native Component라고 함

Core Components

Native Components는 누구나 각자 원하는 바에 맞게 만들 수 있음 Core Components는 리액트에서 기본으로 제공하는 Native Components ex) <View> <Text> <Image> <ScrollView> <TextInput>...

03. 리액트 네이티브를 사용하기 위한 개발환경

리액트 네이티브를 이용하기 위한 개발 환경을 세팅하는 방법은 대표적으로 두 가지

1. Expo

• 무료로 사용하는 3rd Party 서비스. 개발을 쉽게 할 수 있도록 도와줌
• 쉬운 배포 및 버전 업데이트 Android Studio/X-code 없이 본인의 휴대폰으로 테스트 가능. 빠르고 간단한 설치 및 환경 설정
• Expo에서 제공하는 기능만 사용 가능. 모듈을 만들어서 사용 불가. native 파일 제어 불가. 간단하고 편리한 대신 복잡하고 섬세하게 제어를 못한다는 단점

2. React Native CLI

• React Team에서 만들었으며, Expo 같은 툴을 사용하지 않고 React Native만을 이용해서 개발하는 것
• 네이티브 파일 및 모듈 사용 가능. 네이티브 소스 코드 작성 가능
• Expo에 비해 편의성 부족. 사용자가 직접 기본 구성을 해야해서 시간이 오래걸림. Android Studio/X-code를 설치해서 빌드 및 배포를 해야함

11. StypeSheet를 이용한 스타일링

React Native에서는 CSS가 아닌 Javascript로 스타일링을 함

React Native에서 스타일링하는 방법

• inline styles 사용
• StyleSheet 객체 사용

StyleSheet를 이용한 스타일링이 추천되는 이유

1. 스타일링 코드를 분리해줘서 전체 소스 코드의 가독성을 높임
2. StyleSheet를 사용하면 이미 정해놓은 스타일을 캐시해주기 때문에 다시 렌더링 할 때 inline styles를 사용할 때 보다 성능이 좋음

15. React Native에서 SVG 사용하기

리액트 네이티브에서는 기본적으로 SVG 파일을 지원하지 않기 때문에 SVG를 사용하려면 설정을 해줘야 함

사용방법

react-native-svg 모듈 설치

svg 요소나 속성들을 React Native에서 사용할 수 있게 해줌

npm install react-native-svg --save

react-native-svg-transformer 모듈 설치

svg 파일을 import해서 사용할 수 있게 해줌

npm install -D react-native-svg-transformer

metro.config.js 파일 설정

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

참고: https://www.npmjs.com/package/react-native-svg-transformer

svg 다운받기

https://www.svgrepo.com/

27. Todo 리스트 나열하기

리액트 네이티브에서 리스트를 나열하기

• FlatList
• ScrollView

ScrollView는 Component가 로드된 직후 Item을 로드함. 모든 데이터가 RAM에 저장되어 한 번에 보여주기 때문에 많은 양의 데이터가 있는 경우 성능 저하기 일어남 반면에 FlatList는 10개(기본값)의 Item을 화면에 탑재하고 사용자가 보기를 스크롤하면 다른 Item이 탑재됨. 이러한 점에서 FlatList를 사용하는 것이 더 좋음

적은 수의 Item에는 ScrollView를 사용하고 많은 수의 Item에는 FlatList를 사용

React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있도록 도와주는 간단한 프레임워크 리액트로 개발할 때 SPA와 CSR(Client Side Rendering)을 하기 때문에 좋은 점도 있지만 단점도 있음. 그것이 바로 검색엔진 최적화(SEO) 부분 Client Side Rendering을 하면 첫페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출되지 않음

하지만 Next.js에서는 Pre-Rendering을 통해 페이지를 미리 렌더링하여 완성된 html을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게됨

리액트에서도 SSR을 지원하지만 구현하기에 굉장히 복잡하기 때문에 Next.js를 통해서 이 문제를 해결

SSR(Server Side Rendering)

• 클라이언트 대신 서버에서 페이지를 준비하는 원리
• 원래 리액트에서는 클라이언트 사이드 렌더링을 하기 때문에 서버에 영향을 미치지 않고 서버에서 클라이언트로 응답해서 보낸 html도 거의 비어있음 => 이 방식은 서버에서 데이터를 가져올 때 지연시간 발생으로 UX 측면에서 좋지 않을 수 있음 => 검색 엔진에 검색 시 웹 크롤링이 동작할 때 내용을 제대로 가져와 읽을 수 없기에 검색엔진 최적화에 문제가 생김
• Next.js에서는 서버 사이드 렌더링을 이용하므로 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달 할 수 있어서 검색엔진 최적화에 좋음

138. Data Fetching

Next.js에서 데이터를 가져오는 방법

보통 리액트에서는 useEffect로 데이터를 가져옴. 하지만 next.js에서는 여러가지 방법이 있으며 사용 용도에 따라 사용하면 됨

• getStaticProps: Static Generation으로 빌드할 때 데이터를 불러옴 (미리 만들어둠)
• getStaticPaths: Static Generation으로 데이터에 기반하여 pre-render시 특정한 동적 라우팅 구현 (pages/post/[id].js)
• getServerSideProps: Server Side Rendering으로 요청이 있을 때 데이터를 불러옴

getStaticProps

getStaticProps 함수를 async로 export하면 getStaticProps에서 리턴되는 props를 가지고 빌드 타임에 페이지를 pre-render함

getStaticProps를 사용해야 할 때

• 사용자의 요청보다 먼저 build 시간에 페이지를 렌더링하는데 필요한 데이터를 가져올 때
• Headless CMS에서 데이터를 가져올 때
• 데이터를 공개적으로 캐시할 수 있을 때 (사용자별 x)
• 페이지는 미리 렌더링되어야 하고 (SEO의 경우) 매우 빨라야 할 때 (getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성)

getStaticPaths

동적 라우팅이 필요할 때 getStaticPaths로 경로 리스트를 정의하고, 빌드 시간에 HTML에 렌더링 됨 Next.js는 pre-render에서 정적으로 getStaticPaths에서 호출하는 경로들을 가져옴

Paths

• 어떠한 경로가 pre-render 될지 결정
• 예시) 만약 pages/posts/[id].js 라는 이름의 동적 라우팅을 사용하는 페이지가 있다면 아래와 같이 작성

  return {
  paths: [
    { params: { id: '1' } },
    { params: { id: '2' } }
  ],
  fallback: ...
  }

  빌드하는 동안 /posts/1과 /posts/2를 생성하게 됨

fallback

• false인 경우: getStaticPaths로 리턴되지 않는 것은 모두 404 페이지가 뜸
• true인 경우: getStaticPaths로 리턴되지 않는 것은 404로 뜨지 않고, fallback 페이지가 뜨게 됨

getServerSideProps

getServerSideProps 함수를 async로 export하면, Next.js는 각 요청마다 리턴되는 데이터를 getServerSideProps로 pre-render함 build 타임에 한번에 가져오는게 아니라 요청할 때 마다 가져옴

getServerSideProps를 사용해야 할 때

• 요청할 때 데이터를 가져와야하는 페이지를 pre-render해야 할 때 사용
• 서버가 모든 요청에 대한 결과를 계산하고, 추가 구성없이 CDN에 의해 결과를 캐시할 수 없기 때문에 첫번째 바이트까지의 시간은 getStaticProps보다 느림

139. TypeScript

TypeScript가 나오게 된 배경

JavaScript의 코드가 커질수록 소스 코드가 복잡해져서 코드를 유지 관리하고 재사용하기가 어려워짐. 더욱이 Type 검사 및 컴파일 시 오류 검사의 기능을 수용하지 못하기 때문에 이것을 해결하기 위해 TypeScript가 제시됨.

TypeScript 란?

타입스크립트는 자바스크립에 타입을 부여한 언어. 타입스크립트는 자바스크립트를 타입 시스템으로 감싼 자바스크립트의 확장된 언어라고 할 수 있음. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 함. 이 변환 과정을 컴파일이라고 부름

Type System

• 개발 환경에서 에러를 잡는 걸 도와줌
• type annotation을 사용해서 코드를 분석할 수 있음
• 오직 개발 환경에서만 활성화 됨
• 타입 스크립트와 성능 향상과는 관계가 없음

TypeScript를 사용해야 하는 이유

• TypeScript는 JavaScript 코드를 단순화하여 더 쉽게 읽고 디버깅 할 수 있게 함
• TypeScript는 오픈 소스
• 정적 검사와 같은 JavaScript IDE 및 사례를 위한 매우 생산적인 개발 도구를 제공
• ES6의 모든 이점을 포함한 더 많은 생산성을 제공
• TypeScript는 타입 검사를 통해 JavaScript를 작성할 때 개발자가 일반적으로 겪는 고통스러운 버그를 피하는데 도움이 됨

테스트 주도 개발 (Test Driven Development)

실제 코드를 작성하기 전에 테스트 코드를 먼저 작성함 테스트 코드를 작성한 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성

TDD를 하면 좋은 점

1. TDD를 하면 많은 기능을 테스트하기에 소스 코드에 안정감이 부여됨
2. 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이기에 TDD를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어듬
3. 소스 코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 깨끗한 코드가 나올 확률이 높음

117. React Testing Library

Create React App으로 리액트 앱을 생성하면 기본적으로 테스팅할 때 React Testing Library를 사용함

React Testing Library란?

DOM Testing Library는 DOM 노드를 테스트하기 위한 매우 가벼운 솔루션 React Testing Library는 이 DOM Testing Library 위에 React 구성요소 작업을 위한 API를 추가하여 구축됨

React Testing Library는 에어비앤비에서 만든 Enzyme를 대체하는 솔루션 Enzyme는 구성 요소의 구현 세부 정보를 테스트하는 반면, React Testing Library는 개발자를 React 애플리케이션의 사용자 입장에 둠

• Enzyme: 구현 주도 테스트 (Implementation Driven Test)
• React Testing Library: 행위 주도 테스트 (Behavior Driven Test)

118. Jest

Jest란?

FaceBook에 의해 만들어진 테스팅 프레임 워크 최소한의 설정으로 동작하며 Test Case를 만들어 애플리케이션 코드가 잘 돌아가는지 확인해줌. 단위(Unit) 테스트를 위해 이용

Jest가 Test 파일을 찾는 방법

1. {filename}.test.js
2. {filename}.spec.js
3. "tests" 폴더 안에 테스트 파일을 넣기

119. Jest 파일 구조 및 사용법

• describe (과일)
  • it 사과
  • it 바나나
  • it 복숭아

"describe" argument(name, fn) 여러 관련 테스트를 그룹화하는 블록을 만듬

"it" (=== "test") argument(name, fn, timeout) 개별 테스트를 수행하는 곳. 각 테스트를 작은 문장처럼 설명함 expect <---> matcher 로 구성

• expect expect 함수는 값을 테스트 할 때 마다 사용됨 혼자서는 거의 사용되지 않으며 matcher와 함께 사용됨

• matcher 다른 방법으로 값을 테스트하도록 "매처"를 사용 ex) toBe, toBeCalledWith, toStrictEqual, toBeTruthy ...

121. 쿼리 함수

쿼리 함수란?

쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법 "get", "find", "query"가 있음. 이들 간의 차이점은 요소가 발견되지 않으면 쿼리에서 오류가 발생하는지, 또는 Promise를 반환하고 다시 시도하는지 여부

• "getBy..." 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없거나 둘 이상일 경우 오류를 발생시킴. (둘 이상의 요소가 예상되는 경우 getAllBy 사용)

• "queryBy..." 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없으면 null을 반환. 이것은 존재하지 않는 요소를 어션설하는데 유용. 둘 이상의 일치 항목이 발생되면 오류 발생. (대신 queryAllBy 사용)

• "findBy..." 주어진 쿼리와 일치하는 요소가 발견되면 Promise 반환. 요소가 발견되지 않거나 기본 제한 시간인 1000ms 후에 둘 이상의 요소가 발견되면 Promise가 거부됨. (둘 이상의 요소가 예상되는 경우 findAllBy 사용)

findBy = getBy + waitFor

• waitFor: 일정기간 동안 기다려야 할 때 (비동기 요청) waitFor를 사용하여 기대가 통과될때까지 기다림

Redux

리덕스는 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리

Redux 데이터 Flow

redux의 데이터 흐름은 strict unidirectional data flow 으로 한 방향으로 흘러감

Action -> Reducer -> Redux Store -> React Component -> Action

Action

Action은 간단한 자바스크립트 객체. 여기에는 우리가 수행하는 작업의 유형을 지정하는 'type' 속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는데 사용되는 'payload' 속성을 가질 수도 있음

Reducer

reducer는 애플리케이션 상태의 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수. 인수로 조치를 취하고 store 내부의 상태를 업데이트함

이전 State와 action object를 받은 후에 next State를 return 함

(previousSate, action) => nextSate

reducer는 순수 함수! 하지말아야 될 것들

• 매개변수 변경
• API 호출이나 라우팅 변경과 같은 side effects
• non-pure 함수 호출 ex) Date.now(), Math.random()

Store

객체 저장소 Store는 애플리케이션의 전체 상태 트리를 보유. 내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것. Redux Store는 클래스가 아님. 몇 가지 메소드가 있는 객체일 뿐!

subscribe() change listener를 추가. 작업이 전달될 때마다 호출되며 상태 트리의 일부가 잠재적으로 변경되면 getState()를 호출하여 콜백 내부의 현재 상태 트리를 읽음

예시)

const store = createStore(counter);

const render = () =>
  root.render(
    <React.StrictMode>
      <App
        value={store.getState()}
        onIncrement={() => store.dispatch({ type: "INCREMENT" })}
        onDecrement={() => store.dispatch({ type: "DECREMENT" })}
      />
    </React.StrictMode>
  );

render();
store.subscribe(render);

109. Redux Provider

Provider란?

<Provider> 구성 요소는 Redux Store 저장소에 엑세스해야 하는 모든 중첩 구성 요소에서 Redux Store 저장소를 사용할 수 있도록 해줌

Redux의 모든 React 구성 요소는 저장소에 연결할 수 있으므로 대부분의 응용 프로그램은 전체 앱의 구성 요소가 트리 내부에 있는 최상위 수준에서 <Provider>를 렌더링 함 그런 다음 Hooks 및 연결 API는 React의 컨텍스트 메커니즘을 통해 제공된 저장소 인스턴스에 엑세스 할 수 있음

110. useSelector & useDispatch

provider로 둘러 쌓인 컴포넌트에서 store 접근

리액트에 Hooks가 있듯이 리덕스에도 Hooks가 있는데 그게 바로 useSelector와 useDispatch 이 두 개를 이용해서 provider로 둘러 쌓인 컴포넌트에서 store에 접근 가능

useSelector

useSelector Hooks를 이용해서 스토어의 값을 가져올 수 있음

const counter = useSelector((state) => state.counter)

useDispatch

store에 있는 dispatch 함수에 접근하는 Hooks

111. 리덕스 미들웨어

리덕스 미들웨어란?

Redux 미들웨어는 액션을 dispatch 전달하고 리듀서에 도달하는 순간 사전에 지정된 작업을 실행할 수 있게 해주는 중간자

로깅, 출돌 보고, 비동기 API와 통신, 라우팅 등을 위해 Redux 미들웨어를 사용

112. Redux Thunk

리덕스 Thunk란?

Redux Thunk도 리덕스 미들웨어이며, 리덕스를 사용하는 앱에서 비동기 작업을 할 때 많이 사용하는 방법

Thunk 뜻

"thunk"라는 단어는 "일부 지연된 작업을 수행하는 코드 조각"을 의미하는 프로그래밍 용어 지금 일부 로직을 실행하는 대신 나중에 작업을 수행하는데 사용할 수 있는 함수 본문이나 코드를 작성할 수 있음

결론

리덕스 thunk를 사용함으로써 액션 생성자가 그저 하나의 액션 객체를 생성할 뿐 아니라 그 내부 안에서 여러 가지 작업도 할 수 있게 만들어 줌

113. 리덕스 툴킷 (redux toolkit)

리덕스 툴킷

Redux 툴킷은 리덕스 로직을 작성하기 위한 공식 권장 접근 방식 Redux 코어를 둘러싸고 있으며 Redux 앱을 빌드하는데 필수적이라고 생각하는 패키지와 기능이 포함되어 있음 리덕스 툴킷은 제안된 모범 사례를 기반으로 대부분의 리덕스 작업을 단순화하고 일반적인 실수를 방지해주며 리덕스 애플리케이션을 더 쉽게 작성할 수 있도록 함

114. 리덕스 툴킷 APIs

Store 생성

기존 Redux는 createStore를 통해 Store 생성 리덕스 툴킷에서는 configureStore를 통해 생성

Action 생성

액션 타입 상수와 액션 생성자 함수 생성을 createAction 함수 하나로 처리

• createAction은 type만 넣으면 자동으로 해당 type을 가진 action creator 함수를 생성함
• 생성된 함수를 호출할 때 인수를 추가로 넣으면 이 값은 payload 프로퍼티 값으로 들어감

Reducer 생성

createReducer에서 Action을 처리하기 위해 케이스 리듀서를 정의하는 방법은 "빌더 콜백"(builder callback) 표기법과 "맵 객체"(map object) 표기법 두 가지가 있음. 둘 다 동일한 기능이지만 타입스크립트와의 호환성을 위해 "빌더 콜백" 표기법이 더 선호됨

builder callback 표기법

createReducer(initialState, builderCallback)

• builder.addCase(actionCreator, reducer): 액션 타입과 정확히 맵핑되는 케이스 리듀서를 추가하여 액션을 처리 addMatcher 또는 addDefaultCase 보다 먼저 작성되어야 함

• builder.addMatcher(matcher, reducer): 새로 들어오는 모든 액션에 대해서 주어진 패턴과 일치하는지 확인하고 리듀서를 실행함

• builder.addDefaultCase(reducer): 다른 케이스 리듀서나 매처 리듀서가 실행되지 않았다면 실행되는 기본 케이스 리듀서

map object 표기법

createReducer(initialState, actionMap, actionMatchers, defaultCaseReducer)

• initialSate: 리듀서를 처음 호출할 때 사용해야 하는 초기 상태 값

• actionsMap: 액션 타입이 케이스 리듀서에 맵핑되어 있는 객체

• actionMatchers: {matcher, reducer} 형식으로 정의된 배열 케이스 리듀서가 일치하는지 여부에 관계없이 모든 일치하는 리듀서가 순서대로 실행됨

• defaultCaseReducer: 케이스 리듀서 및 매처 리듀서가 실행되지 않은 경우 실행되는 기본 케이스 리듀서

createSlice()

이 API는 Redux Logic을 작성하기 위한 표준 접근 방식 createSlice 내부에 createAction과 createReducer를 사용

createSlice 함수는 리듀서 함수의 초기 상태와 'slice 이름'을 받아 리듀서와 상태에 해당하는 액션 생성자와 액션 타입을 자동으로 생성하는 함수

extraReducers

extraReducers를 사용하면 createSlice가 생성한 action type 외에 다른 action type에 응답할 수 있음

extra Reducers로 지정된 케이스 리듀서는 '외부'액션을 참조하기 위한 것으로, 그들은 slice.actions에서 생성된 액션을 가지지 않음

createAsyncThunk

createAction의 비동기 버전

function createAsyncThunk(type, payloadCreator, options)

• type: 비동기 요청의 생명주기를 나타내는 추가 Redux action type 상수를 생성하는데 사용되는 문자열 예를들어 'users/requestStatus' type 인수는 다음과 같은 action type을 생성

  • pending: 'users/requestStatus/pending'
  • fulfilled: 'users/requestStatus/fulfilled'
  • rejected: 'users/requestStatus/rejected'

• payloadCreator: Promise를 반환하는 콜백 함수

  • thunkAPI: 일반적으로 Redux thunk 함수에 전달되는 모든 매개변수와 추가 옵션을 포함하는 객체
  • dispatch: Redux 스토어 dispatch 메서드
  • getState: Redux 스토어 getState 메서드
  • extra: 설정시 thunk 미들웨어에 제공되는 '추가 인수'(사용 가능한 경우)
  • requestId: 이 요청 시퀀스를 식별하기 위해 자동으로 생성되는 고유 문자열 ID 값
  • signal: 앱 로직의 다른 부분이 이 요청을 취소가 필요한 것으로 표시했는지 확인하는데 사용할 수 있는 AbortController.signal 객체
  • rejectWithValue(value, [meta]): 정의된 페일드 및 메타와 함께 거부된 응답을 반환하기 위해 작업 생성자에서 반환(또는 throw)할 수 있는 유틸리티 함수
  • fulfilledWithValue(value, meta): fulfilledAction.meta에 추가할 수 있는 기능을 가지고 있는 동안 값으로 이행하기 위해 작업 생성자에서 반환할 수 있는 유틸리티 함수

cancellation

thunk 실행 중 취소하기

리액트에서 한 컴포넌트 안에서 데이터를 생성하고 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 방법은 여러가지가 있음

리액트에서 데이터 흐름을 컨트롤하는 방법 (state 관리하는 방법)

• state와 props를 사용해서 컴포넌트 간에 전달
• React Context 사용
• mobx 사용
• redux 사용
• ...

React Context

React Context는 컴포넌트 트리의 깊이에 관계없이 props를 전달하지 않고도 다른 컴포넌트에 데이터를 제공함. Context는 전역 데이터를 관리하는데 사용됨 ex) 전역 상태, 테마, 서비스, 사용자 설정 등

React Context를 사용하는 이유

상태를 내려줄 부모와 자식 컴포넌트 사이의 깊이가 1이라면 상관없지만 깊이가 깊으면 props를 이용해서 계속 내려줘야 하므로 번거로움

89. Context API 살펴보기

React.createContext

const MyContext = React.createContext(defaultValue);

Context 객체를 생성. React가 이 Context 객체를 구독하는 구성 요소를 렌더링 할 때 트리에서 그 위에 가장 근접하게 일치하는 Provider에서 현재 Context 값을 읽어옴

defaultValue 인수는 트리에서 구성 요소 위에 일치하는 공급자가 없는 경우에만 사용됨 Context를 사용하고자하는 컴포넌트들을 Provider로 감싸줌. 그러면 그 자식 컴포넌트들은 모두 Context를 사용할 수 있음

React.Provider

모든 Context 객체에는 Consumer Component가 Context 변경 사항을 구독할 수 있도록 하는 Provider React 구성 요소가 함께 제공됨

<MyContext.Provider value={/* some value */}>
  <AComponent />
  <BComponent />
  <CComponent />
</MyContext.Provider>

A, B, C Component가 모두 Context를 구독중 Context value에 변경 사항이 생기면 컴포넌트를 다시 렌더링 함

변경 사항은 Object.js와 동일한 알고리즘(sameValue)을 사용하여 새 값과 이전 값을 비교하여 결정됨

Class.contextType

클래스 컴포넌트에서는 contextType 속성에 React.createContext()에 의해 생성된 Context 객체를 할당하여 context를 사용할 수 있음

this.context를 사용하여 해다 context 유형의 가장 가까운 현재 value를 사용할 수 있음. 렌더링 기능을 포함한 모든 수명 추가 메서드에서 이를 참조할 수 있음

Object.is vs ===

Object.is 와 '===' 둘 다 타입을 구분해서 비교를 해줌. 하지만 '==='은 +0과 -0을 같다고 판단함

+0 === -0 // ---> true
Object.is(+0, -0) // ---> false

React Router Dom이란?

React Router Dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있음 라우팅이 실행 중인 웹 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router Dom은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 함

Single Page Application(SPA)

리액트는 SPA이기 때문에 하나의 index.html 템플릿 파일을 가지고 있음. 자바스크립트를 이용해서 다른 컴포넌트를 이 index.html 템플릿에 넣음으로써 페이지를 변경함. 이 때 React Router Dom 라이브러리가 새로운 컴포넌트로 라우팅/탐색을 하고 렌더링하는데 도움을 줌

설치하기

• npm install react-router-dom --save
• yarn add react-router-dom

설정하기

설치 후 앱 어디에서나 React Router를 사용할 수 있도록 설정하려면 src 폴더에 있는 index.js 파일을 열고 react-router-dom에서 BrowserRouter를 가져온다음 루트 구성요소(App 구성 요소)를 그 안에 래핑하면 됨

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
  document.getElementById('root')
);

BrowserRouter HTML5 Histroy API(pushState, replaceState 및 popstate 이벤트)를 사용하여 UI를 URL과 동기화된 상로 유지해줌

여러 컴포넌트에 라우트 정의하기

function App(){
  return (
    <div className="App">
      <Routes>
        <Route path="/" elements={<Home />} /> // https://localhost:3000/
        <Route path="about" elements={<About />} /> // https://localhost:3000/about
        <Route path="contact" elements={<Contact />} /> // https://localhost:3000/contact
      </Routes>
    </div>
  )
}

Routes Routes는 앱에서 생성될 모든 개별 경로에 대한 컨테이너/상위 역할 Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링 해줌

Route Route는 단일 경로를 만드는 데 사용함. 두가지 속성을 가짐

• path: 원하는 컴포넌트의 URL 경로를 지정. 이 경로 이름을 원하는 대로 정할 수 있음 경로 이름이 '/'인 컴포넌트는 앱이 처음 로드될 때마다 먼저 랜더링됨

• Home 구성 요소가 맨 처음으로 렌더링됨

• element: 경로에 맞게 렌더링되어야 하는 컴포넌트를 지정

<Link />를 이용해 경로 이동

import { Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>홈페이지</h1>
      <Link to="about">About 페이지를 보여주기</Link>
      <Link to="contact">Contact 페이지를 보여주기</Link>
    </div>
  );
}

export default Home;

Link 구성 요소는 HTML의 앵커 요소 <a />와 유사함. to 속성으로 링크가 이동할 경로를 지정함

66. React Router Dom APIs

중첩 라우팅(Nested Routes)

중첩 라우팅은 React Router의 가장 강력한 기능 중 하나 복잡한 레이아웃 코드를 좀 더 간결하게 해결해줌 대부분의 레이아웃은 URL의 세그먼트에 연결되며 React Router는 이를 완전히 수용

<BrowserRouter>
  <Routes>
    // App 컴포넌트에 Header나 Footer 등의 Layout
    <Route path="/" element={<App />}>
      // localhost:3000/ => Home 컴포넌트 렌더링
      <Route index element={<Home />} />
      // localhost:3000/teams => Teams 컴포넌트가 Layout
      <Route path="teams" element={<Teams />}>
        // localhost:3000/teams/13 => Team 컴포넌트
        <Route path=":teamId" element={<Team />} />
        <Route path="new" element={<NewTeamForm />} />
        // localhost:3000/teams => LeagueStandings 컴포넌트 렌더링
        <Route index element={<LeagueStandings />} />
      </Route>
    </Route>
  </Routes>
</BrowserRouter>

Outlet

자식 경로 요소를 렌더링하려면 부모 경로 요소에서 <Outlet />을 사용해야 함. 이렇게 하면 하위 경로가 렌더링될 때 중첩된 UI가 표시될 수 있음. 부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 아무것도 렌더링 하지 않음

useNavigate

경로를 바꿔줌. ex) navigate('/home') ===> localhost:3000/home

useParams

:style 문법을 path 경로에 사용하였다면 useParams()로 읽을 수 있음

function App() {
  return (
    <Routes>
      <Route path="invoices/:invoiceId" element={<Invoice />} />
    </Routes>
  );
}

function Invoice(){
  let params = useParams();
  return <h1>Invoice {params.invoiceId}</h1>;
}

useLocation

이 Hooks는 현재 위치의 객체를 반환. 현재 위치가 변경될 때 마다 일부 side effect를 수행하려는 경우에 유용

useRoutes

useRoutes Hooks는 <Routes>와 기능적으로 동일하지만 <Route> 요소 대신 JavaScript 객체를 사용하여 경로를 정의함 이러한 객체는 일반 <Route> 요소와 동일한 속성을 갖지만 JSX가 필요하지 않음

71. useDebouce Custom Hooks 만들기

Debounce란?

원래는 입력창에 입력한 값이 onChange를 이용하면 바로 화면에 적용됨 하지만 debounce function을 이용하면 미리 결정해 놓은 시간 동안 타이핑을 멈출 때까지 keyup 이벤트의 처리를 지연시킴

입력된 모든 문자를 처리하면 성능이 저하되고 밴엔드에 불필요한 로드가 추가될 수 있음. 하지만 debounce를 이용하면 UI 코드가 모든 이벤트를 처리할 필요가 없고 서버로 전송되는 API 호출 수도 크게 줄어듬

75. useOnClickOutside Hookds 생성

모달창 바깥을 클릭했을 때 모달창이 닫히도록 만들기 -> 어디를 클릭했는지 구분해주어야 함 -> useRef

useRef란?

• 변수 관리
• 특정 DOM을 선택할 때 사용하는 React 빌트인 Hooks

변수 관리

state를 사용하면 state가 변할때 컴포넌트가 다시 렌더링 되지만 ref를 사용하면 리 렌더링이 되지 않음 (생명주기 동안 ref 값은 유지됨)

특정 DOM 선택하기

보통 JavaScript에서는 getElementById나 querySelector 같은 DOM Selector 함수를 사용해서 특정 DOM 선택 리액트에서는 ref를 이용해서 DOM을 선택함

• 클래스형 컴포넌트: React.createRef()라는 함수 사용
• 함수형 컴포넌트: useRef() 사용

useRef 사용법

useRef()를 이용해 Ref 객체를 만들고, 이 객체를 특정 DOM에 ref 값으로 설정. 이렇게 되면 Ref 객체의 .current 값이 특정 DOM을 가리키게 됨

DOM을 직접 선택해야하는 경우들

1. 앨리먼트에 포커스를 설정해줘야 할 때
2. 앨리먼트 크기를 가져와야 할 때
3. 스크롤바 위치를 가져와야 할 때 등

78. React Portal로 모달 생성

문제점

구조가 복잡하게 짜여있는 경우 Modal 요소 부분이 DOM 계층 구조에서 z-index 등의 영향을 받아서 맨 앞으로 가지 못하거나 원하는 모달 스타일을 가지지 못할 수가 있음

Portal

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공

이벤트 버블링 가능

Portal의 특징 중 하나는 이벤트 버블링이 가능하다는 것 이벤트 버블링이란 중첩된 자식 요소에서 이벤트가 발생할 때 그 이벤트가 부모로 전달되는 것 비록 포탈로 생성한 부분이 부모 DOM 밖에 생성되더라도 DOM 트리에서의 위치에 상관없이 portal은 여전히 React 트리에 존재. 따라서 React 트리에 포함된 상위로 이벤트 버블링이 가능함

Vite를 사용하는 이유

vite의 가장 큰 장점은 빌드 속도나 새로운 코드를 적용했을 때의 반영 속도 같은 Feedback 속도의 엄청난 개선

• 브라우저에서 ES 모듈을 사용할 수 있기 전에는 개발자에게 모듈화된 방식으로 JavaScript를 작성하는 기본 메커니즘이 없었음
• 그래서 '번들링'이 필요. webpack, Rollup 및 Parcel과 같은 도구로 번들링 해결
• 그러나 점점 더 큰 애플리케이션을 구축하기 시작하면서 처리하는 JavaScript와 모듈의 양이 크게 증가
• 자바스크립트 기반 도구에 대한 성능 병목 현상이 발생하기 시작함. 개발 서버를 가동하는 데 종종 너무 오랜 시간이 걸리거나 HMR을 사용하더라도 파일 편집이 반영되는 데 몇 초가 걸리는 문제점이 생김

-> Vite는 생태계의 새로운 발전을 활용하여 이러한 문제를 해결하는 것을 목표로 함

Vite를 이용해서 속도 개선을 하는 방법

개발 서버를 스타트할 때 번들러 기반 빌드 설정은 서비스를 제공하기 전에 전체 애플리케이션을 열심히 크롤링하고 빌드해야 함

-> 느린 서버 시작 속도

vite는 먼저 애플리케이션의 모듈을 종속성과 소스 코드의 두 가지 범주로 나누어 개발 서버 시작 시간을 개선함

• 종속성(Dependencies)은 대부분 개발 중에 자주 변경되지 않는 일반 JavaScript. 일부 큰 종속성도 처리하는데 큰 비용이 듬. 종속성은 다양한 모듈 형식 (ESM, CommonJS 등)으로 제공 될 수 있음

• vite는 esbuild를 사용하여 종속성을 사전 번들로 제공. esbuild는 Go로 작성되어 있으며 JavaScript 기반 번들러보다 10~100배 더 빠르게 종속성을 사전 번들링함

• Soure Code에는 변환이 필요한 일반 JavaScript가 아닌 경우가 많으며 매우 자주 편집됨. 또한 모든 소스 코드를 동시에 로드할 필요는 없음

• vite는 Native ESM을 통해 소스 코드 제공. 이것은 브라우저가 번들러 작업의 일부를 인계받게 하는 것. vite는 브라우저가 요청할 때만 소스 코드를 변환하고 제공하기만 하면 됨. 조건부 동적 가져오기 뒤에 있는 코드는 현재 화면에서 실제로 사용되는 경우에만 처리됨

-> 느린 서버 업데이트 속도

번들러 기반 빌드 설정에서 파일을 편집할 때 명백한 이유로 전체 번들을 다시 빌드하는 것은 비효율적. 업데이트 속도는 앱 크기에 따라 선형적으로 저하됨

일부 번들러는 개발 서버는 파일이 변경될 때 모듈 그래프의 일부만 무효화하면 되지만 전체 번들을 다시 구성하고 웹 페이지를 다시 로드해야 하도록 메모리에서 번들링을 실행함. 번들을 재구성하는데 비용이 많이 들 수 있으며 페이지를 다시 로드하면 애플리케이션의 현재 상태가 손상됨. 이것이 일부 번들러가 핫 모듈 교체(HMR)을 지원하는 이유. 페이지의 나머지 부분에 영향을 주지 않고 모듈 자체를 "Hot Module Replacement" 할 수 있음. 이것은 DX(Developer Experience)를 크게 향상시킴. 그러나 실제로 HMR 업데이트 속도도 응용 프로그램의 크기가 증가함에 따라 크게 저하된다는 것을 발견함

HMR(Hot Module Replace)란?

파일을 편집할 때 전체 번들을 다시 빌드하는 것이 아닌 페이지의 나머지 부분에 영향을 주지 않고 변경된 모듈 자체를 교체해서 빠르게 화면에 반영되게 하는 것

Vite에서 HMR은 기본 ESM을 통해 수행됨. 파일이 편집될 때 Vite는 편집된 모듈과 가장 가까운 HMR 경계(대부분의 경우 모듈 자체만) 사이의 체인을 정확하게 무효화하여 애플리케이션의 크기에 관계없이 HMR 업데이트가 일관되게 빨라짐

Vite는 또한 HTTP 헤더를 활용하여 전체 페이지 로드 속도를 높임. 소스 코드 모듈 요청은 '304 Not Modified'를 통해 조건부로 이루어지며 종속성 모듈 요청은 'Cache-Control: max-age=31536000, immutable'을 통해 강력하게 캐시됨. 따라서 한 번 캐시되면 서버에 다시 도달하지 않음

Typescript Transpiling 속도

Vite를 이용하면 기본적으로 Typescript 사용을 지원하며 esbuild를 이용해서 transpiling을 하기 때문에 훨씬 빠른 속도로 할 수 있음. 하지만 타입 checking 기능은 없음. 이미 에디터 내에서 다른 것들이 타입 체킹을 하기 때문에 transpiling만 제공

47. The Movie DB API 생성하기

https://www.themoviedb.org/

48. Axois 인스턴스 생성 및 요청 보내기

Axois란?

Axois는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 백엔드와 프론트엔드의 통신을 쉽게하기 위해 Ajax와 더불어 사용함

사용방법

• axois 모듈 설치: npm install axios --save
• axios.get('')

axios를 인스턴스화 하는 이유

중복된 부분을 계속 입력하지 않아도 되기 때문에

50. Styled Component

Styled Component란?

Styled Component란 CSS-in-JS라고 하는 Javascript 파일 안에서 CSS를 처리할 수 있게 해주는 대표적인 라이브러리

https://styled-components.com/docs/basics

장점

• 컴포넌트는 props를 내려줄 수 있음. 마찬가지로 styled 컴포넌트에도 props를 사용할 수 있으며 내려받은 props를 이용해 조건을 줘서 다양한 스타일을 적용해 줄 수 있음

• 클래스는 확장(extending)이 가능함. 마찬가지로 styled 컴포넌트도 부모 컴포넌트를 확장 받을 수 있음

설치 방법

• npm install --save styled-components
• yarn add styled-components

57. 비디오 배너 생성하기

Iframe이란?

유튜브 비디오를 가져오기 위해서 사용!

Iframe은 HTML Inline Frame 요소이며 inline frame의 약자이다 효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입할 수 있음

React.memo를 이용해 B 컴포넌트의 성능 최적화하기

현재 B 컴포넌트의 문제점

B 컴포넌트는 B, List, ListItem, message 컴포넌트로 나눠져 있음 input에 글을 타이핑 할 때 원래는 message 컴포넌트와 그 state를 갖고 있는 app 컴포넌트만 렌더링이 돼야 하는데 현재는 상관 없는 다른 부분들까지 모두 렌더링 되고 있음

React.memo 적용으로 문제 해결

React.memo 적용은 간단하게 원하는 컴포넌트를 React.memo로 감싸주면 됨 -> 렌더링이 필요치 않은 List, ListItem 컴포넌트는 렌더링이 안됨

-> B 컴포넌트의 성능이 확연히 좋아짐 (A: 1.5ms, B: 0.1ms)

React.memo()란?

React는 먼저 컴포넌트를 렌더링 한 뒤, 이전에 렌더링 된 결과와 비교하여 DOM 업데이트를 결정 만약 렌더링 결과가 이전과 다르다면, React는 DOM을 업데이트 함

이 과정에서 만약 컴포넌트가 React.memo()로 둘러 쌓여 있다면, React는 컴포넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 렌더링하는 컴포넌트의 props가 같다면, React는 메모이징된 내용을 재사용한다.

메모제이션 (Memoization) 이란? Memoization은 주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장함

React Memo가 props를 비교하는 방법은?

React.memo()는 props 혹은 props의 객체를 비교할 때 얕은 비교를 함

React Memo Props 비교 방식 수정하기

비교 방식을 원하는 대로 수정하고 싶다면 React.memo()의 두 번째 매개변수로 비교함수를 넣어주면 됨

예시)

React.memo(Component, [compareFunction(prevProps, nextProps)]);

function compareFunction(prevProps, nextProps) {
  return (
    prevProps.a === nextProps.a &&
    prevProps.b === nextProps.b
  )
}

React Memo 사용을 지양해야하는 상황

렌더링 될 때 props가 다른 경우가 대부분인 컴포넌트인 경우, 메모이제이션 기법의 이점을 얻기 힘듬

props가 자주 변하는 컴포넌트를 React.memo()로 래핑 할지라도, React는 두 가지 작업을 렌더링 할때마다 수행함

1. 이전 props와 다음 props의 동등 비교를 위해 비교 함수 수행
2. 비교 함수는 거의 항상 false를 반환할 것이기 때문에, React는 이전 렌더링 내용과 다음 렌더링 내용을 비교함

-> 비교 함수 결과가 대부분 false 라면 props 비교는 불필요

React.memo()는 리 렌더링을 막기 위한 도구보다 성능 개선의 도구

React에서 메모이제이션은 성능 개선을 위한 하나의 도구 대부분의 상황에서 React는 메모이징 된 컴포넌트의 리 렌더링을 피할 수 있지만, 렌더링을 막기 위해 메모이제이션에 너무 의존하면 안됨 (버그 유발 가능성)

결론

리액트에서 렌더링 성능 최적화를 위해서는 컴포넌트를 분리하고 React.memo를 사용하면 됨 또한 React.memo 사용은 항상 좋은 것은 아니기에 profiler를 이용해서 성능상 이점이 있는지 확인 후 사용하면 좋음

40. 얕은 비교 (Shallow Equal)

얕은 비교란?

숫자, 문자열 등 원시 자료형은 값을 비교 배열, 객체 등 참조 자료형은 값 혹은 속성을 비교하지 않고, 참조되는 위치를 비교

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };

console.log(obj1 === obj2); // false

깊은 비교란?

얕은 비교와 달리 깊은 비교는 객체의 경우에도 갚으로 비교함

1. Object depth가 깊지 않은 경우: JSON.stringify() 사용
2. Object depth가 깊은 경우: lodash 라이브러리의 isEqual() 사용

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true

얕은 비교는 언제 사용하나요?

1. React.memo()에서 props를 비교할 때
2. 리액트 컴포넌트가 리 렌더링을 하기 전
   • state의 변경이 있을 때
   • 부모 컴포넌트가 랜더링 될 때

참고) 리액트에서 컴포넌트가 리랜더링 되는 경우

1. state 변경이 있을 때
2. 부모로부터 받은 값(props)이 바뀐 경우
3. 부모가 리랜더링 되는 경우 + shouldComponentUpdate에서 true가 반환될 때 + forceUpdate가 실행 될 때

참고) App.js 에는 꼭 필요한 경우가 아니면 상태를 넣지 않는다 -> 렌더링 최적화를 위해. 컴포넌트화를 해서 거기에서 상태관리

41. useCallback을 이용한 함수 최적화

원래 컴포넌트가 렌더링 될 때 그 안에 있는 함수도 다시 만들게 됨. 하지만 똑같은 함수를 컴포넌트가 리 렌더링 된다고 해서 계속 다시 만드는 것은 좋은 현상이 아님 그리고 만약 리 렌더링이 되는 컴포넌트에서 이 함수를 자식 컴포넌트에 props로 내려 준다면 그 함수를 포함하고 있는 컴포넌트가 리 렌더링 될 때마다 자식 컴포넌트도 함수가 새롭게 만들어지니 계속 리 렌더링을 하게 됨

-> 원래 React.memo로 감싸줘서 리 렌더링이 되지 않던 컴포넌트들이 함수를 props로 받으니 input에 문자를 입력할 때 마다 다시 리 렌더링됨

React.useCallback 적용으로 문제 해결

useCallback은 메모이제이션된 함수를 반환하는 함수 useCallback 적용은 useCallback 안에 콜백함수와 의존성 배열을 순서대로 넣어주면 됨

예시)

const testFunction = useCallback(() => {}, []);

• 함수 내에서 참조하는 state, props가 있다면 의존성 배열에 추가하면 됨
• useCallback으로 인해서 의존성 배열에 추가해준 state 혹은 props가 변하지 않는다면 함수는 새로 생성되지 않음
• 새로 생성되지 않기 때문에 메모리에 새로 할당되지 않고 동일 참조 값을 그대로 사용
• 의존성 배열에 아무것도 없다면 컴포넌트가 최초 렌더링될 시에만 함수가 생성되며 그 이후에는 동일한 참조 값을 사용하는 함수가 됨

-> useCallback 함수로 감싸주니 리 렌더링이 안됨

42. useMemo를 이용한 결과 값 최적화

Memoization

메모이제이션은 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는데 주로 사용되는 최적화 기술

function Component({ a, b }) {
  const result = conpute(a, b);
  return <div>{result}</div>
}

Component 내의 compute 함수가 만약 복잡한 연산을 수행하면 결과 값을 리턴하는데 오랜 시간이 걸리게 됨 이럴 때 컴포넌트가 리 렌더링 된다면 연산을 계속 수행하는데 오랜 시간이 걸려서 성능에 안 좋은 영향을 미치게 되며, UI 지연 현상이 일어남

-> 이런 현상을 useMemo를 이용해 해결 compute 함수에 넘겨주는 a, b의 값이 이전과 동일하다면 컴포넌트가 리 렌더링 되더라도 연산을 다시 하지 않고 이전 렌더링 때 저장해 두었던 값을 재사용

useMemo 적용하기

useMemo로 감싸준 후에 첫번째 인수에 compute함수를, 두번째 인수인 의존성 함수에는 compute 함수에서 사용하는 값을 넣어줌

리액트에서 불변성이란?

불변성이란 값이나 상태를 변경할 수 없는 것을 의미

자바스크립트 타입을 통한 불변성 의미

원시 타입은 불변성(immutable)을 가지고 있고 참조 타입은 변할 수 있음 (mutable)

• 원시 타입: Boolean, Number, null, undenfined, Symbol
• 참조 타입: Object, Array

기본적으로 자바스크립트는 원시 타입에 대한 참조 및 값을 저장하기 위해 Call Stack 메모리 공간을 사용하지만 참조 타입의 경우 Heap이라는 별도의 메모리 공간을 사용. 참조 타입은 Call Stack 메모리에 객체 및 배열의 값이 아닌 Heap 메모리 참조 ID를 값으로 저장함

불변성을 지켜야하는 이유?

1. 참조 타입에서 객체나 배열의 값이 변할 때 원본 데이터가 변경되기 때문에 이 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있기 때문
2. 리액트에서 화면을 업데이트할 때 원본 데이터와 이전 데이터를 비교해서 변경된 사항을 확인한 후 업데이트 해줘야 하기 때문에 불변성을 지켜줘야 함

불변성을 지키는 방법

참조 타입에서 값을 바꾸면 불변성을 유지할 수 없으므로 아예 새로운 배열을 반환하는 메소드를 사용해야함 -> spread operator, map, filter, slice, reduce

원본 데이터를 변경하는 메소드: splice, push -> 사용 x

29. 전개 연산자 (Spread Operator)

전개 연산자란?

전개 연산자는 ECMAScript6(2015)에서 새롭게 추가되었으며, 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용. '...'으로 사용

35. React Profiler

리액트 프로파일러란?

React Profiler는 React 16.5에서 새로운 DevTools 프로파일러 플러그인에 대한 지원을 추가 이 플러그인은 React의 Profiler API를 사용하여 React 애플리케이션의 성능 병목 현상을 식별하기 위해 렌더링되는 각 구성 요소에 대한 타이밍 정보를 수집합니다.

리액트 프로파일러를 이용한 성능 측정하기

가짜 데이터 가져오기

성능을 측정하기 위해서는 어느 정도 많은 데이터가 있어야 하기에 jsonplaceholder를 이용해 가짜 데이터를 받아옴

useEffect () => {
  fetch('http://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(posts => setPosts(posts));
}, []);

response는 HTTP 응답 전체를 나타내는 객체로, JSON 본문 콘텐츠를 추출하기 위해서는 json() (en-US) 메서드를 호출해야 함

• use Effect 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook 여기서는 App 컴포넌트가 한 번 렌더링 된 후에 jsonplaceholder라는 곳의 서버에 비동기 요청을 보내서 posts 데이터를 가져오기 위해서 사용됨

• fetch() 메소드 원격 API에 요청을 보내기 위해 사용할 수 있는 메소드 전역 fetch() 메소드는 네트워크에서 리소스를 가져오는 프로세스를 시작하여 Response 응답을 사용할 수 있게 되면 이행된 Promise를 return 함

• jsonplaceholder jsonplaceholder는 가짜 데이터가 필요할 때 사용할 수 있는 무료 온라인 REST API posts, users, photos 등 여러가지 가짜 데이터를 가져올 수 있음

38. React Profiler로 성능 측정하기

• 개발자 도구의 Profiler 탭으로 이동
• 여기서 프로파일링을 수행해서 성능 데이터를 기록하고 측정할 수 있음
• 프로 파일링을 수행하려면 레코드 버튼을 눌러야함
• Profiler는 컴포넌트가 리 랜더링 될 때 마다 성능을 기록함

• A 컴포넌트는 모든 요소를 하나의 컴포넌트에 넣은것
• B 컴포넌트는 요소들을 여러 컴포넌트로 쪼갠 것
• 그런데 A 컴포넌트보다 B 컴포넌트의 성능이 더 안 좋게 나옴 (A: 2.1ms, B: 5.2ms)

React Hooks

React Hooks는 ReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기능

React Hooks가 필요한 이유

주로 Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해 개발되었음 React Hooks는 Functional Component를 사용함

원래 Functional Component의 문제점

React Hooks가 없었을 때의 함수형 컴포넌트는 리액트의 생명주기를 사용하지 못했기 때문에 클래스 컴포넌트보다 더 적은 기능을 제공했었음

함수형 컴포넌트가 더 간결하고 빠르더라도 중요한 리액트 생명주기를 사용하지 못했기 때문에 클래스형 컴포넌트를 써왔었음

하지만 React 16.8 Hooks 업데이트 이후로 함수형 컴포넌트도 생명주기를 사용할 수 있게 됨 컴포넌트를 시작하자마자 API를 호출하는 등 많은 부분을 할 수 있게 됨

// 클래스형 컴포넌트 사용시
import React, { Component } from 'react';
import Axios form 'axios';

export default class Hello extends Component {
  constructor(props) {
    super(props);
    this.state = { name: "" };
  }

  componentDidMount() {
    Axios.get('/api/user/name')
      .then(response => {
        this.setState({ name: response.data.name })
    })
  }

  render() {
    return (
      <div>
        My name is {this.state.name}
      </div>
    )
  }
}

// 함수형 컴포넌트 사용시
import React, { userEffect, userState } from 'react';
import Axios from 'axios'

export default function Hello() {
  const [Name, setName] = userState("")

  userEffect{() => {
    Axios.get('/api/user/name')
      .then(response => {
          setName(response.data.name)
    })
  }, [])

  return (
    <div>
      My name is {Name}
    </div>
  )
}

Hooks에서 state를 업데이트 하는 방법 -> state를 정의해줄 때 const[name, setName] = userState(""); 이런식으로 해주고 여기에서 setName을 이용해서 state를 업데이트 시켜줄 수 있음

React Hooks의 장점

• 코드가 간결해 짐 클래스형 컴포넌트에서는 생명주기를 사용할 때 componentDidMount와 componentDidUdate, componentWillUnmount 이렇게 각각 다르게 처리를 해주지만, React Hook을 사용할 때는 userEffect 안에서 다 처리를 해주기 때문에 훨씬 간결함

• HOC 컴포넌트를 Custom React Hooks로 대체해서 너무나 많은 Wrapper 컴포넌트를 줄이게 됨

HOC (Higher Order Component)란? 화면에서 재사용 가능한 로직만을 분리해서 component로 만들고, 재사용 불가능한 UI와 같은 다른 부분들은 parameter로 받아서 처리하는 방법 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수

24. CRUD 앱을 함수형 컴포넌트로 바꾸기

컴포넌트 자체를 바꾸기

export default class ExpenseForm extends Component {}
// ->
const ExpenseForm = () => {}
export default ExpenseForm;

클래스형 컴포넌트는 render()안에 return()을 하지만 함수형 컴포넌트는 render()없이 바로 return()

클래스형 컴포넌트에서 render()는 컴포넌트를 랜더링하는(화면에 나타내는 메소드)

State를 useState Hook을 이용해 표현하기

// const [변수 이름 getter, State를 정하는 함수 setter] = expenses, setExpenses를 리턴하고 초기 State 값을 정하는 Hook
const [expenses, setExpenses] = useState([
    { id: 1, charge: '콜라', amount: 2000 },
    { id: 2, charge: '빵', amount: 1000 },
    { id: 3, charge: '맥북', amount: 20000 },
]);

함수형에서 state를 가져올때 this.state.state이름 대신 그냥 state이름을 써서 가져올 수 있음 state를 업데이트 할때도 this.setState 대신 setter를 이용하면 됨

props 사용하기

// 함수에서 props를 받아와서 사용
const ExpenseItem = (props) => {
    this.props.expense.charge
      // ->
      props.expense.charge
}

더 깔끔하게 표현하기 위해 구조분해 할당을 이용하면 props를 생략하고 사용할 수 있음

const ExpenseList = ({ initialExpenses, handleDelete }) => {
    props.initialExpenses
      // ->
      initialExpenses
}

25. 구조 분해 할당

구조 분해 할당 (Destructuring)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식

-> 주로 클린 코드를 위해 사용

객체 구조 분해 할당

function buildAnimal(animalData){
  let accessory = animalData.accessory,
      animal = animalData.animal,
      color = animalData.color,
      hairType = animalData.hairType;
}
// ===
function buildAnimal(animalData){
  let {accessory, animal, color, hairType} = animalData;
}

깊게 들어간 객체 구조 분해 할당

let person = {
  name: 'Maya',
  age: 30,
  phone: '123',
  address: {
    zipcode: 1234,
    street: 'rainbow',
    number: 42
  }
}

let {address: {zipcode, street, number}} = person;
console.log(zipcode, street, number); // 1234, rainbow, 42

배열 구조 분해 할당

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // [30, 40, 50]

const week = ['monday', 'tuesday', 'wednesday', 'thuresday', 'friday'];
const [day1, day2, day3, day4, day5] = week;
console.log(day2) // tuesday

리액트에서 데이터가 변할 때 화면을 다시 랜더링 해주기 위해서는 React State를 사용해야 한다

React State

React State란 컴포넌트의 랜더링 결과물에 영향을 주는 데이터를 갖고 있는 객체 State가 변경되면 컴포넌트는 리랜더링 됨. 또한 State는 컴포넌트 안에서 관리됨

리액트 State 생성하기

constructor(props){
  super(props);
  // 이름이 expenses인 state 생성
  this.state = {
    expenses: [
      { id: 1, charge: '콜라', amount: 2000 },
      { id: 2, charge: '빵', amount: 1000 },
      { id: 3, charge: '맥북', amount: 20000 },
    ]
  }
}

state 사용하기

// initialExpenses={this.initialExpenses} 대신 state 사용
initialExpenses={this.state.expenses}

state를 이용해서 변경된 상태 업데이트하기

// setState를 이용해 state 업데이트
this.setState({ expenses: newExpense });

21. super(props)란?

constructor 안에 super키워드를 써줘야 밑에 this 키워드를 사용할 수 있음

Constructor

constructor(생성자)를 사용하면 인스턴스화된 객체에서 다른 메서드를 호출하기 전에 수행해야하는 사용자 지정 초기화를 제공 클래스를 new 키워드를 사용해 인스턴스 객체로 생성하면 넘겨받은 인수와 함께 constructor가 먼저 실행됨

예시)

class User {
  constructor(name){
    this.name = name;
  }
}

let user = new User("John");
// 이때 넘겨받은 인수인 John이 this.name에 할당 됨

자바스크립트에서 super

super 키워드는 자식 클래스 내에서 부모 클래스의 생성자를 호출하거나 메소드를 호출할 때 사용됨

예시)

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return super.present() + ', it is a ' + this.model;
  }
}

let myCar = new Model("Ford", "Mustang");
mycar.show();

super 이후에 this 키워드

생성자에서는 super 키워드 하나만 사용하거나 this 키워드가 사용되기 이전에 호출되어야 함

super 이후에 this 키워드가 나와야 하는 이유

부모 클래스의 생성자를 호출하기 전에 this를 사용해서 부모에 있는 객체에 접근하려고 하면 오류가 발생하기 때문 React에서도 마찬가지로 super가 this보다 먼저 사용되어야 함

React에서 super에 props를 인자로 전달하는 이유

React.component 객체가 생성될 때 props 속성을 초기화하기 위해 부모 컴포넌트에게 props를 전달 그래야 생성자 내부에서도 this.props를 정상적으로 사용할 수 있음

22. State와 Props

Props

• 부모 컴포넌트로 부터 자식 컴포넌트에 데이터를 전달
• 읽기 전용

State

• 해당 컴포넌트 내에서 데이터를 전달
• 변경 가능
• State가 변경되면 화면이 re-render됨

페이지가 꾸며지는 순서

1. public/index.html: HTML 템플릿 파일. div 앨리먼트의 id를 root로 해놓음
2. src/index.js: 자바스크립트 시작점. id가 root인 div 앨리먼트를 잡아주고 App.js에 연결해서 그 앨리먼트를 꾸밀 수 있게 됨
3. App.js: 여기에서 잡아놓은 앨리먼트를 꾸밈

Single Page Application (SPA)

원래 전통적인 방식의 웹 사이트는 Multi Page Application으로 여러개의 페이지를 만들어서 각 페이지를 연결하는 식으로 만들었음

하지만 요즘에는 앱 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가면서 보여주는 방식을 사용함. 이것이 Single Page Application

SPA에서 화면 변경이 이루어지는 원리

Multi Page Application에서는 a 페이지에서 b 페이지로 전환할 때 a.html을 보여주다가 b.html을 보여주면 됐지만, index.html 하나밖에 없는 SPA에서는 어떻게 페이지 전환(브라우징)을 할까? -> HTML 5의 History API를 사용 React-Router-Dom에서 History API를 사용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해줌

History API

11. CRUD 앱 소개 및 JSX 알아보기

JSX (Javascript syntax extension)란?

JSX는 자바스크립트의 확장 문법이다. 리액트에서는 이 JSX를 이용해서 화면의 UI를 정의한다

JSX를 사용하면 UI를 나타낼때 자바스크립트 로직과 HTML 구조를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있음

JSX를 사용하지 않으면?

JSX를 사용하지않고 원래 리액트에서 화면을 그리는 방식은 React.createElement API를 사용해서 앨리먼트를 생성한 후, 이 앨리먼트를 In-Memory에 저장. 그리고 ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려줌

JSX는 createElement를 쉽게 사용하기 위해 사용함

모든 UI를 만들때 마다 createElement를 사용해서 컴포넌트를 만들면 너무 복잡함. 따라서 JSX를 사용해서 작성 후 그걸 바벨이 내부에서 자동적으로 createElement로 바꿔서 사용함

JSX를 사용하면서 주의해야 할 문법 (문법 규칙)

JSX로 작성할 때 컴포넌트안에 여러 앨리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 함

예시)

// 잘못된 코드
function hello(){
    return (
      <div>Hello world!</div>
      <div>what are you doing</div>
    )
}

// 올바른 코드
function hello(){
    return <div>
      <div>Hello world!</div>
      <div>what are you doing</div>
      </div>;
}

15. 리액트 아이콘 사용하기

리액트에서 아이콘을 사용하는 방법은 여러가지지만 주로 react-icons 모듈을 이용해서 아이콘을 구현함

사용방법

• 필요한 패키지 설치: npm install react-icons
• 사용법: https://react-icons.github.io/react-icons/

16. Props를 통해 컴포넌트 간 데이터 전달

Props란?

Props는 Properties의 줄인말

• Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는데 사용됨
• Props는 읽기 전용으로 자녀 컴포넌트 입장에서는 변하지 않음 (변하게 하고자 하려면 부모 컴포넌트에서 state를 변경시켜 줘야함)

예시)

// 부모 컴포넌트에서 내려주기
initialExpenses = [
    { id: 1, charge: '콜라', amount: 2000 },
    { id: 2, charge: '빵', amount: 1000 },
    { id: 3, charge: '맥북', amount: 20000 },
]

<자식컴포넌트 initialExpenses={this.initialExpenses} />

// 자식 컴포넌트에서 받아오기
this.props.initialExpenses

18. JSX Key 속성 이해하기

JSX Key 속성

리액트에서 요소의 리스트를 나열할 때는 key를 넣어줘야 됨 키는 react가 변경, 추가 또는 제거된 항목을 식별하는 데 필요 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 함

리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용 이때 바뀐 부분을 식별하기 위해서는 Key가 필요

Key 사용 방법

key에는 유니크한 값을 넣어줘야 함 (index는 비추천!) index도 0부터 시작하는 유니크한 값을 가지지만 만약 리스트가 추가되거나 삭제되면 해당 리스트들의 key 값도 전부 바뀌게 됨

Node.js란?

리액트 프로젝트를 만들기 위해서는 Node.js와 npm을 먼저 설치해야 함 Node.js를 설치하면 자동으로 npm도 같이 설치됨

Node.js란 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로서, 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산 할 수 있게 해줌

React 설치 시 Node.js가 필요한 이유

리액트 앱은 웹 브라우저에서 실행되는 코드여서 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기 때문에 필요 이 때 필요한 개발 도구에는 바벨, 모듈화된 코드를 한 파일로 합치고 코드를 수정할 때 마다 웹 브라우저를 리로딩하는 등 여러기능을 지닌 웹팩 등이 있음

05. 브라우저가 그려지는 원리 및 가상돔

리액트의 주요 특징 중 하나는 가상돔을 사용한다는 것

웹 페이지 빌드 과정 (Critical Rendering Path, CRP)

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있음 웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정

• DOM tree 생성: 렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링할지 결정함
• Render tree 생성: 브라우저가 DOM과 CSSDOM을 결합하는 단계이며, 이 프로세스는 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력. 즉, 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함
• Layout (reflow): 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계
• Paint: 실제 화면에 그리는 단계

❗️문제점 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 Render Tree가 재생성 됨. 즉, 모든 요소들의 스타일을 다시 계산하고 Layout, Repaint 과정을 다시 거쳐야 함 인터렉션이 적은 웹이면 괜찮지만 만약 인터렉션이 많다면? 불필요하게 DOM을 조작하는 비용이 너무 크게됨 -> 이러한 문제로 인해 나오게 된 것이 가상 돔, Virtual Dom

가상 돔 Virtual Dom이란?

가상 돔이란 실제 DOM을 메모리에 복사해둔 것으로 생각하면 됨

가상돔의 작동 원리

데이터가 바뀌면 가상돔에 렌더링되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용 시켜줌. 바뀐 부분을 찾는 과정을 Diffing이라고 부르며, 바뀐 부분만 실제 돔에 적용시켜 주는 것을 재조정(reconfiliation)이라고 부름

가상돔의 장점

만약 한번에 많은 요소가 변하였다고 하더라도 한 번에 묶어서 실제 돔 수정은 한 번만 처리하므로 돔을 조작하는 비용이 줄어들게 됨

06. Create React App을 이용해서 리액트 설치하기

요즘에는 'npx create-react-app <폴더이름>'이라는 명령어로 간단하게 리액트를 설치할 수 있음

이전에 래액트 앱을 설치하던 방법

이전에는 Webpack이나 Babel 같은 모듈을 설치하고 설정해야 리액트 앱을 시작할 수 있었음

Webpack이란?

웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리

Webpack의 장점

1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있음
2. 웹팩이 파일을 압축해주므로 개발 단계에서 모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉬움

Babel이란?

최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환시켜주는 라이브러리

create-react-app

create-react-app을 사용하면 webpack이나 babel을 따로 설치하고 설정할 필요없이 자동으로 설정이 되므로 간단하게 리액트를 설치할 수 있음

npx란?

npx는 노드 패키지 실행을 도와주는 도구로, create-react-app 이란 npm 레지스트리에 있는 패키지를 react-app 폴더에서 실행해서 리액트를 설치해 주는 것

npm 레지스트리

다양한 라이브러리들이 저장되어 있는 곳, create-react-app 패키지도 포함되어 있음

npx vs npm npx는 단지 실행을 도와주는 도구, npm은 실제로 로컬에 설치를 해주는 도구

08. Create React App으로 설치 된 리액트 기본 구조 살펴보기

이름이 수정되면 안되는 파일들

1. public/index.html -> 페이지 템플릿
2. src/index.js -> 자바스크립트 시작점

public 폴더 내부의 파일만 public/index.html에서 사용할 수 있음

src 폴더 내부에 JS 파일과 CSS 파일들을 넣으면 된다 webpack은 src 폴더 내에 있는 파일들만 처리하기 때문에 이 폴더 외부에 있는 파일들은 webpack에 의해 처리되지 않음

index.html

index.html은 관습적으로 사용되어온 것으로, 방문자가 사이트를 요청할 때 다른 페이지가 지정되지 않은 경우 웹 사이트에 표시될 기본 페이지에 사용되는 가장 일반적인 이름 즉, index.html은 웹 사이트의 홈페이지에 사용된 이름이다

www.abc.com 이라고 된 것은 사실 www.abc.com/index.html 이다

src 폴더

대부분의 리액트 소스 코드들은 이곳에 작성

Package.json 파일

해당 프로젝트에 대한 정보들이 들어있음. 포로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들이 명시되어 있음 앱을 시작할 때 사용할 스크립트, 앱을 빌드할때, 테스트할 때 사용할 스크립트 등이 명시되어 있음

프로젝트에서 자주 실행해야하는 명령어를 scripts로 작성해두면 npm 명령어로 실행 가능

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}
// -> npm start 라고 하면 앱이 시작고 npm build라고 하면 앱이 빌드 됨

소스 코드를 입력할 때 문법이나 코드 포멧을 체크해주는 것에 대한 설정을 명시함

"eslintConfig": {
    "extends": [
        "react-app",
        "react-app/jest"
    ]
}

React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 리액트는 인터렉션이 많은 웹, 앱을 개발하기 위해 주로 사용됨 이와 같은 웹, 앱을 만드는 Vue나 Angular와 많이 비교하게 됨

React vs Vue vs Angular

Vue와 Angular는 프레임 워크이고 React는 라이브러리임

Framework vs Library

• 프레임 워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것
• 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것

프레임 워크는 라이브러리를 포함하고 있으며 작성한 소스 코드를 호출함 그리고 소스 코드는 어떠한 기능을 구현하기 위해서 라이브러를 호출하게 됨

리액트가 프레임 워크가 아닌 라이브러리인 이유

리액트는 전적으로 UI(사용자 인터페이스)를 렌더링하는 데 관여하기 때문

리액트는 보이는 부분, view에 관여를 하는데 페이지 이동이나 상태 관리 등은 어떻게 할까? -> 리액트 생태계, 다른 라이브러리들의 도움을 받음

• 라우팅 (페이지 이동): react-router-dom
• 상태 관리: redux, recoll, mobx
• 테스트: Jest, Mocha

02. 리액트를 사용하는 이유

• 상대적으로 배우기 쉬운 라이브러리
• 여러 기능들을 위한 라이브러리 환경이 이미 잘 만들어져 있음
• 많은 기업들의 사용으로 검증이 된 라이브러리

03. 리액트 컴포넌트란 무엇인가요

리액트는 여러 컴포넌트를 이용해서 웹 앱을 개발함

컴포넌트(Component)란?

리액트로 만들어진 앱을 이루는 최소한의 단위

여러개의 컴포넌트가 모여 하나의 페이지를 이루게 됨

리액트 컴포넌트의 2가지 유형

클래스형 컴포넌트 (Class Components)

예시)

class App extends Component {
    render(){
        return <h1>안녕하세요.</h1>;
    }
}

함수형 컴포넌트 (functional Components)

예시)

function App() {
    return <h1>안녕하세요.</h1>
}

원래 리액트는 클래스 컴포넌트를 이용해서 많이 개발을 했지만 리액트에서 리액트 Hooks라는 것을 발표한 이후부터는 함수형 컴포넌트를 이용해서 많이 개발을 하는 추세