reactnative5 [Frontend] 작은 조각부터 쌓는 컴포넌트 설계 — Atomic Design과 UI 라이브러리를 안 쓴 이유 이 글은 디자인 토큰 위에 컴포넌트를 어떻게 체계적으로 쌓았는지, 그리고 잘 만들어진 UI 라이브러리들을 두고도 직접 컴포넌트를 만들기로 한 이유를 정리한 것입니다. 1인 개발이나 소규모 팀에서 컴포넌트 구조가 점점 뒤죽박죽이 되는 게 고민이거나, UI 라이브러리를 쓸지 직접 만들지 저울질하고 있다면 참고가 될 만한 내용입니다.함께 보면 좋은 글: 이 글은 디자인 시스템 2부작의 2편입니다. 1편에서는 색·간격·폰트를 토큰으로 묶어 일관성을 만드는 방법을 다뤘습니다. 토큰이 "값의 일관성"이라면, 이번 글은 "구조의 일관성"입니다.토큰만으로는 부족했다1편에서 색과 간격, 폰트를 토큰으로 묶고 나니 화면 사이의 시각적 어긋남은 크게 줄었습니다. 그런데 화면이 늘어나면서 다른 종류의 혼란이 찾아왔습니다. 같.. 2026. 6. 26. [Frontend] 디자인 감각이 없어도 일관된 UI 만들기 — 디자인 토큰으로 시스템에 맡기기 이 글은 디자인 감각이 부족한 개발자가, 색상·간격·폰트를 "토큰"으로 묶어서 화면마다 들쭉날쭉하던 UI를 일관되게 만든 과정을 정리한 것입니다. 별도 라이브러리 없이 객체 파일 몇 개로 시작할 수 있는 방법이라, 1인 개발이나 소규모 프로젝트에서 디자이너 없이 UI 일관성을 유지하고 싶을 때 바로 적용할 수 있습니다.함께 보면 좋은 글: 이 글은 디자인 시스템 2부작의 1편입니다. 2편에서는 이 토큰 위에 컴포넌트를 쌓는 Atomic Design 구조와, UI 라이브러리를 쓰지 않고 직접 만든 이유를 다룹니다.나는 디자인 감각이 없다솔직히 고백하면, 저는 디자인 감각이 없습니다. 색을 고르라면 한참 헤매고, 버튼 여백이 16이 맞는지 20이 맞는지를 매번 새로 고민합니다. 그런데 1인 개발이라 옆에서 .. 2026. 6. 25. [DevOps] Mac 없이 Expo 앱 배포 자동화: EAS Build + Google Play 자동 제출 (서비스 계정) 📌 이 글의 핵심 요약핵심 내용: Mac 없이 Expo 앱을 클라우드에서 빌드(EAS)하고, Google Play에 자동 제출하는 파이프라인 구축기주요 포인트: EAS Build, --auto-submit, 서비스 계정 설정, versionCode/versionName 분리, 비공개 테스트 출시 흐름기대 효과: AAB 수동 업로드 없이 명령어 한 줄로 빌드→제출, 사람 실수 제거대상 독자: Expo로 앱을 만들었고 출시 자동화를 고민하는 1인 개발자⚠️ 서비스 계정·키 같은 민감값은 모두 마스킹했습니다. 설정 이름·구조만 노출합니다.📎 함께 보면 좋은 글이 글은 Whale-Log 운영 기록 중 모바일 배포 편입니다. 앞선 배포기에서 "모바일은 별도 파이프라인"이라고 미뤄둔 그 부분을 다룹니다.웹·백엔.. 2026. 6. 16. [React] JWT 인증 상태 관리 및 자동 로그인 구현 (Axios Interceptor + React Native 환경) 📌 이 글의 핵심 요약핵심 내용: React 환경에서 JWT를 안전하게 저장하고, Axios 인터셉터로 자동 로그인을 구현하는 실전 가이드주요 포인트: 토큰 저장 위치 선정, 401 응답 시 자동 재발급, React Native 특수 고려사항기대 효과: 사용자 경험을 해치지 않으면서도 XSS·탈취에 강한 인증 클라이언트 구축적용 시점: 백엔드 JWT 시스템 구축 완료 후 프론트 연동 단계📚 시리즈 구성이 글은 NestJS 기반 자체 JWT 인증 시스템 구축 시리즈의 4편입니다.1편: Firebase Auth 제거 및 아키텍처 전환 이유2편: NestJS JWT 인증 구현 방법 (Global Guard + bcrypt 실전 가이드)3편: JWT Access Token vs Refresh Token 설계.. 2026. 5. 25. [Project] Whale-Log: 기술 스택 선정과 생존 전략 안녕하세요, whale-tail입니다. 설계도를 그리고 스켈레톤 코드를 짜다 보니, 어느덧 개발자로서 가장 설레면서도 두려운 '기술 스택 확정'의 순간이 왔습니다. 오늘은 제가 왜 이 도구들을 선택했는지, 그리고 1인 개발자로서 마주한 '현실적인 선택과 집중'에 대해 솔직하게 적어보려 합니다. .🛠 1. Whale-Log를 지탱할 기술들: 왜 이 조합인가?Frontend: React Native + TypeScript이유: 저는 웹 개발자입니다. React의 컴포넌트 기반 사고방식은 저에게 가장 강력한 무기입니다. Flutter라는 매력적인 대안도 있었지만, 러닝 커브를 최소화하고 비즈니스 로직에 집중하기 위해 RN을 선택했습니다.기술적 고찰: 특히 웹에서 사용하던 Business Logic이나 API.. 2026. 2. 6. 이전 1 다음
