그럼에도 불구하고

문제 상황 사내 디자인 시스템에서 제공하는 Modal의 property 명칭을 onCancel에서 onClose로 고친 동료가 있었습니다. 하지만, 이미 해당 모달과 프로퍼티를 사용하고 있는 코드가 수백 개인 상황. 단순 onCancel을 검색하니 Modal이 아닌 곳에서의 onCancel까지 검색되어 하나씩 확인해보는 수 밖에 없었는데, 그 많은 코드를 직접 수정하는 모습을 보며 드는 생각 하나! "아 저거 딱 원하는 코드만 수정되게 자동화할 수 있으면 좋겠다" 문제 발견 vscode 내에서 제공하는 바꾸기(cmd + shift + H) 기능은 텍스트 검색만 가능합니다. 위에서 언급했던 예시처럼, onCancel로 검색하면 의도했던 Modal의 onCancel이 아닌 프로젝트의 모든 onCancel이 ..

본 포스트는 더 나은 UX를 위한 개인적 경험과 고민이 담긴 글입니다. 1. 요구사항 - 선거 조직은 [대분류]-[중분류]-[소분류]로 구분된다. - [대분류]는 기본 값으로 "중앙자치기구", "단과대", "학과"를 갖는다. - [대분류]인 "중앙자치기구"와 "단과대"는 [중분류]만 갖는다. - [대분류]인 "학과"는 [중분류]와 [소분류]를 갖는다. - "학과"의 [중분류]는 "단과대"의 [중분류]를 사용한다. - "저장" 버튼을 누르면, 입력된 input 태그의 데이터를 서버에 전송한다. - 데이터 전송 후, 서버에 저장된 새로운 데이터를 호출하여 UI를 최신화한다. 2. 고민 내가 고민했던 내용은 다음과 같다. 선택 1) 모든 정보를 입력한 다음, [저장하기] 버튼을 통해 최종 데이터를 전송한다. ..

WEVOTE 프로젝트 리팩토링 중 mocking 시스템을 도입하기 위해 msw를 적용하는 과정에서 정상적으로 동작하지 않는 상황으로 시간을 소모했다. 서비스워커 미실행 이슈 (with webpack-dev-server) msw는 Web API의 Service Worker API를 사용한다. 공식문서에서 설명하듯 브라우저에서 사용할 때는 Mock Service Worker(mockServiceWorker.js)를 public 디렉토리에 설치하여 실행해야 한다. 나는 WEVOTE에 적용하기 전에 msw_test CRA 프로젝트를 만들어서 동작 방식을 이해하고 도입을 시도했다. public에 mockServiceWorker를 설치하여 실행했고, 정상적으로 동작하는 것을 확인했다. 문제의 발단 동작 방식을 가볍..

본 포스팅은 2021년 상반기에 진행한 협업 프로젝트 [WEVOTE]에 대한 회고 기록입니다. [이전 프로젝트] 2021.11.14 - [Development/Front-End] - [온라인 선거 홍보 서비스] 프로젝트 회고 - UNIVVOTE편 [온라인 선거 홍보 서비스] 프로젝트 회고 - UNIVVOTE편 본 포스팅은 2020년 하반기에 진행한 개인 프로젝트 [UNIVVOTE]에 대한 회고 기록입니다. 프로젝트 명 : UNIVVOTE 프로젝트 기간 : 2020.10 ~ 2020.11 (2개월) 프로젝트 설명 : OO대학교 온라인 선거 홍보 서비 despiter.tistory.com [프로젝트 명] WEVOTE [프로젝트 기간] 2021.02 ~ 2021.08 (6개월) 후 리팩토링 진행 중 [프로젝트..

본 포스팅은 webpack(v5.6.0)을 사용합니다. 1. 상대경로의 불편함 WEVOTE 프로젝트는 상대경로를 통해 모듈을 import하여 사용하는 방식이다. 현재 컴포넌트를 기준으로 사용할 모듈의 위치를 '../../components/header'와 같은 방식으로 찾아 입력해야 했는데, 이러한 상대경로는 해당 모듈의 위치가 바뀌었을 때, 그 모듈을 상대경로로 import한 모든 컴포넌트에서 경로를 수정하여 저장해줘야하는 불상사가 발생한다. 따라서, 유지보수성에 좋지 않다는 단점이 있다. // Calendar.tsx 컴포넌트 // 상대경로 import initialCalendar from '../../../../assets/img/calendar.svg'; function Calendar(){ // ..

본 포스팅은 msw(v0.42.3)을 사용합니다 1. 구동중인 서버가 없는데, API 없이 프론트엔드 리팩토링을 어떻게 하지? 이전 프로젝트를 혼자 리팩토링 하기로 결정하고 코드를 다시 확인하는데, 서버가 닫혀있으니 당연하게도 API 통신이 되지 않았다. 프로젝트 진행 당시에는 백엔드 개발자와 첫 협업이라 전체적인 업무 프로세스에 대한 이해가 부족했기 때문에 처음 나온 계획은 다음과 같았다. 1) 전체 팀원들과 회의를 통해 기능 기획 및 API 명세를 정함 2) 디자이너 : 기능을 디자인해서 FE에 전달 백엔드 : API 명세로 API 개발하여 FE에 전달 프론트엔드 : 디자인과 API를 통해 개발 3) 완성 문제는 위의 경우 업무의 흐름이 동기적이기 때문에 상당히 비효율적이라는 것이다. 실제 업무에서는..

