꾸준히만 가자

최근 들어 서버 데이터를 프론트 state로 변형해 관리하여 처리하는 경우가 종종 있었습니다.모든 서버에 API 응답값이 페이지 내에서 구현해야 하는 비즈니스 로직에 알맞으면 좋겠지만 그러지 못한 경우가 대다수일 것 입니다. 당시에는 서버 응답값을 기반으로 파생 상태를 만들어 로직을 전개했지만 파생상태를 정의하는 과정이 매끄럽지 못한것을 인지하고 있었습니다. 지금 돌이켜서 어떻게 하면 더 좋은 방법으로 서버 데이터로부터 프론트 파생 상태를 정의할 수 있는지 고민해보았습니다. 여러 방법들이 눈에 띄었지만 다음 두가지 방법이 적용과 이해가 쉬웠습니다. 1. TanStack Query의 select 옵션 사용import { useQuery } from '@tanstack/react-query';const us..

어떤 이슈? 회사에서 하이브리드 앱 개발 중 웹뷰단에서 카카오톡 문의하기를 눌렀을때 안드로이드 기기에서만 카카오톡이 안 열리는 문제가 있었다. 이슈 유형 정리 기본 메인 이슈는 카카오톡 문의하기 클릭 시 카카오톡이 안 열리는 문제 아이폰 너무나도 잘 열림 카카오톡 없으면 다운로드하라는 브라우저 창도 띄워짐 있으면 해당 카톡 열어서 1대1 채팅까지도 가능 갤럭시 S 시리즈 카카오톡이 있을때는 잘 열림 미설치시에는 아무현상도 일어나지 않거나 살짝의 코드 수정시 intent 주소와 함께 UNKOWN_SCHEMA 이슈가 나옴 갤럭시 폴드 시리즈 접었을때는 S 시리즈와 동일한 현상임 펼쳤을때는 아예 아무 현상도 벌어지지 않음 위와 같은 기종 별 현상이 차이가 나서 왜 그런지 정말 고민과 고생이 많았지만 해결을 했..

사건의 발단 회사에서 새롭게 출시할 웹뷰로 이루어진 앱을 출시하기 위해 고군분투 중이었을때였다. 웹 개발만 했던 나로써는 앱 배포와 개발 환경 세팅은 너무나도 어색했다. 물론 웹뷰 환경에서 개발은 계속 해왔지만 마켓에 배포하는 일은 거의 없었기에 조금은 신선했고 재밌었지만 동시에 답답했다. 아이폰을 개발자모드로 연결하고 앱을 켜보니 원래 안드로이드 환경에서는 나타났던 로고가 스플래쉬 화면에 안 뜨는것이다... 이건 뭔가 이상하다 싶어 수정작업을 하려고 했다. 아는 지식이 전무한 상태 한 3시간을 삽질하다가 해결을 했다. 해결책이 너무 간단해서 허무했지만 이렇게 배운다고 생각이 들었다. 원인과 해결책 원인은 Xcode에서 인식하는 Launch screen storyboard가 있는 폴더에 해당 해당 로고 ..

최근 실무를 하면서 Module federation 환경에서 tailwind css를 사용해서 개발을 이어가고 있다. 헤드리스 UI가 부각되면서 Radix UI 기반의 Shadcn UI를 사용하려다보니 tailwind css를 사용하게 되었다. 하지만 역시 시행착오는 있다. 실제 잘 작동할 줄 알았던 스타일링에 문제가 발생했다. 문제 상황 remote 패키지에서 작성한 tailwind css의 class name이 제대로 host 패키지에서 서빙될때 스타일링이 되지 않는 문제 원인 파악 브라우저에서 실제 클래스 네임과 테일윈드의 클래스 네임이 mapping이 잘되는지 확인해보는게 우선이었다. 브라우저에서 스타일링이 정상적이지 않는 요소를 검사해보니 클래스 네임은 들어갔지만 스타일링 mapping이 되지 ..

cypress 설치 및 예제 주입 각 패키지 매니저에 맞춰서 설치한다. pnpm으로 프로젝트를 진행하므로 pnpm add cypress -D 터미널로 설치한다. 설치를 하고 npx cypress open 을 터미널에서 치게 되면 위와 같은 가상 브라우저가 뜨고 진행하면 위와 같이 스펙 선택 창이 나오는데 이는 아무 스펙도 작성하지 않아서이다. 좌측 예제를 누르고 진행하면 위와 같이 테스트를 할 수 있게 되고 눌러서 테스트를 실행시켜 볼 수 있다. cypress 문법의 ts 컴파일을 위해 위 내용을 생성된 cypress 폴더 하위에 넣어주면 위 이미지와 같이 파일이 새로운 폴더와 파일이 생긴다. cypress config 세팅 import { defineConfig } from 'cypress'; expo..

