---
# System prepended metadata

title: Untitled

---

## 🔑 키워드 

- 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/토큰 기반 인증
    ![](https://i.imgur.com/hfiFTFZ.png)
    - express-session + express-mysql-session!
        - mysql에 sessions 테이블이 생기고 여기에 해싱된 세션아이디가 저장됨.
        - expire time이 되면 자동으로 세션이 소거된다.
        - 클라이언트로 session id가 가면 쿠키에 저장하고, api 요청 시 인증이 필요한 경우 session id를 같이 보낸다. 
        - sessionStorage를 이용해 저장
    - 토큰 기반 인증(JWT)
        ![image](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/5fcaf9e8-b225-45f6-805f-c543072a1a26/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20211001%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20211001T053724Z&X-Amz-Expires=86400&X-Amz-Signature=405410251c43374bb399eb45fdf4b8fc0783398163c7713768620d12ef31d557&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
        - 백엔드 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 패턴의 구조도
        ![MVC패턴](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FALrHe%2FbtqBTMSuHfN%2FZlW9i9ET34e90APgCRChk1%2Fimg.png)
        - FLUX 패턴의 구조도
        ![FLUX패턴](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlmfPW%2FbtqBQnTPgIs%2FZ1jmHHdNcOTNiu93kQ9gMk%2Fimg.png)

- 다른 분들은 변수명 지을 때 어떤 방식으로 지으시나요
    <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 객체의 체이닝 프로미스를 구현할 때 체이닝을 어떤 식으로 구현하셨나요?
    - 