TIL_230203_ Next.js, React 강의

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. 프로그래머스

Lv1. 문자열 내 p와 y의 개수

• 풀이
  1. 문자열 내 p, y 개수 구하기
  2. 개수가 같거나 모두 없으면 true | false
  3. 모두 대문자나 소문자로 바꾸기

     function solution(s){
     let p = 0
     let y = 0;
       let lowerS = s.toLowerCase();
       for(let i=0; i<lowerS.length; i++){
           if(lowerS[i] === 'p'){
               p++
           }
           else if(lowerS[i] === 'y'){
               y++
           }
       } return p===y ? true : false
     }

• 다른 풀이
  • return false, true를 하지 않아도 비교하면 boolean으로 return!!

    function numPY(s){
     return s.toUpperCase().split("P").length ===
     s.toUpperCase().split("Y").length;
    }

  • match()
    return s.match(/p/ig).length == s.match(/y/ig).length;
  • 정규식 이용
  • i 대소문자 무시
  • g 글로벌

---

2. Next.js 강의

알게 된 것

Custom _document 를 이용한 styles SSR

• _app.js가 먼저 실행되고 _document.js 가 덮어씌워진다.
  • _document.js의 <Main/> 에서 _app.js가 실행
• _document.js에서 {ServerStyleSheet}를 이용하면 styles가 HTML 초기 렌더링에 포함되어 깜빡거리지 않는다.

Web Vitals

• FID (First Input Delay) 줄이는 방법
  • Link의 prefetch 기능
    -> Link가 veiwport에 보일 때 해당 링크의 정보를 미리 불러온다.
    -> prefetch={false}로 해 놓으면 링크에 hover 시 정보를 불러온다.
    
• 개발자 도구의 Lighthouse로 web vitals 확인 가능

Middleware

• 페이지 이동해서 요청을 보냈을 때 응답 전에 다양한 작업을 할 수 있다.
  • redirect
    -> ex. 주소에 /ping을 입력해도 /pong으로 가게 하기
    -> ex. 사용하지 않는 페이지로 요청이 있을 시 redirect
  • rewrite
    -> 해당 URL은 유지하되 다른 page의 내용을 보여줄 수 있다.

Typescript 적용

• 새로 만들기
  npx create-next-app@latest --ts

• 기존 프로젝트에 적용
  touch tsconfig.json
  or
  _app.tsx로 파일명 바꾸고 yarn dev하면 tsconfig.json 자동으로 설치

• image 파일 쓰는 방법

  • 최상위 next.config.js에 추가
    const withImages = require('next-images'); module.exports = withImages();
  • 해당 페이지에서 import 후 src={Loves}로 사용
    import Loves from "/public/loves.png";

---

3. React 원장님 강의 < memoization >

React.memo / useMemo / useCallback

알게 된 것

• 리렌더링 조건
  • 컴포넌트 / state / props 변경

React.memo

• 컴포넌트 캐싱
  • {memo} import하고 memo()로 쓸 수 있다.
  • 부모 컴포넌트가 리렌더링 될 때 하위 컴포넌트가 리렌더링 되는 것 방지
    export default memo(컴포넌트)

useCallback

• 함수를 캐싱
  • 함수는 객체의 한 종류로 리렌더링이 될 때 함수가 다시 실행되며 새로운 메모리 주소에 값이 할당 된다.
  • props로 받은 함수의 값이 아닌 주소를 바라보기 때문에 변경사항이 있다고 판단해 하위 컴포넌트 렌더링을 막아도 렌더링이 되는 것
• 함수를 캐싱하기 위해 useCallback 사용
  • useCallback처럼 의존성 배열 사용

useMemo

• 값(객체, 배열, 함수)를 캐싱
  • return 값이 일정한 함수가 리렌더링될 때마다 계속 실행될 때 함수의 값을 저장해서 함수가 한 번만 실행되도록 하기
    const value = useMemo(()=> 실행할 함수, []);

---

4. Udemy React 강의

Typescript + React

• 복습

---

5. Udemy React qurey 강의

lazy spa project 완성하기

• useIsFetching()
  • 서버 호출이 존재하지 않으면 0
  • 호출 여부에 따라 loading spiner 등을 보여줄 수 있다.
    const display = isFetching ? 'inherit' : 'none';