프로젝트를 진행하면서 다크 모드를 추가로 작업하게 되었습니다. 이 과정에서 팀원들의 제가 수정하는 일이 생겼습니다. 그런데 코드를 이해하는 데 시간이 오래 걸리는 문제를 겪게 되었습니다. 특히 주석이 거의 없거나 부족할 때, 상대방이 짠 코드를 파악하는 데 어려움이 많았습니. 그때 깨달은 것이, 코드 작성 시 중요한 부분만 주석을 남기는 게 아니라 팀 프로젝트에서는 모든 사람이 코드를 쉽게 이해할 수 있도록 주석을 잘 작성하는 것이 중요하다는 사실입니다.이 글에서는 주석을 효율적으로 다는 방법과, 팀원들이 코드의 흐름을 쉽게 이해할 수 있도록 도와주는 좋은 주석 작성법에 대해 알아보겠습니다.왜 주석이 중요한가?코드의 가독성 향상주석은 코드를 읽는 사람이 코드의 의도와 구현 방식을 더 쉽게 이해할 수 있도..

Atomic 디자인은 UI 컴포넌트를 설계할 때 작은 단위부터 큰 단위까지 점진적으로 조합해나가는 방법론입니다. 이 방법론은 Brad Frost가 제안한 디자인 시스템으로, 생물학의 원자론에서 착안해 UI 컴포넌트를 마치 원자(atom), 분자(molecule), 유기체(organism)와 같이 작은 구성 요소들로 나누어 관리하는 구조입니다.이 디자인 방법론의 핵심은 재사용성과 확장성을 고려한 컴포넌트 설계를 가능하게 한다는 점입니다. 프로젝트가 커지고 복잡해질수록 단일 컴포넌트가 여러 곳에서 사용될 수 있는데, 이때 Atomic 디자인을 적용하면 코드 중복을 줄이고 유지보수를 쉽게 할 수 있습니다.Atomic 디자인의 5가지 구성 요소Atoms (원자)원자는 더 이상 나눌 수 없는 가장 작은 단위입니다..

처음에는 카드 컴포넌트를 간단하게 만들 생각이었습니다. 사용자가 입력한 내용을 카드 안에 문자열로만 출력하는 방식이었습니다. 예를 들어, 카드에 들어갈 내용을 "description"이라는 Prop으로 받아서 출력하면 충분하다고 생각했습니다.const CardBasic = ({ title, description }: { title: string, description: string }) => { return ( {title} {description} );};이처럼 문자열만 받는 방식은 굉장히 간단하고 빠르게 구현할 수 있었습니다. 단순 텍스트를 출력하는 상황이라면 충분한 방법이었습니다.하지만, 확장성 문제프로젝트가 진행되면서 사용자가 입력할 내용이 단순한 텍스트가 아닐..

회고Componique 프로젝트는 단순한 UI 컴포넌트 개발을 넘어서 다양한 경험을 쌓을 수 있는 기회였습니다. 특히 컴포넌트의 유연성과 확장성을 고려한 설계 과정에서 우리는 많은 것을 배웠습니다. 단순히 작동하는 컴포넌트를 만드는 것이 아니라, 재사용성과 확장성을 고려한 설계를 통해 다양한 상황에서도 쉽게 적용할 수 있도록 하는 것이 중요한 교훈이었습니다.또한, 사용자 경험(UX) 관점에서의 설계의 중요성도 깨달았습니다. 직관적이고 적절한 피드백을 제공할 수 있는 UI 설계를 목표로 사용자 중심의 컴포넌트 디자인에 대해 깊이 고민하게 되었습니다.마지막으로, 시작의 두려움을 극복하는 법에 대해서도 큰 교훈을 얻었습니다. 처음에는 프로젝트의 성공 여부에 대한 의구심이 있었으나, 팀원들과 함께 문제를 해결하..

트러블 슈팅: Componique 프로젝트에서의 문제 해결 과정UI 컴포넌트 라이브러리를 개발하면서 다양한 문제들이 발생했습니다. 이번 글에서는 Componique 프로젝트에서 우리가 직면했던 주요 문제들과 그에 대한 해결 방안들을 소개하려고 합니다.1. 컴포넌트 간 일관성 유지 및 재사용성 문제프로젝트 초기에는 각 컴포넌트의 디자인과 동작이 서로 달라서 사용자 경험에 혼란을 줄 수 있다는 문제가 있었습니다. 여러 컴포넌트가 각각 독립적으로 동작하면서 스타일의 일관성이 부족해 사용자 경험이 저하될 위험이 있었죠.해결 방안: 이를 해결하기 위해 Figma를 활용해 명확한 디자인 시스템을 구축했고, Tailwind CSS로 일관된 스타일을 적용했습니다. 또한, 코드 중복을 최소화하면서 컴포넌트 간 재사용성을..

npm 최종 배포Componique 프로젝트는 2024년 9월 20일, npm에 최종 배포되었습니다. 이를 통해 누구나 Componique 라이브러리를 설치하고 사용할 수 있게 되었으며, 다양한 웹사이트와 애플리케이션에서 손쉽게 UI 컴포넌트를 활용할 수 있는 도구가 되었습니다.배포 과정npm 배포는 프로젝트의 마지막 단계에서 진행되었습니다. 배포 전에 모든 코드의 최종 점검을 마친 후, 버그가 없는지 확인하고 프로젝트의 안정성을 최적화한 후 npm에 등록했습니다. 배포 후에도 사용자들의 피드백을 반영하여 지속적으로 업데이트할 예정입니다.Componique 라이브러리의 장점Componique 라이브러리는 다양한 UI 컴포넌트를 제공하여 개발자들이 빠르고 쉽게 웹사이트를 구축할 수 있도록 돕습니다. 배포된..

성능 평가 결과저희 Componique 프로젝트는 성능 최적화를 위한 여러 가지 노력을 기울였고, 그 결과 성능 점수 100점을 달성했습니다. 페이지 로딩 속도와 성능을 최우선으로 고려해 각 컴포넌트의 경량화와 코드 최적화에 집중한 결과입니다. 구체적인 성능 측정 항목으로는 다음과 같은 지표들이 포함되었습니다:First Contentful Paint (FCP): 0.3초사용자에게 페이지의 첫 번째 콘텐츠가 표시되는 시간을 의미하며, 페이지 로딩의 첫 인상에 중요한 요소입니다. 0.3초라는 빠른 속도를 통해 사용자는 페이지 로딩을 거의 느끼지 못할 정도로 빠르게 경험할 수 있습니다.Largest Contentful Paint (LCP): 0.4초페이지의 가장 큰 요소가 완전히 표시되는 시간을 측정합니다. ..

Componique의 주요 기능Componique는 사용자가 웹사이트나 애플리케이션을 더 쉽게 구축할 수 있도록 돕는 UI 컴포넌트 라이브러리입니다. 다양한 UI 컴포넌트를 제공하여, 이를 자유롭게 커스터마이징하고 사용할 수 있는 환경을 제공합니다.다양한 UI 컴포넌트 제공Componique는 Form, Data Display, Feedback, Navigation과 같은 주요 기능별로 약 32가지의 컴포넌트를 제공합니다.이로써 사용자는 자신의 프로젝트에서 필요한 요소들을 빠르게 선택하고 적용할 수 있습니다.Form 컴포넌트: 버튼, 체크박스, 인풋 필드 등으로 사용자 입력을 받는 데 필수적인 요소들입니다.Data Display 컴포넌트: 카드, 캘린더, 캐러셀 등을 포함하여 데이터를 시각적으로 표현할 ..