ptq124 / fe-todo

1차 프로젝트 Todo List

기간: 3일

내용: show, add, delete, update기능을 가진 todolist를 node.js 환경에서 구현한다.

기능요구사항:

• 페어프로그래밍으로 진행한다.
• 프로그래밍 어떻게 구현할지 설계를 하고 이를 PR에 포함해서 제출해야 한다.
• 설계 형식은 자유다. (종이에 작성도 가능)
• node.js 를 활용해서 실행한다.
• JavaScript 함수/배열/객체 등 다양한 문법을 활용해서 구현한다.
• 배열을 다룰때는 고차함수(forEach, map, filter, reduce)를 적극 활용한다.
• (마스터님의 요청으로 추가됨)개발이 완료되기 전까지 console.log() 사용금지

취준 기간동안 개발을 잠시 중단해 JS의 감이 떨어져 있었다. 1차 프로젝트인 만큼 다시 개발 감각을 찾고 JS의 기반을 튼튼히 다진다는 각오로 임했다.

프로젝트시 느낀점

Common.js? ES Modules?

과거 웹 프로젝트 진행시 React나 Vue를 사용한 경험이 있어서 import 문을 사용하여 개발하는 순간 에러가 나서 이유를 찾아보니 Node.js는 ES Modules을 완벽히 지원하지만 기본적으로 Common.js를 채택하고 있어 import를 사용하기 위해서 .mjs파일이나 package.json 파일에 type을 설정해 줘야 했습니다.

require()를 사용하게 된다면 동기로 실행된다는 단점 때문에 비동기 환경에서 실행되는 ESM과 다르게 성능적으로 안좋다 판단하여 import를 적용했습니다. 또한 현재 진행하는 TodoList 프로젝트의 경우 CJS를 사용할 필요가 없다 느껴 ESM을 적용했습니다.

단순히 JavaScript는 ES6를 지원하는 줄 알았는데 개발시 Common.js와 ES Modules를 적절하게 사용해야 한다는 것을 알게 되었습니다. 또한 Common.js와 ES Modules를 조사하는 과정에서 EJS와 CJS 차이와 내부 구현 과정을 깊게 생각할 수 있었습니다.

페어프로그래밍?

‘페어프로그래밍은 애자일 방법론 중 하나로 익스트림 프로그래밍 중 하나이다’ 라고 알고 있던 페어프로그래밍을 실제로 해봤습니다.

제가 생각한 페어프로그래밍의 장점은 대화를 많이 하는 것이라고 생각합니다. 보통 개발을 시작하기 전 커뮤니케이션을 한 후 개발을 하는 과정을 겪지만, 짧은 주기로 대화를 하니 커뮤니케이션을 할 시간을 줄일 수 있었고 온전히 개발에 집중할 수 있었던 순간이 많아서 아이디어가 잘 나왔던 거 같습니다.

하지만 단점으로는 체력이 소모가 심해 업무 효율이 떨어진다는 점이었습니다. 실제 한 개의 모니터를 동시에 보기 때문에 자세라던가 키보드 타이핑 시 불편한 점이 많아 금방 지쳤고 상대방에게 지속적으로 집중을 해야 했기 때문에 체력 소모가 심했습니다.

결론을 말하자면, 페어프로그래밍은 효율성이 중요한 업무가 아닌 다른 업무 중에서 커뮤니케이션의 어려움을 겪거나 개발업무에 집중을 하고 싶다면 적용해 보는 것이 좋을 거 같습니다.

고차함수 사용

프로젝트에서 가장 많이 소요한 부분이었습니다. 어떻게 하면 유지 보수성이 좋고 클린한 구조로 코드를 작성할지 고민을 많이 했습니다.

고차 함수의 장점은 forEach, filter, map, reduce와 같이 함수의 이름이 직관적이기 때문에 적절하게 활용하면 가독성이 좋은 코드를 짤 수 있었습니다.

좋은 코드작성을 위해서 고차 함수와 같이 함수형 프로그래밍을 적절하게 사용하여 좋은 코드를 작성해야 한다는 것을 느꼈고, 함수형 패러다임을 잘 이해할 필요가 있다고 느꼈습니다.

디버깅

과제를 진행할 때 console.log() 사용하지 않는 것이 불편했습니다.(답답할 때 가끔 사용하긴 함)

console.log()를 사용하는데 익숙해져 있어 내가 코드의 진행 상황을 알 수 없어 불편했지만, 마스터님이 vscode의 디버깅을 사용해 보라 조언해 주셨습니다.

디버깅을 한 번도 쓰지 않아 불편했지만. 나름 vscode는 사용하기 쉽게 되어있어 variables이나 callstack에 담겨진 함수, watch를 이용하여 어느 정도 코드의 진행 상황을 알 수 있었습니다.

디버깅을 사용해 보면서 지금 한 프로젝트는 규모가 작기 때문에 디버깅의 효과를 느끼지 못했지만, 규모가 큰 프로젝트의 경우 브레이크 포인트 설정만 잘 해준다면 개발자의 생산성을 증가할 수 있다는 점을 알게 되어 디버깅의 중요성을 깨닳은 순간이었습니다.