아카이빙을 하는 이유 1. 기억은 휘발된다 제일 큰 이유이지 않을까 싶습니다. 실무 영역에서 개발을 하다보면 많은 버그를 만나고 많은 챌린지에 도전하게 됩니다. 이때마다 많은 구글링, Chat GPT의 도움을 받아 해결하고는 하죠. 그때마다 해결을 하는데에만 초점을 두어 이슈를 처리하면 그 다음 작업을 하기 바빠지게 됩니다. 그러다보면 다른 분들의 이슈를 도와줄때 어디서 봤던 내용일 경우 도움을 줌과 동시에 관련 참조글을 공유해주면 더 설명이 빠르거나 도움이 될 것 같은 기분이 들때가 많습니다. 그때마다 머리를 쥐어뜯어서 아는만큼 설명드리고 관련 문서를 공유드리지만 정확하고 빠르지 않죠. 그러다보니 이슈 해결에 도움이 되는 글이나 영감을 얻은 글을 기록해 두는 것도 의미가 있겠다란 생각이 들었습니다. 2..

배포조건 CSR, SSG 등의 호스팅 서버가 필요없는 렌더링 조건 AWS S3, Cloud front 사용시 MFA, Monorepo를 도입해서 운용하는 프로젝트 배포 트리거 develop 또는 main, master에 PR이 merge되어 Close될때 MFA 구조에 맞게 배포하도록 조건 분할하기 Host, Remote와 같이 패키지별로 관리되어 레포 내에서 분할되어 빌드, 배포 등의 관리가 이루어져야 함 PR시 Label로 구분하여 action 트리거 작동시키도록 구현 Label 정의 deploy host remote deploy-skip invalidation-skip release Label 별 추가시 작동하는 액션 상세내용 deploy 빌드, 배포, 캐시무효화와 같은 배포 로직 실행 all 모든..

jest 세팅 모듈 다운 사용하는 패키지 매니저에 맞춰 필요한 모듈을 다운받는다. 예시 pnpm pnpm add -D jest ts-jest @types/jest @types/node ts-loader ts-node babel-jest @babel/core @babel/preset-env @babel/preset-typescript @testing-library/react @testing-library/user-event config 파일 작성 babel.config.js module.exports = { presets: [ '@babel/preset-env', ['@babel/preset-react', {runtime: 'automatic'}], '@babel/preset-typescript', ], ..

Storybook이란 디자이너 및 개발자 외의 사용자에게 개발자가 정의한 UI를 쉽게 공유하고 테스트 해볼 수 있는 디자인 시스템 관련 라이브러리 Chromatic이란 스토리북을 정적 빌드한 내용을 무료로 배포해주는 스토리북에서 제공하는 배포툴 도입 방법 1. Storybook init 각 프로젝트별 번들러에 맞는 dev server 및 경로 관련해서 자동세팅하기 위해 아래 CLI를 실행시킨다. npx storybook@latest init 위 두가지 폴더 및 파일 생성확인 npm run storybook 또는 yarn storybook, pnpm run storybook 각 패키지 매니저에 맞게 로컬 dev 서버에서 실행 후 화면 확인 2. Storybook 배포 (Chromatic) Automatic..

이슈사항 클라우드 프론트를 사용해서 s3내 정적파일들을 서빙할때 등록한 도메인으로 접속시 루트 기본 객체로 지정한 index.html만 반환되고 하위 폴더로 서브라우팅(domain/**)로 접근하면 해당 객체를 찾을 수 없거나 권한 오류가 나서 오류 페이지를 보게 된다. 대안으로 서브라우팅 주소 뒤에 index.html을 붙혀 명시적으로 html 파일을 가져와 서빙하면 되지만 UX적으로 도메인에 파일 이름이 노출되는것은 매우 불쾌하고 혼란을 가중시킬 수 있다. 따라서 여러 버전을 하나의 도메인에서 관리, 접근하기 위해 클라우드 프론트에서 서브라우팅을 지원해 각 폴더 내 index.html을 자동 반환하게 구현해주어야 한다. 이를 위해 CloudFront와 같은 환경에서 동작할 수 있는 Lambda@Edg..