그럼에도 불구하고

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

보호되어 있는 글입니다.

*참고 : 바트(Bart)는 회사에서 사용 중인 저의 닉네임이고, 바트 심슨 짤을 자주 사용합니다. BM을 가진 프로덕트의 개발자가 되는 것 많은 이들에게 취업 준비는 끝이 보이지 않는 광야의 길이다. 나 또한 마찬가지였지만, 감사하게도 취준 기간 동안 마음이 크게 불안하지 않았다. 개발자 호황기였던 2021년이 지나면서 조금씩 채용 공고가 줄어드는게 체감이 되고 있었지만, 부족한 점을 채우며 계속 공부를 하고 있었으니 언젠가는 입사해서 현업 개발자가 될 것이라는 믿음이 있었던 것 같다. 하반기에 입사한 모두싸인이라는 회사는 연 초에 계획했던 회사는 아니지만, 전자계약 시장 상황이나 대표님의 비전과 관련해서 충분히 성장 가능성 있는 회사라고 생각했고, 조직문화적으로도 좋은 평가를 받고 있는 것 같아 합류..

1. type annotation type annotation은 개발자가 타입을 타입스크립트에게 직접 말해주는 것을 의미한다. const name: string = '홍길동'; // 개발자가 string으로 타입을 지정 2. type inference type inference는 타입스크립트가 알아서 타입을 추론하는 것을 의미한다. const name = '홍길동' // 변수 선언과 동시에 초기화할 경우에는 typescript가 초기화 값으로 타입 추론 + typescript가 타입 추론을 할 수 없는 경우에는 type annotation을 꼭 해줘야하는 경우이다. 1) any 타입 리턴 typescript가 추론할 수 없는 초기화 값은 any로 정의되기 때문에 직접 type annotation을 해야한..

본 포스트는 더 나은 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까지의 수)이다..