개발 창고

[토스 PO Session] 지속 가능한 성장을 만드는 방법

바이럴 성장 만들기 (Designing Viral Growth)Virality = Payload x Conversion Rate x FrequencyPay Load바이럴 루프 한번에 몇 명 에게 그 메세지가 도달하는가?Frequency한 바퀴 안에서 유저가 그 메세지를 얼마나 겪게 되냐Conversion Rate그 메세지를 한번 봤을 때 신규 유저로 전환되는 비율이 어떻게 되나?ex. Facebook의 경우 처음 회원가입 때 다른 소셜 서비스의 친구들에게 초대기능 => Payload: High, 나머지는 low(1대 다, 첫 회원가입시 일회성)Paypal의 경우 친구 초대시 1만원 지급 => Conversion Rate: Very High, 나머지는 low(일회성, 1대1)Growth는 MAU가 아니라 ..

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, })}>하지만 해당 방법을 이용하더라도, 아래와 같이 시뮬레이터 및 실 기기에서 여전히 느린 렌더링 성능을 보여주었습니다.또한 예약 페이지가 넘어가기 전에 버튼이 잠깐 멈춘듯하는 현상과, 렌더링..