현재 블랙커피 스터디에 참여하고 있다. 문벅스라는 카페 메뉴판을 만들어 보며 그 과정에서 스터디원들이 서로서로 코드리뷰를 하는 방식으로 구성되어 있다.
일 주차인 step1의 요구 사항은 메뉴판에 메뉴를 추가, 수정, 삭제하는 기능을 구현하는 것이다.
구현 자체는 노마드코더의 투두리스트 만드는 것과 크게 차이가 없어 어렵지 않게 할 수 있었다. 노마드코더를 할 때는 잘 모르는 상태로 데드라인도 있어 코드를 정말 막 짰었다.
하지만 블랙커피 스터디는 html, css 코드는 모두 제공되고 js만 구현하는 것이라 시간적 여유가 있어 최대한 코드를 깔끔하게 짜 보려 노력했다.
https://github.com/moonyerim2/moonbucks-menu/commit/7a43058b54db0135ac76bb787a63b0a73b14415e
풀리퀘스트
먼저, 하면서 힘들었던 점이다. 코드리뷰를 하기 위해선 깃허브에 풀리퀘스트를 해야한다. 평소 프로젝트를 할 때만 깃허브에 코드를 올리면 되지 않나라는 생각을 하고 있어서 여전히 깃을 잘 사용하지 못하는 상태였다.
그래서 소스트리를 사용했는데 브랜치 개념도 잘 모르고 푸시를 막 했다가 뭔가가 꼬인건지 파일이 어느 브랜치에 올라갔는지 올라가 긴한 건지도 모르는 상태가 되어버렸다.
결국 주변에 도움을 요청해 해결했다. 이 일을 겪고 나니 프로젝트를 할 때 찾으면서 하면 힘들겠다 싶어 이제는 코딩테스트나 책을 보며 공부하는 내용들도 깃허브에 올려야겠다는 생각이 들었다.
코드리뷰
블랙커피 스터디의 가장 큰 장점인 코드리뷰. 직접 해보는 건 처음이라 걱정이 됐는데 어떤 부분에 대해서 봐야 하는지 단계별로 하나씩 해보는 시간을 주기 때문에 어렵지 않게 해볼 수 있었다. 다음은 미팅 때 코드리뷰에 대해 다뤘던 내용들이다.
장점
- 다른 관점을 배울 수 있다.
- 내가 생각하지 못한 구현 방법을 알 수 있다.
- 코드의 가독성을 올릴 수 있다.
- 팀 단위에서 통일된 스타일을 유지할 수 있다.
- 내 코드를 비판적으로 볼 수 있다.
- 습관적으로 작성하는 코드를 개선할 수 있다.
- 코드를 다양한 방식으로 생각할 수 있다.
- 코드가 팀의 소유가 된다. (위험을 1/n하게 된다)
- 상대방을 설득하고, 나의 코드에 대해 논리적으로 입증하는 연습을 할 수 있다.
- 예기치 못한 버그를 찾을 수 있다.
주의할 부분
- 필요 없는 주석 또는 파일은 없는지
필요없는 파일
- .idea-, .vscode-와 같은 IDE 관련 설정 파일들
- 어디에서도 쓰지 않는 파일들
- 네이밍이 적절한가
- 네이밍이 불규칙적인 부분은 없는지 (어떤건 동사 + 형용사 또 다른건 형용사 + 동사)
- 의미를 알 수 없는 변수 명은 없는지
- 함수명 또는 변수명이 그 역할을 제대로 표현하고 있는지
//DOM을 사용한 변수라는 걸 알리기 위해 변수에 $를 붙임 const $button = document.querySelector("#dom")
- 공백, 띄어쓰기, 컨벤션, EOL
- 일정 컨벤션이 유지되고 있는가
- 공백 또는 띄어쓰기가 제각각은 아닌가
- 빨간 동그라미가 없는가
- 중복되는 부분, 불필요한 코드, 반복되는 코드는 없는가
- 불필요한 console.log는 없는가
- 함수 또는 메서드가 중복되는 기능을 하는 곳은 없는가
- 불필요한 변수는 없는가
- 반복되는 코드는 없는가
document.querySelector("#dom1") document.querySelector("#dom2") document.querySelector("#dom3") document.querySelector("#dom4") //위처럼 반복되는 코드를 줄이기 위한 선언 const $ = (selector) => document.querySelector(selector) $("#dom1") $("#dom2") $("#dom3") $("#dom4")
- 다른 사람에게서 배우기, 칭찬하기
- 내가 시도해보지 못한 전략 또는 시도가 있는가
- 어떤 걸 배울 수 있는가
내가 받은 코드리뷰
adminAddMenuItem함수는 메뉴에 menuItem역할을 하는 li태그를 추가하는 addMenuItem함수와 추가된 li태그의 개수를 반환하는 countMenuItem함수를 이벤트에 따라 실행시키는 함수이다.
관리하고 집행한다는 의미에서 admin을 붙였는데 admin도 동사 뒤에 오는 add도 동사라서 의미가 모호해 진다는 리뷰였다.
나도 이 함수명을 정할 때 엄청 고민하고 정하고도 마음에 안들었는데 이유가 있었나보다. adminAddedMenuItem으로 수정하려 했는데 생각해보니 added는 이미 추가된 아이템을 관리하는 느낌이라 adminAddingMenuItem으로 수정하려 한다.
function adminAddMenuItem(category, menuList){
const menuForm = document.querySelector(`#${category}-menu-form`);
const InputMenuName = document.querySelector(`#${category}-menu-name`);
const menuSubmitButton = document.querySelector(`#${category}-menu-submit-button`);
const menuCount = document.querySelector('.menu-count')
preventFormDefault(menuForm);
InputMenuName.addEventListener('keydown', (e) => {
if(e.key === "Enter") {
addMenuItem(InputMenuName, menuList);
const $menuItem = document.querySelectorAll('.menu-list-item');
countMenuItem($menuItem, menuCount);
}
});
menuSubmitButton.addEventListener('click', () => {
addMenuItem(InputMenuName, menuList);
const $menuItem = document.querySelectorAll('.menu-list-item');
countMenuItem($menuItem, menuCount);
});
}새로 알게된 것
-
EOL 은
end of line을 의미한다. 코드의 마지막 줄에 엔터를 쳐서 개행을 하는 것이 지켜야 할 컨벤션이라는 것인데, 나는 지금까지 그렇게 개행이 되어있으면 일부러 지웠다. 알고 보니 에디터에서 교정해 주고 있었던 것이다. -
나는
querySelectorAll을 사용한 변수에 복수를 표시하기 위해 $를 썼었다. 이렇게 표현하는 컨벤션이 있다면 내가 쓰던 방법은 다른 사람들이 내 코드를 보면 헷갈릴 것 같다.
//DOM을 사용한 변수라는 걸 알리기 위해 변수에 $를 붙임
const $button = document.querySelector("#dom")- 코드를 줄이기 위해 머리를 쓰자!
document.querySelector("#dom1")
document.querySelector("#dom2")
document.querySelector("#dom3")
document.querySelector("#dom4")
//위처럼 반복되는 코드를 줄이기 위한 선언
const $ = (selector) => document.querySelector(selector)
$("#dom1")
$("#dom2")
$("#dom3")
$("#dom4")좋은점
코드리뷰를 한다는 것 자체도 이 스터디의 큰 장점이지만 나는 아직 다른 사람들의 코드를 읽는 것이 어렵다. 그런데 이 스터디에서는 모두 같은 과제를 수행한다. 그래서 다른 사람의 코드를 읽기도 덜 어렵고, 같은 기능을 다른 방법으로 구현하는 걸 많이 볼 수 있다는 점이 좋다.
