우테코 프리코스 프론트엔드 2주차 회고

2주차 미션이 무사히 끝났다.

제출 마감시간 1시간전에 아슬아슬하게 제출을 했다. 리팩토링도 하고 싶었는데 제대로 못보고 일단 제출했다.

 

2주차 미션 안내

2주차 미션은 숫자 야구 게임을 구현하는 것이였다. 작년 기수와 같은 문제인데다가 검색하면 많이 나오는 문제였다. 

하지만 요구조건을 맞추려면 신경쓸게 많았다. 함수를 잘 나누고 테스트 코드를 작성하는게 중요한 미션이다.

작년과는 다르게 콘솔을 활용해서 미션을 해결해야 한다.

(의도는 언어를 더 깊게 이해할 수 있는 경험을 제공하기 위해서라고 하셨다)

 

미션은 오픈되어 있어서 링크를 공유합니다. 자세한 내용이 궁금하시다면 링크를 참고 바랍니다.

🔗 2주차 미션

🔗 2주차 나의 코드

 

---

2주차 미션 회고

배우고 적용한 것

1) Jest 및 테스트 코드

테스트 코드를 작성해서 테스트를 해보면서 테스트를 해야 했다. 테스트 방법에 대해 학습해 본적이 없었기에 학습후 테스트 코드를 만들었다. 다양한 예외 상황을 생각하는 것이 어렵기도 했지만, 내가 구현한 것을 직접 테스트 해보는 과정이 재밌었다.

• 테스트를 하는 방법들과 그중에서도 jest에 대해 학습하였다.
• 직접 테스트 코드를 만들어서 테스트를 수행하였다. 특히 예외 상황을 파악하기 쉽도록 예외 테스트를 별도로 만들어서 테스트하였습니다.
• 나중에 사람들의 회고글을 보니 TDD까지 한 사람들이 있었다. 이번 기회에 테스트 주도 개발에 대해 아주 약간이나마 알 수 있게 되었다.

[문제 발생 및 해결]

• 제공된 테스트에서 자꾸 실패를 하기에, mock, spyon등의 jest문법을 공부할 수 있었다.  
  • 문제 파악: MissionUtils 라이브러리 사용시 처음부터 사용하라고 했던 메서드가 있었는데, 더 쉽게 구현할 수 있는 메서드가 있어서 다른 메서드를 사용했다. 테스트 코드를 보니 지시한 메서드를 사용해야 통과할 수 있는 구조인 것을 알게 되었다.
  • 해결: MissionUtils 라이브러리에서 랜덤 수를 뽑아내는 메서드를 지시한 대로 수정했다.

미션에서 제공한 테스트 코드의 일부로, Random.pickNumberInRange를 사용해서 mock함수가 구현되어 있다.

내가 처음에 구현했던 코드, 램덤수를 추출하는 메서드로 다른 메서드를 사용했다.

2) ESLint

Airbnb convention을 따를 것이란 지시사항이 있어서 ESLint를 활용하여 환경 설정을 했다.

• prettier와 함께 사용하는 법, 자동으로 포맷팅되는 법 등을 학습 후 셋팅했다.
  
  • 나의 셋팅

  devDependencies로 아래 항목들을 설치했다.

//airbnb stlye eslint 로컬설치
npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-html

//eslint와 prettier 충돌방지
npm install --save-dev eslint-plugin-prettier eslint-config-prettier

.eslintrc.js 셋팅

module.exports = {
  env: {
    browser: true,
    node: true,
    commonjs: true,
    es2021: true,
  },
  extends: ["airbnb", "plugin:prettier/recommended"],
  overrides: [],
  parserOptions: {
    ecmaVersion: "latest",
  },
  rules: {},
};

.prettierrc.js

