개발 공부를 시작하면서 처음 공부했던 JavaScript 라이브러리가 React 였는데, 이번 프로젝트에서 Vue js를 사용하게 될 것 같아서 공부를 시작했다. 새로운 언어나 프레임워크, 라이브러리 등을 처음 공부할 때 탄생 배경과 대표적인 특징 등을 알고 있으면 기본적인 틀을 잡는데 도움이 된다고 생각해서 이번에도 정리해보려 한다. 1. Vue js의 탄생배경AngularJS는 많은 기능들을 가지고 있는 강력한 프레임워크지만, 이러한 많은 기능들 때문에 사용하기 어렵고 프로젝트 구성이 복잡해지는 단점도 있었습니다. 이러한 복잡성으로 개발과 프로젝트 유지를 위해 많은 시간과 노력을 투자해야 하는 문제를 해결하고자 하는 의견들이 있었고, Google의 개발자 Evan You가 2014년에 Vue js를..
오늘은 리액트에서 useMemo와 비슷한 역할을 하는 useCallback 훅에 대해서 더 자세히 공부하고 기록해보려 한다. 1. useCallbackuseCallback 또한 useMemo와 같이 momoization 기법으로 컴포넌트 성능 최적화를 위한 훅으로 사용된다.다른점은 useMemo는 인자로 콜백함수를 넣으면 함수가 리턴하는 값을 memoization 해주는 것이고, useCallback은 인자로 콜백함수를 넣으면 콜백 함수 자체를 momoization하는 것이다. 2. 예제 위 코드에서 input 값이 바뀌면 노란 박스의 사이즈가 바뀌고, useEffect의 "사이즈 변경" 호출되는 것을 확인할 수 있다. 하지만 변경을 눌러 배경 색상을 바꿀 때도 useEffect가 호출되는 문제가 발생..
오늘은 리액트에서 컴포넌트의 성능을 최적화 하는데 사용하는 훅인 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를 강의로 처음 배웠을 때 조금 정리해두었던 내용인데 개념들을 몇 가지 더 추가해서 기록해보려한다. 어떤 기술을 배울 때 그 기술이 왜 생겼는지 알면, 조금 더 깊이 있게 이해하는데 도움이 된다는 강사님의 말씀을 듣고 정리해두었던 것이다. 1. 리액트의 탄생배경요약해서 순서대로 나열해보면,1. 라이브러리/프레임워크 없이 HTML, CSS, Javascript로 DOM을 조작하고 이벤트를 발생시키는 등 웹 개발이 가능했음2. 웹이 발전하면서 웹 어플리케이션의 규모가 커지고, 관리해야 하는 Javscript 파일들이 많아지면서 코드가 복잡해짐4. 이후 이를 관리하기 위한 Backbone.js / Angular.js 등의 프레임워크가 만들어지고, Javascript의 특정 값이 바뀌면 특정 DOM의..
오늘은 Next.js를 공부하기 시작한지 몇 일이 지난 시점에서 기본적으로 Next.js가 무엇인지, 장/단점 등 공부를 하며 기록해보려한다. 우선 Next.js는 React 라이브러리의 프레임워크이다. React를 사용하면서 이 프레임워크를 사용하는 가장 큰 이유는 SEO(검색 엔진 최적화)를 위한 SSR(Server Side Rendering)이 가능하기 때문이다. 또 다른 몇 가지 이유들에는 다양한 기능들을 제공하는 것인데 타입스크립트 기본 지원, 코드 분할 (Code Splitting), 파일 기반 구조, 이미지 최적화 등이 있다. 성능 향상, SEO, 개발자 편의 등 여러 가지 장점을 가져오기 때문에 많은 기업들에서도 사용되고 있다. 아래 글은 이전에 작성한 게시글인데 Next.js 를 사용하는..
이번 프로젝트에서 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에서 서버 상태를 불러오고, 캐싱..
쇼핑몰 프로젝트를 진행하면서 스타일 공유 커뮤니티 페이지에서 이미지 업로드 / 미리보기를 처음으로 구현해보았다. 이미지 업로드 / 미리보기는 프로필, 게시글 등 다양한 곳에서 사용될 수 있기에 라이브러리도 있지만 직접 구현해보고 공부한 내용을 기록해보려 한다. 1. FileReader Web API로 FileReader는 File, Blob 객체가 저장하고 있는 바이너리 데이터를 '비동기적'으로 읽어주는 객체이다. 기본동작은 read - load Event - result 의 과정을 거친다. FileReader 객체를 생성한 후에 readAsDataURL()은 File 또는 Blob을 읽은 뒤 base64로 인코딩된 문자열을 result 라는 속성에 담는다. onload()는 성공적으로 파일을 읽었을 때..
