[프론트엔드 생존코스 10기] 8주차 회고

📅  24.03.18 ~ 24.03.24

디자인 시스템에 대해 이해하고 styled-components를 활용하여 CSS in JS를 학습하는 주차였다. 

 

👩🏻‍💻 나는 이번주에 무엇을 배웠는가? 

 

이번주는 디자인 시스템을 이해하고 CSS in JS의 대표적인 라이브러리 styled-components 학습하는 주차였다. CSS in JS 대해 궁금했었는데 학습하게 되어서 재미있었다. CSS의 역사를 공부하면서 Web의 역사까지 알게 되는 주차였다. 

 

제품을 처음 만들 때는 초기에 세운 규칙들이 잘 이행되고 반영되지만 시간이 지날수록 규칙들이 어긋나고 점차 사라지는 등 불협화음이 필연적으로 발생한다. 새로운 프로젝트 구성원과 팀이 관여하고, 프로젝트가 확장되면서 이러한 현상은 가속화되고 결국 제품의 사용자 경험에 큰 영향을 미칠 수 있다. 이러한 혼란을 방지하고 질서를 세우는 역할은 디자인 시스템이라고 한다. 디자인 시스템은 들어는 봤으나, 디자인 시스템을 구축 해본적은 없다. 자사의 서비스를 가지고 있다면 일관된 UI를 제공하기 위해서는 필요하다고 생각된다. 디자이너님과 소통을 통해 규칙 만들고 규칙대로 사용하기 위해선 동료 개발자들과의 소통도 필요해 보인다. 

 

CSS in JS은 JavaScript를 사용해서 구성요소의 스타일을 지정하는 스타일링 기술을 의미한다.

페이스북의 성장으로 인해 React를 비롯한 Framework가 만들어지면서 문서 기반이 아닌 컴포넌트 기반의 개발 방식이 자리잡게 되었고, 문서를 편하게 꾸밀 수 있도록 설계된 CSS는 문서를 꾸미는 데 있어서 유용했지만 애플리케이션스러운 UI와 모듈과 컴포넌트의 방식의 개발 방식과는 맞지 않았다. 그래서 컴포넌트 기반의 개발방식에서 CSS를 더욱 효율적으로 사용하기 위해 나온 개념이 CSS in JS이다.

 

CSS in JS를 대표하는 라이브러리는 Styled-Components는 React의 Props를 전달받아 조건부 스타일링을 가능하게 한다. ES6 최신 문법 Tagged Template Literals을 사용해서 작성한다. Template Literals는 잘 알고 있었으나, 해당 문법은 처음 들어보았다. 아직도 완벽하게 문법을 이해하진 못해서 추가적인 공부가 필요해 보인다. 사용법은 간단했으나 문제는 Props로 조건부 스타일링을 하는 방식이 익숙하지 않아 헷갈렸다. 또한 Styled-Components를 어떤 기준으로 분리해야 할지 고민을 많이 했다. 공통으로 사용되는 부분이 있다면 분리했고 그렇지 않다면 컴포넌트에 위치하도록 했다. 분리된 컴포넌트를 조합하다 보니 스타일링 된 컴포넌트를  인지하기 위해선 Styled-Components로 만든 컴포넌트는 끝에는 Style 붙여서 사용했다.

 

다크모드를 처음 구현해보았는데 기본 테마와 다크 테마를 일대일로 매칭 되게 하기 위해서 디자인 시안을 열심히 봐야 했다. 처음에는 생각 없이 특정 기준점을 잡지 않고 과제를 하기 시작했는데 매칭되지 않아 다시 정돈을 해야 했다. 쉽게 생각했는데 막상 과제를 통해 구현해 보니 Styled-Components를 효율적으로 사용하고 싶어 사용하는 예시들을 많이 보려고 했다. 역시나 핵심은 Props! 조건부 스타일링의 강점을 잘 활용하는 게 핵심인 것 같다. 

 

다크모드를 구현하기 위해 usehooks를 사용하지 않고 Context API를 사용해서 구현해보았다. ContextAPI를 통해 새로운 ThemeProvider을 만들고 기존 Styled-component가 제공하는 ThemeProvider를 커스텀하는 방식으로 기능을 구현했다. 직접 구현해 보니 재미있었고 useLayoutEffect hook도 사용해 보았다. useEffect와 차이점이 있었는데 이벤트 호출 시점의 차이를 경험해 볼 수 있었다. 

 

 

🎯 학습이 더 필요한 부분

 

과제를 하면서 store 생성을  useSyncExternalStore hook을 사용해보았다.

대략 동작원리를 이해해서 적용했으나 문제는 Test 코드에서 어떻게 Mocking 해야 할지 모르겠다.

ChatGPT에게 물어보았으나 대답이 영 내 마음에 들지 않았다. 더 고민하고 시도해 보아야겠다. 

 

테스트코드는 점점 익숙해지고 있다. 그러나 아직 과제에서만 사용중이여서 다른 미니프로젝트 할 때도

시도해 볼 필요성을 느꼈다. 코드를 외워버려서 익숙해지고 있지 않는가..라는 의문이 들기 시작했다.

 

이번주는 열심히 공부하지 않았다. Styled-Components 말고 Tailwind CSS, emotion 사용법도 학습해보자고

스스로 학습 계획을 세웠지만.... Styled-Components만 학습하게 되었다.

과제를 하는데 Styled-Components 사용해서 구현하는데 오래 걸렸다. CSS 라고 너무 쉽게 생각했던 거 같다. 나 자신 반성하자.