리액트 네이티브로 앱을 개발하다 보면 빌드 오류나 시뮬레이터 기동 시 캐시 문제, 의존성 문제 등으로 인해 예상치 못한 에러가 발생하는 경우가 있습니다. 이런 경우, 클린 작업이나 캐시 삭제를 통해 문제를 해결할 수 있습니다.이번 포스트에서는 리액트 네이티브 개발 중 자주 사용하게 되는 Clean, 캐시 삭제 명령어와 기본적인 라이브러리 설치 방법을 정리해 봅니다. Clean & 캐시 삭제안드로이드(Gradle) Clean안드로이드 빌드 관련 문제 해결을 위해, 다음 명령어로 Gradle 캐시와 빌드 아티팩트를 초기화할 수 있습니다.# 프로젝트 루트에서 android 폴더로 이동 후 실행cd android/ && ./gradlew clean build --refresh-dependenciescd ../n..

컴포넌트를 재사용하면서 단순히 하위 요소의 font-size만 변경하고 싶은 경우,컴포넌트에 props로 전달하는 대신 Tailwind CSS의 "arbitrary variants" 기능을 사용하면 간편하게 해결할 수 있습니다. 기본 문법Tailwind CSS에서는 클래스 이름에 대괄호([ ]) 안에 CSS 선택자와 함께 사용하여, 부모 요소를 기준으로 하위 요소(자손 혹은 직계 자식)를 선택할 수 있습니다.후손 선택:[&_input]:w-[140px]여기서 &는 현재 요소(자신)를 의미하고, _input은 공백을 나타내므로, 현재 요소의 모든 후손 중 태그를 선택합니다.   위 예시에서는 부모 는 너비 200px, 그 안의 모든 은 너비 140px로 적용됩니다.직계 자식 선택:[&>input]:w-..

문제 상황스토리북(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': ..

새해 들어서 React Native로 새 사이드 프로젝트를 진행하고 있습니다. 이번 프로젝트에서는 사용자 인증을 위해 카카오톡 로그인을 간편하게 구현하기로 했습니다. 관련 자료를 찾아보니 예전 자료들이 많고 0.76 버전 이상의 버전에 대해서는 자료가 많이 없어서 제가 적용한 과정에 대해 설명하려고 합니다.(이번 포스트에서는 react-native-seoul/kakao-login 라이브러리를 사용하여 카카오톡 로그인을 구현하는 방법을 다룹니다.) 내 애플리케이션 생성 하기우선, 카카오 내 애플리케이션을 생성하는 과정부터 시작하겠습니다.카카오 개발자 사이트에 접속합니다."내 애플리케이션" -> "애플리케이션 추가하기" 버튼을 클릭하여 앱을 생성합니다.생성 후, 카카오 로그인과 OpenID Connect 활..

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