그럼에도 불구하고

본 포스팅은 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) 완성 문제는 위의 경우 업무의 흐름이 동기적이기 때문에 상당히 비효율적이라는 것이다. 실제 업무에서는..