바닐라코딩 3주차 회고

-·2021년 6월 27일
바닐라코딩부트캠프
0

바닐라코딩

목록 보기
2/2

2021년 6월 7일부터 시작된 바닐라코딩 부트캠프 10기에 참여하며 작성한 글입니다.

이번주는 다사다난했다.
지난주 일요일부터 떨어지기 시작하던 컨디션이 최하점을 찍으면서 몸이 말을 듣지 않았고, 과제의 난이도도 부쩍 상승하여 심리적으로 어려움을 겪었다. 과제와 건강이라는 두 마리 토끼를 모두 잡는 것이 난제였는데 평소보다 일찍 퇴근해서 취침 시각을 당기고 바코에서는 과제에 온전히 신경을 쏟는 방식으로 목표한 것들을 잘 끝낼 수 있었다.

이번주 과제는 여러 가지 정렬을 구현하고 이를 시각화하는 것이었다. 여기에서 더 나아가 적용해야 하는 '무언가'가 이 과제의 핵심이었지만 장차 바코더가 될 분들에게 스포가 될 것 같아 쓰지 않겠다. 다행히 수요일 밤에 갑작스러운 깨달음이 찾아와 두 가지 정렬을 구현하고 이를 시각화할 수 있었다.


난이도가 높았던 만큼 더 많은 경험을 얻어간 측면도 있다.
  1. 개념 단계에 머무르던 promise, async/await 을 직접 사용하여 자신의 문제를 해결하기
  2. 2주차에서 공부했던 것들을 적용하여 정렬 로직 구현하기
  3. '무언가'를 사용하기 위해 고민해봄으로써 정의된 것 이상의 개념을 이해하기
  4. 구현한 로직을 DOM으로 조작하여 화면에 나타내기

내 손으로, 내가 필요해서 작성하지 않았으면 이해할 수 없었을 개념들을 체득하고 나니 시야가 한층 넓어지고 자바스크립트도 더 흥미로워졌다. 이런 괴로움이라면 언제든지 OK...


3주차 코드 리뷰

긍정적인 피드백

  • 전반적으로 일관성 있게 코드를 작성한 점
  • Error Message와 맥락을 모르면 알 수 없는 상수 값들을 변수로 관리한 점
  • boolean type의 변수를 사용해서 코드를 깔끔하게 작성했다.
    Rest 파라미터의 사용

개선할 점

1. 메소드 체이닝의 경우 호출 단위로 끊어주면 어떤 처리를 하는지 쉽게 파악할 수 있다.

const numbers = userInput.value.split(',').map(value => Number(value.trim()));

const numbers = userInput.value
  .split(',')
  .map(value => Number(value.trim()));

2. 함수의 인자로 어떤 형태의 값이 오는지 알 수 있도록 명확하게 작성한다.

// 이것만으로는 sort 함수가 오는지 다른 무엇이 오는지 알 수 없음
function visualizeSort (sort, items) { ... }

// 정렬의 이름을 달고 있는 문자열이 들어온다는 것을 알 수 있음
function visualizeSort (sortName, items) { ... }

3. git commit : 의도와 작업 내용을 알 수 있도록 구체적으로 작성하기

사실 예전부터 커밋 메시지를 어딘가 이상하게 작성하고 있다는 자각은 있었다. 그러나 어떻게 작성하는 것이 좋을지에 대한 고민은 거의 하지 않았던 것 같다. 이를 반성하며, 리뷰어 분께서 달아 주신 링크를 토대도 이번 과제를 하면서 작성한 커밋 중 몇 가지를 연습 삼아 다시 작성해보았다.
브레이크 기간 동안 좀 더 찾아보고, 연습한 후에 ken님께 좋은 커밋 메시지에 대해 여쭤볼 생각이다.

  1. maked bars to move
  2. visualized bubble
  3. complete insertonSort
  4. checked indentings
  5. refactoring
  6. visualized insertionSort
  7. refactoring
  8. complete refactoring
  9. deleted json.lock

  • 다시 작성한 커밋 메시지

  • (제목) 기능추가 : 정렬 시각화를 위한 movebars 함수 작성
    (본문) async 함수이다. storage에서 정렬 함수 내부에서 받아온 위치 정보를 가져와 비동기적으로 bar를 움직이게 한다.

  • (제목) 기능추가 : 삽입 정렬 함수 작성
    (본문) 함수명은 insertionSort이다. 인자로 items(배열)를 받는다. 위치 정보를 storage에 전해주는 기능만 하기에 별다른 리턴값은 가지고 있지 않다.

  • (제목) 코드 리팩토링 : 기능이 중복되는 함수들을 하나의 함수로 작성
    (본문) 함수 내부에서 실행하는 정렬 함수의 종류만 다를 뿐, 같은 기능을 하는 visualizeBubble, visualizeInsert 함수를 통합하여 visualizeSort 함수를 작성했다. 정렬 함수명과 정렬의 대상이 될 배열을 인자로 받는다.


