내가 처음 개발 공부를 시작했을 때만 해도, React 프로젝트는 대부분 create-react-app(CRA)으로 만들곤 했다. 나 역시 별다른 고민 없이 CRA를 사용했지만, CRA는 내가 쓰지도 않는 무거운 패키지들까지 node_modules에 설치되어서 프로젝트가 제법 무겁게 느껴졌다. 그러다 접하게 된 Vite는 필요한 것만 골라 가볍게 설치할 수 있을 뿐만 아니라 빌드 속도까지 획기적으로 빨랐다. Vite를 경험하면서, 프론트엔드 빌드 생태계가 얼마나 빠르게 발전하는지 실감할 수 있었다.하지만 빌드 도구가 Vite로 바뀌는 와중에도 내가 사용하는 패키지 매니저는 늘 npm이었다. 다른 프론트엔드 개발 레포나 기술 아티클에서 pnpm이나 yarn을 사용하는 모습을 보면서, 이들이 npm과 구체적..

서점에서 우연히 발견하고 정독한 도서의 독서기록.책 속의 예시 코드는 Java여서, 책을 읽으며 프론트엔드에서도 적용되는 부분인지 모호했던게 있어서 따로 공부했다. 직접 메모한 내용에 개인적으로 공부한 내용을 추가해서 기록해본다.지난 글은 아래 링크에 있다.https://hjinn0813.tistory.com/207 [도서] 육각형 개발자 #1 (기술)며칠 전에 서점에서 우연히 발견하고 대충 읽어봤는데 내용이 좋아서 정독해보고 싶었다. 동네 도서관에 있길래 중요한 부분을 메모하면서 읽다가, 휴대폰 배터리가 없어서 집에 오는 길에 E-boohjinn0813.tistory.com응집도와 결합도컴퓨터 프로그래밍에서 중요한 단어이다.좋은 코드, 좋은 설계를 가진 아키텍쳐는 높은 응집도와 낮은 결합도를 추구한다...

며칠 전에 서점에서 우연히 발견하고 대충 읽어봤는데 내용이 좋아서 정독해보고 싶었다. 동네 도서관에 있길래 중요한 부분을 메모하면서 읽다가, 휴대폰 배터리가 없어서 집에 오는 길에 E-book을 구매해서 마저 읽었다."좋은 시니어 개발자가 되고 싶은 주니어들을 위한 책"이어서인지, 현재 주니어 레벨인 내가 읽으면서 밑줄친 부분이 많았다. 책 속의 예시 코드는 Java여서, 책을 읽으며 프론트엔드에서도 적용되는 부분인지 모호했던게 있어서 따로 공부도 했다. 직접 메모한 내용에 개인적으로 공부한 내용을 추가해서, 기술과 아키텍쳐 설계 위주로 나눠서 기록해보려고 한다.개발이란?표면적으로는 유저에게 도움을 주는 서비스, 혹은 유저가 매력을 느낄 기능을 만드는 활동. 고객의 요구를 파악하고 니즈를 충족하는 기능을..

Supabase를 활용하여 개인 프로젝트에 리뷰 등록 CRUD 기능을 구현했는데, 이 과정에서 한 가지 생략한 것이 '이미지 첨부' 기능이었다. 의도적인 판단이었는데, '이미지 첨부' 기능은 단순히 파일 하나를 올려서 끝나는 것이 아니라 용량 최적화, 파일명 중복 방지, 업로드 실패 시 예외 처리 등 고려해야 할 변수가 많았기 때문이다. 무엇보다 '리뷰 등록'이라는 큰 기능 단위 내에 속한 부수적인 영역이었기에, 핵심인 데이터 CRUD 흐름부터 명확히 구축하는 것이 우선이라고 생각했다.하지만 기본적인 CRUD 구현을 마친 후 서비스를 점검하면서, 이미지 첨부 기능의 필요성을 강하게 체감했다. 기존의 읽기(Read) 및 리스트 페이지는 영화 포스터 이미지를 정상적으로 보여주고 있었지만, 작성 페이지에서 이..

매일 특정 시간에 알아서 실행되는 자동화 워크플로우는 참 편리하다. 필자 역시 현재 진행 중인 개인 프로젝트에서 Supabase의 자동 정지를 막으려고 스케줄 워크플로우를 구축해 두었다. 하지만 이 녀석이 제대로 일했는지 확인하려면, 매번 직접 깃허브 레포지토리의 Actions 탭을 열어봐야 하는 번거로움이 있었다.예전에 Gist를 이용한 커밋 수 자동 갱신 워크플로우가 며칠간 미작동했음에도 알림을 받지 못해 뒤늦게 발견했던 경험이 있어서, 만약 이번 Supabase 워크플로우가 어느날 갑자기 미작동하거나 실패했는데 내가 모르고 있는 상황이 생긴다면 문제가 커진다고 생각했다. 그래서 워크플로우의 상태를 지켜보다가 실시간으로 알려줄 나만의 AI 비서를 도입하기로 했다. 이번 포스팅에서는 GitHub Act..

