[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 2주차 후기

 

본격적으로 프로젝트가 진행되었습니다. 우리가 맡은 프로젝트는

스팩스페이스 - 플로디텍터-보안시장 이슈 시스템 개발인데, 일단 지난주에 작성한 다이어그램은 아래와 같다.

 

1) 객체 다이어그램

2) 유즈케이스 다이어그램

 

생각보다 많은 기능이 있어 쉽지 않을 것 같아 보였다. 특히 실개발기간을 3주가 약간 넘는 기간으로 잡혀있어 일정이 빠듯해 보였다.

 

1. 공통컴포넌트

첫째주는 공통컴포넌트 생성이 목표였다. 다음주 화요일까지 이 컴포넌트들을 활용해 퍼블리싱을 해야하니 꼼꼼하게 만들 필요가 있었다. 여태껏 필요하면 컴포넌트를 그때그때 만들어 썼고 재사용성을 고려해 만든 경우는 버튼 정도뿐이었다. 하지만 이번 교육기간에 배운 가장 큰 내용은 twMerge와 타입추론을 활용한 컴포넌트였다.

 

마지막으로 ts 프로젝트 작업을 했을 땐, 타입을 잘 활용하지 못했고 애초에 타입은 귀찮은 것이라고만 생각했다. 작업을 불편하게 하고, 타입에러로 인해 작업속도가 느려진다고만 여겼는데, 이번에 타입추론과 자동완성을 활용하면서 더 쉽게 작업할 수 있게 되었다. Node.js에서 ts를 활용해 service를 만들 때 이렇게 활용하곤 했는데 그 경험이 도움이 되었다. 결국 ts를 활용하니 더 빠르고 안정적인 작업을 할 수 있었다.

 

내가 맡은 부분은 infobox, card, floating이었는데, 단일 요소의 컴포넌트가 아닌 여러 요소가 포함된 부분이 많았기에 쉽지 않은 내용이긴 했다. infobox는 비교적 쉽게 지나갔는데, card부터 말썽이었다.

 

내가 card 컴포넌트를 만들면서 받은 blame은 4가지인데, 대략적으로 정리해보겠다.

 

1) 재사용이 가능한 부분을 꼼꼼하게 체크하지 못해 props를 누락

button이 들어갈 것이 자명한 img를 그냥 올린 부분이 있었다. button을 씌우고 각 button의 props에 이름을 부여하여 ButtonHTMLAttributes를 타입으로 달아주고, onClick등의 button 프로퍼티가 들어올 것을 대비할 수 있었다.

2) png가 아닌 svg를 사용할 것.

png는 비트맵 기반이고 svg는 벡터기반 이미지이기 때문에 용량면에서도 svg가 가볍다. 게다가 png는 비트맵 특성상 사이즈 변경시 이미지가 깨지지만 svg는 유동적으로 크기가 변하기 때문에 깨지지 않는다. 그래서 단순한 아이콘은 보통 svg를 쓴다.

3) 단순 css변경을 위해서는 state를 사용하기보단 hover:, active: 등을 사용할 것.

hover시 bg가 image로 대체되고 blur가 아닌 overlay가 필요해서 중간에 오직 그 목적의 div를 추가해야하는 상황이었다. 도무지 쉽게 해결될 기미가 안 보여 빠르게 처리하기 위해 컴포넌트 두 개를 붙였더니 역시 이 방식은 바람직하지 않다는평을 들었다.

결국 하나의 컴포넌트로 합쳐서 해결했는데, 핵심이 되었던 것이 group-{modifier} 즉, 부모상태 기반 스타일링이다. 부모 요소의 스타일을 지정하는 것과 같은 수정자를 group사용하는데, 여기서는 group-hover가 사용되었다. overlay용 div를 어떻게 처리해야할 지 고민하던 찰나, 이런 속성이 있다는 것을 알았다. 부모요소의 bg가 hover시 동작하는 상황이었기에 적절한 해결책이었다. 그리고 이번에 의사클래스에 대해서도 공부하게 되었는데 따로 정리를 해보겠다.

4) truncate 클래스로 말줄임표로 표기할 것.

tailwindcss에는 text overflow 속성이 3가지가 있는데, truncate, text-ellipsis, text-clip이 바로 그것인데, 이 중 truncate는 

이 세가지 속성을 한꺼번에 모아놓은 것이다. 이것은 css에서 text 말줄임표를 사용하기 위해 채용하는 속성인데, 나는 truncate를 몰라서 계속 불편하게 쓰고 있던 것이다. 텍스트가 줄바꿈되는 것을 방지하고, 필요한 경우 말줄임표로 넘치는 텍스트를 잘라낸다.  text-ellipsis는 truncate에 속하는 속성으로 말줄임표가 딱 이 속성을 나타내는 것이다.  text-clip은 콘텐츠 영역의 한계에 따라 보이지않게만 잘라내는 것으로 말줄임표가 있는 다른 속성에 비해 사용할 일이 없다.