월간 키워드 - 2021년 11월

 

 

 

💻  패턴

Week 1

하이퍼링크의 힘 덕분에 우연히 VAC패턴을 소개하는 글을 만났다. UI와 로직을 살짜쿵 분리하는 방식이다.
그동안 컴포넌트 내부에서 로직이 50줄~100줄 넘어가면 휠을 위아래로 내리다가 '너무 긴데?'하고 별 고민 없이 커스텀 훅을 만들어서 빼곤했다. 그런데 보통 커스텀훅은 hooks 디렉토리에 모아놓기 때문에 접근성이 좋지는 않았다. VAC패턴 대로 작성하면 이 방식대로 하면 분리만을 위한 분리 용도의 커스텀훅을 지금보다 많이 안 만들어도 될 것 같다.

단점을 미리 예상해보자면 엄청 간단한 로직이 짤막하게 들어간 컴포넌트이더라도 파일을 2개씩 생성해야 하는 점이 번거로울 수 있겠다. 그럼 jsx를 스타일드 컴포넌트 정의해 두는 style.js랑 통합해서 최상단에는 view 먼저 정의하고 하단에는 스타일드 컴포넌트를 function 키워드로 호이스팅 시켜서 쓰면 어떨까 싶다.

Week 2

JSX 구조를 view에 옮겨놓으니, 스타일 더미에 가려지는 문제가 있었다. 스타일과 JSX는 두 개의 창으로 병렬적으로 보는게 더 편해서 원래 구조대로 돌아갔다...

Week 4

지금까지 모든 상수를 constants/ 디렉토리에서 관리해 왔는데, 왔다갔다 하는 번거로움이 느껴져서 스타일 관련 상수는 styels/ 디렉토리에 api 관련 상수는 service/ 디렉토리에 넣는 방식으로 변경해보았다. 이 방법이 더 편의성이 좋은지는 앞으로 더 고민해봐야겠다.

 

 

💻 TypeScript

Week 1

나의 최대 기술부채 TypeScript를 청산하자. 마우스 호버만으로 어떤 prop인지 알 수 있는 혜택도 누려보자. 이펙티브 타입스크립트를 틈틈이 보자.

Week 2

개인 프로젝트에서 JS to TS 로 마이그레이션 하고 있다. 코드 작성하는 중에 바로 에디터 상에서 에러를 표시해주니까 뇌가 맑아지는 느낌이 든다. '참조하려는 객체가 undefined' 라는 에러와 이제 헤어질 수 있는걸까? 생산성이 무진장 향상될 것 같다.

Week 3

props를 destructuring 해서 사용한다면 아래와 같이 추가한 readonly 는 효과가 없다. destructuring 중 let color = 'primary' 와 같이 식별자를 새로 선언하는 과정이 일어나고, 이때부터 더 이상 Prop.color가 아니고 그냥 color가 되어 지정한 타입과의 링크가 끊기는 것으로 보인다.

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  readonly color?: 'primary' | 'secondary' | 'gradient'; 
}

const Button = ({
  color = 'primary',
  ...rest
}: Props) => {
  color = 'secondary'; // can be assigned
  ...
}

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  color?: 'primary' | 'secondary' | 'gradient'; 
}

const Button = ({
  color = 'primary',
  ...rest
}: Readonly<Props>) => {
  color = 'secondary'; // can be assigned
  ...
}

Week4

리액트 Portal 을 이용해 Modal 컴포넌트를 만들었다. 만들면서 챠크라, 엔트디 등 UI 오픈소스를 참고했는데 여러가지 유용한 prop 을 지원하고 있어서 좋은 참고가 되었다. 이를 참고해서 slideDirection을 주면 Modal 이 나타나고 사라질 때 슬라이드 애니메이션을 줄 수 있는 등의 prop을 추가로 넣어주었다. transtion 효과 넣는게 재밌었다.

useModal 훅과 Modal UI를 어떻게 엮을지 고민하다 useModal 이  Modal UI도 리턴해주도록 했다. 계속 사용해보면서 더 좋은 방법이 있을지 고민해보자. useModal은 hooks/ 디렉토리에 별도로 빼지 않고 components/Modal/ 하위에 그대로 두었다.

 

 

💻 컴포넌트 잘 만들기

Week 1

컴포넌트를 잘 만들고 싶다. 아주 잘 만들고 싶다. 최근 FE Conf 2021 영어자막 작업에 참여하면서 이병철 UX Engineer님의 발표 영상을 반복해서 봤다. (100번은 넘게 봤다.) 좋은 디자인 수정사항이 생겨도 큰 수정 없이 바로바로 대응이 가능한 컴포넌트를 만들고 싶다는 욕심이 커졌다.

영상 중에 한 예시로, 카드 안에 2개의 버튼이 가로로 정렬되어 있다가, 한 버튼의 텍스트 prop이 길어져서 전체 너비의 50%가 넘어가면 "알아서" 세로 정렬로 바뀌게 구현된 컴포넌트가 소개되었다. 잘 만든 컴포넌트를 설명해주시기 위한 예시는 아니었는데, 이 컴포넌트의 구현 자체에 꽂혔다. 주변 동료들이랑 얘기하면서 getComputedStyle 등으로 width를 읽어와서 카드의 50% 보다 버튼이 크면 동적으로 스타일을 변경해주는 구현방식을 생각했었다.

