소주제 : 메모이제션, CRP( Critical Rendering Path )

1. 메모이제이션

1. count 변수를 let과 state로 각각 선언하고, 각각의 카운트를 증가시키는 버튼과 함수를 만들어 주세요.
2. 각각의 버튼을 클릭하고, 어떤 변수를 증가시켰을 때 다시 랜더링 되는지 console.log를 작성하여 확인해 주세요.
3. 자식 컴포넌트를 하나 만들고 자식 컴포넌트가 랜더링 될 때마다 console.log를 활용하여 표시해 주세요.
4. 부모 컴포넌트가 변경되더라도 자식 컴포넌트가 변경되지 않도록 자식 컴포넌트에 memo를 적용시켜 주세요.
5. 위에서 적용한 내용들이 정말로 잘 반영되는지 Profiler를 활용해 보세요.
6. 부모 컴포넌트에 선언되어 있는 let count가 다시 생성되지 않도록 useMemo를 적용해 주세요.
7. 부모 컴포넌트에 선언되어 있는 함수들이 모두 다시 생성되지 않도록 useCallback을 적용해 주세요.
8. useCallback이 적용된 함수는 state까지 기억을 해버립니다. state를 기억하지 못하도록 prev를 사용하여 기억시켜 주세요.
9. useMemo를 활용하여 함수를 기억하도록 만들 수도 있습니다. 위 8번에서 만든 함수를 useMemo를 사용해서 변경해 보세요.
10. 위에서 만든 state 변경 함수를 JSX 에서 직접 작성하도록 변경해 보세요. (작성은 간편하지만 useCallback을 사용해서 기억할 순 없겠죠?)

소주제 : 이미지 업로드 성능 최적화

1. 이미지 성능 높이기

1. 게시물을 작성하기 위한 작성자, 비밀번호, 제목, 내용 4개의 입력창을 만들어 주세요.
2. 이미지를 올릴 file 태그를 만들어 주세요.
3. file 태그를 활용해 이미지가 변경되면 이미지가 화면에 나타나도록 만들어 보세요. ⇒ 단, 이미지는 빠르게 나타나야 합니다.(미리보기) ⇒ 힌트) FileReader() 객체를 사용해 주세요.
4. [저장하기] 버튼을 만들고, 해당 버튼을 클릭하면, createBoard API를 활용하여 작성자, 비밀번호, 제목, 내용, 이미지URL을 등록해 주세요. ⇒ 단, file이 존재하는 경우 file을 먼저 스토리지에 전송(uploadFile 활용)하고, 전송된 결과로 받은 url과 나머지 데이터들(작성자, 비밀번호, 제목, 내용)을 함께 등록합니다.

2. LazyLoad 와 PreLoad적용하기