분류 전체보기 40
[React Native] 앱 접근시 필요한 동작을 구현해보자
시대생 앱은 최초 앱 접근시 로그인 유무에 따라 AccountScreen을 보여주거나, MainScreen을 보여줘야 합니다. 또한 로그인이 되어있다면 device 정보를 서버에 업데이트 시키거나, 알림을 위한 firebasePushToken 정보를 얻어오는 과정이 필요하기 때문에 이와 관련된 로직이 앱 접근시 실행되어야합니다. 본 글은 앱 접근시 어떤 로직이 실행되도록 구현했는지, 그리고 어떻게 앱의 전체적인 회원 로그인 관련 처리를 구현했는지를 설명합니다. 시작하기 앞서 시대생 앱의 사용자 인증 인가 방식은 JWT 방식을 사용합니다. React Native의 Device Storage로는 mmkv를 이용합니다. 앱 화면을 보여주는 RootStackNavigator는 아래와 같습니다. const [is..
Frontend/react native | 2023. 11. 21. 07:52

[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를 바..
Frontend | 2023. 9. 8. 04:24

[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..
Frontend | 2023. 9. 4. 02:28

[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..
Frontend | 2023. 8. 18. 00:12

[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..
etc | 2023. 7. 11. 11:30