그런데 정답은 간단하게 flex-wrap을 걸어주는 것이었다... 일단 오픈소스를 더 적극적으로 살펴보면서 좋은 사례들을 많이 익혀야겠다.

오픈소스를 보면서 각 UI별로 어떤 props를 지원하는지도 잘 기록해놔야할 것 같다. 예를 들어 Input이나 Button 같은 경우에 오른쪽에 icon을 넣을 수 있게 한 컴포넌트를 만들고 나면, 언젠가 또 왼쪽에 icon을 넣고싶을 수도 있다. 혹은 양쪽 다 넣고 싶을 수 있다. 주소를 검색하는 검색창이라면, 왼쪽에는 집모양 아이콘을 오른쪽에는 돋보기 아이콘을 넣고 싶을 수 있다.
이런 케이스들을 내 경험수준에서 미리 다 알 수는 없으니, 소스를 관찰할 때 눈여겨 보는 것이 도움이 될 것 같다.

Week 2

variant가 많고 연습이 될 만한 Button, Input 들을 만들어보았다. 이들을 조합하는 ButtonGroup과 Form을 다음에 만들어보려고 한다.

Week 3

브라우저 환경에 따라 필요한 이미지를 가져오도록, Source 컴포넌트를 조합해서 Picture 컴포넌트를 만들었다.

 

💻 CSS

Week 1

인터랙티브 디자인을 뚝-딱 만들 수 있는 능력이 갖고싶다.

피터에게 물어보니 canvas를 활용해서 공이 튀기는 효과를 구현하는 10분짜리 유튜브 영상을 추천해주었다. 김종민 엔지니어님의 채널이어서 바로 구독했다. 김종민 님이 쓰신 '일은 배신하지 않는다' 책도 올해가 가기 전에 꼭 읽어봐야겠다.
인프런에 애플 랜딩페이지 인터랙션을 재현해보는 강의도 있던데 그것도 빨리 구현능력을 탑재하는 지름길 같아 보인다.

Week 3

styled-components을 쓰다가 가벼운 emotion으로 넘어오긴 했는데, pure css가 아니라 CSS-in-JS를 꼭 써야하는 이유가 있을까? 나의 이런 고민에 대해 선배 개발자님(?)께서는 다음과 같은 힌트를 주셨다.

'모든 일에는 우선순위가 있다. 성능이 우선인지, 개발속도와 편의성이 우선인지에 따라 결정하면 된다.'

그리고 zero-runtime 이라는 키워드를 접했다. CSS-in-JS로 인한 성능 이슈를 겪게되면 stitches 또는 linaria 를 일부 도입해보면 좋을 것 같다. (참고: CSS-in-JS 무엇이 다른가요?)

Week 4

좋은 유튜브 채널을 찾았다. Kevin Powell 이라는 채널과 DesignCourse 라는 채널이다. 구독 후 추천 목록에 뜨는 영상을 하나씩 보고있는데 영상 퀄리티도 좋고 내용도 많이 어렵지 않으면서도 무엇보다 재미있다.

 

 

💻 학습 루틴 만들기

Week 1

JavaScript Weekly, FrontEnd Weekly, Kent 형님이 보내주시는 뉴스레터를 활용해서 꾸준히 트렌드를 따라가는 환경이 있으면 좋겠다. 그런 스터디가 있으면  영어공부도 되고 1석 2조 아닐까.

스터디를 당장 만들기는 조금 부담되니 우선은 잠시 잊고있던 Feedly를 잘 이용하자. 스터디는 12월에 구해봐야겠다.

Week 3

카카오프로젝트100 이 유캔두로 바뀌었다. 11월 29일까지 개설이 가능하다. 지금 당장 읽고 싶은 책을 주제로 정해서 해당 책을 같이 읽는 스터디를 열지 아니면 좀 더 범용적인 챌린지를 열지 고민이다. 챌린저스의 방식이 더 좋은 것 같은데 UI가 죠큼 아쉽다...

Week 4

고민 끝에 유캔두도 하고, 챌린저스도 하기로 했다. 개설은 고맙게도 파워 추진력을 갖춘 웨지가 맡아 주었다. 코치님들과 1,2,3기 분들도 함께해서 재밌게 할 수 있을 것 같다. 개인적으로 매일 꾸준히 컨텐츠를 학습하고 흡수하는 용도로 활용하려고 한다. 

유캔두 모집

 

그리고 매일 인증할 필요는 없거나 부담되지만 꾸준히 하고싶은 활동을 챌린저스에 개설했다. '이펙티브 타입스크립트 정주행', '입트영 챌린지' 두 가지 아이템으로 개설했다. 인프런이랑 오픈카톡방에 홍보 글을 한번씩 올렸는데 두 챌린지 모두 예상보다 많은 분들이 함께해주셔서 감사했다.

'이펙티브 타입스크립트 정주행' 이 끝나면, 리팩터링2판이나 네트워크 관련 도서 정주행을 이어서 하고 싶다. '입트영 챌린지'는 이름을 1기로 정한 것과 같이 매달 기수를 늘려가면서 장기적인 챌린지로 이어나가고 싶다.

챌린저스 모집