개발 공부를 시작하면서 처음 공부했던 JavaScript 라이브러리가 React 였는데, 이번 프로젝트에서 Vue js를 사용하게 될 것 같아서 공부를 시작했다. 새로운 언어나 프레임워크, 라이브러리 등을 처음 공부할 때 탄생 배경과 대표적인 특징 등을 알고 있으면 기본적인 틀을 잡는데 도움이 된다고 생각해서 이번에도 정리해보려 한다. 1. Vue js의 탄생배경AngularJS는 많은 기능들을 가지고 있는 강력한 프레임워크지만, 이러한 많은 기능들 때문에 사용하기 어렵고 프로젝트 구성이 복잡해지는 단점도 있었습니다. 이러한 복잡성으로 개발과 프로젝트 유지를 위해 많은 시간과 노력을 투자해야 하는 문제를 해결하고자 하는 의견들이 있었고, Google의 개발자 Evan You가 2014년에 Vue js를..
오늘은 리액트에서 컴포넌트의 성능을 최적화 하는데 사용하는 훅인 useMemo에 대해서 기록해보려한다. 1. useMemo useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 리액트 훅 중 하나이다. memo는 memoization으로 '메모리에 넣기'라는 의미이다. 동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면 처음 수행했던 결과값을 메모리에 저장해두고, 동일한 입력이 들어오면 메모리에서 꺼내 재사용하는 것이다. 함수형 컴포넌트에서는 '컴포넌트 렌더링 -> 컴포넌트 함수 호출 -> 모든 내부 변수 초기화' 의 순서를 거치는데, 이 말은 컴포넌트가 렌더링 될 때마 변수들이 모두 초기화 되기 때문에 함수가 반복적으로 호출이 된다는 의미이다. 예를들어 아래와 같은 코드에서 렌더링 될 때마..
리액트를 공부하면서 가상돔의 개념은 매우 자주 볼 수 있는데, 오늘은 이 가상돔에 대해 자세히 이해해보려고 한다. 1. 돔 (Document Object Model) DOM이란 HTML element들을 Tree 형태로 표현한 것인데 DOM Tree 안에는 각각 element에 상응하는 Node 들어가 있다. API를 통해 DOM 구조에 접근을 하고, 원하는 element를 조작할 수 있는 것이다. 이를 DOM 조작이라 한다. getElementById, querySelector와 같은 API를 통 DOM 구조 안의 element에 접근해 원하는대로 내용, 스타일 등을 수정하는 것이다. 2. 가상 돔 (Virtual DOM) 가상 돔은 쉽게 말해 실제 DOM과 같은 내용을 담고 있는 복사본으로, 실제 D..
이번 프로젝트에서 React Query의 useQuery를 사용한 것에 대해 기록하면서 더 공부해보려고 글을 작성한다. * 참고 자료 (2023.04.11 구글) https://tech.kakaopay.com/post/react-query-1/ 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유에 대해 설명합니다. 이 글은 연작 중 1편에 해당합니다. 1편: 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유, 2편: React Que tech.kakaopay.com 1. React-Query React-Query는 React Application에서 서버 상태를 불러오고, 캐싱..
