-
Notifications
You must be signed in to change notification settings - Fork 5
3주차 회의록
blogSoul edited this page Nov 15, 2021
·
2 revisions
See 2021-11-08 note
박주원님 : 롤드컵 우승 못해서 너무 충격적입니다. 2차 백신 부작용이 많이 없어서 다행입니다. 설민욱님 : 하루종일 잠을 잤던 기억이 있습니다. 이충헌님 : 살...려...줘 조진성님 : suspense 리엑트 어렵다...ㅠㅠ
- restapi 처럼 리소스를 가지고 오는 주소를 변경하기
- db table 정리하기
- 1주차 task 합치기
See 2021-11-09 note
박주원님 : 오랜만에 밖에 나갔다가 추위에 깜짝 놀랐습니다.
설민욱님 : 디버깅 도구 때문에 큰 버그를 찾았습니다.
이충헌님 : 살...려...줘
조진성님 : 귤이 벌써 나와서 먹었는데, 맛있었습니다.
- 초대 링크를 만들어야 하는지 논의
- sse / swr / 리엑트 쿼리 공부 필요
- theme을 써야하는건지
- 오늘 오후부로 1주차 task 마무리됨
- 구현하고 싶은 기능 설정 및 공부하기
- 내가 맡은 story와 feature를 구글 시트에서 정하고 이슈 등록하기(이슈 등록은 내일하셔도 됩니다.)
- 지금 등록되어있는 이슈 확인하고 구현 완료한 것은 close하기
- 오늘 merge가 완료된 dev 기준으로 버그 및 개선 사항에 대해 구현을 하거나 앞으로 해야 하는 feature 구현(공부하셔도 무방합니다!)
- 기업네트워킹 채널에서 공유하는 시트 보시고 설명회 신청하기
- 2주차 구현해야 하는 feature에 대한 우선순위 정하기
- 각자 맡을 story 파트 정하기
- 개발개발개발!!
- 내일 모레 오후 배포가 진행되오니 참고하시면 감사하겠습니다!
See 2021-11-10 note
박주원님 : 주무시고 있는 거 같습니다 ...
설민욱님 : 어제 에디터 테마를 바꿨습니다.
이충헌님 : 어제 산책다녀오려 했는데 생각보다 바빠서 못갔어요ㅠㅠ
조진성님 : 어제 운동하러 나갔는데, 춥더라고요.
- PR merge하기
- feature 우선순위 정하기
See 2021-11-11 note
박주원님 : React가 너무 힘들게 했습니다.
설민욱님 : Passport 쓰면서 너무 불편하다는 느낌을 받았습니다.
이충헌님 : UseRef가 힘들었습니다.
조진성님 : 어제 너무 늦게 잤습니다.
- 직접 구현하면 구현하고 라이브러리는 꼭 필요한 경우가 아니라면 안 써야 할 것 같습니다.
- css
+,:before,:after, wizwig 에디터를 참고해서 만들어보니 구현의 실마리를 잡았습니다. - useRef, innerRef에 대한 공부를 해야 할 것 같습니다.
* 주원님의 고민 사항 : 스크롤의 포커스를 고정시키고 싶은데 어떻게 해야 하나요?
스크롤 위치를 명시적으로 옮겨야 합니다.
요즘 모든 스크롤은 intersection observer api을 사용합니다.
모든 브라우저를 커버하려면 ployfill을 사용할 수 있습니다.
인터넷 익스플로어는 버리는 추세입니다. (거의 대부분 안되는 것 같습니다.)
* 진성님의 고민 사항 : 입력바를 위로 늘리는 방법은 어떻게 해야 하나요?
실제 slack에서 크기가 고정되어 있을 수도 있습니다. 크기가 100vh로 되어 있을 수 있습니다.
글 있는 부분이 사이즈가 줄어드는 것을 보면 이렇게 되는 것 같습니다.
실제 slack에서 디바운드나 스로틀링이 되어 있진 않은거 같습니다.
* 자동 완성 부분 코드에 대한 코멘트
ChannelMembers에 filter가 있지 않고 필터 리스트나 MemberTemplate에 filter에 넣어주는 것이 더 좋다고 생각합니다
`관심사 분리에 대한 이슈` : ChannelMembers라는 클래스가 이렇게 들어가야 하나 문제입니다.
AutoComplete를 MemberTemplate 안에 넣어두는 것도 좋은 거 같습니다.
useAutoComplete을 커스텀 훅으로 만들면 좋을 것 같습니다.
* 만약 useAutoComplete에 대한 훅을 만들면 이벤트는 어디다가 넣어두는 것이 좋을까요?
Hook에 넣어두면 좋을 것 같습니다
자동완성 hook과 스크롤 관련 hook을 따로 만들면 좋을 것 같습니다.
* 1000개에서 10000개 정도 되는 emoji를 저장해도 되나요?
좋진 않은 거 같습니다. 서버에서 관리하는 것이 좋다고 생각합니다.
네트워크 비용은 간단해서 좋을 것 같습니다.
* 파일 구조 관련 코멘트
IconButton, ImageButton을 atom 단위의 button으로 통일해두면 좋을 것 같습니다.
extends 스타일로 통합하기
molecules : 아톰 몇 개 합친 것들
패턴과 컨벤션은 나쁘지 않게 사용하기! dry code 쓰지 말자!
재사용성을 높이는 것에 너무 고민 안하셨으면 좋겠습니다.
팀원 네명에서 쓰이기 편한게 하는 것이 제일 중요합니다.
아토믹 디자인은 재사용성을 높이는 방법이기도 하지만 상위 컴포넌트 기준으로 하위 컴포넌트에 대해 렌더링을 막아주는 역할도 있습니다.
LabeledInput에 대한 네이밍을 다시 할 필요가 있다고 생각합니다.
라벨을 추가해서 input을 만든 modecules가 있었으면 해주면 좋습니다.
Hook을 꼭 전역으로 안 해도 됩니다.
한 페이지에서 여러 번 사용되는 것들도 Hook으로 지정 가능합니다.
페이지에서만 사용하면 좋습니다.
컴포넌트와 로직을 분리하는 작업을 하기 위해 Hook을 사용해 보는 것을 추천합니다.
* 페이지네이션 코드에 대한 코멘트
offset이나 커서 기반 중 offset 기반으로 우선적으로 구현했고 나중에 커서 좋을 것 같습니다.
sql문 관련 string에서 like을 사용하는 것보다 풀텍스트 인덱스(fulltext)을 사용하는 것이 좋을 것 같습니다.
elasticsearch search를 사용하는 것도 하나의 방법입니다.
like을 사용하면 파라미터 변수에 대한 sql 인젝션이 일어날 수 있다는 생각이 듭니다.
규모가 커지면 많이 커서 방식으로 구현해야 합니다.
페이지네이션을 하나의 컴포넌트로 만들 수 있도록 만들면 좋을 것 같습니다.
페이지네이션에 대한 state가 recoil이 아니라 localstate로 가지고 있으면 좋을 것 같습니다.
페이지네이션이 위 아래로 바뀌는 경우가 많으니 고려해볼 필요가 있다고 생각합니다.
페이지네이션에서 프라이빗에 대한 관리 차원이 필요합니다.
Ex) 해당 페이지를 검색해 다른 사람에게 공유하면 그 사람은 랜덤한 페이지네이션에 대한 결과값을 가져서 공유한 내용이 다를 수 있습니다.
spa가 리프레시가 되는 경우가 많아서 한번 고려해보세요.
테마 변경 속성은 은 리코일로 하면 좋을 것 같습니다.
* 전역 상태 관리를 어떻게 할지?
slack 같은 경우도 spa 자체만으로 전역 상태 관리가 힘들기 때문에 spa만으로 전역관리는 힘듭니다.
검색엔진 최적화(SEO)를 사용하긴 하지만 한번 알아보는 것이 좋을 것 같습니다.
load될 때 미리 백엔드에서 유저 정보를 서버에 요청해 클라이언트에서 미리 가지고 있기도 합니다.
1. sse로 서버 사이드 렌더링을 합니다.
2. App.ts에서 로그인 정보를 conditional하게 만듭니다.
3. session이나 localsession에 토큰을 저장해서 로그인했다고 가정해서 검증하는 것으로 합니다.
4. velog는 ssr을 사용하는 것으로 추측됩니다. velog는 localStorage에 유저 정보를 저장해둡니다.
5. 스타벅스는 토큰을 이용해 매번 인증해서 로그인 여부를 확인하기 때문에 플리커링이 일어나고 있는 것으로 추측됩니다.
순수 spa로 전역상태를 관리하는건 어렵습니다.
토큰 방식으로 로그인 여부를 판단하는 것이 제일 좋다고 합니다.
session이 제일 간단하다고 생각합니다.
sessiontoken으로 관리하는 것이 보안에 문제점이 있을 수 있습니다.
하지만 개인정보(Ex. 전화번호, 주소)에 대한 것을 다루는 것이 아니라면 상관없다고 생각합니다.
accesstoken을 가지고 있는 것으로 로그인 여부를 판단하는 것도 하나의 방법입니다.
accesstoken 10분으로 하고 refreshtoken을 3시간으로 만들어 관리하기도 합니다.
session이 제일 간편합니다.
cookie로 관리하고 sessionId를 sessionStorage나 localStorage에 넣어두어도 된다고 생각합니다.
정보에 있는 네트워킹에 대해 생각해보시면 좋을 것 같습니다.
ssr에 대해 알아보면 방향을 잡을 때 좋을 것 같습니다.
seu 최적화에 대해 알아보면 좋을 것 같습니다.
사용자 정보를 수정하는 것(ex.마이페이지)는 무조건 서버에 요청을 보내 확인해야 합니다.
플리쿼링 현상이 일어날 수 있는데, 그것을 고려해서 만들면 좋을 것 같습니다.
spa구조로 되어 있는 App.ts를 이용해서 우선적으로 서버에 데이터를 가지고 올 수 있도록 만들 수 있습니다.
useuser 관련 Hook을 이용해서 전역 상태를 관리할 수도 있습니다.
useauth를 확인할 수 있는 방법을 여러가지가 있으니 한번 확인해보시면 좋을 거 같습니다.
6. 마운트될 때만 리렌더링 할 수 있도록 만들어야 합니다.
마운트될 때가 아니라 다른 곳에 서버 요청을 보내면 dependency가 일어날 수 있습니다.
setstate에 함수를 넣어서 구현하는 것도 좋은 방법입니다.
react 쓰는 대기업 페이지를 확인할 수 있습니다.
완벽한 spa는 없다고 보는 것이 무방합니다.
커스텀 훅에 대해 준비하는 것이 좋습니다. (커스텀 훅이 대세이다보니...)
디자인은 꼭 수정할 수 있도록 합니다
material UI를 사용해서 디자인을 구현해도 상관없습니다.See 2021-11-12 note
박주원님 : 생각보다 늦게 가서 힘든 거 같습니다. 자동완성을 했는데 좀더 해야 하는거 같습니다.
설민욱님 : 이번 주는 시행착오가 많았는데 다음주가 기대됩니다.
이충헌님 : 그래도 지치지 않고 달려와서 좋았습니다.
조진성님 : 무야호~
Status 404 :
https://developer.mozilla.org/ko/docs/Web/HTTP/Status/400
커서 기반 페이지네이션 구현 :
react context api :
https://kyounghwan01.github.io/blog/React/react-context-api/#context-api%E1%84%85%E1%85%A1%E1%86%AB
컨텍트에디터블
우아한 기술 블로그 채팅 :