프론트만셰

본문 바로가기

Recent

우리 팀이 오로지 프로덕트에 집중하도록 1. 더 중요한 일에 집중하기 위해인턴 생활을 시작한 지 벌써 4개월이 지났다. 처음에는 ‘코드를 잘 짜는 엔지니어’가 되는 데 집중했다면, 요즘은 팀이 더 좋은 프로덕트를 더 빨리 만들 수 있는 환경을 만드는 데 더 큰 매력을 느낀다. 프로덕트를 만드는 개발자로서 자동화 작업은 단순한 효율화가 아니라, 더 중요한 일에 집중하게 만드는 작업이라고 생각하게 됐다.그래서 이 글에서는 우리 팀이 어떻게 자동화를 통해 생산성을 올리고 있는지 소개하면서 자동화가 왜 나에게 중요한 일이 되었는지 정리해보려고 한다. 1.1. 병목인 줄도 모르고 낭비하고 있던 시간들 shadcn을 도입한 뒤, 그동안 직접 만들고 관리하던 공용 컴포넌트 폴더를 통째로 삭제했던 순간을 잊지 못한다. 예전에는 “이건 당연히 우리가 만들.. 2025.08.17
QA 자동화로 팀의 생산성 높이기 목차1. 자동화의 필요성을 느끼게 된 계기2. 전체 자동화 플로우3. 시트 구조 개편4. JSON으로 뽑아 테스트코드를 자동으로 생성하자5. 니즈를 반영한 기능들6. 한계와 현실적인 선택 1. 자동화의 필요성을 느끼게 된 계기 1.1. 테스트를 도입하고 느낀 점들최근 맡은 프로젝트에서 처음으로 E2E 테스트를 도입하게 되었다. 기능이 꽤 복잡해서 사용자의 흐름을 따라가며 발생할 수 있는 시나리오도 다양했다. 모든 시나리오를 수동으로 테스트하는 건 시간적으로나 체력적으로나 한계가 있었고, 특히 이미 발생했던 버그를 잊지 않고 반복적으로 확인하는 일은 현실적으로 불가능했다. 테스트 코드를 작성해보니 확실히 체감되는 변화가 있었다.QA에서 버그가 발견되기 전에 개발자가 먼저 실패를 마주할 수 있다.수동으로는 .. 2025.07.13
실뜨기같은 FSD [목차]1. 서론2. FSD의 가장 큰 장점3. FSD에서 마주친 애매함들4. Next.js 프로젝트에서의 FSD 적용5. 도메인 중심 구조가 가지는 장점6. 결론 1. 서론 FSD는 shared, entities, features, widgets, pages, app 등 계층을 기준으로 폴더를 나누고, 각 계층 간 명확한 의존성 흐름을 강제하는 아키텍처 패턴이다. 공식 문서에서도 강조하듯, FSD는 정해진 정답이 없고 팀만의 최적화된 컨벤션을 찾아나가야 한다. 우리 팀은 "서로 얽혀있는 복잡한 도메인 로직과 UI를 어떻게 분리할지", "어떻게 하면 더 명확하게 관리할 수 있을지"라는 고민을 시작으로 FSD를 도입했고, 그 과정에서 우리만의 정답을 찾아나가고 있는 중이다. 요즘 레거시 코드의 마이그레이.. 2025.06.17
패키지 매니저 1. 패키지 매니저가 해결하는 것 우리는 평소 아무 생각 없이 "npm install"이나 "yarn install" 같은 명령어를 실행한다. 하지만 이 명령어가 실행되는 동안, 뒤에서는 어떤 일이 일어나고 있었을까? 1.1. 혼란스러웠던 초창기 자바스크립트의 모듈 시스템 초창기에 우리 조상님(?)들은 외부 라이브러리를 쓰기 위해 jquery.min.js 파일을 직접 다운로드해서 프로젝트에 복사하곤 했다. 그리고 아래와 같이 이뿐만이 아니라, 같은 이름의 파일이 여러 버전으로 존재하고, 스크립트 로딩 순서가 바뀌면 실행되지 않으며, 전역 스코프 충돌로 디버깅은 일상이었다. 팀 프로젝트를 진행하다 보면 어떤 버전의 코드가 어디서 왔는지 추적조차 힘들었다. 이런 혼란을 해결하기 위해 모듈 시스템이 등장했.. 2025.05.20
리액트가 클래스 컴포넌트를 버린 이유 목차1️⃣ 리액트에선 과정보단 결과다2️⃣ 3초 뒤의 this.state는 과연 믿을 만한가?3️⃣ 클래스 컴포넌트에서는 함수가 데이터 흐름에서 소외된다4️⃣ 클래스 컴포넌트의 라이프사이클은 '의도'보다는 '타이밍'에 집중한다5️⃣ Hooks는 합성과 재사용성을 극대화한다6️⃣ 클래스 컴포넌트는 미래가 없다 1️⃣ 리액트에선 과정보단 결과다React는 처음부터 지금까지 선언형 UI를 지향해왔다. 중요한 건 어떻게 그 목적에 도달했는가가 아니라, 무엇을 보여주고 싶은가다. "과정보다 결과가 중요하다"는 철학 아래, 복잡한 절차를 감추고 UI를 단지 상태의 결과로 표현하는 방향으로 발전해왔다. 그런데 클래스 컴포넌트는 이러한 철학에 조금 부합하지 않는다. 다음 두 코드는 결과적으로 같은 UI를 표시하지만, .. 2025.04.19
우당탕탕 우테코 2달 생활기 계단이 아닌 오르막길 우테코가 시작한 지 벌써 두 달이 지났다. 지난주 금요일, Level 1이 끝나며 방학식을 했다. 돌아보면 하루하루를 밀도 있게 잘 살아낸 것 같다. 특히 '나'에 대해 많이 고민했고, 앞으로 어떻게 살아가야 할지 깊이 생각하는 시간이었다. 하루 단위로 고민의 주제가 바뀔 정도로 계속 생각하고 또 생각했다. 나는 몇 달 주기로 이런 고민이 몰려오는 시기가 찾아온다. 프로젝트가 끝나갈 무렵, 동아리가 마무리될 때, 학기가 끝날 때처럼 환경이 변화를 예고할 때마다 어김없이 찾아온다. "이제 뭐 하지?", "다음엔 어떤 선택을 해야 최선일까?" 같은 질문들이 머릿속을 맴돈다. 처음에는 이런 고민들이 무거웠고, 때로는 너무 깊게 빠져 우울해지기도 했다. 그런데 그런 시간을 계단을 오르듯 한.. 2025.04.09
객며든 어느 프론트의 엘레강트 오브젝트 정리 0. 들어가며: 객체지향은 파일을 분류하는 기법이다.우테코에서의 가장 큰 수확은 제이슨의 엘강오 스터디다. 처음엔 망설였다. '에이.. 프론튼데 객체지향까지 알아야해?' 라는 어리석은 판단으로 하마터면 이 기회를 지나칠 뻔 했지만, 원온원을 했던 제이슨이 DM으로 다시 한 번 권유해줬고, 덕분에 용기 내서 들어가게 됐다. 그렇게 시작하게 된 엘강오 스터디.. 뭐가 가장 많이 바뀌었나가장 크게 바뀐건, 객체로 생각하는 법을 배우면서 "유기체"와 "관계" 중심으로 코드를 바라보게 됐다는 점이다. 예전엔 대부분의 코드를 함수 중심으로 작성했다. 함수 하나하나는 나쁘지 않았지만, 그 함수들이 서로 협력하거나 흐름을 만드는 방식에는 체계가 없었고, 전체 코드는 어딘가 자연스럽지 못했다. 객체지향을 공부하면서, .. 2025.03.26

디스코드 클론코딩👾

JWT

티스토리툴바