트리플 프론트엔드 리포지토리 탐방
트리플 오픈소스 공용 컴포넌트 및 라이브러리 구경
Lerna를 이용하여 MonoRepo로 구성되어있었다.
Storybook도 사용하고 있었고, 스토리 작성법 가이드 링크도 있었다. 스토리북 페이지 또한 오픈되어 있었다.
Github Actions를 이용해 CI/CD를 했고 PR 이벤트마다 동작하도록 되어있었다.
Styled components를 사용하고 있었다.
Storybook 6 / 스토리는 어떻게 만드나
https://www.notion.so/Storybook-6-36430db04f7a450287d9b03cc8c04439
Triple Frontend Storybook 페이지
https://storybook.triple-corp.com/?path=/story/action-sheet-action-sheet--basic
스토리북을 사용하는 것의 장점이 무엇인지 아직 잘 와닿지 않는데 추후에 좀 더 공부해봐야겠다.
Lerna, Storybook, Github Actions 공부하기
Pull Request 탭에서는 PR마다 Codecov 키워드를 볼 수 있었다.
husky, Codecov
원티드 채용공고 담방하기
코드리뷰 툴로 CodeStream이라는 것을 사용하는 곳도 있었다
키워드
Lerna: MonoRepo 라이브러리
Storybook: UI Documentation 라이브러리
Github Actions: CI/CD
Codecov: 테스트 커버리지 확인
Husky: git hook에 따라 스크립트 실행
CodeStream: 코드리뷰 툴
공부 목표
Redux Router 세부 기능들에 대해서 공부
UMD, AMD, CommonJs 공부
Next.js
포스트 읽기
JavaScript 표준을 위한 움직임: CommonJS와 AMD
https://d2.naver.com/helloworld/12864
화해 기술블로그 정독 - 프론트엔드 관련 좋은 정보
http://blog.hwahae.co.kr/
기억보단 기록을 기술블로그 Redux 정독 - redux 관련 좋은 정보
https://kyounghwan01.github.io/blog/React/redux/redux-persist/#%E1%84%89%E1%85%A9%E1%84%80%E1%85%A2-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2
기존 프로젝트 수정
nba highlight library class name을 좀 더 정돈되게 수정했다.
image cropper 프로젝트 crop count를 표시하도록하고 input element로 이미지를 업로드 하도록 업데이트
Redux Router v6
리액트 라우터가 하는 일 3가지
1. history stack 구독 과 조작
2. routes에 맞게 URL 매칭
3. route에 맞는 UI 렌더링
location: 유저가 있는 곳을 나타내는 객체, URL과 다른 추가적인 것들도 들어있음
location state: URL로 인코딩 되지 않는 location과 함께 지속되는 값
History Stack - As the user navigates, the browser keeps track of each location in a stack. If you click and hold the back button in a browser you can see the browser's history stack right there.
Redux Router docs 정독하기