module.exports = {
  singleQuote: true,
  // 문자열은 따옴표로 formatting
  semi: true,
  //코드 마지막에 세미콜른이 있게 formatting
  useTabs: false,
  //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
  tabWidth: 2,
  // 들여쓰기 너비는 2칸
  trailingComma: "all",
  // 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 //formatting
  printWidth: 80,
  // 코드 한줄이 maximum 80칸
  arrowParens: "avoid",
  // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
  bracketSpacing: true, // 중괄호 내에 공백 사용
  proseWrap: 'never', // 마크다운 포매팅 제외
};

* 참고한 글

- https://poiemaweb.com/eslint

- https://velog.io/@_jouz_ryul/ESLint-Prettier-Airbnb-Style-Guide로-설정하기

- https://techwell.wooritech.com/docs/tools/prettier/prettier-eslint-airbnb/

 

3) 함수가 한가지 기능만 하도록 만들기

이 부분이 가장 신경이 많이 쓰였고, 시간도 오래걸렸다. 기능 목록을 작성하기 위해 어떻게 모듈을 구성할지를 고민하는 시간이 구현할 때보다도 오래 걸린 것 같다. 아무래도 이 정도 단위도 구현한 적이 별로 없어서 그런것 같다.

• 어떤 함수를 어디서 어떻게 호출하는게 효율적일지 고민하고, 재사용성도 고려하다보니 너무 어려웠지만 큰 공부가 된 것 같다. 
• 리팩토링을 하면서 더 나눌수 있는 함수들은 더 작게 나누었습니다.
• 함수의 기능을 명확하게 나타낼 수 있는 함수명을 지을 수 있도록 노력했다. (이름 짓는게 젤 어렵다^^)

4) 정규표현식

지난 온보딩에서 다른 사람들이 정규표현식으로 간단하게 푸는 것을 보고 정규표현식의 중요성을 깨닫고 다음에는 적용해 봐야겠다고 생각했었는데, 이번 과제에서 간단하게나마 적용해보았다.

 

아쉬운 점 / 앞으로 할 일

1) 함수 기능 나눠서 구현하기

• 가능한 한 나눠서 구현한다고 생각했지만 제출하고 보니 아쉬운 부분이 많았다. 함수의 이름에 해당하는 기능만 명확하게 구현할 수 있도록 노력해야겠다고 생각했다.
• 공통 피드백을 보니 기능을 나눌 기준을 세우라고 해주셨다. 3주차 미션에 적용해 봐야겠다.

2) 파일 구조

• 디렉토리를 이렇게 쓰는게 맞는가에 대한 고민이 되었다. 비전공자로 거의 혼자 공부했었고, 얼마 안해서 그런지 이런 부분들이 정답도 없는거 같고 어렵다.

3) 비동기 함수의 어려움

• 재호출하는 함수를 효율적으로 작성하고 싶었는데, 비동기로 동작하는 게 있어서 어려웠다. 어쩔수 없이 재귀를 사용해서 게임이 종료되기 전까지 함수가 계속 쌓이게 구현한 점이 아쉽다. 비동기에 대해 더 공부해야겠다.

2주차 소감

미니 게임을 만들고 직접 테스트 코드를 작성해서 테스트 하는 일련의 과정들이 선발과정과 정해진 기한이라는 특수성으로 인해 더욱 고통스러웠지만 재밌었다. 특히 테스트 코드를 고민할 수 있어서 좋았다. 지금은 작지만 앞으로 더 큰 프로젝트를 한다면, 정말 중요한 고민이 될 것이란 생각이 들었다. 우아한 형제들이 서비스를 잘 하기 위해서 무엇을 고민하고 있는지 엿볼 수 있었던 한주였던거 같다.

다른 사람들의 회고글을 보고 너무 잘해서 자괴감이 들었던 사람중 한명이었는데, 포비님이 인정하고 빠르게 습득하는데 더 신경쓰라고 해주셔서 좋았다. 한번에 다 하려고 하지 말고 지금 내가 할 수 있는 부분에 집중해서 하라고 해주신 말씀을 새기면서 3주차도 화이팅해야지!