작업 내용
GitHub - sryung1225/javascript-racingcar-6
Contribute to sryung1225/javascript-racingcar-6 development by creating an account on GitHub.
github.com
작업 주요 일정
과제 기한 : 2023.10.26(목) - 2023.11.01(수)
- 10/27(금) : 구현해야 할 기능 목록 정리 & 프로젝트 셋팅
- 10/28(토) : 기능 구현 & 리팩토링 & 회고 작성
- 11/1(수) : 리팩토링 & 테스트 & 회고 작성 및 제출
회고 1) 주석이 필수는 아니구나!
지난 회고 1 에서는 동작 순서나 세부적인 내용에 대해 주석을 다양하게 활용해봤고 이게 좋은 습관인 것 같아 앞으로도 활용해보겠다고 남겼었는데 1주 차 공통 피드백에 관련된 내용이 있었다. !무려 반대로!
변수 이름, 함수(메서드) 이름을 통해 어떤 의도인지가 드러난다면 굳이 주석을 달지 않는다.
모든 변수와 함수에 주석을 달기보다 가능하면 이름을 통해 의도를 드러내고, 의도를 드러내기 힘든 경우 주석을 다는 연습을 한다.
듣고보니 너무나 맞는 말.
만약에 동작이나 함수에 대해 일일히 설명을 단다면 지금 같은 작은 프로젝트에서야 괜찮지만 추후에는 굉장히 지저분해보일 것 같다.
대신에 의미있는 누가 봐도 이해할 수 있을 듯한 이름을 작명하는데에 더 큰 노력을 기울여 보게 됐다.
경주에 참여할 자동차 이름에 대해서 처음에는 candidate 라는 얼토당토않은(...) 변수명을 지었다가 cars로 변경하고
이와 관련된 변수, 함수 명에도 규칙성이 느껴지도록 "car" 라는 공통 키워드가 포함되도록 신경쓰며 작명했다.
리팩토링을 거듭하며 계속 변경하느라 후반부는 나도 정신없었지만 ㅋㅋㅋ
결과물이 나름 의도가 잘 드러난다는 것 같아 만족스럽다! 다음에는 처음부터 예쁘게 만들기에 도전해보자.
회고 2) 커밋 메세지 템플릿 적용하기
2주 차에서는 1주 차와는 다르게 커밋 메세지 컨벤션이 주어졌다.
마침 1주 차를 진행하며 프로젝트 규칙을 적용하기 위한 셋팅을 일부 진행하고 싶다 느낀 참이였기에
언젠가 본 적이 있던 커밋 메세지 템플릿을 적용해보기로 했다!
commit 명령 시 미리 만들어둔 템플릿을 불러와 규칙적인 커밋 메세지를 작성할 수 있도록 해보자.
아래는 컨벤션을 참고해 내가 작성해본 .gitmessage.txt 이다.
type(scope): subject
body
footer
# ---------------------------------------------------------
# 기본 형태
# <type>(<scope>): <subject>
#
# <body>
#
# <footer>
# ---------------------------------------------------------
# <type> 커밋 타입
# feat : 새로운 기능 추가
# fix : 올바르지 않은 동작, 버그 수정
# style : (코드의 수정 없이) 들여쓰기, 줄 바꿈, 세미콜론 누락 수정 같은 코드 스타일, 포맷 등의 수정
# refactor : 코드 리팩토링
# test : 테스트 코드 추가 및 수정
# chore : (코드의 수정 없이) 설정 변경, 빌드 업데이트 등
# docs : 문서 추가 및 수정
# ---------------------------------------------------------
# <scope> 커밋 변경 위치
# location, browser, compile, rootScope, ...
# ---------------------------------------------------------
# <subject> 커밋에 메세지 제목
# 현재 시제 사용(ex. change)
# 소문자로 작성하며 끝에 점을 붙이지 않음
# ---------------------------------------------------------
# <body> 주요 변경 사항 및 이전과의 비교
# ---------------------------------------------------------
# <footer> 모든 주요 변경 사항에 대한 설명 및 근거, 참조
위에는 기본 골격을,
아래에는 주석(줄 앞에 # 을 붙인다)을 이용해 관련된 설명을 참고할 수 있도록 작성했다.
위 파일을 루트 경로에 저장한 뒤 프로젝트가 commit 마다 불러올 수 있도록 아래 명령어를 입력한다.
$ git config commit.template .gitmessage.txt
설정이 완료되면 $ git commit 입력 시 커밋 메세지를 입력할 수 있는 shell이 열린다.
메세지를 입력하고 나서 저장하면 완료다.
(+)
쉘 사용이 불편한 경우 VScode를 이용해서 열 수도 있다. 아마 자동으로 열릴 수도?
나같은 경우는 이를 위해 기본 에디터로 VScode를 지정해주는 과정이 필요했다.
$ git config --global core.editor "code --wait"이렇게 지정되면 $ git commit 입력 시 커밋 메세지 수정 창이 파일처럼 열려 조금 더 편하게 작성할 수 있다.
(++) (MAC)
사실 기본 에디터 설정 과정에서도 오류가 났었다 (ㅎ)
hint: Waiting for your editor to close the file... code --wait:
code: command not found error: There was a problem with the editor 'code --wait'.
Please supply the message using either -m or -F option.
찾아보니 시스템 환경 변수에 VScode 가 추가되어 있지 않아 code 명령어를 사용할 수 없는 것이 문제였다.
아래 과정을 거친 뒤에야 비로소 원하는 동작을 했다.
$ nano ~/.zshrc # 터미널 zsh 환경설정 파일 열람
# 열람된 .zshrc에 PATH=VScode경로 추가 후 저장
# MAC 기준 응용프로그램 폴더에 VScode가 존재하는 경우 아래 줄과 같음
# PATH="/Applications/Visual Studio Code.app/Contents/Resources/app/bin:$PATH"
$ source ~/.zshrc # 변경된 사항 적용
회고 3) prettierrc 를 이용해 코드 컨벤션 적용하기
과제 요구사항 중 또 하나는 제시하는 자바스크립트 스타일 가이드 적용하기이다.
나는 기존에 VScode 확장 프로그램 prettier를 이용해 전역으로 포맷팅을 하고 있었는데
1주 차에서는 어버버 하다가 컨벤션에 맞춰서 전체 설정을 바꿨다 ㅎㅎㅎ
하지만 이 스타일 가이드라는건 상황에 따라서 변화할 수 있는 것이기 때문에 (예를 들자면 팀 프로젝트)
이렇게 전역으로 수정하는건 아무리 봐도 아닌 것 같아
이번 주차에서는 .pretterrc 파일을 이용해 이 프로젝트에만 스타일 가이드를 적용해봤다!
루트 경로에 아래와 같이 .prettierrc.cjs 파일을 만들어 적용했다.
각 옵션은 스타일 가이드를 처음부터 읽으면서 필요한 내용으로 골라 작성했다.
module.exports = {
arrowParens: 'always', // 화살표 함수 단일 인자 시, 괄호 생략
printWidth: 80, // 한 줄 최대 문자 수, 넘어가면 줄 바꿈
tabWidth: 2, // 들여쓰기 시, 탭 너비
useTabs: false, // 스페이스 대신 탭 사용
semi: true, // 문장 끝 세미콜론 사용
singleQuote: true, // 작은 따옴표 사용
trailingComma: 'all', // 꼬리 콤마 사용
bracketSpacing: true, // 중괄호 내에 공백 사용
proseWrap: 'never', // 마크다운 포매팅 제외
endOfLine: 'auto', // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
};
(+) 왜 cjs 확장자를 사용했을까?
확장자를 고르는 과정에서 많은 어려움이 있었으나 일부는 생략하고...ㅎ
js로 저장했을 때 VScode 우측 하단 Prettier가 빨간색으로 표시되며 포맷팅이 적용되지 않는 문제가 있었다.
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/yiryung/Documents/dev/woowa-precourse/javascript-racingcar-6/.prettierrc.js from /Users/yiryung/Documents/dev/woowa-precourse/javascript-racingcar-6/node_modules/prettier/internal/internal.mjs not supported. .prettierrc.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead rename .prettierrc.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/yiryung/Documents/dev/woowa-precourse/javascript-racingcar-6/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
프로젝트의 .prettierrc.js 파일이 ES 모듈로 처리되고 있지만
해당 파일을 요구하는 코드가 CommonJS 모듈을 사용하고 있다는 것.
.prettierrc.js 에서 사용된 module.exports = { } 이 CommonJS 방식이기 때문에
package.json의 "type"을 "commonjs"로 변경해주거나 확장자를 cjs로 변경할 것을 권장하고 있다.
해당 과제는 package.json의 불필요한 수정을 금하기에 확장자를 cjs로 변경했고, 에러는 무사히 해결됐다.
'기록방 > 우아한테크코스' 카테고리의 다른 글
| [우테코 6기] 프리코스 1주차 "숫자 야구 게임" 과제 회고 (1) | 2023.10.26 |
|---|
