💡 읽기 전 필요한 지식 💡- Next.js 컴포넌트가 이미지 최적화를 자동으로 해준다는 정도의 배경- SVG(벡터)와 WebP(래스터/압축 포맷)가 서로 다른 이미지 포맷이라는 것- 이 프로젝트(톨리)는 React Native + WebView로 Next.js 페이지를 감싼 하이브리드 앱이라, 웹 성능이 곧 앱 체감 속도로 이어진다📖 읽고 나면 얻을 수 있는 것 📖- SVG가 Next.js Image 최적화 대상에서 빠지는 이유를 이해하게 된다- sharp로 SVG를 WebP로 직접 변환하는 스크립트를 만드는 법을 알게 된다- priority와 의 차이, 언제 각각을 써야 하는지 알게 된다- 프로덕션 JS 번들 크기를 개발 모드 수치만 보고 오판하지 않는 법을 알게 된다 필자는 톨리란 프로젝트..

💡 읽기 전 필요한 지식 💡- 웹뷰가 결국 브라우저 엔진이고, 그 엔진에도 버전이 존재한다는 정도의 감- SSR/Hydration(즉, 서버가 만든 HTML에 React가 나중에 이벤트를 붙이는 과정)이라는 말을 들어본 적이 있으면 좋음- iOS와 Android가 같은 코드도 다르게 그릴 수 있다는 점📖 읽고 나면 얻을 수 있는 것 📖- "내 PC 브라우저에서는 되는데 실기기에서는 안된다"라는 문제를 어떤 순서로 풀어가는지 감을 잡게 된다- 웹뷰 환경이 일반 브라우저와 어떻게 다른지, 그게 왜 버그로 이어지는지 이해하게 된다- 기기마다 다른 화면의 곡선 같은 문제를 네이티브 모듈로 해결하는 흐름을 엿볼 수 있다일단 이 글을 읽기 전에 이전 글들을 읽으면 도움이 될 것이다. 개발 -> 출시"의 단계..

💡 읽기 전 필요한 지식 💡- 웹뷰(앱 안에 띄우는 브라우저 창)에서 웹 페이지가 돌아간다는 정도의 감 (2편 참고)- Firebase 로그인, idToken(구글이 서명한 임시 토큰)이라는 개념에 대한 가볍운 이해- Expo / Expo Go / Development Build라는 단어를 들어본 적이 있으면 더 좋음 (몰라도 본문에서 설명한다)📖 읽고 나면 얻을 수 있는 것 📖- 구글이 왜 웹뷰에서의 로그인을 막는지, 그걸 어떻게 우회하는지 이해하게 된다- 웹뷰와 네이티브(RN)가 JS Bridge로 역할을 나누어 소셜 로그인을 처리하는 구조를 알게 된다- Expo Go와 Development Build의 차이, 그리고 왜 네이티브 모듈이 필요하면 Development Build를 써야 하는지 ..

