개발 창고

[NPM] Chalk 패키지 살펴보기

chalk 모듈은 터미널 콘솔에 찍히는 로그에 쉽게 색상등의 스타일링을 할 수 있도록 도와주는 패키지이다.import chalk from 'chalk';const log = console.log;// Combine styled and normal stringslog(chalk.blue('Hello') + ' World' + chalk.red('!'));// Compose multiple styles using the chainable APIlog(chalk.blue.bgRed.bold('Hello world!'));// Pass in multiple argumentslog(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz')); chalk 패키지는 어떻게..

Rsbuild 기반 Tistory-react 프레임워크 개발기

들어가며Rsbuild 기반의 tistory-react 프레임워크를 개발하게 된 계기와 기술 스택 선정부터 개발을 하며 겪은 많은 문제들을 소개하려 한다.해당 프레임워크는 아래 깃허브에 오픈소스로 모두 공개되어있다.https://github.com/eunbae0/tistory-react GitHub - eunbae0/tistory-react: Create tistory skin with React.jsCreate tistory skin with React.js. Contribute to eunbae0/tistory-react development by creating an account on GitHub.github.com프레임워크를 개발하게 된 계기우선 필자는 typescript + tailwindcss..

[React Native] FlashList로 리스트의 렌더링 성능 최적화하기

들어가며시대생 서비스의 도서관 예약하기 서비스는 아래 이미지처럼 도서관 현재 좌석 상태를 표시합니다.해당 서비스의 좌석 item을 표시하기 위해 보통 18 x 30 크기의 이차원 배열을 이중 리스트로 렌더링합니다. 이를 구현하기 위해 리스트의 렌더링 성능을 최적화하기 위해 공식문서에서 제시하는 FlatList를 사용하고, getItemLayout prop을 이용하여 구현했습니다. ({ length: itemWidth + 2, offset: (itemWidth + 2) * index, index, })}>하지만 해당 방법을 이용하더라도, 아래와 같이 시뮬레이터 및 실 기기에서 여전히 느린 렌더링 성능을 보여주었습니다.또한 예약 페이지가 넘어가기 전에 버튼이 잠깐 멈춘듯하는 현상과, 렌더링..

[React Native] native module을 이용해 android notification 띄우기

들어가며Android 환경에서 커스텀 알림을 직접 구현하게 된 계기와 구현 과정, 개발을 진행하며 겪은 문제들과 해결 과정을 소개하려 합니다.도서관 이용시간 알림 기능은 유저가 앱에서 나간 상태에도 알림으로 현재 이용시간 또는 외출시간을 쉽게 확인할 수 있도록 하는 기능입니다. 토스의 따릉이를 이용할 때 알림으로 남은 시간이 표시되는 것을 보고, 이 기능을 도서관 이용시간 알림으로 도입해보면 유저에게 편리함을 제공할 수 있겠다 생각하여 iOS를 먼저 구현했고(이전 글), Android를 구현하는 과정에 대해 작성합니다.요구사항도서관 이용시간 알림은 아래와 같은 기능이 구현되어야 합니다.iOS는 ActivitKit으로 구현이 되어있음. Android 환경에서는 이와 비슷하게 동작하기 위해 Notificat..

[React Native] RN에서 Dynamic island 위젯 만들기

들어가며React Native에서 Dynamic Island 위젯을 만드는 방법에 대해 작성했습니다.Info.plist파일 수정프로젝트에서 Live Activity를 사용하기 위해, 프로젝트의 info.plist에 Supports Live Activities: YES 옵션을 추가합니다.새로운 Widget Extension 생성하기File > New > Target으로 들어가서, Widget Extension을 선택합니다.이후 'Include Live Activity' 옵션을 체크한 다음, 원하는 이름으로 위젯을 생성합니다. 저는 이름을 DynamicIslandWidget으로 생성했습니다. (App Intent 옵션은 끄는 것을 추천합니다.)App Group 생성하기앱에서 쓴 데이터인 UserDefault..