2023.04.23, weekly memoirs

 

weekly memoirs

 

 

 

 

---

 

 

 

✅ 공부

 

 

 

 

 

1. 

 

next.js가 코드 스플리팅을 지원해준다는 이점을 가지고 있는 건 알았지만

mpa, ssr, ssg 에 밀려 코드 스플리팅이 뭔지 파보진 않았었다. 그냥 빌드할 때 cra 과 next.js 가 알아서 해주는 거~

하고 등한시하다, next.js 에 나름 여유가 생겨 이번 기회에 한번 코드 스플리팅 파보았다.

 

import 구문을 사용해

js 코드를 여러개의 chunk로 분리하고 필요한 시점에 로드하여 성능을 최적화하는 기술!

 

여기까지는 오... 좋네... 그렇군 했는데

이게 lazy, suspense 와 연계되어 있는지는 몰랐다.

 

 

lazy 함수가

 

1. import()를 호출하는 함수를 인자로 가진다는 것

2. 이 함수는 react 컴포넌트를 promise를 반환해야하는 점

3. suspense 컴포넌트 하위에서 렌더링 되어야 함

 

을 이용해

 

lazy 컴포넌트가 로드되길 기다리는 동안

 

예비 컨텐츠를 보여줄 수 있게 하는 것이었다

 

 

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

 

이런 깔끔한 방법이 🥹....

너무 신기하고 재미있어서 도전해보았는데

 

 

내 연습 파일에는 데이터가 많지 않아 로딩 화면이 너무 빨리 지나가는 이슈가 생겼다

 

 

👆 ㅎㅎ 빨간 게 로딩화면임

 

 

오...

저건 어쩔 수 없는 건가...

 

그래도 로딩 페이지인데 좀 더 길게 가져가는게 낫지 않나..

근데 코드를 추가해서... 일부러 로딩을 늘릴 필요가 있나..? 

 

하는 고민이 순식간에 스쳤는데

분명 나와 같은 고민을 했던 개발자 선배들이 있을 거라 생각해 열심히 구글링 해보았다

 

아니나 다를까 나와 비슷한 고민을 stackoverFlow 에서 찾았는데

 

작성자는 로딩 페이지를 어떻게 길게 가져가냐는 질문을 올렸었고 (시도는 setTimeout, useEffect로 했으나 실패했던 거 같음)

댓글에는

 

 

굳이 로딩 페이지를 왜 늘려 보여주냐? 이해 안 된다 vs 요즘엔 유저 사용성이 중요해서 고려할 수도 있다

 

로 싸우고 있었다

 

😂

 

 

개인적인 생각으론...

 

로딩페이지는 로딩을 하고 있다는 점을 유저에게 보여주기 위해 페이지를 따로 만들어서 보여주는 것인데

이것도 어쨌든 코드를 추가해야하는 작업이 필요하기 떄문에 데이터가 적어 빠른 페이지라면 굳이 로딩페이지를 사용할 필욘 없다고 느꼈다.

 

suspense 를 적용한 블로그에서도 이런 점을 고려해서 페이지의 성격에 맞춰 작업하라는 조언글도 있었구 🤔

 

 

그래도

 

일부러 로딩페이지 길게 보여주는 건 왠지 어디서든 한번 쓸 수 있을 거 같아 시도해보았다

 

 

1. loading 컴포넌트에 useEffect, setTimeout 적용하기 => 라우터에서 시간 정할 수 있게 prop 넘기게까지 했는데... ^_ㅜ 실패 😂 아예 안 먹는다

2. lazy는 컴포넌트의 promise를 반환해야하니까... 이걸 이용해서 늦출 순 없을까 => promise 타입을 몰라서 고전중...

 

// const Detail: any = lazy(() => {
// 	const promise1 = import('./pages/Detail');
// 	const promise2: Promise<void> = new Promise(() => setTimeout(resolve, 5000));

// 	return Promise.all([promise1, promise2]).then(
// 		([moduleExports]: any) => moduleExports.DetailPagew
// 	);
// });

 

타입 어디에 넣어야하는건지...

chatGPT 선생님 + mdn doc 다 참고 했는데... 

크흑...

 

promise 먼저 이해하고...

적용해야 할 거 같다..

 

 

 

 

 

✅ 코테

 

 

1,2,3 단계에서 정답률 높은 문제를 위주로 풀고 있다.

확실히 코테를 풀면 머리가 돌아가는 느낌이 나서 좋다.

 

 

 

 

 

 

 

✅ 취업

 

 

 

1.

 

이력서와 포트폴리오를 리뉴얼 했다.

기존 노션 링크로 넘겨주던 포트폴리오는 페이지가 느려서 바로 뜨지 않아 고민이었는데

이번에 구성까지 싹 뜯어 고쳐 pdf 파일로 뽑았다. 이틀 정도 고생했는데 작성하면서 내 코드도 다시 뜯어보게 되고, 내가 어디까지 발전했나 가늠할 수 있는 나름 뿌듯한 시간이었다.