n!을 구하기 위한 factorial(n) 함수를 재귀 함수로 구현한 상황에서 n 값이 매우 클 때 발생할 수 있는 문제는? Factorial 함수 function factorial(n) { if (n === 1) { return 1; } return n * factorial(n-1); } factorial(4); // 4*3*2*1 => 24 [문제 1] 숫자 값이 너무 크면 표현할 수 있는 int의 범위를 넘어설 수 있다. 20! = 20×19×18×...×2×1 = 2,432,902,008,176,640,000 factorial(n)의 n이 20이 되어도 엄청 큰 수가 나온다. Number 타입은 배정밀도 64비트 이진 형식 IEEE 754 값(-(2^53 − 1)부터 2^53 − 1까지의 수)이다..

본 포스팅은 [토스] Youtube 채널의 "SLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code" 영상을 보고 작성한 리뷰입니다. [목차] - 실무에서 클린 코드의 의의 - 안일한 코드 추가의 함정 (코드 리팩토링 예제) - 로직을 빠르게 찾을 수 있는 코드 1. 응집도 2. 단일책임 3. 추상화 실무에서 클린 코드의 의의 좋지 않은 코드란 무엇일까? 1) 좋지 않은 코드는 흐름 파악이 어렵다. 2) 좋지 않은 코드는 도메인 맥락 표현이 안 되어 있다. 3) 좋지 않은 코드는 동료에게 물어봐야 알 수 있는 코드이다. 좋지 않은 코드는 개발의 병목이 되며, 유지보수할 때 시간이 오래 걸리며, 기능 추가가 불가능할 수도 있다. 따라서, 우리는 읽기 좋은 코드를 작성하여, 코드 리뷰 시..

본 포스팅은, [FEConf Korea] Youtube 채널의 [상태관리, 이제 Recoil 하세요] 영상을 보고 작성한 리뷰입니다. FEConf Korea - 상태관리, 이제 Recoil 하세요 주의. Redux보다 Recoil이 좋다는 의견이 아닙니다. 1. 너도 나도 쓰는 Redux 1) 외부 저장공간(store)의 사용 2) 강한 제약사항 3) 번거로움 2. Recoil의 등장 도입배경 - 페이스북이 만들었다. - 생각보다 훨씬 쉽고, 간결하게 사용할 수 있을 것 같았다. 핵심 컨셉 - React의 내부 상태만을 활용한다. - 작은 Atom 단위로 관리 - 순수함수 selector - re-render 최소화 - 데이터 흐름을 따라서 - 곧 새로운 React 기능과 호환성 예시 Modal 기능은 ..

본 포스팅은 javascript 함수를 정의할 때, 리팩토링하는 과정을 예제로 다루고 있습니다. 0. 요구사항 분석 요구사항 특정 날짜의 Date 객체를 인수로 받아 새로운 포맷("yyyy-mm-dd")으로 변경한다. 함수 예시 formatDate(new Date('2021/01/04')) 반환 "2021-01-04" 1. 요구사항을 만족하는 것이 가장 우선이다. 좋은 코드의 1순위는 요구사항을 모두 만족하는 코드입니다. '좋은 코드'라는 강박에 사로잡혀 기능 구현도 되지 않은 코드를 리팩토링하려는 것은 능숙한 개발자가 아닌 이상 개발 시간을 늦추기만 할 뿐입니다. 처음부터 잘 작성하려는 것보다는 일단 기능 구현을 완성한 후, 리팩토링을 진행하는 방향이 많은 개발자들로부터 권장되고 있습니다. functi..