🎯기간 : 2022.05.09~ 2022.05.15
이번 포스팅은 한 주간의 기간동안 진행한 것을 회고하려고 합니다.
제가 크게 이번주 진행한 것은 아래와 같습니다.
1. 리액트 장바구니 미션 진행
2. 코드 리뷰를 리뷰하는 스터디 진행
#1. 리액트 장바구니 미션 진행📚
이번 주는 새로운 페어와 장바구니 미션을 진행했습니다.
해당 미션을 진행하면서, 중점적으로 고민하고 적용한 부분은 다음과 같습니다.
1. CDD 방식으로 컴포넌트를 개발하고, 스토리북으로 테스트한 것
지난 페이먼츠 STEP2 미션을 진행하면서 아쉬운 점이 있었습니다.😂
- CDD 방식을 제대로 적용하지 못하여 컴포넌트를 제대로 캡슐화 못했다는 것
- 부족한 스토리북 커버리지
위 2가지를 이번 장바구니 미션을 하면서 보완하고 싶었습니다.
- 컴포넌트 기본 틀 개발하기
- 해당 컴포넌트 스토리 작성하기
- 스토리북 기반으로, 컴포넌트 개발하기
위와 같은 방식으로 모든 컴포넌트를 bottom-up 방식으로 구현했습니다.
비록 이번 장바구니 STEP1의 요구사항과 프로젝트 규모가 크지 않지만,
위 방식을 진행하면서 CDD 및 스토리북 기반으로 개발할 때의 장점을 느꼈습니다.
2. styled-components 적극 활용하기
이번 미션에서는 css-in-js 방식 중에 하나인 styled-components를 사용했습니다.
emotion과 styled-components 중에서 고민을 하였는데,
해당 미션은 SSR(서버 사이드 렌더링)을 고려할 필요 없기에 styled-components를 선택했습니다.
styled-components를 적용하면서, 재밌는 고민과 방식을 도입했습니다.
-
Styled라는 접두사를 붙여, 명시적으로 Styled Components라는 것을 보여주기
Styled Components를 사용할 때는 다음과 같은 문제가 발생합니다.
해당 컴포넌트가 React Component인지 Styled Component인지 헷갈릴 수 있는데요.
시지프 크루원(👍)의 아이디어로, Styled 접두사를 붙여 명시적으로해당 컴포넌트는 Styled Comopnents이다라고 하였습니다.
-
공통 Styled Component를 상속해서 스타일링 하기
예를 들어, 토스라는 프로덕트에서는 수많은 버튼 UI가 존재합니다.
배경색이 파란색인 버튼, 배경색이 흰색이 버튼, 네모난 버튼, 동그라미 버튼 등
기본적인 형태는 유사하지만 일부만 다른 버튼들이 생기게 되는데요.
해당 버튼을 Styled Components를 사용해서 개발한다면 다음과 같은 방식이 있을 것 같습니다.- props로 전달해서, props에 따라서 스타일링을 한다.
- 기본 스타일링된 Button 컴포넌트를 상속받아서, 스타일링을 한다.
이번 미션에서는 2번을 적극적으로 사용하려고 했습니다.
그 이유는, 2번 방식을 경험해보고 좋은 점과 나쁜 점을 깨닫고 싶어서 였습니다.이번 미션을 하면서, 나름대로의 1번 케이스와 2번 케이스의 적절한 상황을 정리하게 되었는데요.
1번(props 사용) - 재사용을 패턴화할 수 있을 때 사용.(theme, size 등 조건에 따라 여러 스타일이 변경될 때)
2번(상속 사용) - 컴포넌트에서 공통적으로 사용하는 동일한 속성이 있을 때, 동일한 속성 기준으로 다시 상속을 고려한다.
3. 리덕스 도입
페이먼츠 미션에서는 Context를, 이번 미션에서는 리덕스를 사용하였습니다.
이번 미션에서 리덕스가 필수 요구사항이었기 때문에 도입하게 되었습니다.
이전에도 리덕스를 사용해서 프로젝트를 진행한 적이 있었기에, 어려움 없이 적용하였습니다.
리덕스는 redux-devtools-extension을 지원하고 있어서,
사용자의 인터렉션에 따라서 어떤 액션이 발생하였고 어떤 상태의 변화가 있는지 편하게 확인할 수 있어서 편한 것 같습니다.
STEP2에서는, redux-thunk와 redux-logger를 사용해보려고 합니다.
다음주 포스팅에서 사용한 후기를 알려드리겠습니다.🔥
#2. 리뷰를 리뷰하는 스터디📝
이번 주도 마찬가지로 Level2 코드 리뷰 스터디를 시작했습니다.
기억에 남는 리뷰를 적어보겠습니다.
- Error Boundary 컴포넌트를 사용하여 에러를 관리한 것
- Theme Provider를 사용할 때, color 색상 네이밍 쉽게 짓는 법
- key는 형제 사이에서만 고유하면 된다는 것
- <></>와 React.fragment의 차이점
이번 주 또한, 새롭게 알게된 부분이 많았는데요.
앞으로 미션에서 야무지게 적용해보려고 합니다.👨💻
이상으로 우아한테크코스 level2 14주차 회고는 여기서 마무리하겠습니다.🏎🏎🏎
