211105 회의록

피어세션 회의록

CRA로 하셨나요?

네 그거로 했습니다

토글러 어떻게 하셨나요

구글에서 긁어와서 css 수정했습니다..

...

변경에 유연한 컴포넌트 설계

woff2 폰트 → 가장 크기가 적어서

bundle analyzer plugin으로 번들 사이즈를 측정

리액트 lazy → 필요할 때 컴포넌트를 로드해서 사용

lighthouse를 써서 성능 지표를 측정하려 함

점수가 꽤 낮음

참고자료: https://web.dev/uses-responsive-images/

사실 안낮음: 모바일 말고 데스크탑 모드로 측정

바벨 세팅

babel env

기본적인 플러그인 적용, target 브라우저를 설정 → env가 알아서 찾아옴

babel react

리액트 개발환경 구성
jsx 같은 리액트 문법들을 지원하기 위해 사용

babel typescript

타입스크립트 개발환경
webpack에서 ts-loader를 사용하지 않고 babel-loader만으로 구성
바벨7버전부터 사용가능한 preset
polyfill을 지원하기 위해 사용
ts-loader 는 타입체킹때문에 컴파일 속도가 느림
ts-loader 는 Hot Module Replacement를 지원하지 않는다고 공식 문서에서 명시함

babel proposal class properties

proposal 단계의 클래스 기능 사용가능

서대문 코딩클럽팀

노션에서 프로젝트보드로 현재상태 표시 (휴식, 작업, 등등) 50분은 개발하고 10분은 무조건 쉬자

개인의 자유에 맡김

하루에 하나씩 자신의 TMI를 공개해야함

스크럼때 PR 리뷰

점심먹고 개발하다가 3시부터 4시에는 개발에서 손 떼고 산책을 나갔다 와야함

7시가 되면 코어타임 종료, 줌은 나가도 됨

PR을 7시까지 올리는건 부담 → 21시 or 22시까지 PR 올려야함

22시부터는 PR에 코드리뷰 남길 수 있도록

주마다 스크럼 마스터를 둠 → 역할: 결정할거 사다리타기맨

금지어도 정해둠: 벌칙같은건 안정해둠 → '다좋아요', '아무거나'

yarn

yarn workspace 이번에 처음알앗음
- yarn 쓰면 빠르더라구요 해서 쓰던중
타입스크립트, prettier, eslint 도입
리액트 리코일, cryptojs, localstorage
- Private Route, Public Route
  - 처음에 로그인이 필요한 서비스
  - 페이지마다 로그인 상태를 검증해야함
  - 어디서 처리할까 하다가 라우터엣 ㅓ처리해주려고 만듦
  - public router: 로그인 안한 사람이 접근가능
  - private router: 로그인이 필요한 페이지
  - jwt를 로컬스토리지에 저장
    - 무슨무슨 로직
    - fetchapi를 객체로 만들어둠
    - 헤더랑 이런거도 별도 파일로 분리
    - 로그인에 성공했을때 리코일에 유저정보를 저장
    - 프로필 정보를 사용할때 쓰려고 store 구조에 저장
    - jwt 토큰이 있으면 어떤 컴포넌트, 없으면 렌더링하지않고 로그인 페이지로 리다이렉트 시켜줌
    - 로그인에 실패했을때 쿠키, localstorage에서 정보를 제거함
- 암호화 flow
  - https://github.com/boostcampwm-2021/WEB29-BoostTeams/wiki/보안-Flow
- react portal
  - 부모 dom을 넘어서 자식으로 붙여주는 기능
  - modal 같은데 많이 사용함
  - 새 모임 외에 다른 모달이 생긴다면 이때 사용할 듯 (ex: detail, popup message)
- typeorm
- passport, jwt
- 배포할때 nginx, https로 배포함
질문
- 상태관리 라이브러리로 Recoil을 쓰신 이유가 있을까요?
  - 대안은 리덕스가 있을텐데 리코일이 사용하기도 편하고, 리액트 훅에 가까워서 사용했습니다.
- Crypto JS
  - cryptojs 안에 있는 암호화 알고리즘이 많음
  - AES.encrypt 함수를 이용해 password, key를 받아 암호화 진행
  - bcrypt로 암호화하는 예제들이 모두 프론트에서 백엔드로 넘길땐 안하고 보통 백엔드에서 데이터베이스에 저장할때만 암호화함
  - payload가 다 보이길래 이거도 암호화를 시켜야겠다는 생각으로 도입
  - AES는 양방향 알고리즘?이다.
  - 비밀번호는 보통 단방향 알고리즘으로 하지 않나? -> Bcrypt가 단방향 암호화 알고리즘으로 암호화하여 데이터베이스에 저장함
- 로컬스토리지는 어디에 쓰이나요?
  - JWT 토큰을 프론트엔드에서 저장할때 사용함
- 개발 진행하실때에는 줌을 계속 켜두시나요?
  - 페어프로그래밍할때만 줌, 아닐땐 줌 접속은 유지, 캠 마이크 오프
- express 작성 시, app을 class로 작성한 이유가 있을까요?
  - 예제를 찾아보다 발견, 구분을 하기 편했음
  - ex: 미들웨어, config, route 메소드 내부에서 구분해서 선언
  - 순서를 구분하기 좋았음
  - App 클래스 인스턴스는 하나만 선언, 다른 인스턴스는 생성하지 않음
  - 객체로 만들어도 되겠군!
  - private 메소드에 감명받아 사용
  - 클래스 문법이 예쁘니깐..
- 사용자의 입력을 받을 때, 입력에 대한 검증은 FE에서 하나요 BE에서 하나요?
  - 프론트에서zk 하고있음
  - 둘다 하려했는데 아직 백엔드에서 못함
  - 정규표현식으로 검증
  - checkEmail, checkname, checkpw 등의 함수로 검증
  - 토스트메시지 라이브러리와 연동해 ui로 피드백
- Oauth가 있는데 자체 로그인을 구현한 이유?
  - 근본을 위해
  - 스프린트에서 소셜 로그인밖에 구현을 안해봐서 해봐야할 것 같았음
- 로고는 직접 만드셨나요?
  - 디자인 인맥으로 처리
- 주말에 개발 하시나요?
  - 안하는게 원칙입니다
- 기술적인 도전주제로 선정하신 게 있을까요?
  - 메인기능으로 생각중인게 팀 보드 기능
  - 피그마에 나와있음
  - 캔버스로 구현할 것 같은데 challenging 할것같음
    - offscreencanvas 써보고 후기좀ㅎㅎㅎ..