전체 글

퇴사 회고 2024년 2월부터 2026년 4월까지, 약 2년 2개월 동안 루틴 관리 서비스를 만드는 스타트업에서 프론트엔드 개발자로 일했습니다. 팀은 크지 않았습니다. 디자이너 2명, PM 1명, 백엔드 2명, 프론트엔드 2명, 대표 1명으로 구성된 팀이었습니다. 작은 팀이었지만 서비스의 규모는 작지 않았습니다. 최대 MAU 20만 규모의 다국어 서비스를 운영했고, 저는 React Native 앱과 Next.js 웹뷰를 오가며 서비스의 여러 핵심 영역을 담당했습니다. 퇴사는 회사의 재정 상황으로 인해 결정되었습니다. 아쉬움이 없다고 말하기도 어렵습니다. 아직 마무리하고 싶었던 일들이 있었고, 더 개선하고 싶었던 문제들도 남아 있었습니다. 그래도 이 시간을 돌아보면, 이곳은 내가 개발자로서의 자아와 욕심..

main이 explorer, reviewer를 자동으로 부르는 구조 만들기 최근 Codex CLI에서 멀티에이전트를 실제 업무 흐름에 붙여볼 수 있을지 테스트해봤다.내가 원했던 구조는 꽤 단순했다. 사용자는 메인 에이전트 하나에게만 요청한다.그러면 메인 에이전트가 필요할 때만 하위 에이전트를 호출해서 탐색과 분석을 맡기고, 최종 판단과 수정은 메인이 직접 하는 방식이다. 즉, 내가 만들고 싶었던 구조는 아래와 같았다. main: 최종 판단, 코드 수정, 결과 통합explorer: 빠른 탐색, grep, 후보 파일 추리기, 요약reviewer: 깊은 버그 분석, 아키텍처 판단, 리스크 검토 처음에는 “그냥 터미널 3개 띄워서 각각 다른 모델을 쓰면 되는 거 아닌가?” 싶었다.그런데 그건 내가 원한 UX가 ..

Android 4KB → 16KB 페이지 메모리 전환기: 우리가 한 것과 배운 것TL;DR4KB/16KB는 운영체제 메모리 관리 단위(페이지 크기)입니다. 최신 ARM64 기기(일부 Pixel/삼성 등)에서 16KB 페이지가 증가하고 있고, 네이티브 라이브러리(ELF .so)의 PT_LOAD 정렬(Align)이 기기 페이지 크기 이상이어야 로더가 안전하게 매핑합니다.우리는 빌드 체인을 최신으로 정렬(Gradle/NDK/AGP), 종속성들을 RN 0.79/Expo 53 호환 버전으로 재정렬, 불필요 패치 제거, 런타임 이슈(블랙스크린·i18n·BackHandler) 수정, 그리고 AAB/.so 정렬 검증을 추가해 16KB 환경에서도 앱이 정상 동작하도록 만들었습니다.4KB와 16KB는 무엇을 의미하나?메모..

최근 프로젝트에서 애니메이션 라이브러리인 Rive를 사용하고 있는데, 기존에는 AWS S3 버킷에서 직접 .riv 파일을 다운로드 받는 방식으로 구현했습니다. 그런데, CDN의 장점을 활용해서 성능도 개선하고, 비용도 절감할 수 있다는 얘기를 듣고, CloudFront를 도입하여 CDN 링크로 변경하는 작업을 진행하게 되었죠.  처음엔 "그냥 URL만 바꾸면 되는 거 아냐?"라고 안일하게 생각했었는데... 이게 웬걸? CORS(Cross-Origin Resource Sharing)라는 복병을 만나게 될 줄은 꿈에도 몰랐습니다. 오늘은 제가 S3에서 직접 받던 .riv 파일을 CloudFront CDN 링크로 변경하면서 겪었던 CORS 에러와 그 해결 과정을 회고하며 공유해볼까 합니다.🤦‍♂️ 시작은 순..

