TIL_230131_ ✅ Next.js 강의, Throttling and Debouncing

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

---

📒 오늘의 공부

1. 프로그래머스

Lv1. 자릿수 더하기

• 풀이
  1. 숫자 1개씩 분리하기
  2. 숫자 더하기
• 구글링 참고해서 품

function solution(n)
{
    var answer = String(n).split('').reduce((acc, cur)=>(acc+cur*1),0)


    return answer;
}

• 다른 풀이

  • 자세히 풀어쓰기

      var a = (n + '').split('');
      var b = 0;
      for(var i = 0; i < a.length; ++i) {
          b += parseInt(a[i]);
      }
      return b;

  • 숫자로 풀기

       var answer = 0;
    
     while(n!=0){
         answer += Math.floor(n%10);
         n /= 10;
     }
    
     return answer;

알게 된 것

• 숫자는 문자열이 아니기 때문에 .length가 적용되지 않아 문자열로 바꾸는 과정 필요
• 숫자로 풀 땐 10으로 나눈 나머지가 자릿수가 된다.

---

2. Next.js 강의

• 리액트 프레임워크 Next.js
• npx create-next-app 설치, 폴더 이름 설정

알게 된 것

Page와 Routes

• 개발 서버 시작 npm run dev
• page 이동하는 방법
  • Link
    
  • useRouter
    
• Dynamic Routes(동적 페이지 이동)
  • pages/post/[id].js
    
  • http://localhost:3000/post/122 id에 어떤 내용이 들어와도 이동 가능

API Routes

• Node 서버 없이 api를 만들어 배포할 수 있도록 만들어주는 기능
  • pages/api/에 api 생성 가능
  • pages/api/hello.js
    
  • Dynamic API Route
  • pages/api/test/[id].js
    

MPA부터 SSR까지 흐름

• MPA - 페이지 이동 시 깜빡이는 문제 등
• SPA, CSR (React) - SEO 최적화 어려움
• SSR, SSG (Next.js-react, Nuxt.js-vue)

Data Fetching (introduction/SSR)

• Build할 때 rendering되면 Static-Site generation (SSG)
• runtime에 rendering되면 Server-Side Rendering (SSR)
• getServerSideProps 함수는 Server에서만 실행
  • return 값이 Post Page의 props로 들어감

---

3. Throttling and Debouncing 강의

• ✅ Throttling 이 무엇인지 설명할 수 있다.

• ✅ Debouncing 이 무엇인지 설명할 수 있다.

• ✅ lodash 를 이용하여 쓰로틀링과 디바운싱을 적용할 수 있다.

• ✅ 리액트에서 Throttling/Debouncing 시 useCallback을 적용하는 이유를 설명할 수 있다.

• Throttling

  • 짧은 시간 간격으로 연속해서 발생한 이벤트를 일정시간 단위(delay)로 그룹화해서 처음 또는 마지막에만 함수가 실행되도록 하는 것
    ex. 무한 스크롤

• Debouncing

  • 짧은 시간 간격으로 연속해서 이벤트가 발생할 때 마지막 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출
    ex. 검색어 입력이 종료됐을 때 실행
    (내가 찾던 것..!!!)

• React에서는 useCallback()함수를 사용해 이전에 호출한 함수를 반복적으로 호출할 수 있다.
  ex. 입력되는 input값을 받을 때

---

4. React Udemy 강의

React_Next.js_1

문제 및 해결

• next.js 파일을 받아 npm i 후 서버 개발을 실행했는데 오류
  ERR_PACKAGE_PATH_NOT_EXPORTED

  • node를 다운그레이드 하라고 나왔는데 오전에 직접 next.js 프로젝트를 만들었을 땐 같은 최신 node에서도 잘 실행됐다.

  • 다운그레이드 하지 않고 새로 프로젝트를 만들어 강의에서 쓰이는 파일을 복사해왔다.

  • 잘 실행 됨

  • 다른 방법
    -> 강의 프로젝트 파일 그대로 열고 package.json만 내 폴더에 있는 걸로 교체하고 npm i

    ---

알게 된 것

• 동적 경로 지정하기
  • 파일 이름 - [식별자].js
  • 폴더 이름을 [식별자]로 하고 index.js 만들어도 됨

---

알게 된 것

• 다른 팀원이 프로젝트 코드 설명해주시면서 알게 된 useState 콜백함수
  • 초기값을 한 번만 실행하는 lazy initialization 작업
    -> 성능 최적화
  • 초기값 값이나 함수 자체가 아닌 콜백함수 넣어주기
    ex.const [count, setCount] = useState(() => initialData())
  • 리렌더링이 되더라도 초기 useState에 전달된 함수는 재실행되지 않아 초기값의 크기가 클 수록 유용하다.
  • 오직 함수를 실행할 때(ex. 버튼을 누를 때)만 초기값을 불러온다.