기획자, PM, PO 그 사이 어딘가의 여정 저는 프론트엔드 개발자입니다.그런데 프로젝트를 진행하다 보면 어느새 PO처럼 우선순위를 잡고, 기획자처럼 화면을 그리고, PM처럼 일정을 조율하고 있더라고요. 서비스와 제품에 관련된 일이라면 직무의 경계를 가리지 않고 폭넓게 작업해온 경험이 꽤 쌓였습니다.몇 년 전만 해도 이렇게 여러 역할을 넘나드는 일은 "이도 저도 아닌" 커리어로 여겨지곤 했습니다. 하지만 업계가 빠르게 성장하면서 개발자에게도 기획 감각과 도메인 지식이 점점 더 중요해졌고, 이제는 이런 경험이 오히려 강점이 되는 시대가 된 것 같습니다.저 역시 이 경험들이 중요하다고 생각해 이력서에도 적었는데요. 개발자로서 참고용으로만 가볍게 넣은 이력이었는데, 생각보다 이 부분을 눈여겨봐 주시는 회사가 많았습니다. 다만 "그 경험을 뒷받침할 근거가.. Claude를 이용한 PR 자동 코드리뷰 파이프라인 구축기 저는 몇 년 동안 대부분 혼자 개발을 했습니다최근에도 혼자서 개발하고 앱 출시까지 하면서 코드리뷰에 대한 갈망이 더 커져갔습니다그래서 Claude를 이용해 PR 생성부터 코드리뷰까지 해주는 워크플로우를 만들게 되었습니다 최종 완성된 흐름워크플로우 순서는 아래와 같습니다개발자가 git push │ ├─ [즉시] 린트 + 타입 체크 실행 │ 오류 있으면 → push 차단 │ 통과하면 → push 진행 │ └─ [push 후 백그라운드] Claude 실행 │ ├─ PR이 없으면 → PR 자동 생성 (제목/내용도 Claude가 요약해서 작성) │ └─ 코드리뷰 진행 .. TanStack Query를 Next.js 캐싱 전략으로 바꾸기 현재 [로그트립 1.1] 앱에서 캐싱 전략으로 TanStack Query를 사용하고 있습니다최초에는 React Native로 구성된 앱이었으나 설계를 바꾸면서React Native + Next.js 구조의 하이브리드 앱으로 바뀐 상태입니다React Native는 CSR 형태에 가깝습니다 (정확히는 좀 다름)아무튼 SSR이 안되는걸로 알고 있는데 레딧에서 어떤 글을 발견... [문서] Reddit의 reactnative 커뮤니티reactnative 커뮤니티에서 이 게시물을 비롯한 다양한 콘텐츠를 살펴보세요www.reddit.com(그래서 가능하다는 문서 어딨는건데.. 찾질 못하겠음 React Native web을 말하는건가 싶음...)아무튼 CSR 형태의 React Native에서 데이터 캐싱에 대한 고민.. React Native + Next.js (WebView)간에 Supabase SSR Cookie 설정 1. 이 전 코드이전에는 클라이언트용만 사용하고 있었다React Native에서는 아래와 같이 토큰을 웹뷰측에 넘겨주고 있었다export default function HomeScreen() { const webviewRef = useRef(null); const params = useLocalSearchParams(); const { accessToken, refreshToken } = params; const injectSession = () => { if (webviewRef.current && accessToken && refreshToken) { const message = JSON.stringify({ type: "SESSION", accessTo.. 하이브리드 앱 구축 및 출시 회고 | React Native + Next.js + Supabase 조합 현재 출시를 목표로 만든 [로그트립] 앱이 있습니다출시는 되었으나 꾸준히 리팩토링 과정을 거치고 있는 중인데요일단 출시가 목표였기에 무작정 만들다보니 설계 부분에서 놓친것도 많고 고군분투한 과정도 참 많습니다 (앱 개발 자체도 처음) 1. 설계 구조에 따른 시행착오하이브리드 앱 구조로 변경최초 설계는 오로지 React Native로만 개발해서 출시까지 했으나이전부터 프론트엔드 JD에 꽤 보이던 하이브리드 앱으로 React Native 껍떼기에 내부 대부분의 기능을 WebView로 구성한 경험이 있는자를 자격조건 또는 우대사항으로 넣는곳이 보였던 생각이 나더랍니다그래서 저도 공부 겸 하이브리드 앱으로 변경하게 됩니다프로젝트를 Monorepo 구조로 변경또한, 핫했던 조건 중에도 monorepo 설계 경험도.. jest, testing-library를 이용한 TDD 찍먹 해보기 저는 4~5년동안 개발하면서 단 한번도 테스트케이스를 작성한적이 없습니다. 실제로 TDD를 실무에 적용하기란 현실에선 벅찰 수도 있다는 말들이 꽤 많은것 같습니다. 실제로 저도 TDD가 되어있는 회사에 속해본적도 없었고, 상황도 많이 달랐습니다. SI는 정말 오로지 납품, 마감기한이 1순위니까 그 분위기에 테스트케이스를 한다고하면 현실을 살라고... 한 소리 들을수도 있었달까(?) 그럼에도 불구하고 시도할 수 있는 환경이었다면 한번쯤 해보는것도 나쁘지 않았을텐데 하는 아쉬움이 크더라고요물론 혼자서도 할 수 있지만, 대규모 프로젝트 또는 5인 이상 같은 프론트엔드 개발자가 있는 팀에서 시도해봤을때 더 크게 빛을 발하는 부분이지 않나라는 안일한 생각을 가지며... 단 한번도 시도해봐야지^^란 생각조차 안했습.. plop.js를 이용한 코드 생성 자동화 CLI 구축 백오피스 같은 프로젝트는 만들다보면 API 호출 주소만 다른 같은 레이아웃, 코드 구조가 반복됩니다. 사실상 폴더 자체 복붙해서 파일명, 컴포넌트명, API 주소만 바꾸면 되는 격이죠. 지금까지 폴더를 복붙했었지만 어느순간부터 짜친다라는 느낌이 들더라고요. 분명 자동화하는 방법이 있을텐데? 라는 생각이 들면서 "맞다, CLI 툴을 이용하면 되겠구나!" 싶어서 바로 실행해봤습니다.다양한 CLI 툴이 있는데, 우리는 정말 간단하게 일관성 있는 코드로 page, apis, consts만 생성하면 되는거라서 plop.js를 쓰게되었습니다. plop.jshttps://plopjs.com/ Plop: Consistency Made SimpleA little tool that saves you time and he.. 다국어 라이브러리 비교 | react-i18next, react-intl, Lingui, next-translate 새롭게 리뉴얼 하려는 프로젝트가 다국어로 되어있는 서비스이다. 사실 다국어래봤자 이젠 한국어와 영어만 남아있는데... 아무튼 글로벌 서비스다 이 말이다! (?)기존 서비스는 .NET으로 되어있기에 React 기반으로 옮기면서 SSR을 할지, 다국어 라이브러리는 어떤걸 쓸지 고민도 되고 다국어 서비스는 처음이라 그 내용들을 기록 해보려고 한다 서비스 스펙 (?)영어, 한국어 지원실시간성 필요 없음동적 콘텐츠 비율이 높으나 계정 자체에 언어가 기본 설정 되어있기에 동적 콘텐츠가 곧 정적인 콘텐츠라고 볼 수 있음여러 해외 사람들이 와서 보는 B2C 형태인 서비스가 아닌 B2B이기에 본인이 쓴 글을 본인이 보는거고 관리자같은 경우에는 상대방에 맞춰 영어 또는 한국어로 작성하기에 굳이 상대방에게 서로 작성한 내용.. CRA 지원 종료. Vite로 마이그레이션 하기 https://react.dev/blog/2025/02/14/sunsetting-create-react-app Sunsetting Create React App – ReactThe library for web and native user interfacesreact.devCRA는 이미 오래전부터 비공식적으로 지원 종료되었다는 소문이 나있었다. 그러다가 드디어 2025년 2월 공식적으로 지원 종료한다는 글이 올라왔다. CRA의 마지막 릴리즈는 무려 3년 전이다. 3년 동안 단 한 번도 릴리즈 업데이트를 하지 않았는데, 그럼에도 불구하고 우리 팀에서 2024년 여름에 CRA로 개발을 시작했더랬다... 열심히 검색해봤더니 다들 CRA로 시작하래서 시작한 거라는데... 그땐 이미 Next.js로 시작하는 게 거.. CRA 절대경로로 변경하는 법 입사 하고 프로젝트를 딱 받았을때 경악했던게 비공식적으로 지원 종료했다는 소문이 난 CRA로 만들었다는 점 (2025년 2월에 공식저으로 지원 종료를 알림). 그리고 상대경로인 점과 폴더명에 한글을 썼다는 점, 폴더가 분리되지 않고 모~든 파일이 features에 있는다는 것이다.오래된 플젝이면 당연히 CRA일수도 있는거 아니냐? 할 수도 있는데 전혀 오래되지 않은, 무려 작년 여름(2024년 8월)에 시작한 프로젝트라는 것이다. CRA가 비공식적으로 지원 종료한거 아니냐라는 말이 나온건 2024년때보다 더 전부터 들었던것 같다. 근데도 굳이 CRA로 시작 했다는게 너무 충격적이고, 기가막힌건 나름 열심히 검색해봤더니 CRA를 추천해줘서 했다고하더라... 대체 검색을 어떻게 한건지 매우 의문스럽다.아무튼.. [회고] 기획 및 디자인을 하면서 느낀점 현회사에 입사한 지 대략 5개월이 지났다. 의도치 않게 현재 기획, 디자인, 프론트엔드 개발까지 총 3개의 업무를 맡아서 일을 하고 있다. 진짜 의도한 게 아니었으며... 사람은 자기가 뱉은 말을 따라가는 건가? 싶은 생각도 들었다.왜냐면 내가 2024년 회고에 위와 같은 말을 했기에...입사하고 기획도 담당을 하게됐다.디자인은 어쩔 수 없이 따라올 수 밖에 없었다. 디자이너가 없는 팀이었으며 내가 또또또~ 사용성과 사이드 이펙트에 민감한 타입이라 여러 케이스를 직접 그려봐야지 직성이 풀리는 타입이다. 그래서 피그마로 여러 케이스를 그려보며 어라? 이건 불편할 것 같은데?를 하나하나 기록 겸... 디자인 시안을 쭉 그리고 있다. 아무튼 더 자세한 회고는 1분기 회고로 따로 작성하는걸로 하고 기획 및 디자.. onKeyDown, onChange를 사용할때 한글 조합 문제 input에 입력후 Enter를 눌렀을때 string 배열에 입력값을 push해서 보여지는 UI를 만들었다영어를 입력했을땐 문제가 없었으나, 한글을 입력하고 엔터를 누르면 끝 글자만 떨어져나와 2개씩 string이 생성되는 문제가 발생하게 되었다사실 늘 이런 컴포너는트는 mantine을 쓰든 뭘 쓰든 대부분 UI 라이브러리를 사용해서 가져다 쓰기만했었지 직접 만드는건 처음이게 이런 문제가 발생할 수 있다는걸 모르고 있었다그래서 keyUp으로 뭔갈 해야해야하나? 지연을 줘서 늦게 input을 리셋 시켜야하나? 고민하다가 chatGPT한테 물어보니 원인을 알 수 있었다 {values.map((v, idx) => ( {v} ))} ) => { .. 이전 1 2 3 4 5 다음
