리팩터링 1주차 안건

[punchdrunkard]

리팩토링 1주차 안건

안건을 코멘트로 달아주세요!

[punchdrunkard]

next/image 사용하기

LightHouse의 분석 결과, 상당 수의 이미지를 next/image 를 사용하여 최적화 할 수 있습니다.
또한 도메인 역시 공공 API에서 제공하는 도메인과, 서버 측에서 제공하는 도메인으로 한정되어 있어서 충분히 사용할 수 있다고 느껴집니다.
따라서 우선 next.config.js 에 domain을 추가하고 #223 #107
각자 사용하는 쪽에서 점진적으로 antd/image를 next/image로 변경해보심은 어떠실까요?

[Hyevvy]

케이! 처음에 next/Image를 썼다가 antd 의 Image 컴포넌트가 최적화를 해준다고 해서 사용했던걸로 기억하고 있습니다!
아니었던가용 ?? ?

[gitul0515]

우선, Next/Image를 사용함으로써 아래의 이점들을 구체적으로 얻을 수 있습니다.

• 향상된 성능: 언제나 디바이스 사이즈에 맞게 최적화된 이미지를 제공
• 시각적 안정감: CLS(Cumulative Layout Shift)를 방지
• 빠른 페이지 로드:  이미지가 뷰포트에 들어왔을 경우만 로드되기 때문에 초기 로드 속도가 빠름
• 유연한 에셋 관리: 외부에 저장되어 있는 이미지까지도 리사이징 가능

Antd의 image가 위와 같이 최적화를 해 주지는 못하는 것으로 보입니다.
프로젝트 기간에는 어쩔 수 없이 대안으로 사용했던 것으로 기억나네요 :)

[gitul0515]

ExhibitionCard를 next/Image로 바꾸는 것은 제가 하겠습니다. @Hyevvy
#225

[gitul0515]

개발 환경과 배포 환경이 다르다. 확인해볼 것

[punchdrunkard]

로그아웃 시 헤더의 UI 관련

#211

[gitul0515]

어떤 부분인가요?
서버와 클라이언트의 로그인 상태가 맞지 않으면, 에러가 발생함은 확인했습니다.
고치도록 하겠습니다.

[punchdrunkard]

이 논의 내용입니다!

[punchdrunkard]

실제로 사용해본 결과, 이전 방식이 UX가 더 낫다는 체감을 느낌.
따라서 로그아웃시에는 로그인 버튼을 그대로 보여주는 방식으로 롤백

[gitul0515]

userAtom에 명시적으로 로그인 상태 속성 추가

userAtom에 isLoggedin이라는 boolean 속성을 추가할 것을 제안합니다.
유저의 로그인 여부를 true/false로 나타냅니다.
현재는 userId의 존재 여부로 이를 판단하고 있는데, 더 명확히하면 좋을 것 같아 제안합니다.

[gitul0515]

공공이 추가

[gitul0515]

기존과는 토큰을 저장하는 방식이 달라졌음

[punchdrunkard]

변경된 이유

• 초기에 로그인 상태를 저장하지 말자고 했던 이유는 전역 상태에 토큰만 저장하여서, 이 토큰만을 통하여 유저 정보를 이용하는 것, 즉 전역적으로 관리해야할 속성을 토큰 정보(only 유저의 로그인 정보)로만 생각하였음.
• 그러나, 현재 전역적으로 관리해야 할 유저의 정보가 커짐을 인지하고, 실제로도 내 정보 조회 API를 사용함으로써 현재는 전역적으로 관리해야 할 정보가 유저의 정보 그 자체로 변경됨.
• 따라서 구현에서도, 현재 쿠키에 토큰이 있다면 내 정보를 받아오는 API를 사용하여, 그 API에서 받은 정보를 통하여 유저의 상태를 전역적으로 저장.

즉, 정리하면 초반에 제가 말했던 유저의 정보 관점이 달라졌다고 생각합니다!
(초반부터 큰 그림 보시던 혜삐와 공공에게 박수를..)

[gitul0515]

굿

[gitul0515]

고차컴포넌트 관련

고차컴포넌트(HOC)를 어느 폴더에 둘 지 논의가 필요합니다.
일단은 루트에 HOC 폴더를 생성해서 넣어두었습니다.
#230

[gitul0515]

커스텀훅으로 변경.
고차 컴포넌트는 함수형 컴포넌트와는 맞지 않다. 또한, 구조가 복잡해질 수 있다.

[punchdrunkard]

관련 자료

• 리액트 훅이 도입된 계기에 대해 잘 설명해주는 영상
• 리액트 공식 문서
  • Hook이 고차 컴포넌트를 대체합니까?](https://ko.reactjs.org/docs/hooks-faq.html#do-hooks-replace-render-props-and-higher-order-components)

[gitul0515]

배포 관련 건의

1. main 브랜치를 통한 배포
2. 버전 관리 및 문서화

참고: https://github.com/prgrms-fe-devcourse/FEDC2_GreenButler_Off/releases/tag/v1.2.1

[gitul0515]

• develop 브랜치에서 배포 후, 버그가 없으면 main 브랜치로 배포
• main 브랜치 배포는 공공이 맡을 것
• 일주일 단위로 main 브랜치 배포

[gitul0515]

버전 관리 및 문서화는 그린이 맡을 것

[gitul0515]

SWR 기술 공유 (by 공공)

[gitul0515]

https://luxurious-grain-109.notion.site/SWR-e621c98e827d458da226665357fcf17c

[gitul0515]

다가오는 전시회 관리 문제

[gitul0515]

제리에게 DB 업데이트를 요청

[gitul0515]

전시회 관리자 API 사용 - 샤크에게 물어보기

[gitul0515]

(질문) 브랜치에 들어가서 직접 실행해본다는 것

[punchdrunkard]

git을 사용하는 경우, git switch를 통하여 해당 브렌치로 이동 후 개발 서버 실행

혹은

vercel의 PR 배포로 확인 (현재 cors 이슈로 사용 불가능)

[gitul0515]

preview가 안 되고 있어 개발에 불편함이 있음 (빈푸에게 문의 후 기다리는 중)

[punchdrunkard]

CSR 사용시 사용자에게 명시적인 로딩 처리

antd에서 제공하는 Spin 또는 Skeleton 사용

[gitul0515]

atoms에 Spinner 컴포넌트를 만들어두었습니다.

[punchdrunkard]

멘토님 피드백 관련

[gitul0515]

헷갈리는 내용들은 멘토님께 다시 여쭤보기