이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=J-g9ZJha8FE useRef 를 사용하여 디펜던시 문제 해결하기 위와 같은 코드는 리액트 코드를 작성하면서 심심치 않게 볼 수 있습니다. useEffect 안에서 사용하는 함수가 외부 함수라서 이를 useEffect 에 넣어버리고 의존성에 등록해두지 않으면 linter 가 이를 지적할 것입니다. 해당 함수가 업데이트 될 필요가 있다고 합시다. 이때 useEffect 안에서 상태를 바꾸는 로직이 있다면 리렌더링이 수행될 것이고, 해당 외부함수가 useCallback 처리 되어 있지 않으면 매번 아예 새로 생성될 것이기 때문에 무한 렌더링의 수렁에 빠지게 됩니다. 하지만 그렇다고 useCall..

자바스크립트로만 개발을 해왔다면 갑작스레 타입스크립트를 사용하는 것에 주저함이 있을 것입니다. 특히 리액트와 같은 프레임워크와 각종 라이브러리들을 함께 사용해서 개발을 해왔다면 그 심적 부담은 더하겠죠. 이제 나름 자바스크립트와 프레임워크를 활용한 개발에 자신감이 생겨서 다음 단계의 스킬 셋을 쓰고 싶지만, 정확히 어디서부터 공부를 시작해야 할지가 막막한 사람들도 있을 것입니다. 그래서, 각자의 필요에 따라 준비해보았습니다. 딱히 제가 작성한 글을 소개해드리는게 아니라 유용한 레퍼런스들을 각자의 필요에 맞게 추천해드리고자 합니다. 1. 일단 해봐 : 타입스크립트를 이전에 조금이라도 맛본 적이 있기 때문에, 초 단기 속성으로 리액트 + 타입스크립트를 시도해보고 싶다. 진짜 말 그대로 '일단' 처음부터 끝까..

이 글은 JEST 공식 문서의 내용을 바탕으로 작성되었습니다. (참조: https://jestjs.io/docs/tutorial-react) 또한 아래의 영상의 내용을 참고하였습니다. (참조: https://www.youtube.com/watch?v=g4rMWtPNOr8) 스냅샷 테스트? 단순히 사용자가 무언가를 클릭하면 어떤 요소가 어떻게 보여야 한다는 식의 E2E 테스트만 하는 것 보다는 이전 렌더링 결과물과 신규 렌더링 결과물(HTML)이 조금이라도 차이가 있는지를 파악하는 것이 더 명확하고 안전한 테스트라고 볼 수 있습니다. 그리고 그것을 가능하게 해주는 것이 스냅샷 테스트입니다. 스냅샷 테스트를 하면 기존에 저장되어 있는 이전 렌더링 결과와 테스트 시점에 새로 생성되는 렌더링 결과를 비교해서 조..

리덕스에서 상태의 변경은 모두 동기적으로 일어납니다. 따라서 미들웨어를 통해 스토어 상태 변경 프로세스 중간에 비동기 로직을 끼워 넣어야만 API 요청에 따른 상태변경을 수행할 수 있습니다. 그러한 미들웨어가 redux-thunk 나 redux-saga 같은 리덕스 생태계 패키지입니다. 리덕스 사가가 제공하는 createSagaMiddleware() 함수를 실행시켜 반환된 객체를 미들웨어로 등록시키고, run 메서드를 실행하면 리덕스에 사가를 적용할 수 있습니다. 리덕스 사가로 할 수 있는 일 리덕스 사가는 단순히 비동기 처리를 위해 만들어진 패키지가 아닙니다. 그건 그냥 미들웨어로도 충분히 가능합니다. 리덕스 사가는 사이드 이펙트를 더 쉽게 관리하고 더 효과적으로 실행하며 더 쉽게 테스트하고 더 나은 ..

들어가면서 이 시리즈는 최신 트렌드를 반영하면서, 최대한 현업에 가깝되 간단한 웹 프론트엔드 프로젝트 구성을 목표로 합니다. 이 시리즈는 저 나름의 노하우를 공유하고 피드백을 받고 싶어서 만들었습니다. 어떤 기관이나 업체의 표준을 따르는 것이 아닌 그저 제가 프로젝트를 만들어나가는 과정을 정리했습니다. 하지만 그렇다고 해서 시리즈의 모든 내용들이 처음부터 끝까지 제 머리에서 나온 것은 아닙니다. 특정 부분마다 어느 저자의 어느 글을 참고했는지 그 출처 링크를 표시하도록 하겠습니다. 만들고자 하는 어플리케이션 만들고자 하는 어플리케이션은 간단한 시간관리 앱인 'Micro' 어플리케이션입니다. 제가 친하게 지내는 디자이너분께 사용에 동의를 구했습니다. 이 시리즈에서 이 어플리케이션 전체를 만드는 과정을 다루..