[Next.js] 최종발표회 피드백(2024.05.01)

 

pdf로 다운로드 될 수 있다.

prefetch 사용

 

로컬스토리지에 저장, 기반으로 수파베이스에 저장되었음

이메일: sntp 서버를 다루는 경우도 많아서 깊게 파보면 좋다.

 

낙관적인 업데이트: 좋아요 또는 댓글, 티가 바로 난다. 리엑트 19버전 이후로는 훅이 생겼다.

 

뭔말이지조

퀴즈와 게임, 소통 커뮤니티

객관식, 주관식 퀴즈 만들기

배경음악 볼륨 조절

관리자 모드의 게시글 관리

new Audio로 오디오 실행

supabase 크라운? 삭제하는 기능이 있다.

 

이미지 CDN에 저장

연계된 콜이 있으면 마지막 콜이 취소되면 다 취소되는 롤백 전략?

내려오는 것은 interval을 usestate로 생명력 5개

윈도우 높이에 맞게 땅에 닿으면 생명이 1씩 감소하게 구현

 

믿고조

유저데이터를 기반으로 불러오는 데이터가 많아서 하이드레이트 실행

setDataquery 등

express.js로 웹소켓 통신 구현

 

채팅-인벨리데이트: 한번 할때마다 계속 업데이트? 서버 부담.

현재로서는 입력 될때마다 하고있다.

실시간 통신은 비즈니스 로직, UI를 보여주는 구성이 복잡하다. : 복기하면 좋다.

 

앱은 어떻게 개발할 예정? : 막연한 계획이라 아직 아는게 없다. pwa 보다 웹뷰가 훨씬 많이 쓰인다.

 

4명 프론트엔드, 팀장의 코드를 봤다.

코드기반

1. 유틸과 커스텀훅의 차이와 관리

utile: 도메인에 연관되지 않고 사용하는 함수

패칭 등

유틸과 커스텀훅의 차이와 관리가 기준에 대한 내용 중요.

 

2. 텐스텍 쿼리 셀렉트 옵션

useEffect useState등의 상태처리?

enabled 외에 제일 많이 사용한다.

tkdo.eu 블로그 정독을 추천.

서버데이터 -> select -> 그대로 사용하기를 추천한다. : null, undefined를 관리하기 위해서.

 

3. 데이터 요청 처리시 실패 오류처리를 한다면 어떤 flow로 진행되는 것인가?

try-catch 일반적 supabase는 error 반환

suspense, errorboundary 처리 => post 띄우기, 400페이지로, 모달 띄우기.. 케이스에 맞게 정의를 해서 처리할 수 있다.

선언적, 에러처리를 중앙화하고 있다. 중요하다.

 

4. 쿼리키 경로

세부적으로 관리하기 위한 것을 블로그에 있다.

 

5. 컴포넌트에도 주스텐드 유즈스테이트 상태관리

폼은 전역상태로는 안된다. onchange 함수의..?

리엑트 hooks form or form provider 등으로 값을 받아와 실행할 수 있다.

도메인을 묶어서 실행하고 있다.

리엑트 쿼리 setquerydata, getquerydata 클라이언트 상태 치환해서 실행 가능.

생각보다 실무에 가서는 주스탄드를 잘 쓰지 않는다.

서버와 통신하지 않는 데이터는 로컬/세션스토리지에 넣어서 사용.

지역상태로 관리!

---

 

6. next.js를 사용한 이유

리엑트인데 next.js를 왜 사용했는가?

리펙토링 하는 부분을 보완하면 좋을 것 같다.

 

7. 텐스텍 쿼리와 주스텐드

상태관리 라이브러리는 면접 단골 질문이다!

 

8. 채팅기능

supabase realtime. 소켓IO는 백엔드가 없어서.

 

9. vercel을 사용한 이유?

다른걸 몰라서.. 

간편하다. jws..?에서 배포가 일반적이다.

 

10. usequery를 통해 타입스크립트로 데이터 받는다.

 

11. 타입스크립트

장점: 타입이 명확

단점: null, undefined처리

?가 아예 없을 수는 없다.

 

12. 프로젝트를 하는데 어려운 점과 극복하는 방법

 

13. 새로고침 할 때 로딩이 조금 걸린다. 데이터 패칭 부분의 너무 많은 데이터 불러오기

페이지 이동간 로딩->usememo 등

참여중인 미팅룸? 반복??

 

14. 레이지로딩, 샤프 등의 라이브러리 사용을 하는 것도 좋다.

swiper? 를 사용할 수도 있다.

----

 

15. Next.js

상태, 이벤트 핸들러 -> 클라이언트로. 그럼에도 서버 컴포넌트를 잘 쓰는 곳이 있다.

로딩속도가 빠르다는게 서버사이드의 가장 큰 이점이다. 서버사이드 랜더링/서버컴포넌트는 다르다.

 

16. 백엔드를 다루면서 어려웠던 접

sql인데 관계형 데이터베이스가 생소해서 어려웠었다. 트리거 등. db 설계가 어려웠다.

 

17. 코드: 커스텀훅과 일반 유틸함수와 차이점

useState, useEffect가 들어가야 하는것은 커스텀훅으로 사용.

그 외에는 유틸로 사용했다.

 

18. 카톡을 요청하면 요청이 많이 들어간다.

개발자 도구의 네트워크 탭에서 : 요청이 돈이다. 요청 수를 줄이는 것이 중요하다.

disabled 처리 등이 있으면 좋겠다. or setquerydata로 요청을 줄일 수 있다.

 

19. mutation function 으로 업데이트를 하는데, 서버에 요청을 2번 하는가?

업데이트, 무효화 => invalidation이면 2번 가는 것이다.

 

20. 리엑트에 대해서는 공부를 철저히 하세요!

 

• tanstak-query select 옵션 쓰기
• 데이터 처리 때 요청 실패시 에러처리 : error Boundary 공부 추천
• react hooks form? form provider? 폼 라이브러리
• set querydata, get querydata 클라이언트 상태로 치환해서 사용? query parameter
• Next.js 사용이유
• Recoli은 개발자가 퇴사하고 업데이트가 몇년째 되지않아 사장될 수 있음
• vercel 사용 이유
• 타입스크립트 장점
• 어려웠던 점 (이력서에도 작성)
• 성능 최적화 (너무 많은 데이터를 한번에 불러오고 있어서) useMemo 사용해보기
• sharp 라이브러리?
•  
• Next.js 사용했을 때 아쉬웠던 점
• SSR과 서버 컴포넌트의 개념? 차이?
• 커스텀훅 vs 유틸함수의 차이
• 쿼리키 상수로 따로 처리한 부분 good
• 스쳐간 인연 리스트 서버 요청이 많이 가는 부분 확인
• 개발자도구 네트워크 탭 들어가서 서버 요청 확인
• 게시글 작성 버튼 중복요청막기 debounce 처리 or 클릭시 disable 처리 등
• set querydata, get querydata
• invalidate는 요청2번 set querydata는 요청1번
• 내 파트가 아닌 부분의 코드 이해도 높이기
• 리액트 지식