하고 싶은게 많은 아이의 개발 성장 일지

00. Day.js란JavaScript에서 날짜와 시간을 다루기 위한 라이브러리이다.📌특징가벼움 : 약 2KB 크기로 번들 사이즈를 줄일 수 있다.빠름 : 불필요한 기능 없이 최적화된 성능을 제공한다.불변성(Immutability) 지원 : 기존 객체를 변경하지 않고 새로운 객체를 반환한다.Moment.js 와 유사한 API : 기존 Moment.js 사용자도 쉽게 적응이 가능하다.플러그인 확장 가능찾아보니 Moment.js의 경우 업데이트가 중단되어 공식적으로 유지보수되지 않으며파일 크기가 약 300KB로 크고, 성능 최적화도 부족하여 Dayjs보다 상대적으로 느리다. 그렇기에 나는 Day.js를 사용하여 날짜를 구현하고자 한다.01. 설치 방법npm install dayjs혹은const dayjs=..

react native 에서는 svg 파일을 따로 불러와 사용하는 것보다 react-native-vector-icons를 통해편하게 icon을 사용할 수 있다.00. react-native-vector-icons 설치npm install react-native-vector-iconsReact Native 0.60 이상에서는 자동 링크가 지원되므로 별도로 link 명령어를 사용하지 않아도 된다.설치 후 ios 와 안드로이드에 맞게 설정을 해주어야 한다. 01.  ios : xcode 에 프로젝트 파일 열기xcode를 키고 해당 위치에 있는 Pods.xcodeproj 를 눌러 현재 프로젝트 파일을 열어준다.01.  Fonts폴더 만들기./TodoWithMe/TodoWithMe 디렉토리에서 Fonts 폴더를 ..

react-native 환경에서 안드로이드 앱 개발을 프로젝트로 진행중이라Mac에 안드로이드 스튜디오를 설치했다.00. Android Studio 설치 : https://developer.android.com/studio?hl=ko mac 환경에 맞게 다운을 받아준다. 나는 Apple chip M1이라 Mac with Apple chip 을 다운 받았다.Android Studio 를 제대로 설치하면 위와 같이 뜨는데들어가서 전부 다운 받고 협업 중인 프로젝트를 열어 준다.01. SDK 설정Tools > SDK Manager 를 눌러 SDK 를 설정한다.안드로이드 SDK Location은 환경 설정 경로를 설정해야 하기 때문에 미리 복사해두자.SDK platforms 를 선택하여 설치 받고 Image Sy..

React Native에서 텍스트(Text) 컴포넌트를 사용할 때, 화면 크기나 내용에 맞게 폰트 크기를 조정하거나텍스트가 여러 줄로 표시되도록 처리하는 과정을 해야 회전이나 다양한 디바이스에서 텍스트가 잘리지 않도록자동 크기 조정 기능을 수행할 수 있다. 이번 포스팅에서는 내가 프로젝트하며 직면한 문제들과 해결하기 위해 어떻게 풀어나갔는지 작성해보도록 하겠다.첫 번째 문제 : rem 단위 미지원react-native를 활용한 프로젝트를 진행하고 있는데 react와 달리 rem 이 지원되지 않아 반응형 디자인에 첫 번째 문제가 발생했다.이를 해결하기 위해 remToPx 함수를 활용하여 rem 단위를 px 단위로 변환하여 사용했다.import { PixelRatio } from 'react-native';..

React Native 환경에서 styled-components 가 사용 가능하다고 해서설치해서 프로젝트에 활용해보았다. 프로젝트를 생성한 뒤 터미널을 통해 styled-components 를 생성하는 방법부터알아보도록 하자.00.  스타일드 컴포넌트 설치npm install styled-componentsreact natvie에서 styled-components를 사용하기 위한 명령어이다.위와 같이 뜨면 설치가 완료된 것이다.01. 의존성 에러 해결 방법 (선택)styled-components 의 경우 react-dom을 필요로 하기 때문에 react-dom이 없다면 의존성 문제가 발생할 수 있다.npm install react-dom해당 에러를 해결하기 위해서는 npm install react-dom..

React Native 를 활용한 ios 앱 개발을 위한 개발 환경을 설정해볼 예정이다.React Native 환경 설정부터 iOS 개발 환경 설정 방법까지 기록했다. 0. Git Hub 통한 레파지토리 생성 및 연동1) GitHub을 통한 레포지토리 생성- 깃허브에서 'New Repository' 선택- 레파지토리 이름 입력 (예: 'ToDoApp') / 레파지토리 공개 여부 선택 ('Public '혹은 'Private')- 'Create repository'를 통해 레파지토리 생성2) vs code 에 접속하여 Clone Git Repository 를 통한 연동- 혹은 페이지 상단 repository 의 url을 복사하여 vs code에 연동한다.1. React Native 프로젝트 생성1) 기본 J..