담백한 웹 개발 이야기

글의 목적 한번쯤은 다른 누군가에게 전해받은 레거시 코드를 받아 프로젝트를 진행해야 되는 경험이 있었을 것이다. 나는 2018년 10월부터 i.kakao.com으로 서비스 되고 있는 카카오 i 오픈빌더를 이어 받았다. 프로젝트는 초기 빌딩 시 프런트 전문가들이 투입되지 않아 개선점이 많이 필요했다. 현재는 프런트 인력이 추가되어 리팩토링이 진행될 예정인데, 그 과정에 앞서 지금까지 진행했던 내용을 공유할 필요성이 있어 정리한 자료이다. 목차 2018.10~11 오픈빌더 투입 2018.12 코드 리팩토링 시작 2019.01 오픈빌더 기술적부채상환 전략 2019.02 설정 페이지 리팩토링 2019.05 응답형식 구조 리팩토링 2018.10~11 오픈빌더 투입 초기에 오픈빌더는 서버 개발자로 구성된 조직에서 ..

글의 목적 함수나 클래스 레벨의 코드를 수정하는 것은 굉장히 빈번하게 발생하고 익숙한 작업이다. 하지만 구조 레벨을 수정하는 것은 빈번하지 않고 큰 비용이 발생하는 작업이다. 구조 리펙토링은 상태와 로직을 수정하지 않고 컴포넌트, 파일, 폴더를 역할과 책임 그리고 이해하기 쉬운 형태로 재정렬하는 것이다. 이 포스트에서는 컴포넌트 구조 리펙토링을 다룬다. 이해하기 쉬운 코드와 소프트웨어 철학을 학습했는 데도 불구하고 시간적인 여유가 없어 구조적인 리펙토링을 진행못할 때가 많다. 개인적으로 싫어하는 탁상공론을 벗어나 구조레벨의 리펙토링을 진행하였고, 관련해서 기본적인 방법들을 정리하고자 작성한 포스트이다. 표기정의 ngFor Angular에서 사용하는 리스트 렌더링 문법이다. vue에서는 v-for를 사용한..

2019년 5월 19일에 구조 리펙토링 정리 관련 작업 중에 고민했던 내용들을 정리한 포스트입니다.글의 목적코드는 만들어진 목적과 역할이 있기 때문에 어울리는 자리가 있다. 어울리는 자리에 정확히 있으면 왜 그 자리에 있는 지 이해가 되고 유추가 가능하다. 그런데 막상 코드를 작성할 때 코드가 어떤 자리에 위치해야 하는 지 결정을 못해 유틸에 정의하는 경우를 많이 봤다. 코드의 명확한 위치를 정하는 기준에 대해서 알아보기 위해 작성한 글이다.코드의 위치코드의 위치를 정하는 기준은 변수/함수/클래스/컴포넌트/모듈 모두 동일한 기준으로 정의된다. 기본적으로 관계가 깊은 코드를 그룹핑하고 영향도에 따라 범위를 최소화하는 것이다. 특정 컴포넌트에만 사용될 때 특정한 컴포넌트에 사용되는 코드는 해당 컴포넌트에 정..