<재민님 질의응답>
- 만약 api 응답에서 필드가 빠지거나 오타가 생기면
- Vue에서 받을 props 모델과 API Response를 분리하라. class로 만들면 validation하기 좋음.
- 롤링 페이퍼는 2년 전 쯤 만든 사이드 프로젝트. 트위터에서 바이럴이 돼서 MAU가 팍 친 적이 있었다.
- Q. 이런 프로젝트처럼 프로젝트를 알리고 트래픽을 만들려면 어떻게 해야?
- A. 트위터, disquiet, geek news을 적극 활용하시라.
- Q. 직접 올리신 건가?
- A. yes
- 조재훈 Q. 사이드 프로젝트를 왜 했는가?
- A. 처음부터 제품을 만든 건 아니어서 계기라기 보단, 시즌을 타는 제품을 만들어서 바이럴을 태우고 유저 반응을 보자는 목적으로 개발했음.
- 김재민 Q. SOPT는 프로젝트는 필수는 아닌가?
- A. 프로젝트가 커리큘럼에 있지만 필수는 아니다.
- 멘토님 Q. 프로젝트를 하는 게 불만 요소인 이유?
- A. 피로도가 좀 있는 것 같았다. 바쁘니까 열심히 하기도 애매하지는 상황이 있었다.
<윤서님 질의응답>
- Redux, recoil도 context API가 해결하려는 문제를 해결하긴 한다.
- 의존성을 최소화하는 게 좋다고 생각한다.
- library가 black box라고 안 느껴지는 선에서 쓰는 게 좋다고 생각한다. context는 redux, recoil보다 동작을 알면서 쓸 수 있기 때문에 context를 쓸 수 있을 땐 context를 사용한다.
- redux는 framework 상관 없이 쓸 수 있다.
- recoil은 react version mobx 느낌이어서 re-render를 최소화 시켜주는 기능 등은 좋지만 선호하지는 않는다. context를 쓰는 게 좋다고 생각한다.
- 백윤서 Q. recoil을 싫어하는 이유?
- 멘토님 A. (experimental이어서 구현이 언제든 바뀔 수 있어서 내부 구현을 잘 안 본 상태임) 기존 라이브러리로 해결한 문제를 왜 새로 나온 recoil을 굳이 써서 해결해야 하는지 공감하지 못 했음. recoil이 더 잘 해결할 수 있는 부분은 아직 몰라서 정확히 답변하긴 어렵다.
- 백윤서 Q. p4의 뜻?
A. pn 룰 (뱅크 샐러드)가 있음. p 뒤에 우선 순위 (낮을 수록 중요)를 붙여 표시. 잘 쓰고 있다.
<재준님 질의응답>
A. 컨벤션으로 가져갈 만한 것:
- 브랜치 전략
- 코드 컨벤션 (정하려면 정할 수 있는 게 많아서 적정 수준에서, e.g. interface prefix 규칙, 기존 eslint preset에서 무엇을 제외할지, 코드 리뷰 시 흔히 지적이 나오는 것, 네이밍 규칙과 같이 linter가 해결해주지 않는 것, 함수의 위치, )
- 일단 해보고 발견되는 걸 추가하면 된다.
- 보면서 생각나는 게 있으면 코멘트를 드리겠다.
========코드 리뷰 시작========
====<재훈님>====
- 익명 함수는 디버깅에서 불리함. (anonymous function)보다는 이름이 낫다.
- 함수가 하는 역할이 단순한 경우 함수로 만들기보단 inline하는 게 낫다.
- axios는 config 객체에 params로 전달하면 queryString으로 만들어주니 그렇게 쓰는 게 더 낫다.
- :value + @input = :v-model
- (isInit 부분 data flow 이해 못 했어요)
- 결과 페이지를 별도로 만들기 (이해 못 했음)
- 전역 스토어에 컴포넌트의 지역 상태에 들어간 듯하다. 지역 상태를 우선 고려하셨는지 여쭤본 것. 전역 스토어에 상태를 보관하는 것은 최후의 선택지로 놓는 게 좋다.
- sibiling에서 필요하면 부모
- nested child에서 필요하면 합성 (?)
- 그래도 안 되면 전역
=====<재준님>=====
- z-index=9를 회사에서 어떻게 관리하는가? 1,000. dialog 등에서 1,000을 쓰고 있음.
- imdb server 오류면 500을 내려줘야 한다 (잘 이해 못 했음)
- findParent 함수로 부모를 찾기보단 선언적으로 vue를 쓰는 방법 (잘 이해 못함..)
====<윤서님>====
- watch는 바뀐 값을 받아올 수 있어서 그 값을 쓰는 게 vue api를 더 잘 활용하는 방법이다.
- window의 keydown 보단 serach input에 keydown을 다는 게 낫다.
- 디테일을 별도의 페이지로 두면 새로 고침 시에도 화면이 유지되므로 좋음.
- search 컴포넌트가 중복 정의되었으므로 추출해서 재사용하자.
- MovieItem이 img의 click listener에게 movie를 주는데 불필요하다.
====<성빈님>====
- requestAnimationFrame 안에서 체크를 해주고 있다. route path에 해당하는 컴포넌트로 현재 컴포넌트를 설정하고, 스크롤을 설정해주는 것. vue에선 nextTick()이 있어서, reactive 값이 반영됨이 보장되므로, rAF보단 nextTick()을 쓰는 게 낫다.
- 폰트를 불러오는 CSS -> SFC 문법을 쓰면 좋다.
- Vue를 더 잘 써보려면? vue-router를 써보고 코드를 까보면서 이해하는 것도 좋을 듯. <Transition>도 써보고 코드 까보면 좋을 듯. 나아가서 vue-loader(SFC compiler)가 어떻게 동작하는지 보면 좋을 듯.
- 예외 처리 - Vue에서도 React처럼 ErrorBoundary를 적용할 수 있는데, async component + onErrorCaptured + <slot>을 사용하면 된다.
- 이벤트 delegation을 활용해서 iteration한 item이 아니라 부모에 달았는데, 그냥 item에 달아도 무방하다. 별 차이가 없다.
====<재민님>====
- useIntersectionObserver가 target이 하드코딩 되어 있는데 props로 받으면 더 좋다.
- (api generic 이해 못 했음)
최종 질문
Q. (??)
- Sentry에서 Error를 따로 모아보고 싶을 때
- SDK의 Error (?)
- global error handling이 기본, 필요 시 local error handling를 수행