230611_WIL | 6월 2주차

230611_WIL

이번주 한 일

• 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 (반복하지마라 => 동일한 코드의 반복은 잠재적인 버그의 위협을 증가시킴)

storybook은 강의 듣고 공식문서 봤는데 모르겠음(한글번역도 모르겠음.. 나 환장해..)

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을 보조? 대체?용으로 사용(더미 객체를 임의로 만들어서 테스트 용도로 사용하는 느낌)

---

다음 주에 연구원님이랑 TDD 정리하기로 해서 공부하고 있는데, 공식문서만으로는 조금 모자라서 결국 강의도 같이 보고 있다. 근데 정신차려보니까 따라치고 있는 중이라 혼자 이마탁치는 중 유닛테스트 초반까지는 그래도 이해하면서 오~하면서 쳤는데, mock 들어가면서 정신 나갈 것 같다.
그리고 스토리북같은 경우도 똑같은 게.. 분명 프리온보딩 강의들을 때는 그래도 오~하면서 봤는데, 끝나고 혼자 공식문서보고 해보려고 찾아봤는데 모르겠다 ㅎ.
한글버전도 잘 돼있는데 왜 나 모름??? 일단 강사님 코드 따라치다보니 Button컴포넌트가 만들어져 있어서 해당 부분 보면서 구글링하고 이해하려고 하는 중인데 조금 어렵다. 최근에 새 버전 나왔다고 하셔서 최대한 공식문서 보고 하려고 했는데 오우.. 망했는걸..