bkdragon's log

ACHT, 있어보이게 영어로 써보았다. 비동기 커스텀 훅 테스트 코드를 작성해보자. api 통신으로 데이터를 받아오기 때문에 MSW를 이용할 것 이다. 사용법 및 세팅법은 이 글에 잘 설명해두었다. 원래는 커스텀 훅을 사용하는 컴포넌트에서 테스트를 했었는데 커스텀 훅 테스트를 분리한 이유가 있다. delete 통신 성공이 204 no-content 였기 때문이다. 아래 코드의 두개의 핸들러를 비교해보자. export const getTodos = () => { return rest.get(`${baseUrl}${paths.todos}`, (_, res, ctx) => { return res(ctx.status(200), ctx.json(sampleTodos)); }); }; const deleteTodo..

클로저의 의미 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이다. 이 말을 이해하려면 실행 컨텍스트에 대해 알아야 한다. 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아둔 객체로 선언된 변수와 함수 this 등의 정보가 담겨있다. 렉시컬 환경은 함수 내의 변수 상태를 관리하는 역할을 한다. 렉시컬 환경은 두부분으로 나뉘여 있는데 로컬 변수를 저장하는 부분과 외부 렉시컬 환경에 대한 참조 부분이다. 우리가 함수 내부에서 전역 변수를 사용할 수 있었던 것도 그 함수의 렉시컬 환경이 외부 렉시컬 환경을 참조하고 있기 때문에 변수 정보를 알고 있어서 그런 것이였다. 다시 클로저의 개념으로 돌아가면 함수가 선언됐을 때의 렉시컬 환경, 즉 함수 내부의 지역 변수를 활용한 개념이라고 생각할 ..