TDD
-
TDD를 해보자프론트엔드 2023. 2. 7. 09:00
이번 포스팅은 필자가 생각하는 TDD를 하는 과정에 대해서 포스팅해보려고 합니다. 부족한 점이 많을 수 있다는 점 양해 부탁드립니다.... TDD를 위해서 필요한 것 1. 관심사의 분리 관심사의 분리란? 관심사의 분리란 간략하게 설명하자면 한 파일이 하나의 역할만 하도록 해주는 것입니다. React를 예시로 들자면, View역할을 하는 .tsx파일은 View의 역할만 하도록 하고, View 파일에서 사용하는 동기, 비동기 로직은 util파일이나 logic.ts파일로 나누어서 View에서는 선언만 해서 사용하도록 해줍니다. 관심사의 분리가 필요한 이유 개발을 하게 될 경우 View파일 내부에 필요한 로직까지 모두 선언 및 사용하는 경우가 많습니다. 이럴 경우 한 파일의 코드안에 view, 동기 비동기 로직..
-
jest + React testing library + msw 테스트 초기 설정프론트엔드 2023. 1. 11. 15:24
이번 프로젝트를 시작하면서 TDD를 도입해보고자 미리 연습을 해보고 싶어서 이번 포스팅을 작성하게 되었습니다. 프로젝트는 Create React App typescript에 패키지 매니저는 yarn berry를 사용하고 있습니다. 해당 프로젝트 설정은 밑의 링크를 확인해주세요! https://blog.beomseok.dev/52 CRA + typescript + yarn berry 오늘의 포스팅은 yarn berry 패키지 매니저를 이용한 프로젝트 설정 방법을 살펴보도록 하겠습니다. yarn berry를 사용한 이유는 npm, yarn classic의 단점을 보완하고 pnp 방식을 이용해 배포할 경우 패키 blog.beomseok.dev 목차 1. msw란? 2. 설치 방법 3. 초기 설정 4. 예제 1..
-
2022년 B5 감상문기록/FEConf 2022. 12. 30. 11:34
상태관리 이 전쟁을 끝내러 왔다 팀: 메가테라 발표자님: 최수형 한 줄 소감 발표 내용과 별개로 발표를 라이브코딩으로 진행했다는 점과 TDD를 빠르게 보여주신 점이 굉장히 멋있다는 생각이 들었고, 이전부터 헷깔렸단 store와 model간의 관계에 대해 조금 짚어주신 것 같아 좋았습니다. 이번 포스팅은 저번에 올렸던 최수형님의 발표인 2020년 A5보다 먼저 작성된 글입니다. (포스팅은 더 늦게 했습니다..😅) 발표 내용 발표 제목만 보고 상태관리에 대한 내용인 줄 알았지만, 실제 내용은 전체적인 UI 코드와 비즈니스 로직의 분리 방법에 대한 내용이었습니다. 거대한 컴포넌트 어찌할 것인가? 개발을 하다보면 불어난 컴포넌트의 크기를 감당하지 못하고 로직 자체가 복잡해질 수 있습니다. 컴포넌트의 크기가 커지..
-
2020년 A5 감상문기록/FEConf 2022. 12. 21. 09:20
A5 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다. 팀: Microprotect 발표자: 최수형 한 줄 소감 TDD 도입이 시급하다... 이번 포스팅은 발표에 대한 내용보다는 필자가 TDD에 대한 생각 변화에 더 중점을 둔 것 같다. 발표 자체가 라이브코딩으로 진행되다 보니 발표에 대한 글보다는 발표를 보면서 느꼈던 점들, 알게된 점들을 더 작성하는 것이 좋을 것 같다고 생각했습니다. 이번 발표를 보게 된 이유 2020년도 발표를 다시 찾아보면서까지 들은 이유는 발표자이신 최수형님의 2022년 발표 ‘상태관리 이 전쟁을 끝내러 왔다’라는 발표가 너무 멋있었고 요즘들어 TDD가 개발에 필요한 요소중에 하나인 것 같다는 생각이 들었기 때문이었다. 부스트캠프를 할 때부터 TDD, ‘테스트 코드 작성하세..