전체 글18 bundler에 대하여 Create react app으로도 프로젝트를 생성할 수 있는데 왜 별도로 번들러를 설정해서 사용할까? 이게 궁금해져서 번들러에 대해 찾아봤습니다 시간의 흐름대로 적어보겠습니다. 1. 브라우저는 원래 ECMAScript 5 이전의 자바스크립트에서는 모듈시스템을 지원하지않았음 -> 여러 파일로 나뉘어진 모듈화된 자바스크립트 코드를 인식하지못했다 -> 하나의 파일로 제작해야한다 -> 번들러를 통해 묶어줘야한다 -> 묶어주는김에 조금 최적화할 수 없을까? (성능 향상 : 코드 최적화 , 번들크기 최소화, 파일크기 줄임 등 아래에서 설명하겠습니다) 이렇듯 번들러로 묶어주는것이 필수였고 -> 번들크기를 최소화하고 코드를 최적화 함으로써 cicd가 동작할때의 속도나 브라우저가 파일을 파싱할때 더욱 빠르게 만들었습니.. 2024. 1. 28. 어떤 것을 기준으로 테스트 해야하는가? 1. 인터페이스를 기준으로 테스트한다 내부 구현을 기준으로 하면 결과가 같더라도 로직의 변경마다 테스트코드를 새로 작성해야하고 특정 상황에 리액트의 경우 테스트코드에서 상태를 모두 직접 변경해야함 -> 상태를 모두 직접 변경(캡슐화 위배) 해서 내부 구현을 검증하니 상태나 변수명이 변경되면 테스트코드에서도 변경해줘야함(내부구현과의 종속성) 이러한 문제가 있기에 인터페이스를 기준으로 테스트를 진행하게 됩니다 예를 들어 클릭이벤트를 통한 돔 변경을 검증하는 방식으로 테스트를 진행하는 것입니다. 내부구현과의 종속성이 없어 구현이 변경되어도 테스트를 만족한다면 문제가 없어짐 테스트커버리지는 꼭 100%가 되어야 하는가? 테스트 커버리지를 100%로 만족하기위해서는 모든 분기의 테스트를 진행해야합니다 2가지 의문.. 2024. 1. 26. 테스트 코드의 의의 테스트코드가 필요하다고 생각이 된 이유는 쇼핑몰 사이트의 카테고리페이지를 제작하면서 입니다 여러 컴포넌트에서 같은 훅을 사용함으로써 사이드 이펙트 문제가 있었음 현재 상황은 수정된 코드를 사용해도 지장이 없지만 높은 결합도를 지니는 코드였다면 다른 모듈에 영향을 끼쳐 예상하지못한 동작을 발생시킬수있음 또한 추후 리팩토링을 하는 과정에서도 테스트 코드를 기반으로 안정적으로 진행이 가능 -> 문제가 발생했을 때 테스트코드의 피드백을 통해 빠르게 개선 가능 현재까지 컴포넌트를 나누는 단위를 랜더링만을 고려했다면 추가적으로 테스트를 고려하여 하나의 컴포넌트가 하나의 동작을 수행하는 설계를 하게된다. 테스트코드가 잘 작성되어있다면 다른사람이 리팩토링할때 페이지의 시나리오를 이해하기 쉽다 발생한 문제 : WOMEN.. 2024. 1. 26. 리액트 테스트코드 - add add 컴포넌트는 특이하게 제목, 내용, 시작날짜, 끝날짜의 입력을 받기 때문에 테스트해야하는 요소가 추가된다고 생각합니다 이에 아래항목을 테스트하였습니다. 테스트 항목 : 빈 제목으로 할 일을 추가하면 에러 메시지를 표시. 빈 내용으로 할 일을 추가하면 에러 메시지를 표시. 빈 시작 날짜로 할 일을 추가하면 에러 메시지를 표시. 빈 끝 날짜로 할 일을 추가하면 에러 메시지를 표시. 정상적인 데이터로 할 일을 추가할 수 있는지 확인. 부가적: 제목 내용 시작날짜 끝날짜가 화면에 보이는지 함수 호출에 올바른 인자가 전달되는지 우선 빈 제목으로 할 일을 추가하면 에러 메시지를 표시하는지 확인하였습니다 it("빈 제목으로 할 일을 추가하면 에러 메시지를 표시", async () => { const mockAd.. 2023. 10. 31. 이전 1 2 3 4 5 다음