본문 바로가기

TDD2

프론트엔드 테스트에 대한 생각 요즘은 프론트엔드에서도 TDD 라는 단어가 심심치 않게 보인다. TDD 와 테스트가 동일한 뜻은 아니지만 그전에는 테스트는 커녕 기본적인 프레임워크나 라이브러리 사용법? 등에 대한 어려움?인가 웹팩 같은 번들러나 타입스크립트 같은 트랜스파일러에 대한 어려움인가? 대충 그런 수준의 어려움들이 메인이였다면 요즘에는 자동화나, 테스트나 UX등 부가적인 수준에 대한 관심사들이 보이기 시작했다는건 이제 상대적으로 짧은 역사를 가진 프론트엔드도 어느 정도 성숙한 개발문화를 구축하기 시작했다는 징조가 아닐까 생각이 든다. 물론 다른것들이 더 쉽다는 것은 아니지만 정상적인 수순이라면 단계별로 관심사가 발전하기에 테스트나 UX등에 관심을 가지는 사람들이 많아 졌다는 것은 그 하위 단계에 대한 분위기가 어느 정도 무르익었.. 2023. 2. 1.
[웹챗] 리액트 컴포넌트 구조 및 소켓 서버 초기 설정 프론트엔드 지난번 프론트 엔드의 경우 app.tsx 즉 애플리케이션 라우트까지 진행을 마쳤다. 이번 작업의 경우 기본적인 DOM 레이아웃과 컴포넌트 구조를 잡는 선까지 작업을 진행했으며, 당연히 간단한 테스트 코드를 먼저 작성하는 방식(TDD)으로 진행했다. (TDD를 따로 정리해서 포스팅해야 할 필요성이 있긴 한 거 같다. 정의 내리기 힘들다.) 스타일의 경우 채팅창 소켓 통신에 대해서 어느 정도 구현을 마친 후 기획에 따라서 구현하기로 정했기에 비교적 간단한 작업이었다. 작업에는 총 8 커밋이 소요되었다. 먼저 지난번의 임시로 구현해놓은 '/' 라우트 부분을 pages/main.tsx로 분리했고 main에 기획한 레이아웃인 header, main, footer 구조를 만든 후 해당 부분을 따로 com.. 2021. 11. 18.