개발 창고

Github action으로 npm package 배포 자동화하기

이 글에서는 필자가 배포한 tiny-eqaul 패키지를 npm에 배포하는 과정을 자동화하는 github workflow를 쓰게된 계기와, 코드를 공유하고자 한다.배포 자동화를 도입하게 된 계기npm 패키지의 새 업데이트를 배포하기 위해서는 다음과 같은 과정을 거쳐야 한다.package.json의 version을 업데이트한다.npm publish로 npm에 해당 version의 업데이트를 배포한다.github release에 소스 코드 zip 파일을 업로드 후, 업데이트 한다.이 과정을 업데이트마다 반복하게 되면 번거롭기 때문에, 이 과정을 한번에 수행할 수 있는 workflow를 추가하여 github action을 통해 배포 자동화를 진행하게 되었다.workflow file 작성하기프로젝트 루트에 .gi..

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