이전에 React Query meets React Router라는 글을 읽고 데이터를 효율적으로 가져올 수 있는 방법이라고 생각되어 노션에 정리해 두었는데, 최근 사용자 경험을 개선하는 작업을 하면서 적용해 보았습니다. 이 과정에서 알게 된 내용과 고민했던 지점들을 공유하려고 합니다. Preloading? Prefetching? 필요한 리소스를 미리 다운로드한다는 의미에서 preload와 prefetch가 헷갈릴 수 있다고 생각되어 먼저 알아보겠습니다. 브라우저의 리소스 로드 우선순위 지정 유형 가운데 link 태그의 preload와 prefetch를 살펴보겠습니다. preload는 현재 페이지에서 즉시 필요로 하는 리소스를 우선적으로 가져오는 작업입니다. 이 리소스는 브라우저의 주요 렌더링 절차 이전..
프론트엔드 프로젝트에 테스트를 적용하면서 가장 어렵게 느껴진 부분이 어떤 순서로, 무엇을 테스트하면 좋을지에 관한 것이었습니다. 이에 대해 Kent C. Dodds와 Tkdodo님의 블로그를 참고하여 이에 대한 생각을 정리해 보았습니다. 🤔 어떤 순서로, 무엇을 테스트할까? 테스트를 작성하는 목적 가운데 하나는 사용자, 즉 애플리케이션 사용자와 개발자가 애플리케이션을 사용할 때 애플리케이션이 제대로 동작할 것이라는 자신감을 주는 것입니다. 따라서 코드 커버리지 자체보다는 유저가 사용하는 유즈 케이스 모두를 코드가 지원하는지를 생각해보면 좋습니다. 무엇을 테스트하면 좋을까? React에서는 어떠한 유즈 케이스가 있을까요? 크게 아래의 3가지 경우를 생각해 볼 수 있습니다. 라이프사이클 메서드: rerend..
Git&Github 실무 활용 완벽 가이드프로젝트를 다른 사람들과 함께 진행할 때는 Git과 GitHub가 필수적입니다. 이 도구들은 여러 기능을 동시에 추가하거나, 다양한 버전의 파일을 관리할 필요가 있을 때 특히 유용합니다. 개발을 처음 시작할 때는 당장 눈앞에 있는 언어나 프레임워크를 익히는 것만으로도 벅찬 경우가 많습니다. 그래서 Git에 관한 강의를 들어도 처음에는 필요성이 와닿지 않을 수 있습니다. 그러다 시간이 지나 막상 프로젝트를 시작하고 나면 GitHub를 사용하면서 발생하는 충돌로 당황스러울 때가 있습니다. 필요할 때마다 자주 쓰이는 명령어들을 검색하여 사용하는 것도 유효한 방법이지만, 이 강의를 수강한 후에는 단순히 명령어를 사용하는 것을 넘어 전체적인 흐름이 이해할 수 있을 것입니다..
