## 🔑 키워드

- OAuth
- [생활코딩 OAuth 강의](https://opentutorials.org/course/3405)
- OAuth 2.0에서의 인증 방법, accessToken, refreshToken API 사용 등에 관한 전반적인 개념을 학습할 수 있습니다.

- TypeScript
- ts는 유지보수에서 매우 유리한 편이기에 현업에서는 왠만하면 ts를 사용할 것 같네요. 타입에러나 undefined 참조를 코드 단에서 막을 수 있기 때문이죠. 개인적으로 ts가 유용하다고 생각하는 부분은 component props 인터페이스와 API response 인터페이스를 정의하여 사용할 때 신뢰성 높은 코드를 작성할 수 있다는 것입니다. 그리고 참고로 대부분의 ts 프로젝트에서 any 사용을 막고 있습니다. 정말 필요한 경우 unkown이라는 타입을 사용합니다.

- FE Deploy
- 프론트엔드와 백엔드는 분리하는게 좋다.
- Ngnix 내부 기능 중 alias 를 통해 분기처리 -> Proxy 서버로도 사용이 가능하다.
- 프론트 서버를 분리하지 않고, 백엔드, 프론트 통합 서버로 배포(WAS)
- 프론트(웹서버)는 nginx로, 백엔드 서버는 express 서버
- FE 에서 Proxy 설정하는 방법 키워드 : setupProxy (배포 때는 해보지 않았음)
- PM2 : SinglePage Option https://www.loginradius.com/blog/async/react-app-deployment/
- Firebase

- Session/토큰 기반 인증
- express-session + express-mysql-session!
- mysql에 sessions 테이블이 생기고 여기에 해싱된 세션아이디가 저장됨.
- expire time이 되면 자동으로 세션이 소거된다.
- 클라이언트로 session id가 가면 쿠키에 저장하고, api 요청 시 인증이 필요한 경우 session id를 같이 보낸다.
- sessionStorage를 이용해 저장
- 토큰 기반 인증(JWT)
- 백엔드 JWT 토큰 응답(JWT_KEY 사용자 정보를 암호화) -> 전달받은 토큰을 클라이언트에 쿠키에 저장 -> 권한이 필요한 요청의 경우 헤더에 토큰을 담아 요청.
- 별도의 인증 저장소가 필요 없음.
- MSA 환경에서 중앙 집중식 인증 서버와 데이터베이스에 의존하지 않음.

- MVC Pattern
- 김정환님 블로그 [<링크>](https://jeonghwan-kim.github.io/series/2021/04/05/lecture-react-ready.html)

- 학습 태도와 방식
- 전체적으로 돌아가는지를 블로그를 통해 학습하고, 이후에 Custom 을 할 때 공식문서를 좀 더 읽어보면서 학습내용을 정리
- 구글링을 영어로 할 때 : how to, not working, tutorials 키워드를 포함해서 구글링

- 프로젝트 설계/계획
- 프로젝트에서 집중할 부분, 어려운 부분을 정해두고, 아키텍처를 작성. (API명세서, ERD 작성, 컴포넌트 설계)
- 이미 학습한 개념에 대한 설계는 쉽지만, 모르는 개념에 대한 설계는 감을 잡기 어려움. 모르는 개념의 경우 학습 및 코드를 작성하며 같이 설계

- 함수형 프로그래밍
- 유인동님 인프런 강의 [<링크>](https://www.inflearn.com/course/functional-es6)

## ❓ 궁금한 점
- ~~세션 관리는 어떻게 하시는지..? (passport?)~~
- [webStorage](https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90)

- ~~라우터 구현방식~~

- ~~`infinite scroll` 구현하신분 있나요~~
- [Observer API](https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API)

- ~~함수형 프로그래밍 적용 실태(?)~~

- 다른 컴포넌트에 영향을 주지 않는 상태를 로컬 state로 관리하는 부분에 대해
예를 들어 상품목록 리스트는 디비에서 받아온 다음에 어디에서 관리하는지...
- 전역 Store 자체의 사용을 줄여보는 것도 좋다.
- ContainerPresenter 패턴
- 상품목록 리스트정도는 전역 Store에 저장해도 괜찮지 않을까
- MVC 패턴 vs FLUX 패턴
- MVC 패턴의 구조도
- FLUX 패턴의 구조도

- 다른 분들은 변수명 지을 때 어떤 방식으로 지으시나요
<img width="450" src="https://i.imgur.com/OZl0oeu.jpg">
- 길어지더라도 다 쓰는 편
- 유명한 약어 사용 (button -> btn)
- 함수: 사용되는 곳, 기능
- 핸들러 함수 컨벤션을 정해두신 것 같네요. 저도 학생때는 주석다는게 좋은 건줄 알았는데, 실무에서는 불필요한 주석은 최대한 제거해주는게 가독성 면에서 좋습니다.
- 보통 event handler는 `handle{타켓명}{이벤트명}` 또는 `on{이벤트명}{타겟명}` 으로 짓는 편입니다.

- 휴식이 없는 자는 브레이크가 없는 자동차와 같다....🚗

- EventDelegation 할 때 target 으로 중간 단계의 DOM 에서 catch 하고 싶어요!
- e.target.closest(selector) 활용

- ~~프론트, 백엔드 서버 분리할 경우 github 로그인 페이지 리다이렉션 어떻게 하셨나요?~~

- 애니메이션 어떤식으로 구현하셨는지 궁금해요!
- transition, transform(x 포인터 위치를 변경해서 슬라이드 효과)
- @keyframe, animation, z-index + 'animationend' 이벤트

- 프론트엔드에서 사용하신 설계(아키텍쳐) 패턴에 대한 고민이 많았는데 다들 어떤 방식을 사용하셨나요?? EX) MVC, Component, MVVM, MVP, Flux 등..
- MVC vs MVVM
어떤 패턴을 사용하던 Model과 View의 결합도를 낮추는 것이 MV* 패턴의 궁극적인 목적이다.
*는 어떤 방식으로 구현이 될지는 경우에 따라 다르기에 Controller, ViewModel, Presenter는 개발이 끝나고 정의해봅시다...

- ~~MVC Pattern 을 적용하셨을 때, 각각의 관계를 형성하는 부분~~

- 로그인 및 회원 가입 validation 어떻게 진행 하셨나요?
- sequelize validate 기능 이용 -> 중복체크 및 정규표현식 이용한 검증
- hooks(라이프 사이클 이벤트)로 beforeCreate() 콜백함수에 password 암호화 할 수 있음.

- CSS 에서 Background-image URL 로 넣는 방법
- file-loader는 구식 기술
- asset/resource 사용
- [file-loader, url-loader 통합 세팅 문서 링크](https://webpack.kr/guides/asset-modules/)

- github issue 등록 기준, MileStone 등록 기준
- issue 등록: 컴포넌트 기준 - todo 리스트 생성 후 해당 리스트에 맞춰 커밋
- MileStone 등록 : 주 단위

- Promise 객체의 체이닝 프로미스를 구현할 때 체이닝을 어떤 식으로 구현하셨나요?
-