POSTABOUT

WIL | cdd와 tdd

2023-06-11

이번주 한 일

  • storybook 공부중..
  • tdd 공부....

이번주의 정리

1. CDD 원티드 프리온보딩 챌린지

  • 아토믹 디자인 패턴
    이전에 wil에 간단하게 작성한 적이 있던 내용이었는데 다시 들어도 복잡하다.

    • atom : 인터페이스를 구성하는 가장 작은 단위(조합x)
    • molecule : atom을 조합하여 만든 더 복잡한 컴포넌트
    • organism : molecule을 조합하여 만든 더 복잡한 컴포넌트
    • template : organism, atom, molecule을 조합하여 만든 레이아웃
    • page : 여러 template과 oragnism의 조합하여 만든 페이지

    => 강의에서는 위 내용으로 정리했지만, molecule과 organism은 사람마다 받아들이는 범위가 조금 다른 느낌이라 이 부분에서 조율하는 게 많이 어려워보였다
    => 어떠한 디자인 패턴을 적용할 때는 시간/프로젝트/상황을 고려하여 사용하는 게 제일 좋고, 사실 아토믹 디자인 패턴이 말로 들었을 땐 무척 좋은 패턴처럼 보이지만, 적용하려면 많이 어렵다고 하셨다~~(완벽한 아토믹 디자인 패턴은 없다고..)~~

  • 컴포넌트

    • 상향식 컴포넌트(bottom -> up)
      • 아토믹 패턴
      • next.js 컴포넌트 - > page
      • 일반 사용자뿐만 아니라 개발자도 사용할 수 있는지 고려
      • 가장 작은 컴포넌트 조합해서 전체적인 컴포넌트
      • YAGNI
      • CDD : 컴포넌트 주도로 개발함
    • 하향식 컴포넌트(top -> down)
      • 큰 것 먼저 -> 작은 것
      • 중복되는 요소들 컴포넌트화
      • 디자인/구조 먼저 구성 후 이를 바탕으로 세부적인 요소들을 개발
      • page -> 컴포넌트
      • 르블랑의 법칙

  • 최근 중요성을 씨게 느끼고 있는 제어/비제어 컴포넌트

  • 소프트웨어 개발 3대 원칙(완전 처음 들었다)

    • KISS : Keep It Simple Stupid! (코딩을 하는 행위에서 되도록이면 간단하고 단순하게 만드는 게 좋다는 원리)
    • YAGNI : You Ain't Gonna Need It (필요한 작업만 해라 => 확장성을 고려하여 미리 작업해뒀다가 안고치면 버그의 주범)
    • DRY : Do not Repeat Yourself (반복하지마라 => 동일한 코드의 반복은 잠재적인 버그의 위협을 증가시킴)

2. TDD 강의

강의 공유 금지라... 중요하다고 생각했던 키워드와 강의들으면서 헷갈렸던 부분만 정리(근데 이분은 해당 강의 참고해서 작성하신 것 같다)

  • jest global 설치 시 (MacOS에서 오류 생기는 경우)

    sudo npm install jest --global

  • coverage : 아래처럼 test는 제대로 진행됐지만, 실패하는 경우의 수가 있는 경우 아래처럼 테스트가 제대로 이루어지지 않은 부분의 라인(ex. 30-31)과 94.28%처럼 안된 부분 알려준다

    • collectCoverage: true로 세팅해주면 볼 수 있음
    • jest --coverage 입력시에도 확인할 수 있음
    ---------------|---------|----------|---------|---------|-------------------
File           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
---------------|---------|----------|---------|---------|-------------------
All files      |   94.28 |     87.5 |     100 |   94.28 |
test.js        |   94.28 |     87.5 |     100 |   94.28 | 30-31
---------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       9 passed, 9 total

  • package.json

    • "test": "jest --watch" (git commit해야 제대로 작동됨)
    • "test": "jest --watchAll" (저장할 때마다 모든 test가 진행됨)

  • 각 테스트는 독립적으로 유지되는 것이 중요함

    • 반복적으로 사용되는 객체의 경우 => 각 코드에 작성해도 되지만 코드 중복을 피하기 위해 beforeEach()를 사용함
    • let으로 선언 먼저 하고 매 테스트마다 초기화해줄 수 있도록 beforeEach()를 사용함(공식문서 참고)

  • mock : 어떠한 함수를 구현해서 테스트하는 경우 사용

  • stub : mock을 보조? 대체?용으로 사용(더미 객체를 임의로 만들어서 테스트 용도로 사용하는 느낌)