개발 창고

[Yarn] Yarn v2에서 npm registry를 바라보도록 환경설정하기

yarn은 위와 같이 기본적으로 registry.yarnpkg.com을 바라본다. 따라서 npm registry를 사용하는 사내 패키지를 받기 위해서 yarn이 npm registry url을 바라보도록 설정해줘야 한다. npmRegistryServer 옵션 설정 .yarnrc.yml파일에 npmRegistryServer 옵션을 아래와 같이 설정하면 이제 npm registry로 바라본다. npmRegistryServer: 'https://npm.pkg.github.com' 하지만 이렇게 설정하게 되면 모든 패키지를 설치할 때 해당 npm registry를 바라보기 때문에 yarn에서 받아와야하는 기존 패키지들을 설치하지 못한다는 문제가 있다. 따라서 사내 패키지만 특정적으로 npm registry를 바..

[Xcode] Distribution failed with errors

문제 Xcode에서 앱 빌드 후 Archive > Distribute 하는 과정에서 다음과 같은 에러가 발생했다. Invalid bundle. The "UlInterfaceOrientationPortrait,UlInterfaceOrientationLandscapeLeft,UlInterfaceOrientationLan dscapeRight" orientations were provided for the UISupportedInterfaceOrientations Info.plist key~ 에러를 읽어보면, UISupportedInterfaceOrientations key에 해당하는 모든 orientation이 포함되어야한다고 한다. 따라서 info.plist파일에 누락된 UIInterfaceOrientat..

[Vite] 컴포넌트 build시 이미지가 dynamic import되도록 환경설정

Icon 컴포넌트 작성 사내 라이브러리에서 icon 컴포넌트를 만들어야 했는데, 아래와 같이 동적으로 name props을 변경하면 이미지가 변경되도록 구현해야했습니다. import styled from "@emotion/native"; import { IconsNameType } from "../../.."; export type IconProps = { name: IconsNameType; size: 16 | 20 | 24; }; export const Icon = ({ name, size }: IconProps) => { return ; }; const S = { ImageWrapper: styled.Image` width: ${({ size }) => size}px; height: ${({ siz..

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