이직 준비를 하면서 이력서에 회사의 비즈니스 모델을 입력하는 항목을 보게 되었다. B2B, B2C, O2O 같은 용어는 자주 들어봤지만 정확한 의미와 차이점을 설명하기는 어려웠다. 비즈니스 모델은 고객을 기준으로 분류하기도 하고, 서비스 제공 방식에 따라 구분하기도 한다. 헷갈리지 않게 기록해두려고 한다.1. 누구에게 판매하는가? (고객)누구에게 파는가?(고객) → B2B, B2C, B2B2C, C2C, D2C, B2GB2B (Business to Business)기업 → 기업으로 제품이나 서비스를 판매하는 모델예시:ERP, 그룹웨어 판매기업용 클라우드 서비스기업용 보안 솔루션제조업체에 부품 납품실제 사례: Salesforce, SAP, AWS 등특징:고객 수는 적지만 계약 규모가 큼영업 사이클이 길다의..

지난 포스팅에서는 개인 프로젝트에 Supabase를 도입하여 리뷰 데이터의 CRUD 기능을 구현했다. BaaS를 활용하여 내 손으로 리뷰 시스템을 구축했다는 사실이 기뻤지만, Supabase 무료 플랜을 사용하면서 한 가지 현실적인 문제에 직면했다.Supabase의 무료 플랜은 일주일간 아무 활동이 없으면 프로젝트가 자동으로 정지된다는 것이다.상용 서비스가 아닌 개인 포트폴리오용 프로젝트 특성상, 배포 페이지에 접속하는 유저가 따로 존재하지 않는다. 그렇다고 내가 매일 이 프로젝트만 작업하는 것도 아니고, 실제로 현생에 충실하느라 배포 페이지에 접속하는 것을 잊어서 Supabase로부터 ‘프로젝트가 일시 정지될 예정’이라는 경고 메일을 받기도 했었다. 배포 페이지에 접속하지 못해 프로젝트가 정지되면, 기..

지난 포스팅에서는 화면 뒤에 숨겨진 순수 자바스크립트 로직을 검증하기 위해 Vitest를 성공적으로 구축했다.단위 테스트로 기초 체력을 다졌으니 이제는 실전이다. 사용자가 실제로 내 포트폴리오 사이트에 들어와서 마우스를 움직이고, 버튼을 클릭하고, 스크롤을 내리는 일련의 행동들을 그대로 복사해 줄 '눈과 손발', 바로 Cypress를 심어줄 차례다.Cypress를 실제로 사용해보니, 전용 GUI 대시보드 프로그램을 통한 시각적인 DX(개발자 경험)와 신선함이 상상 이상이었다. 직접 세팅해보며 마주한 트러블슈팅과 고민을 기록해본다.✍️https://hjinn0813.tistory.com/200 테스트 실행기 입문 과정 (vitest 적용)이전 글에서 테스트 자동화 도구들의 개념에 대해 공부해보며, 현재 나..

이전 글에서 테스트 자동화 도구들의 개념에 대해 공부해보며, 현재 나의 학습 단계와 프로젝트 규모 등을 고려했을때 가장 잘 맞는 툴로 vitest와 cypress를 선택했다. 이제 실제로 코드를 작성하며 체득할 차례다. 내가 갖고있는 개인 프로젝트 중에 가장 가볍고 인터랙션이 직관적인 '포트폴리오 사이트'에 vitest부터 적용해보기로 했다.직접 세팅하며 마주한 에러 해결 과정과 실무적인 고민을 기록해본다.✍️의존성 설치 및 환경 설정일단 터미널에 cli 명령어로 필요한 패키지를 설치했다.npm install -D vitest @testing-library/react @testing-library/jest-dom @vitejs/plugin-react그리고 vite.config.ts에 테스트 환경을 설정했..

지난 포스팅에서는 내 코드를 대신 실행하고 채점해주는 '테스트 실행기(Test Runner)'에 대해 알아보았다.https://hjinn0813.tistory.com/198 테스트 실행기 기본 개념 정리 (jest, vitest)어제 도서관에서 테스트 자동화에 대한 책을 읽고 돌아와서, 책의 내용을 티스토리에 정리하면서 실제로 해당 툴/프레임워크를 직접 사용해보며 공부해야겠다는 생각이 들었다.https://hjinn0813.tishjinn0813.tistory.com하지만 함수나 컴포넌트 단위를 넘어, 실제 사용자가 앱을 사용하는 것처럼 화면 전체를 검증하는 E2E(End-to-End) 테스트를 하려면 '테스트 실행기' 만으로는 부족하다. 개발자를 대신해 브라우저를 켜고, 버튼을 클릭하고, 인풋 창에 타..