꾸준히만 가자

최근 들어 서버 데이터를 프론트 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', ], ..