With 서대문 코딩 클럽(Web29)

그룹프로젝트 2주차 피어세션 J12

번호	이름	깃헙
J002	강민지	@mminjg
J066	김현민	@rudy3091
J137	윤해수	@haesoo9410
J141	이명재	@LeeMir
J151	이원주	@wonju-dev
J155	이인송	@ingong
J164	이찬호	@ChanHoLee275
J177	장수용	@waterdrag0n

Team42

기술 공유

디자인 시스템을 활용한 재사용가능한 컴포넌트 설계
패키지 매니저로 yarn 을 사용했고, workspace 를 활용하여 공통 모듈 설치
효율적인 모듈 시스템 활용과 코드 스플리팅을 통한 로딩 성능 향상을 위해 웹팩을 사용
웹팩에서 BundleAnalyzerPlugin 을 활용해서 번들 사이즈 측정 및 최적화 진행 예정
웹팩에서 ts-loader을 사용하지않고 타입스크립트도 바벨로만 처리
github actions를 이용한 CI 환경 구성
typeORM을 통한 Entity 작성
nginx를 통한 http 배포

질문

테스트는 어떻게 진행하셨나요?
- ans: 현재 도입 전이지만 E2E test와 유닛 테스트를 할 예정, jest react-testing 라이브러리 사용할 것
CD는 어떻게 하실 예정인가요??
- ans: 서버가 존재하는 release와 main에 배포할 때...
프론트엔드 컴포넌트 구조도 궁금합니다!
- (+ 디자인 패턴을 도입하신 게 있는지 궁금합니다!)
- ans: 공통 컴포넌트 설계 후, 정할 예정! 만들어진 것이 아직 없다...색상과 폰트정보를 미리 설계한 대로 변수화 시켜둠(theme)
팀만의 고유한 재밌는 그라운드 룰이 있을까요?
- ans: 분쟁 조정 룰 , 20분 쉬는시간 후에 최후변론을 듣고 점수를 매긴 카드를 제시하여 가까운 점수를 받은 의견을 choice!
혹시 분업을 하셨다면, 어떤식으로 일을 나누었는지 궁금합니다
- (+ 어떤 깃 브랜치 전략을 쓰고 계신지 궁금합니다!)
- ans: git-flow와 유사 - 브랜치 다이어그램(?)

코멘트

디자인 시스템을 처음에 설계하신게 좋은 것 같습니닷
번들 사이즈를 줄여서 최적화하는 것에 많이 고민하신 게 보입니다 ㄷㄷ
해수님 배경이 인상깊네요 <- ㅋㅋㅋㅋ

서대문 코딩 클럽 (SCC)

기술 공유

Common

yarn
Typescript
Prettier / Eslint

FE

React
- Private Route / Public Route
- Fetch API 함수화
- Portal : Modal 구현
Recoil : 상태 관리
Crypto JS : local loign password 암호화
Local Storage : JWT 관리

BE

TypeORM으로 Entity 구성
Crypto JS + Bcrypt
Passport : Github, Local login
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에서 하나요?
- 프론트에서 하고있음
- 둘다 하려했는데 아직 백엔드에서 못함
- 정규표현식으로 검증
- checkEmail, checkname, checkpw 등의 함수로 검증
- 토스트메시지 라이브러리와 연동해 ui로 피드백
Oauth가 있는데 자체 로그인을 구현한 이유?
- 근본.
로고는 직접 만드셨나요?
- 디자인 인맥으로 처리
주말에 개발 하시나요?
- 안하는게 원칙입니다

코멘트

Private router 신박하네요! 저희도 도입해도 좋을듯
로그인과 관련된 로직에 엄청 신경쓰신게 느껴져요. 백엔드 분들이 많으셔서 그런가..
배포환경 env파일, production 환경 env 파일 분리해도 좋을것 같아요!
토스트 라이브러리가 있군요... 예뻐요.
와 인프런에서 봤던거! 벨로그에도 있어요

기술적인 도전주제?

메인기능으로 생각중인게 팀 보드 기능
피그마에 나와있음
캔버스로 구현할 것 같은데 challenging 할것같음
- offscreencanvas 써보고 후기좀ㅎㅎㅎ..
인피니트 스크롤링
상태관리 라이브러리 마이그레이션
- 중간에 싹 갈아엎을건데 상태관리 라이브러리가 왜 필요한지 몸으로 느끼기 위해
- 그 전까지는 reducer, context 등 사용
리코일, 리덕스 사이에서 고민중
- 리덕스는 reducer 랑 완전 비슷한데 그럼 의미없지않나
- 그래도 많이 쓰이긴 하는데..
렌더링 최적화도 하나?
- lazy, suspense 를 사용해서 코드 스플리팅
- suspense가 컴포넌트 레이지 로딩을 위한 기능인데 리액트 18 알파버전에서는 suspense를 이용한 비동기 로직을 사용가능
- 이때부터는 nextjs를 안써도 리액트만으로 어떻게 해볼수 있지 않을까
nextjs를 사용해보는건 어떨까
- 아 안사요
- 저희도...

자랑타임

왜 이 기술이 필요한가
- 노션에 정리해둠
- 너무 상세하게는 아니지만 일주일에 3개정도 정해서 개인당 왜 이 기술이 필요한가에 대한 이유를 모음
- 이 기술을 써야되는 이유와 쓰지 않아야 하는 이유를 정리함
- ex: tsc 를 쓰면되는데 바벨은 왜 쓰지?
규칙 중에서, 학습 정리들을 주제별로 관리
- 자신이 학습한 내용을 노션에 정리해두고 있음
- 스토리북 관련 영상 링크