💡 읽기 전 필요한 지식 💡- OAuth 소셜 로그인이 "토큰을 주고받는 과정"이라는 정도의 큰 그림- 딥링크(tolli:// 같은 주소로 앱을 여는 것)와 WebView가 메시지를 주고받는다는 개념- Firebase 로그인과 id_token(신원을 증명하는 토큰)이 무엇인지에 대한 가벼운 감📖 읽고 나면 얻을 수 있는 것 📖- "로그인은 되는데 앱으로 돌아오지를 않는" 같은 미묘한 버그를 어떻게 잡아가는지 감을 잡게 된다- 안드로이드에서 애플 로그인이 왜 까다로운지, 그리고 그걸 어떻게 우회했는지 이해하게 된다- 에러 메시지가 아니라 "호출이 아예 안 일어난 것"을 단서로 원인을 찍는 디버깅 사고방식을 엿볼 수 있다일단 이 글을 읽기 전에 이전 글들을 읽으면 도움이 될 것이다. 개발 -> 출시"..

💡 읽기 전 필요한 지식 💡- 컴포넌트라는 개념에 대한 가벼운 이해- switch문이 값에 따라 분기하는 문법이라는 정도의 지식- 여러 명이 하나의 레포에서 함께 개발한다는 상황에 대한 감📖 읽고 나면 얻을 수 있는 것 📖- 하나의 큰 화면을 여러 사람이 나눌 수 있게 "구조로" 설계하는 방법을 이해하게 된다- switch 분기와 독립 컴포넌트라는 뼈대가 왜 협업과 관심사 분리에 유리한지 알게 된다- 애자일하게 스프린트마다 역할을 나누고 리딩한 경험이 어떤 모습이었는지 엿볼 수 있다이 글을 읽기 전에 이전 글들을 읽으면 도움이 될 것이다. 개발 -> 출시"의 단계를 거친다는 정도의 큰 그림- 듀오링고 같은 학습 앱을 한 번이라도 써본 경험- "타겟 사용자"나 "문제 정의"라는 말이 어떤" data..

💡 읽기 전 필요한 지식 💡- React와 React Native(RN)가 서로 다른 것이라는 정도의 구분- SSR과 CSR이라는 말을 들어본 경험- 앱이 웹뷰(앱 안에 띄우는 브라우저 창)로 웹을 띄울 수 있다는 사실📖 읽고 나면 얻을 수 있는 것 📖- "순수 RN"과 "RN 껍데기&웹뷰의 조합인 하이브리드"의 차이와 각각의 장단점을 이해하게 된다- 웹뷰만으로 만든 앱이 왜 스토어 심사에서 거절될 수 있는지, 어떻게 하면 하이브리드 앱으로 인정받는지 알게 된다- 모노레포·pnpm·Next.js App Router·Expo 같은 선택을 "왜" 했는지 근거로 설명할 수 있게 된다자 이제 기획이 정리가 되었다. (기획 관련글은 아래 글을 참고하면 좋을 것 같다.) 개발 -> 출시"의 단계를 거친다는 ..

💡 읽기 전 필요한 지식 💡- 모바일 앱이 "기획 -> 개발 -> 출시"의 단계를 거친다는 정도의 큰 그림- 듀오링고 같은 학습 앱을 한 번이라도 써본 경험- "타겟 사용자"나 "문제 정의"라는 말이 어떤 의미인지에 대한 가벼운 감📖 읽고 나면 얻을 수 있는 것 📖- 좋은 제품은 기능이 아니라 "문제 정의"에서 출발한다는 것을 이해하게 된다- 톨리(tolli)라는 앱이 왜, 누구를 위해 만들어졌는지 알게 된다- 추상적인 슬로건 하나가 실제 화면 설계로 어떻게 번역되는지 감을 잡게 된다5월부터 필자는 대학교의 창업팀에 개발자로 합류하게 되었다.필자는 항상 좋은 문제정의를 가지고 공감과 해결하고 싶은 의욕과 함께 개발을 하고 싶었고,MVP를 빠르게 만들어 배포하고, 실제로 사용자들과 직접 만나고 발로..

5월 초, 인스타그램 릴스를 보며 스크롤하다가 아티클 하나가 눈에 확 들어왔다.GitHub 스타 15만개를 막 넘은 오픈소스, Everything Claude Code(ECC)였다.관련해서 포스트를 둘러보니 Claude Code를 포함한 여러 AI 하네스를 위한 프로덕션 레디 플러그인 시스템이라고 했다. GitHub - affaan-m/ECC: The agent harness performance optimization system. Skills, instincts, memory, security, and research-firsThe agent harness performance optimization system. Skills, instincts, memory, security, and researc..

💡 읽기 전 필요한 지식 💡- JavaScript Promise와 .then() 체이닝의 기본 개념- axios로 HTTP 요청을 보내본 경험- Array.prototype.push와 unshifht의 차이📖 읽고 나면 얻을 수 있는 것 📖- axios 인터셉터가 내부적으로 하나의 거대한 Promise 체인으로 연결된다는 것- request 인터셉터가 역순으로 실행되는 이유를 소스코드 레벨에서 설명할 수 있게 됨 Axios를 공부하면서 인터셉터를 여러 개 등록하면 어떻게 동작하는지 궁금해졌다.당연히 등록한 순서대로 실행되겠지? 싶었다. (동기 코드는 순차적으로 실행된다와 같은 원리) 필자는 직접 확인해보기로 했다.실험 환경 세팅 및 결과별도 서버 없이 테스트할 수 있도록 무료 mock API인 j..

레벨1이 끝났다.정확히는, 끝났다는 실감이 좀 늦게 왔다...마지막 PR이 머지되고, 리뷰어에게 감사 인사를 남기고, 창을 닫고 나서야 "아 끝났구나" 싶었다.두 달이 이렇게 빨리 갔나 싶기도 하고,,, 뭐 누구든지 우테코에 들어오기 전에 여러 걱정들을 품에 안고 들어왔을 것 같다.그런데 돌이켜보면, 그 걱정들은 대부분 기우였다.레벨1은 나를 무너뜨리지 않았다. 오히려 꽤 많은 것들을 쌓아줬던 발판이 되어주지 않았을까?미션마다 먼저 내가 크게 배운 인사이트를 정리해보고자 한다.(회고 글이니 필자의 코드를 따로 정리하진 않으려 한다. 대신 GitHub 링크를 남기고자 한다!)로또 미션에서 배운 "관심사 분리"로또 미션 Step 1을 마무리할 때, 솔직히 도메인과 UI를 분리하는 게 그렇게까지 중요한지 잘 ..