개발 창고

[Strapi] Strapi 프로젝트를 Fly.io에 배포하기

strapi 프로젝트를 Fly.io에 배포하는 방법에 대해 알아보겠습니다. Strapi 설정 Strapi 프로젝트 생성 yarn create strapi-app strapi-fly --quickstart 명령어를 수행하면 strapi 프로젝트가 기본 설정으로 생성됩니다. Postgresql 설정 Strapi 프로젝트를 생성하면 sqlite가 기본 데이터베이스로 설정되어 있습니다. Fly.io는 postgresql을 기본 지원하기 때문에 이에 맞게 strapi에서 postgresql를 사용하도록 설정해주겠습니다. // config/database.js const path = require('path'); module.exports = ({ env }) => { const client = env('DATAB..

[next.js] intersection observer로 무한스크롤 구현하기

본 글은 Next.js 환경에서 무한스크롤 기능을 intersection observer를 이용해 구현한 방법에 대해 작성하였습니다. 구현 설명 우선 처음 데이터는 Next의 getServersideProps로 받고, 이후 데이터는 intersection event가 발생했을 때 다음 배열을 가져오는 api를 호출하도록 구현하겠습니다. 이때 API는 원하는 page를 쿼리 파라미터에 page=1과 같이 지정하면 해당 page의 데이터를 반환하도록 구현되어있습니다. 상세 구현 타입 지정 프로젝트에서 가져오는 정보들을 memory라 명명하여 type도 연관되게 이름지었습니다. GetMemoryListRes 타입은 데이터를 fetching해올 때 무한스크롤 할 정보의 response타입입니다. /** memo..

[Next.js] Next에서 Styled Components와 함께 Storybook 세팅하기

Create-Next-App을 통해 생성한 Next.js 프로젝트에서 storybook 초기 설정하는 방법에 대해 알아보겠습니다. Storybook 설치하기 npx storybook@latest init 위 명령어로 storybook의 최신버전을 프로젝트에 설치합니다. yarn add -D @storybook/nextjs 설치를 완료했다면 nextjs를 지원하는 패키지도 설치해줍니다. 설치를 완료했다면 아래 코드를 .storybook/main.ts 파일에 추가해줍니다. // .storybook/main.ts const config: StorybookConfig = { //... framework: { name: '@storybook/nextjs', options: {}, }, } npm run story..

[React] vite와 함께 리액트 컴포넌트 npm에 배포하기

우리가 흔히 사용하는 react, eslint와 같은 패키지를 우리도 npm에 직접 배포할 수 있습니다. react 함수와 컴포넌트 등을 작성한 라이브러리를 추후 프로젝트에 만들어서 사용할 예정이기 때문에, 이를 연습하기 위해 여러 리액트 컴포넌트를 npm에 배포한 과정을 설명하겠습니다. 추가적으로, 개발자 경험과 번들링 사이즈 개선을 위해 여기에 이점이 있는 pnpm과 vite를 사용해서 배포해보겠습니다. vite + pnpm으로 프로젝트 설정하기 pnpm create vite (프로젝트 명) 위 명령어를 실행하면 아래와같이 framework와 언어를 선택할 수 있습니다. react 컴포넌트를 배포하기 위해 React를 선택한 다음, typescript를 지원하기 위해 Typescript를 선택해줍니다..

[React] 메모이제이션 Hook으로 중복연산 피하기 (useCallback, useMemo)

메모이제이션(Memoization)은 프로그램이 동일한 계산을 반복할 때, 이전에 계산한 값을 메모리에 저장함으로써 중복되는 연산을 제거해서 프로그램 실행 속도를 빠르게하는 기술입니다. 리액트 함수형 컴포넌트에서는 이러한 메모이제이션을 돕기 위한 두가지 Hook을 제공합니다. 메모이제이션을 하지 않을 때 함수형 컴포넌트에서 상태값이 변경되면 해당 컴포넌트는 다시 렌더링합니다. 이때 컴포넌트 내부에 정의한 함수들도 다시 생성되고 실행되기 때문에 메모이제이션이 필요합니다. 아래와 같은 경우 메모이제이션 훅 useCallback과 useMemo를 사용할 수 있습니다. 렌더링 마다 함수가 새로 생성되어 참조값이 변하는 경우 실행되는 함수가 복잡한 연산을 수행하는 경우 이외에도 훅을 사용하는 다양한 경우가 있지만..