우아한테크코스 3기 프리코스 1주차 후기

 

월요일이 아니라 수요일이 첫날이었다.

 

오후 3시 정각에 미션 안내 메일이 도착했다. 이제와 생각해보니 주 35시간이라서 항상 한 주의 시작이 오후인 것 같다.

>  1주차 미션　　　 2020. 11. 25. (수) ~ 12. 01. (화)
　2주차 미션　　　 2020. 12. 02. (수) ~ 12. 08. (화)
　3주차 미션　　　 2020. 12. 09. (수) ~ 12. 16. (수)
　최종 코딩테스트　2020. 12. 19. (토)
　최종 합격자발표　2020. 12. 30. (수)

 

 

---

미션 내용

[1] 기능 요구사항

- 숫자야구게임 구현

[2] 프로그래밍 요구사항

- 주어진 play 메서드 사용, alert 메서드 사용

- depth < 3, 함수 간결화 (1함수 1기능), 코드 컨벤션 적용

[3] 미션진행 요구사항

- README.md에 기능목록 작성

- commit 단위는 기능목록 단위로 추가

제출방법 : 다음 주 화요일 23시 59분까지 Github제출 + 메일 발송

 

 

---

 

후기 & 자체 피드백

 

놀랍게도 첫 날 저녁 10시경 벌써 PR을 올리신 분이 등장했다...!

사전 안내 메일에서 말씀해주신 것처럼 특히 첫 과제는 가볍게 완성할 수 있는 난이도로 설정해주신 것 같다. 하지만 JS와 더불어 브라우저단에서 노드와 이벤트를 다룰 수 있어야 하는 미션이었기에, 나에게는 절대 쉬운 과제가 아니었다. 그만큼 많이 배울 수 있었지만 무사히 코테를 볼 수 있을지 걱정이 됐다.

프리코스 전체가 온라인으로 진행되어 하루 중 시간이나 공간의 제약 없이 공부했다가 쉬었다가 할 수 있다는 점이 좋았다. 그리고 궁금한 점이 있으면 카카오톡채널이나 이메일로 언제든지 질문할 수 있어서 온라인이어서 답답하다거나 하는 느낌은 전혀 없었다. 게다가 이미 문의로 들어온 질문 중 몇 가지에 대한 답변 내용을 따로 정리해서 격려의 메세지와 함께 전체 메일로 공유해 주셨다.

42서울 과정을 함께하는 분들과 채팅을 하다가 우리끼리 구현 내용 중에 헷갈리는 부분이 생긴 적이 있다. 그래서 우리 중 한 분이 대표로 질문 메일을 보내주셨는데 거의 오후 10시가 다되어가는데도 친절하고도 명쾌한 답장을 보내주셨다. 그외에도 여러모로 프리코스 참가자들을 신경써주시는게 느껴졌다.

 

그럼, 다음 주차 과제를 위해 스스로를 점검해보자.

첫째, README.md에 구현할 기능목록을 미리 작성했는가?

작성은 했다(...) 기능 목록은 기능의 단순한 나열이 아니라 코드를 작성하는 즉, 실제 기능을 구현하는 관점에서 단위를 적정하게 쪼개서 작성해야 하는데 어떻게 구현할지 감이 안 오다 보니까 실제 구현해야 하는 것과 거리가 먼 목록을 작성했다. 어떤 부분은 쓸데없이 상세하고 어떤 부분은 너무 추상화 되어있었다. 기능을 구현한 후에 이에 맞춰서 다시 기능목록을 정비했는데, 거의 새로 썼다고 해도 무방할 정도로 수정이 많았다.

 

둘째, 기능목록에 정리한 단위에 따라 commit 했는가?

앞서 말한 것과 같이 구현 전에 작성한 기능목록이 실제 구현해야하는 그것과 많이 다르다 보니 커밋메세지도 기능목록 단위로 딱 떨어지지 못했다. 사실 그보다도 동시에 여러가지 기능을 손보면서 커밋 단위를 잘게 쪼개지 못한 잘못이 더 큰 것 같다. 예를 들어 세번째로 커밋한 확인버튼에 클릭 이벤트리스너 추가에서는 play메서드와 연관있는 대부분의 함수들이 한번에 커밋되었다. 기능목록의 단위를 조금 큼직큼직하게 작성했다면 설명이 가능하지만 그런것도 아니었다. 코드를 작성하면서 앞서 작성했던 기능목록을 상기하면서 commit 단위를 의식적으로 조정하는 훈련이 필요하다.

아래는 문제의 잘게 쪼개지 못한 덩어리 커밋메세지

feat: 확인버튼에 클릭 이벤트리스너 추가

git commit --amend -m"메세지" //가장 최근 커밋 메시지 내용 수정하기

 

 

 

---

 

배운 내용 정리

 

숫자 0은 falsy

불린형에서 false과 되는 값들을 falsy라고 부른다.

자바스크립트에서 숫자형은 항상 참이라고 착각하고 코드를 작성했다. 에러코드를 0부터 4까지 부여하고, 에러가 없을 경우 false를 리턴하도록 했는데, 에러코드 0일 때 에러가 없는 것으로 처리되어서 그제서야 0은 숫자형 중에서 유일하게 falsy 라는 것을 깨달았다.

이후에 비슷한 실수를 하지 않도록 falsy 값들을 정리해보자.

- 불린형 false
- 숫자형 0, -0, 0n
- 문자형 ""
- null
- undefined
- NaN

 

alert 메서드

창이 닫힐 때까지 다른 모든 인터페이스에 접근할 수 없는 창을 '모달창(modal window)'이라고 한다. 개인적인 경험을 비추어 봤을 때도 모달창은 다른 동작을 모두 막기 때문에 사용자로 하여금 답답함을 느끼게 한다. 아마도 그런 의미에서 모달창을 띄우는 함수는 남용해서는 안된다고 하는 듯하다.

alert로 띄우는 경고창 또한 모달창이기 때문에 사용자의 확인 외에 다른 입력이 필요하지 않을 때에만 쓰여야 한다. (참고)

 

커밋메세지 컨벤션 

<type>: <subject>
    - feat: 새로운 기능 추가
    - fix : 버그 수정
    - docs : 문서 수정
    - style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
    - refactor : 코드 리팩토링
    - test: 테스트 코드, 리팩토링 테스트 코드 추가 

지금까지 커밋메세지의 첫 문자를 대문자로 쓰고 있었다. 게다가 fix는 버그가 아닌 사소한 스타일링 수정에서도 남용하고 있었다...ㅎㅎ 컨벤션을 지키니까 나 스스로도 내 커밋로그를 파악하는 속도가 빨라졌다.

 TIP  git log --oneline --decorate --color : 커밋 로그 깔끔하게 모아보기

git log --oneline --decorate --color //커밋 로그 깔끔하게 모아보기

 

자바스크립트 module

모듈은 하나의 .js 파일로 생각하면 된다고 한다. 파일 본문에는 보통 클래스나 라이브러리 하나가 들어간다. 내보내기/가져오기(export/import)로 모듈을 사용할 수 있고, 내보낼 때 default를 붙이면 가져올 때 해당 이름을 중괄호로 묶어 명시하지 않아도 default 값을 가져온다.

// utils.js
export default function Util()
export function Foo()

// index.js
import util from './util.js'
import {Foo} from './util.js'

동일한 모듈을 여러 모듈에서 가져오더라도 모듈은 최초 한 번만 실행된다. 또한 외부 모듈 스크립트 <script type="module" src="..."> 는 지연 실행되기 때문에 모듈이 이미 다 불러와졌더라도 페이지가 모두 로드되고 난 다음에 실행된다. (참고)