이번에 서비스에 가입하는 과정에서 기획상 변경해야하는 부분이 생겨 업무를 담당하게 되었습니다 일단 간단한 플로우를 설명하면  기존변경나이를 입력받음 생년월일을 입력받음ex) 25ex ) 2024-05-01 기존에는 나이를 입력받아 전달하면 되는 플로우지만, 변경해야하는 부분은 생년월일을 입력받아야합니다.간단하죠? 저도 간단할 줄 알았습니다 문제가 됐던 부분들을 먼저 정리해보겠습니다.타입과 DB구조 가장 많은 에러를 마주했던 부분입니다. 기존에 회원가입에 필요한 정보들을 정의해둔 ts 파일이 있었습니다.  해당 파일에는 나이를 string으로 입력받아 DB에 전달하고 있었습니다. 여기서 전 두가지 분기점을 생각했습니다. 생년월일을 입력받아야하면 필요한 input은 3개입니다. (연도, 월, 일) strin..

이번에 GraphQL, Axios를 합쳐서 사용해볼 수 있는 기회가 생겼습니다. 이런 좋은 기회를 기록하지않고 넘어가기엔 너무 아까운 것 같아 포스팅을 해보려합니다. REST API의 단점을 때려잡은 GraphQL을 알아보고 어떻게 Axios와 혼합하여 사용할 수 있는지 알아보겠습니다. GraphQL GraphQL을 정리해서 이야기해보면 웹 클라이언트가 서버로부터 데이터를 효율적으로 가져오는 것이 목적인 쿼리 언어입니다. 'REST API랑 뭐가 달라? 정보 가져오는 건 똑같은데?' 라는 질문을 하시는 분들도 있겠죠? GraphQL은 REST API와는 다르게 클라이언트가 필요한 데이터만 정확하게 요청할 수 있는 유연성을 제공합니다. REST API는 서버에서 정의한 엔드포인트에 요청을 보내면, 서버는 ..

JS의 대표적인 중앙상태관리자인 리덕스에 대해 알아보도록 하겠습니다. 중앙상태관리자란, 상태 값들을 컴포넌트 단위로 저장하는 것이 아니라, 상태 값들을 따로 관리하여 참조하고, 변경할 수 있는 라이브러리입니다. 왜 중앙상태관리자가 필요할까요?? 아래 다이어그램으로 살펴보겠습니다. 몇 안되는 컴포넌트의 deps에서는 state Drilling을 통해 관리할 수 있겠지만, 만약 아래같은 상황이라면 어떨까요?? . . . . . . . . . state Drilling이 도저히 감당할 수 없고, 거쳐가는 모든 컴포넌트들이 state를 들고 다녀야하는 말도안되는 상황이 생기게 됩니다. 그럼 저희가 오늘 알아볼 중앙상태 관리자가 도입된다면 어떻게 변화될까요? 상태관리를 담당해주는 중앙상태관리자로 인해 컴포넌트간..

모든 렌더링에는 고유한 state가 있다 랜더링 시 그 안에 있는 State의 데이터가 시간이 지난다고 바뀌는 것이 아니다.컴포넌트가 재 호출되고, 각각의 랜더링마다 격리된 고유의 count 값을 "보는" 것 입니다. state를 변경하면, 해당 state의 값이 올라가며, 이 state를 참조하고 있는 함수는 랜더링 당시의 state를 보고 있게 된다.각각의 랜더링은 고유한 버전의 함수를 리턴하게 되고, 각각의 버전은 고유의 state를 기억하게 됩니다. 1. state변경이 일어나면, 컴포넌트는 리액트에게 상태 변경을 요청한다.  2. 리액트는 컴포넌트에 변경사항이 적용된 랜더링 결과물을 만들고 브라우저에게 dom에 추가한다. 3. 이후 useEffect 의 콜백함수 내용을 실행한다. (랜더링 당시의..