티스토리

dansoon.log()

검색하기

블로그 홈

dansoon.log()

dansoon-dev.tistory.com/m

dansooon 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

어느 개발자의 24년 회고 들어가며24년은 2년 차 개발자로서 첫 이직을 성공했고, 서비스 회사에서 의미있는 성장과 서비스 기여를 할 수 있던 한 해였다.아직 부족함이 많은 주니어 개발자였지만,점차 서비스 개선에 대한 감을 익혀가며 개발자로서의 정체성과 성장에 대해 깊이 고민했던 시간이었다.새로운 환경에서의 도전과 업무 외 학습을 통해 많은 것을 배웠고, 이제 그 시간들을 돌아보며 내년을 준비하고자 한다.올해의 업무 :: 새로운 업무 환경과 낯선 코드처음 마주한 레거시 환경Vue 3, React 18과 같은 최신 프레임워크를 사용하다가 이직 후 받은 첫 충격은 Node.js 6 버전을 사용한다는 점이었다.ES6 이후 문법도 지원하지 않는 환경에서 생소한 PHP 코드와 순수 JavaScript로 제품을 개선해야 하는 상황이었다.서비.. 공감수 10 댓글수 0 2025. 1. 6.
쉽게 정리한 Feature-Sliced Design(FSD) 가이드 들어가며프론트엔드 프로젝트의 규모가 커지면 효율적인 코드 구조화의 중요성이 더욱 부각되기 마련이다.단순한 기능 구현을 넘어 시스템 아키텍처가 비즈니스 요구사항의 변화에 얼마나 유연하게 대응할 수 있는지가 프로젝트의 장기적 성공을 좌우하는 핵심 요소로 자리잡았다.이를 해결하기 위해 구조화된 설계와 디자인 패턴을 적용하는 것이 현대 프론트엔드 개발의 주요 트렌드로 자리잡고 있다.컴포넌트 기반 아키텍처, 상태 관리 패턴, 모듈화 등 다양한 접근 방식이 존재하지만,대규모 애플리케이션에서는 보다 체계적인 구조화 방법론이 요구된다.최근 PHP와 Vue로 작성된 레거시 애플리케이션을 Next.js로 마이그레이션하는 과정에서,우리 팀은 일관된 개발 패러다임을 확립하기 위해 Feature-Sliced Design(FSD.. 공감수 2 댓글수 4 2024. 12. 17.
import 경로 관리 알아보기 (alias와 barrel 패턴, FSD) 들어가며최근 같이 교류하던 분들과 친한 개발자 분이 이렇게 물어봤다."이 @components 같은 거 왜 쓰는 거예요? 어떤 이유가 있죠?"솔직히 처음에는 그냥 "깔끔해 보여서" 쓰기 시작했다.하지만 수년간 다양한 규모의 프로젝트를 진행하면서, 이 패턴이 단순한 미적 선호를 넘어 코드 품질과 개발 효율성에 상당한 영향을 미친다는 것을 깨달았다.이 글에서는 모듈 별칭(alias)과 barrel 패턴의 기술적 이점, 구현 방법, 그리고 실제 대규모 프로젝트에서의 활용 사례를 심층적으로 분석해보고자 한다.1. 모듈 별칭(Alias)의 기술적 필요성1.1 상대경로의 구조적 문제점프로젝트 복잡도가 증가하면서 상대경로 방식은 다음과 같은 심각한 문제를 야기한다:// 중첩 깊이가 깊어질수록 발생하는 가독성 문제im.. 공감수 2 댓글수 0 2024. 12. 15.
[회고] 10주간의 항해를 마치며 "더 깊이 알고 싶다", "이게 최선일까?", "정말 이게 맞는 걸까?"개발자로서 끊임없이 마주치는 이 질문들에 대한 답을 찾을 수 없겠지만,정해진 길이 없는 개발자의 성장 경로에서, 혼자만의 학습이 아닌 새로운 방향을 찾고 싶었다.그렇게 시작한 10주간의 여정이 마무리되었다. 다양한 경력을 가진 팀원들과 함께하며 새로운 시각을 발견했다.밤늦게까지 이어진 과제와 코드 리뷰 시간은 단순한 기술 공유를 넘어 서로의 관점을 이해하는 소중한 시간이었다.'이런 식으로도 생각할 수 있구나!' 하는 깨달음의 순간들이 쌓여갔고,열정 넘치는 코치님들의 멘토링은 기술 외적인 부분에서도 값진 배움을 선물해주었다. 처음엔 모든 과제를 완벽하게 해내겠다는 욕심을 부렸지만,회사 업무와 병행하는 게 쉽지만은 않았다.하지만 31.. 공감수 0 댓글수 0 2024. 12. 11.
클라우드 기반 배포 자동화 여정: AWS S3부터 GitHub Actions까지 1. 문제AWS를 활용한 CI/CD 파이프라인 구축 프로젝트를 진행했다.다양한 클라우드 서비스 중에서 AWS를 선택한 이유는 실제 업무 환경에서 가장 널리 사용되고 있으며,S3와 CloudFront의 조합이 비용 효율적이면서도 확장성이 뛰어나기 때문이다.AWS 아키텍처는 S3 버킷을 기반으로 정적 웹사이트 호스팅 설정을 구성하고, CloudFront를 통한 글로벌 CDN 배포망을 구축했다.IAM을 통해 최소 권한 원칙에 따른 보안 설정을 적용하고, GitHub Actions를 활용하여 완전 자동화된 배포 파이프라인을 구현했다.특히 GitHub Actions 워크플로우를 통해 코드 변경 시 자동으로 빌드, 테스트, 배포가 이루어지는 시스템을 구축했으며, 시크릿 키와 환경 변수의 안전한 관리 체계를 마련했다.. 공감수 0 댓글수 0 2024. 12. 11.
테스트 시나리오 작성과 E2E테스트 1. 프로젝트 개요이번 주에는 프론트엔드 애플리케이션의 테스트 시나리오를 직접 작성하고 구현하는 작업을 진행했다.처음 과제를 접했을 때, 단순히 테스트 코드를 작성하는 것을 넘어서 이 과정이 개발 품질 전반에 얼마나 큰 영향을 미치는지 깨닫게 되었다. 특히 사용자 관점에서의 신뢰성 확보와 엣지 케이스 처리의 중요성을 직접 체감할 수 있었다.2. 테스트 설계 과정팀 내에서 처음 테스트 전략을 논의할 때, 다양한 의견이 존재했다.Unit 테스트와 E2E 테스트를 조합해야 한다는 의견,Unit 테스트와 Integration 테스트의 조합이 효율적이라는 의견, 모든 단계의 테스트가 필요하다는 의견까지, 각자의 경험과 프로젝트 배경에 따라 접근 방식이 달랐다.여러 논의 끝에 Integration 테스트를 중심으로.. 공감수 1 댓글수 1 2024. 12. 11.
테스트 코드 작성과 FSD 패턴 리팩토링 1. 문제이번 주 과제는 지난주에 리팩토링한 프로젝트 구조를 바탕으로 테스트 코드를 작성하고, FSD 패턴과 상태 관리에서 미숙했던 부분을 개선하는 것이었다. 이 과정에서 몇 가지 문제와 고민이 생겼다.테스트 범위 결정의 어려움주요 기능을 모두 테스트하려다 보니 테스트 범위를 어디까지 설정해야 할지 고민이 많았다. 특히 유틸리티 함수와 커스텀 훅의 테스트부터 시작해, 전체 흐름을 확인하는 통합 테스트까지 커버하려고 하니 테스트 케이스 관리와 코드 작성이 생각보다 오래 걸렸다.데이터 상태의 독립성 유지각 테스트가 독립적으로 작동하도록 테스트 데이터와 핸들러를 설정하는 방법을 고민하게 되었다. 특히 mock 데이터를 기반으로 테스트를 진행하면서 테스트 간 상태 초기화와 독립성을 어떻게 유지할지 어려움이 있었.. 공감수 1 댓글수 1 2024. 12. 11.
FSD 패턴과 상태 관리 리팩토링 1. 문제이번 주 과제는 기존의 상태 관리와 컴포넌트 구조를 FSD(Folder Structure Design) 패턴으로 리팩토링하고, react-query와 zustand를 활용해 상태 관리 방식을 개선하는 것이었다. 이를 진행하면서 다음과 같은 문제들이 있었다:코드 구조의 복잡성상태 관리와 API 호출, UI 로직이 한 파일에 얽혀 있어 코드가 길어지고, 컴포넌트별로 코드를 이해하기 어려운 점이 많았다.프로젝트가 커질수록 파일 간 의존성이 높아지고, 변경 사항을 적용할 때 발생할 수 있는 오류 가능성 또한 높아졌다.유지보수성 저하상태 관리와 관련된 로직이 분산되어 있어 특정 기능이나 컴포넌트를 수정할 때 관련된 코드를 모두 찾아 수정해야 하는 번거로움이 있었다.여러 곳에서 필요한 상태를 공유할 때 상.. 공감수 0 댓글수 0 2024. 12. 11.
리액트 리팩토링: Context와 Hook을 활용한 상태 관리 개선 1. 문제이번 주에는 기존 리액트 코드의 상태 관리 방식을 Context와 Custom Hook을 활용해 리팩토링하는 과제가 있었다. 컴포넌트마다 각기 다른 상태와 로직을 관리하고 있었기 때문에 코드가 복잡해지고, 유지보수가 어려워지는 문제가 있었다. 특히 다음과 같은 문제가 있었다:복잡한 상태 관리AdminPage, CartPage 같은 주요 컴포넌트에서 여러 상태(products, cart, coupons)를 개별적으로 관리하고 있었다.상태가 분산되다 보니 로직이 길어지고, 코드 흐름을 이해하기 어려웠다.중복된 코드제품 추가, 수정, 삭제 등의 로직이 각각의 컴포넌트에 중복되어 있었다.동일한 로직을 여러 곳에서 관리하다 보니, 기능을 수정할 때 모든 컴포넌트를 일일이 수정해야 하는 번거로움이 있었다... 공감수 0 댓글수 2 2024. 12. 11.
React Hook을 직접 구현해보자 1. 문제3주차에는 리액트 컴포넌트를 최적화하는 방법에 집중했다. 특히 메모이제이션과 렌더링 최적화를 통해 성능을 개선하는 것이 목표였다.주요 문제는 크게 세 가지로 나뉘었다:컴포넌트 재렌더링: 상태나 props가 바뀔 때마다 불필요하게 컴포넌트가 다시 렌더링되는 문제를 해결해야 했다. 이를 막기 위해서는 값이 실제로 변경된 경우에만 렌더링을 트리거해야 했고, 이를 최적화할 방법을 고민했다.메모이제이션: 동일한 연산을 반복해서 수행하는 대신, 이전의 연산 결과를 기억해 성능을 높이는 방법을 적용할 필요가 있었다. 이 과정에서 useMemo와 useCallback을 적절히 활용하는 방법을 고민했다.깊은 비교 vs 얕은 비교: 객체나 배열 같은 복잡한 데이터 구조를 다룰 때, 얕은 비교만으로는 변화 여부를 .. 공감수 0 댓글수 0 2024. 12. 11.
내가 리액트를 직접 만들어봤다? 1. 문제리액트와 같은 프레임워크에서는 가상 DOM을 사용하여 성능을 최적화하는데, 이 과제에서는 이를 직접 구현해야 했다. 주된 문제는 다음과 같았다.첫번째로 가상 노드(vNode)를 실제 DOM 요소로 변환해야 했는데, 다양한 타입(숫자, 문자열, 배열, 함수형 컴포넌트 등)을 고려하여 처리하는 로직을 만들어야 했다.두번째로 여러 이벤트 핸들러를 각 요소에 개별적으로 설정하지 않고, 이벤트 위임 방식을 사용해 성능을 최적화하고 유지보수를 쉽게 해야 했다.세번째로 최적화된 렌더링을 위해 가상 DOM과 기존 DOM을 비교해 필요한 부분만 업데이트함으로써 불필요한 DOM 조작을 최소화해야 했다.이 문제들은 성능 최적화와 복잡한 사용자 인터페이스를 관리하기 위해 필수적인 부분들이었다.하지만 주로 잘 만들어진.. 공감수 0 댓글수 1 2024. 12. 11.
Vanilla JavaScript로 SPA 만들기 과제 개요이번 과제에서는 Vanilla JavaScript로 SPA(Single Page Application)를 구현했다. 주요 요구사항은 History API로 라우터를 구현하는 것, LocalStorage를 사용한 사용자 관리 기능, 컴포넌트 기반 구조 설계, 초기 상태 관리 구현, 그리고 테스트 코드 통과였다.이전에 react-router를 사용해본 경험이 있지만, 그것이 내부적으로 어떻게 동작하는지는 구체적으로 알지 못했다. 이번 과제를 통해 SPA 라우팅이 어떻게 작동하는지 직접 구현하면서 더 깊이 이해할 수 있는 시간을 가졌다.시도한 것들라우터 직접 구현기존에 사용하던 라우터 라이브러리 대신, 브라우저의 History API를 사용해 페이지 전환 기능을 구현했다. history.pushSta.. 공감수 0 댓글수 0 2024. 12. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.