문제 상황스토리북(Storybook)을 사용하면서 Docs 탭에서 컴포넌트 미리보기가 작게 표시되어, 실제 UI를 확인하기 어려운 상황이 발생했습니다.특히, 대표 컴포넌트의 미리보기 영역이 작아 컨트롤이나 세부 내용 확인이 힘들었는데요.검색 시에도 어떤 키워드로 찾아야 할지 감이 오지 않아 공식 문서를 몇 번이나 뒤졌습니다.결국 “Storybook Canvas Height Change”라는 키워드로 검색하여 해결법을 찾을 수 있었습니다.해결 방법스토리북에서는 스토리 메타 정보의 parameters 속성을 통해 추가적인 설정을 지정할 수 있습니다.Docs 관련 설정은 docs 매개변수를 사용하며, 미리보기 영역의 높이를 조정하려면 아래와 같이 설정할 수 있습니다. 개별 스토리 파일에서 설정import ty..

문제 상황팀 프로젝트를 진행하는 중, 제 PC에서는 폴더명이 소문자인 상태에서 첫 글자만 대문자로 변경하여 커밋 후 푸시했더니, 제 PC에서는 문제없이 반영되었지만 팀원들에서는 전혀 적용되지 않는 상황이 발생했습니다.왜 이런 문제가 생기는 걸까요?원인Git은 기본적으로 파일명이나 폴더명의 대소문자 차이를 구분하지 않습니다.특히 Windows나 macOS와 같이 대소문자 구분이 없는 파일 시스템에서는 단순히 대소문자만 변경한 경우 Git이 변경 사항으로 인식하지 않거나, 변경 사항이 공유되지 않는 문제가 발생할 수 있습니다.해결 방법이 문제를 해결하려면 Git이 대소문자를 무시하지 않도록 설정을 변경해야 합니다. 1. Git 설정 변경: 대소문자 무시 기능 끄기터미널에서 아래 명령어를 실행하여 Git이 파..

JavaScript 개발을 하다 보면 코드의 효율성과 가독성을 높이기 위해 Lodash 라이브러리를 사용하는 경우가 많습니다. 이번 포스트에서는 Lodash의 기본 버전과 ECMAScript 모듈 형식인 lodash-es의 차이점, 번들 사이즈 최적화, 그리고 자주 쓰이는 문법과 예시 코드를 살펴보겠습니다. Lodash란?Lodash는 자바스크립트의 유틸리티 라이브러리 중 하나로, 배열, 객체, 함수 등 다양한 데이터 구조를 다루기 위한 유용한 기능들을 제공합니다. 코드를 간결하게 작성할 수 있도록 도와주며, 성능과 크로스 브라우징을 고려해 구현되어 있어 브라우저와 Node.js 환경 모두에서 널리 사용되고 있습니다.lodash와 lodash-es의 차이점Lodash모듈 시스템:Lodash는 Common..

안녕하세요!이번 포스트에서는 Javascript 유틸리티 라이브러리인 Lodash가 제공하는 데이터 유효성 체크 함수들—isNaN, isNil, isNull, isEmpty—의 차이점과 사용법에 대해 알아보겠습니다. Lodash란?Lodash는 JavaScript로 코딩할 때 자주 필요한 기능들을 모듈화 하여 제공하는 유틸리티 라이브러리입니다.배열, 숫자, 객체, 문자열 등 다양한 데이터 타입을 다루는 작업을 단순화하며, 빠른 성능과 간편한 사용법으로 많은 개발자들에게 사랑받고 있습니다. 예를 들어, Lodash를 사용하면 기본값을 설정하거나 배열을 분할하는 작업이 아주 쉽게 이루어집니다.// 기본값 설정: 기존 객체의 값이 없으면 대체값을 넣어준다._.defaults({ 'a': 1 }, { 'a': ..

Tailwind CSS는 빠른 프로토타이핑과 효율적인 CSS 파일 크기 최적화 덕분에 디자인 시스템을 구축할 때 매우 유용한 도구입니다.그 덕분에 회사에서 디자인 시스템을 만들 때 Tailwind를 적극적으로 활용하며, 일관된 디자인과 빠른 개발 속도를 실현할 수 있었습니다. 그러나 진행 과정에서 예상치 못한 문제에 직면하게 되었습니다.바로 '동적으로 변하는 데이터에 Tailwind CSS 클래스를 동적으로 할당하는 과정'에서 발생한 문제입니다. 문제 발생: 동적으로 Tailwind CSS 클래스 적용Tailwind CSS는 기본적으로 유틸리티 클래스 기반의 시스템입니다. 클래스를 미리 정의하고, 이를 HTML 요소에 적용하는 방식이죠. 하지만 동적으로 변하는 데이터에 따라 스타일을 변경해야 할 때는 문..

React Query를 사용하여 GET 요청을 처리할 때에는 주로 useQuery를 사용하게 되는데, 이때 아무런 조건 없이 useQuery를 사용하게 되면 기본적으로 컴포넌트가 렌더링 되는 시점에 데이터 가져오기를 시도합니다. 하지만 개발을 하다보면  종종 '특정한 이벤트'가 발생했을 때에만 데이터를 가져와야 하는 경우가 있습니다.이번 글에서는 그 경우 적절하게 처리하는 방법에 대해서 알아보겠습니다. GET 요청에 useMutation을 사용해야 할까?한 가지 생각해 볼 수 있는 방법은 useMutation을 사용하는 것입니다. 하지만 여기서 고민이 생깁니다.useMutation으로 GET 요청도 처리할 수 있지만 보통 POST, PUT, DELETE와 같은 '변경 작업'에 적합한 훅입니다.다행히 Re..

발생 원인Tailwind를 이용하여 팀 디자인 시스템 라이브러리를 이용하여 개발하던 도중 tailwind.css.config의 theme를 extend 확장하는 순간에 갑자기 에러가 발생하였다.  그 이유는 새롭게 추가한 TYPOGRAPHY (const)에서 데이터를 @ Alias로 절대경로를 사용해서 불러오고 있기 때문이었다. 해결방법사실 해결 방법은 간단하다. @ alias로 된 부분을.../ 이런 방식의 상대 경로로 바꿔주면 해결된다. 절대 경로를 사용하여 깔끔하게 처리하고 싶었지만, config 파일의 경우 빌드 전에 사용되기 때문에 빌드 후 생성되는 절대 경로를 사용할 수 없다고 한다.   끝

기쁜 마음으로 사이드 프로젝트를 시작했지만예상치 못하게 구글 개발자 등록에서 막히게 되었다... 처음에는 전기 요금 청구서, 신용카드 명세서 등 여러 방법을 제출했지만 실패했으며, 여러 번 시도를 해서 그런가 나중에는 아래 사진처럼 개발자 계정을 제한당했다...  이를 해결하기 위해서는 의의 신청을 하면서, 추가 서류 제출을 선택하면 된다. 그후 올바른 문서를 제출해야 하는데..   위 사진처럼 여러 조건을 볼 수 있지만 모두 믿지 말고 '무조건 무조건 무조건' '주민등록등본'을 제출하자.. 한 번에 성공하는 걸 볼 수 있다.   메일에 보이는 화나는 메일들.. 하루씩 기다려야 했기에 며칠을 고통받았다. 여러분은 같은 고통을 받지 않길 바란다.   끝