시작하면서지난 주 개선 사항은 다음과 같다.TDD와 BDD를 상호보완적으로 사용하기단위테스트를 억지로 BDD로 작성하려 하지 않고, 기능 개발 시 TDD로 개발하다가 예외 처리와 전체 기능 테스트에서 BDD를 사용했다.제어 역전을 구현할 수 있는 다른 패턴들 공부하기MVC, MVP, MVVM, MVI, FLUX 등 다시 공부. 중간 객체를 어떻게 잘 활용할 수 있을지 생각해보고, 각 모듈의 역할에 대해서 고민하기MVC, MVP, MVVM, MVI의 흐름을 직접 그려보면서 익혔다. FLUX와 REDUX는 MVI에서 파생된 개념이라 따로 공부하면 좋을 것 같다.또한 2주차보다 3주차 미션의 구현 사항이 조금 더 복잡해짐에 따라, 자연스럽게 중간 객체의 필요성을 느끼게 되었다. 컨트롤러에서 입력 단위에 따라 ..
시작하면서지난 주 개선 사항은 다음과 같다.테스트 네이밍 관련 내용 조사, 나만의 규칙 만들기It Should, Given/When/Then, Describe/Context/It 등의 방식이 있다.이번 테스트는 BDD 방법론 중 하나의 방법인 Given/When/Then 으로 작성하였다.테스트 방식에 따라서 네이밍 체계 역시 달라지기 때문에, 방식을 먼저 정하고 규칙을 만드는 것이 좋을 것 같다.주석으로 처리하는 대신 사용할 수 있는 skip() 활용하기에러 클래스 관리 관련 내용 학습1주차에서 커스텀 에러 클래스를 지정했었다. 2주차에는 공통 에러 헤더를 부모 클래스에서 관리하지 않고 각 자식 클래스에서 import 해오던 부분을 수정하였다. super() 을 조금 더 효율적으로 사용할 수 있었다.또한..
배경프리코스 미션을 구현하면서 클래스에서 다른 클래스의 인스턴스를 생성하고 사용하는 방법에 대해 고민하게 되었다. 우선 두 가지 방법으로 구현하게 되었는데, 둘 다 찝찝한 구석이 있어 좋은 방법이 없는지 궁금해졌다.생성자에서는 초기화만 하고, init 메서드에서 값을 넣어준다. (Calculator) → 이거 init 으로 계속 초기화되는데 사용할 일이 있나?클래스 내부에서 그냥 생성한다. (RacingGame) → run 실행될때마다 계속 인스턴스 만드는건데 비효율적인듯. 그런데 생성자에서는 아직 입력값을 받기 전이라 인스턴스를 만들 수 없다.class Calculator { customSeparator; numbers; constructor() { this.customSeparator = ..
BDD란?BDD는 행위 주도 개발 (Behavior Driven Development)로, TDD를 근간으로 파생된 개발 방법론이다.TDD에서 파생되어 테스트케이스 자체가 요구사항이 되도록 하는 개발방법이다. BDD 기본 패턴시나리오를 기반으로 테스트 케이스 작성함수 단위 테스트를 권장하지 않음일반인이 봐도 이해할 수 있을 정도로 작성Given-When-ThenFeature : 테스트 대상의 기능/책임을 명시Scenario : 테스트 목적에 대한 상황을 설명Given : 시나리오 진행에 필요한 값을 설정When : 시나리오를 진행하는데 필요한 조건을 명시Then : 시나리오를 완료했을 때 보장해야 하는 결과를 명시즉, 테스트 대상의 상태 변화를 테스트하는 것테스트 대상의 환경을 A 상태에 두고(Given..
시작하면서사실 이전 프리코스에서는 "다들 그렇게 하니까" 라는 생각으로 쫓기듯 코드를 작성했다. 하지만 이번 프리코스에서는 "내 코드를 완벽히 이해하자" 라는 목표를 세우고, 나만의 근거를 갖고 개발 방식을 선정했다. 그러는 와중 테스트 코드를 확실하게 정복해 보고 싶다는 욕심도 생겼다. 처음 도전해보는 방식들이 많겠지만, 하나의 미션을 가지고 여러 개발자 분들과 의견을 주고받을 수 있는 좋은 기회를 통해 이러한 방식을 깎아나가고 싶다! 배경우테코 프리코스의 과제에는 이런 내용이 있다."기능 단위로 커밋"기능 단위로 커밋하려면 어떻게 해야 할까? 내가 해당 기능을 제대로 구현했음을 어떻게 확신할 수 있을까? 테스트코드를 작성하면 된다. 실제로 과제 코드에도 이미 App 단위의 테스트코드가 작성되어 있었다..
공식문서를 보고 그때그때 필요한 문법을 찾아 예제를 적으며 공부합니다. Globals · JestIn your test files, Jest puts each of these methods and objects into the global environment. You don't have to require or import anything to use them. However, if you prefer explicit imports, you can do import {describe, expect, test} from '@jest/globals'.jestjs.io expect()expect(값).toBe(비교할 값)Object.is(값, 비교할 값) 과 같다Object.is() 란? Object.is..
배경TDD로 개발하다가, 기능 단위 커밋을 할 때 해당 커밋의 기능이 테스트를 통과하는지 확실하게 검증하기 위해 커밋 이전에 테스트를 돌리고 통과 시에만 커밋을 할 수 있도록 하고 싶었다.또한 커밋 메시지 컨벤션을 따르기 위해 커밋 메시지 검증이 필요했다. 구현git hooks 설정하기외부 라이브러리를 사용할 수 없었기에, 평소 사용했던 husky로 설정은 불가능해서 .git/hooks에서 설정을 해주기로 했다.1. cd .git/hooks 해서 지원하는 훅 확인2. 해당 위치에서 필요한 훅의 .sample 확장자를 지운 이름의 파일을 만들기vi pre-commit3. 실행하고 싶은 명령어 작성# .git/hooks/pre-commitnpm test4. 권한부여chmod ug+x .git/hooks/*..
Vanilla JS로 컴포넌트 만들기배경리액트에서는 컴포넌트를 기반으로 코드를 작성할 수 있었기에, 반복되는 부분을 컴포넌트로 분리할 수 있었다.Vanilla JS로 구현한다면 반복되는 태그들을 어떻게 처리할 수 있을까?프로젝트에 필요한 커스텀 컴포넌트를 만들어 보기로 했다. 컴포넌트?컴포넌트가 갖춰야 할 것고유한 자바스크립트 클래스외부코드가 접근할 수 없으며 해당 클래스에서만 관리되는 DOM 구조 (캡슐화 원칙)구성요소에 적용되는 CSS 스타일다른 구성요소와 상호작용하기 위한 이벤트, 클래스, 메서드 등을 일컫는 API컴포넌트의 역할컴포넌트 구현을 위해, 익숙한 리액트의 컴포넌트 클래스를 참고했다.DOM Element를 출력할 수 있어야 함 (render)부모에게서 읽기 전용 데이터를 상속받을 수 있어..
