2주차가 되면서 우테코가 따르는 에어비앤비 js 스타일 가이드에 좀 더 세세히 따르는 것이 좋겠다고 느꼈다.
이 부분은 계속 생각하며 코딩해야 할 것 같다.
유의해야할 부분
커밋 컨벤션에어비앤비 js 스타일 가이드 참조Node.js 18.17.1 버전에서 실행 가능한지 확인하기요구 사항에 명시된 출력값 형식을 지켰는지 확인하기기능 구현테스트 성공했는지 확인하기코드컨벤션 확인하기ApplicationTest의 모든 테스트가 성공했는지 확인하기pr 날리기과제 제출하기prettier, eslint사용하기리드미 체크꼼꼼히 읽어보기유튜브 영상 보기소감문 작성하기
prettier, eslint사용하기
저번엔 사용하지 않았던, prettier와 eslint를 사용해볼 것이다.
- ESLint와 같은 Linter -> 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 도구
- Prettier와 같은 Formatter -> 소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는도구
설정 방법은 아래 블로그를 참고했다.
알아두면 쓸데있는 ESLint & Prettier 설정 방법 (feat.우아한테크코스)
VSCode에서 ESLint & Prettier 설정하기 (feat.우아한테크코스)
velog.io
+팁!
커뮤니티에서 알게 되었는데 프리코스에선 package.json파일을 수정할 수 없다.
prettier과 eslint를 추가하게 되면 package.json파일이 수정되게 된다.
그래서 빈 폴더를 만들어서 거기다 package.json파일을 생성하고 prettier과 eslint를 추가한 다음, 해당 fork한 프로젝트를 폴더 안으로 옮겨주면, 해당 프로젝트의 package.json 파일 수정없이 prettier과 eslint가 적용되게 된다!
초기 기능목록 정리
우승자가 2이상인데, 같은이름일때 무엇을 기준으로 판단?
# 미션: [자동차 경주]
## 기능 목록 정리
- 유저에게 입력받기
- 자동차 이름 입력
- 이름 길이는 5자 이하
- 쉼표로 구분
- 시도할 횟수
- 자동차들은 전진 또는 정지
- 전진하는 조건
- 0~9까지 랜덤값을 구함
- 4이상일 경우 전진
- 최종 우승자 출력
- 단독 작업자 안내 문구
- ex) 최종 우승자 : pobi
- 공동 작업자 안내 문구
-ex) 최종 우승자 : pobi, jun
- 사용자가 잘못된 값을 입력한 경우 throw문 실행
- [ERROR]
기능목록 정리 업데이트
readme
# 미션: [자동차 경주]
## 기능 목록 정리
- 유저에게 입력받기
- 자동차 이름 입력
- 쉼표(,) 로 구분, trim()으로 공백 제거
- 이름 길이는 5자 이하
- 자동차 이름이 중복되었거나 빈 문자일 경우 예외 처리
- 입력값이 없을 경우 예외 처리
- 시도할 횟수 입력
- 숫자가 아닌경우 예외 처리
- 1이상의 숫자가 아닐 경우 예외 처리
- 소수일 경우 예외처리
- 입력값이 없을 경우 예외처리
- 자동차들은 전진 또는 정지
- 전진하는 조건
- 0~9까지 랜덤값을 구함
- 4이상일 경우 전진
- 랜덤값이 4보다 작을 경우 정지
- 전진 또는 정지할 떄 마다 자동차의 전진상태와 이름을 return.
- 최종 우승자 출력
- 단독 작업자 안내 문구
- ex) 최종 우승자 : pobi
- 공동 작업자 안내 문구
-ex) 최종 우승자 : pobi, jun
- 차 입력값이 없을 경우
- 사용자가 잘못된 값을 입력한 경우 throw문 실행
- 예시) [ERROR] 숫자가 잘못된 형식입니다.
- 입력된 이름이 없거나 5자 이상일 경우
- '[ERROR] 잘못된 입력입니다.'
- 입력된 이름이 중복될 경우
- '[ERROR] 중복된 이름입니다.'
-입력한 시도횟수가 숫자가 아니거나 0이상의 자연수가 아닐 경우
- '[ERROR] 시도 횟수는 양의 정수여야 합니다.'
+2주차 공통 피드백을 생각하며 마크 다운 문법에 대해 공부해 적용해야 겠다.
생각해야할 부분.
trim()사용한 이유
- 사용자가 "pobi, woni, jun" 대신 " pobi , woni, jun "와 같이 공백을 추가한 경우, trim()을 사용하면 "pobi", "woni", "jun"과 같이 공백이 제거된 자동차 이름을 얻을 수 있다.
13.6 Avoid using unary increments and decrements (++, --). eslint no-plusplus
- ++와 --의 사용을 피하라고 권장
# 사용해보기
JavaScript에서 #을 사용하는 것은 클래스 필드에 private한 속성을 부여하는 데 사용된다.
Private 필드 및 메서드는 클래스 내부에서만 접근할 수 있으며 외부에서 직접 접근할 수 없다.
이것은 클래스 내부의 상태를 보호하고 클래스의 인터페이스를 더 명확하게 만들 수 있는 중요한 기능이다!
#를 사용하면 클래스의 사용자가 내부 구현에 대한 세부 정보를 알 필요가 없으며 클래스의 상태를 실수로 변경하지 않도록 보호할 수 있다.
isNaN사용하지 말기
29.1 Use Number.isNaN instead of global isNaN. eslint: no-restricted-globals
if (isNaN(tryCount) || tryCount < 1)
static을 쓴 이유
static을 사용하면 클래스와 그 클래스의 인스턴스 간에 데이터 및 동작을 효과적으로 관리하고 공유할 수 있다.
나의 예를 들어 설명하자면,
Validation 클래스의 validateCarNames 메서드를 클래스를 인스턴스화하지 않고 여러 곳에서 사용하려 한다.
static을 쓰지 않는다면, 이렇게 클래스의 인스턴스를 생성하고 메서드를 호출해야 한다.
const validator = new Validation();
const carNames = validator.validateCarNames(inputCarNames);
하지만 static을 사용한다면 클래스의 메서드 아래와 같이 인스턴스를 생성하지 않고도 호출할 수 있다.
const carNames = Validation.validateCarNames(inputCarNames);
그렇다면, static 메서드와 # (프라이빗 필드)의 차이는?
static 메서드는 클래스와 연관된 메서드로, 클래스 레벨에서 호출할 수 있습니다. 인스턴스를 생성하지 않고도 호출할 수 있으며, 주로 클래스와 관련된 유틸리티 메서드를 구현할 때 사용됩니다.
# (프라이빗 필드)는 인스턴스 레벨에서 사용되며, 해당 클래스의 인스턴스에 속한 데이터를 나타냅니다. 이는 클래스 외부에서 직접 접근할 수 없고, 클래스 내부에서만 사용할 수 있습니다. 프라이빗 필드를 사용하면 데이터 캡슐화를 실현할 수 있어, 외부에서 클래스 내부의 상태를 직접 조작하지 못하도록 보호할 수 있습니다.
그렇다면, 클래스 메서드와 인스턴스 메서드의 차이는?
이 부분은 gpt에게 물어봤다.
- 호출 방법:
- 클래스 메서드: 클래스 메서드는 클래스 자체에 속하며 클래스 이름을 통해 직접 호출됩니다. 인스턴스 생성 없이 클래스 메서드를 호출할 수 있습니다.
- 인스턴스 메서드: 인스턴스 메서드는 클래스의 인스턴스에 속하며, 해당 클래스의 인스턴스를 생성한 후에만 호출할 수 있습니다. 메서드 내에서는 해당 인스턴스의 속성에 접근할 수 있습니다.
- 접근 가능한 데이터:
- 클래스 메서드: 클래스 메서드는 주로 클래스 수준의 데이터에 접근하고 조작하는 데 사용됩니다. 인스턴스 관련 데이터에 직접 접근할 수 없으며, 일반적으로 클래스 변수 또는 클래스 내부의 상태를 변경하는 데 사용됩니다.
- 인스턴스 메서드: 인스턴스 메서드는 특정 인스턴스에 속한 데이터에 접근하고 조작하는 데 사용됩니다. 이 메서드 내에서는 해당 인스턴스의 속성에 자유롭게 접근할 수 있습니다.
- this:
- 클래스 메서드: 클래스 메서드 내에서 this 키워드는 클래스 자체를 가리킵니다. 따라서 해당 클래스에 속한 다른 클래스 메서드나 속성을 호출하는 데 사용됩니다.
- 인스턴스 메서드: 인스턴스 메서드 내에서 this 키워드는 메서드를 호출한 특정 인스턴스를 가리킵니다. 이를 통해 해당 인스턴스의 데이터에 접근할 수 있습니다.
나는 추가로 내 코드에서 cars 배열이 이 클래스의 인스턴스에 속하는 데이터라서 # 필드로 선언하는 것이 적합하다고 생각해서 적용했다.
저번 코드 리뷰때 #을 사용해보라고 피드백을 받았는데, 이 참에 알고 사용하면 좋을 것 같아, 이렇게 알아보고 적용해보았다.
+static은 객체지향적인 코드에는 맞지 않다는 의견도 있고, 사용을 지양하라는 의견이 꽤 많은 것 같다.
생각해봐야 할 듯...
jest
테스트에서 반복되는 코드를 함수나 beforeEach 블록을 사용하여 공통으로 추출할 수 있다.
테스트 코드를 작성할 때 DRY (Don't Repeat Yourself) 원칙을 준수하기!
이번 주차에 느끼고 신경쓴 것들.
jest로 test함수 작성하기
[객체지향적으로 코드짜기]
[static과 #사용해보기]
[test 함수의 중요성]
commit 컨벤션 지키기
feat: 새로운 기능 추가
fix: 버그 수정
docs: 문서 수정
style: 코드 스타일 수정
refactor: 코드 구조 개선
test: 테스트 추가 또는 수정
chore: 기타 변경 사항 예시 다음은 좋은 커밋 메시지의 예시입니다.
feat: 새 로그인 페이지 추가 이메일과 비밀번호 인증을 지원하는 새 로그인 페이지를 추가했습니다.
이 커밋 메시지는 다음과 같은 특징을 가지고 있습니다.
명확하고 간결하다. 변경 사항을 정확하게 요약한다.
커밋 유형을 명시한다.
결론 좋은 커밋 메시지를 작성하면, 프로젝트의 변경 사항을 쉽게 이해하고 추적할 수 있어요.
따라서 협업 효율을 높이기 위해서는 좋은 커밋 메시지를 작성하는 것이 중요합니다.
3주차는 2주차 공통피드백을 바탕으로 코드를 더욱 더 신경쓰고 소감문도 작성해야 할듯.
아직 갈길이 먼....초보 개발자
https://github.com/woowacourse-precourse/javascript-racingcar-6/pull/349
[자동차 경주] 박은지 미션 제출합니다. by eunji0 · Pull Request #349 · woowacourse-precourse/javascript-racingca
github.com
'우테코 프리코스' 카테고리의 다른 글
| [우테코 프리코스] 3주차 로또 게임 (1) | 2023.11.10 |
|---|---|
| [우테코] 프리코스 1주차 - 숫자 야구게임 (1) | 2023.10.27 |