처음엔 혼자 프로젝트를 해볼까도 생각했다. 솔직히 나름 주변 친구들보다는 디자인 감각이 좀 낫다고 생각했기 떄문이다. 몇 번 “오, 너 디자인 꽤 괜찮다?” 이런 말도 들었으니까... 근데 그건 어디까지나 컴퓨터공학과라는 우리 울타리 안에서의 얘기였지, 사실 주변 친구들 대부분은 디자인에 대해 아예 문외한이다. 그런 칭찬이 의미가 있나 싶었다. 그래서 더 객관적으로 나 자신을 돌아봤다. 막상 디자이너와 협업해서 프로젝트를 해보면, 그 결과물의 퀄리티 차이가 확연히 드러나는 걸 느꼈기 때문이다.특히나 프론트엔드 개발은 단순한 기능 구현만으로는 부족하다는 걸 깨달았다. 요즘 사용자들은 기능만 보고 웹사이트를 사용하지 않기 때문이다. 디자인이 사용자 경험의 절반 이상을 좌우한다고 해도 과언이 아닐 정도로 중요..

여러분, 코딩하면서 이런 상황 겪어본 적 있나요?"어? 분명 코드는 잘 썼는데 왜 갑자기 오류가 뜨지?""이거 분명 동작은 하는데... 뭔가 이상해..."혹시 내가 놓친 버그나 잘못된 문법이 있을까 걱정되죠? 바로 이때 ESLint가 도와줄 수 있습니다😊ESLint란 뭐지?쉽게 말해서, ESLint는 "코드 경찰"이에요. 여러분이 자기도 모르게 저지르는 작은 실수들을 찾아내고 알려주는 똑똑한 툴이죠. 자, 예를 들어볼게요. 우리가 JavaScript 코드를 작성할 때, 어디서 변수 하나 빼먹었거나, 함수 괄호를 잘못 닫았을 때 "삑삑!" 하면서 알려줘요. 마치 교통 신호를 지키는 경찰처럼요.코드를 막 쓰고 나서 "괜찮겠지?"라고 생각했는데, 갑자기 ESLint가 와서 "잠깐! 여기서 변수 하나 안 썼잖..

웹 개발을 하다 보면 링크를 클릭했을 때 새 탭에서 열리도록 설정하는 경우가 자주 있습니다.이를 위해 보통 target="_blank" 속성을 사용합니다. 하지만 이 속성만 사용했을 때 보안 문제가 발생할 수 있다는 사실을 알고 계셨나요? 이번 글에서는 target="_blank"와 함께 rel="noopener noreferrer"를 사용하는 이유와 그 방법에 대해 알아보겠습니다.1. target="_blank"의 기본 기능target="_blank"는 HTML에서 링크()를 클릭할 때 새 탭에서 열리도록 설정하는 속성입니다. 예를 들어, 아래와 같이 작성하면 링크가 새 탭에서 열립니다.Visit사용자는 이 링크를 클릭하면 기존 페이지는 그대로 유지된 채로 새 탭에서 링크된 페이지를 열 수 있습니다. ..

회고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 프로젝트는 다양한 최신 기술 스택을 바탕으로 UI 컴포넌트 라이브러리를 구축했습니다. 이번 글에서는 이 프로젝트에서 사용한 기술 스택을 하나씩 설명드리겠습니다.1. 개발 프레임워크 및 언어Next.jsComponique의 개발은 Next.js로 이루어졌습니다. Next.js는 React 기반의 프레임워크로 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다. 이를 통해 SEO에 유리하고, 빠른 페이지 로딩 속도를 유지할 수 있었습니다. 특히 컴포넌트 기반 개발을 통해 코드 재사용성을 극대화했습니다.TypeScriptTypeScript는 자바스크립트의 정적 타입 언어로, 코드의 안정성과 유지보수성을 높이기 위해 사용했습니다. 프로젝트가 커지면서 발생할 수 있는 타입 관..

이번 글에서는 Componique 프로젝트에서 제가 맡은 역할과 작업 내용을 소개드리겠습니다. 저(김준수)는 이 프로젝트에서 다양한 UI 컴포넌트 개발을 주도적으로 진행하고, 문서화 작업과 배포까지 맡았습니다.1. 주요 역할1) 컴포넌트 개발 및 문서화제가 개발한 컴포넌트는 다양합니다. RadioButton, DropDown, Switch, Card, Avatar, ProgressBar, InfiniteScroll, Badge, Tooltip, Rating, Map, DataTable, FormValidation 등 웹페이지나 애플리케이션에 필수적인 컴포넌트를 개발했습니다. 각 컴포넌트의 기능을 다듬고, 문서화를 통해 다른 개발자들이 쉽게 이해할 수 있도록 작성했습니다.2) 메인 페이지 구현프로젝트의 메..