4. if 조건문 내부 등 비교를 하는 단위를 괄호로 묶어주면 가독성이 더 높아진다.

5. 성격이 다른 변수들은 빈 줄로 구분한다.

6. css : 연관있는 속성은 우선 순위를 반영하여 가깝게 작성한다.


금주 결산!

칭찬할 점

  • 디버거 사용을 생활화하게 되었다.
    이건 칭찬할 점이기도, 반성할 점이기도 하다. 디버거를 사용하면 곧바로 해결될 문제를 콘솔만 내리 찍는 바람에 하루를 날렸다. 마지막에는 디버거를 사용했는데 제대로 볼 줄 몰라 문제를 보고서도 넘겨버렸다. 그런 날 보던 동기분이 '디버거는 써보셨어요?' 하더니 5초만에 문제를 짚어내는 충격이란... 😱
    이 사건을 계기로 콘솔을 찍을 일이 생길 때마다 무조건 디버거를 썼고, 과제를 끝낼 즈음에는 한 주 전보다 훨씬 잘 사용할 수 있게 됐다.

  • 좋지 않은 컨디션으로도 목표한 지점까지 과제를 완성해낸 것, 밤 늦게까지 작업하면 진도를 충분히 뺄 수 있다는 욕망을 내려두고 몸이 오랫동안 버틸 수 있도록 생활 패턴을 지킨 스스로를 칭찬해주고 싶다.

반성할 점

  • 이번 과제에서 input의 유효성을 체크하는 코드들을 이벤트 리스너 함수 내부에 집어넣었다. 지금 생각하니 함수로 만들어 넣어줬으면 하는 아쉬움이 남는다. 당시 그 부분을 아예 생각하지 못했던 것은 아니지만, 지난 코드 리뷰에서 '함수를 만들 때에는 그 함수가 꼭 필요한지 생각해보라'는 리뷰를 받았기에 지금까지 해온 것처럼 가벼운 마음으로 함수를 만들 수 없었다. 피드백을 내 코드에 녹여내려면 아는 것에서 그치지 않고 그것을 적용할 수 있을 만한 실력을 길러야 한다는 것을 느꼈다.

  • 이번 과제의 핵심이었던 '무언가'는 10기 대다수에게 생소한 개념이었다. 그럼에도 불구하고 오피스 아워 시간에 나름대로의 의견을 내어놓으려 하는 모습이 몹시 인상적이었다. 나는 잘 알지 못하는 것을 입 밖으로 뱉기 참 힘들어 하는 타입인데, 같은 상황임에도 주관을 가지고 의견을 제시하는 동기들을 보면서 만감이 교차했다. 그 무렵 내 머릿속의 '무언가'는 온갖 형태로 파편화되어 단어와 단어로밖에 존재하지 않았기 때문에 더 회의감이 들었던 것 같다. 새로운 것을 대하는 태도가 더 적극적이어야 할 필요를 느낀 순간이었다.


이번주에 있었던 일

  • 도전 골든벨
    프렙 때부터 노리고 있었던 골든벨이 열렸다.
    1등 상품이 몹시 훌륭했는데다 결승전 진출을 앞두고 떨어져서 많이 아쉬웠다. 하필이면 한참 전 기수 졸업생 인원수가 문제로 나올 줄이야...
    그래도 3주 내내 과제에 빠져 있다가 이런 이벤트가 열리니 스트레스도 풀리고 잃었던 웃음도 다시 찾아 즐거웠다.
profile
-
이전 포스트

바닐라코딩 1, 2주차 회고

0개의 댓글