프론트엔드 성능 측정 방법이 궁금하시다면 아래의 링크를 참고해주세요. https://codingmoondoll.tistory.com/entry/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-Quick-Start-1 프론트엔드 성능 분석 Quick Start 개인적으로 생각하기에, 어떤 분석을 수행하느냐에 상관 없이, 가장 좋은 분석 방법은 직접 측정해보고, 데이터를 모아서 이를 바탕으로 논점과 결론을 이끌어내는 것입니다. 프론트엔드에서 codingmoondoll.tistory.com 이전 시간에는 성능을 분석해보고 어느 부분에서 성능상의 이슈가 있는지를 도출하는 일을 했습니다. 이제 그..

개인적으로 생각하기에, 어떤 분석을 수행하느냐에 상관 없이, 가장 좋은 분석 방법은 직접 측정해보고, 데이터를 모아서 이를 바탕으로 논점과 결론을 이끌어내는 것입니다. 프론트엔드에서 성능 최적화를 하는 방법도 마찬가지죠. 직접 지표와 기준을 결정하고 스스로 도구를 이용해서 현재 어플리케이션의 성능을 측정하는 것이 최선의 방법일 것입니다. 그러나 현실의 개발자들은 기능을 구현하고 여러 요구사항을 반영하느라 눈코 뜰새 없이 바쁜 경우가 많습니다. 그러니 최소의 시간을 들여 나의 웹 어플리케이션 성능을 측정해 보는 방법을 이번에 소개해드리겠습니다. 제목을 'Quick Start' 라고 지은 만큼, 깊은 내용을 다루기 보다는 '해야할 일' 자체에 집중해보겠습니다. 기준 정하기 - Web Vitals 성능 분석의..

이 글은 Kent C. Dodds 저자의 아래의 글을 바탕으로 작성되었습니다. useEffect vs useLayoutEffect useEffect vs useLayoutEffect The simple rules for when to use each. kentcdodds.com 리액트 훅들 중 useEffect 와 useLayoutEffect 의 기능은 매우 유사합니다. 하지만 분명하게 다른 use case 를 가지고 있죠. useEffect 사실 정말 대부분의 경우, 개발자들은 이 훅을 쓰게 될 것입니다. useEffect 는 컴포넌트의 렌더링이 모두 수행된 후 비동기적으로 동작하는 훅이며, 이를 통해 기존의 componentDidMount, componentDidUpdate, componentWill..

Type 과 Interface 는 매우 유사한 기능들을 가지고 있고, 실제로 대부분의 프로젝트에서 개발자는 둘 중 어느 것을 선택해서 사용해도 상관 없을 경우가 많습니다. interface 에서 사용할 수 있는 기능의 대부분은 type 에서도 사용 가능한 경우가 많기 때문입니다. 차이점 1 : 선언 후 타입 확장성 (출저 : https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces) 하지만 그렇다고 해서 아예 둘의 차이가 전무한 것은 아닙니다. 둘의 가장 큰 차이점은 type 은 선언 시점에서 그 내용을 고칠 수 없는데 반해, interface 는 선언 후에..

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

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