개발 창고

NPM 패키지 톺아보기 (1), 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 패키지는 어떻게..

NPM 패키지 톺아보기

소개`npm 패키지 톺아보기` 시리즈는 npm에 등록된 여러 javascript(ts) 오픈 소스의 소스코드를 분석한다.우리가 자주 사용하는 패키지의 코드가 어떻게 작성되어 있으며, 작성된 코드는 어떻게 빌드되어서 배포되는지, 테스팅는 어떻게 작성되었는지 등을 이 시리즈를 통해 소개하고자 한다.우선적으로 오픈 소스를 분석하기 위한 작성자의 학습을 위해 시작하는 시리즈이며, 오픈 소스를 분석하는데 어려움을 겪는 개발자 분들에게 이 시리즈가 도움이 되었으면 하는 바람이다.글 목록

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..