Go민보다 Go

프론트엔드 개발자

Create 12

[vue] 전체 선택이 있는 체크박스 그룹 만들기

인턴에서 vue를 배웠습니다. 인턴은 끝났지만 vue를 배운 걸 유지하고 싶어서 스터디에 참여했습니다. 스터디 과제에서 커밋한 내용을 토대로 블로그 글을 작성하였습니다. 6. Computed Properties/book/src/components/Filter.vue 구현 전체 선택이 있는 체크박스 그룹의 UI는 다음과 같습니다. 버튼처럼 보이도록 스타일을 조정했고, 기본적으로 전체 선택으로 되어있습니다. 체크박스와 라디오를 이용해서 전체 선택이 있는 체크박스들을 만들고 있습니다. 전체 선택과 그 외의 선택 사항들을 두 그룹으로 보았을 때 라디오 처럼 동작하기 때문에, 라디오 input type을 사용하는 것이 좋다고 생각했습니다. 또한, 그 외의 사항들 그룹은 여러 개를 중복 선택할 수 있으므로 체크박스..

Create 2024.04.15

Storybook을 도입하자 컴포넌트가 정리됐다

요약 스토리북을 도입하면서 컴포넌트를 어떻게 정리하면 좋을지 생각해보았습니다. “다른 데이터를 쓴다면 별개의 컴포넌트로 두며, 데이터가 없으면 렌더링이 안되는 컴포넌트가 아닌, 상황에 따라 다르게 보여주는 컴포넌트들을 만들자” 🐾들어가며 프로젝트 리팩토링 과정에서 비슷한 로직에 다른 컴포넌트로 사용하고 있는 것을 확인했습니다. 그래서 공통 컴포넌트를 정리하고자 하였습니다. 이 과정에서 다른 동료가 쓴 코드를 볼 수 있고, 소통할 수 있는 기회를 만들 수 있었습니다. ✨본격적으로 ✅질문하기 1. 문제가 무엇인가? 해당 컴포넌트가 어디에 쓰였는지, 어떤 UI를 가지고 있는지 확인이 어렵습니다. 네이밍 규칙만 사용할 때, 피그마와 코드를 번갈아 가며 확인해야 하는 과정을 거쳐야 합니다. 컴포넌트에 필요한 데이..

Create 2023.12.02