개발 공부를 시작하면서 처음 공부했던 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가 호출되는 문제가 발생..
Immutability는 불변성이라는 의미이다.리덕스의 세 가지 원칙 중 State is read-only / Changes are made with pure functions가 있다. Redux의 데이터는 읽기 전용으로 마음대로 바꿀 수 없으며, state의 변화는 순수 함수를 통해 이루어져 한다는 것이다.여기에 불변성이 적용되는 것이다. 위 그림은 Reducer의 작동 방식을 나타낸 것인데, 이전 상태에 변화를 준 뒤에 다음 상태를 리턴하게 된다.입력으로 받은 이전 상태를 직접 변경하는 것이 아니라 새로운 생태 객체를 만들어서 리턴한다는 것이며, 또한 같은 입력에 대해서는 항상 같은 결과를 리턴한다는 것이다.입력으로 받은 이전 상태와 출력으로 받은 새로운 상태 모두 생성 이후는 변경할 수 없다는 점에..
개인 프로젝트가 끝나고 나서, 이번에는 상태 관리 라이브러리 중 압도적인 사용자를 보유한 Redux를 공부하고 있다. 포스팅을 통해 공부 내용들을 기록해보려 한다. 1. Redux의 탄생 배경SPA(Single Page Application)이 등장한 이후 다양한 요구사들을 적용하면서 웹사이트의 규모가 점점 커지게 되었다. 규모가 커진만큼 관리해야 state(상태)들이 많아지면서, 상태관리의 복잡도도 크게 증가하게 되었다.대표적으로 리액트의 관점에서 위 그림과 같이 수많은 컴포넌들과 그 안에 state들이 많아지면서 상태관리의 복잡도가 증가한 것이다. 이러한 결과로 가장 큰 문제는 언제 어디서 어떻게 상태가 업데이트 되는지 파악하기 힘들어 졌다는 것이었다. 개발자들이 이러한 과정을 파악하는데 어려움을..
오늘은 리액트에서 컴포넌트의 성능을 최적화 하는데 사용하는 훅인 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..
이전에 리액트 관련 글을 작성하면서 단방향 데이터 방식이라는 것을 보면서 데이터 바인딩에서도 공부하고, 두 방식을 비교해두면 좋을 것 같았다. 1. 데이터 바인딩 (Data Binding) 데이터 바인딩은 화면상에 보여지는 데이터(View) / 브라우저에 있는 메모리(Model)에 있는 데이터를 묶어서 서로 데이터를 동기하는 것을 의미한다. 요약하면, 두 데이터를 일치시키는 기법이다. 2. 단방향 데이터 바인딩 먼저 이미지를 확인해보면 더 쉽게 이해가 가능하다. 💡 컴포넌트 내에서는 Model(Javascript)에서 View(HTML)로 한 방향으로 데이터를 동기화 => 역으로 HTML에서 Javascript로의 직접적인 데이터 갱신은 불가능하고, 이벤트 함수를 호출해 Javascript에서 HTML로..
취업 준비를 하면서 2개의 프로젝트를 포트폴리오에 포함했는데 처음으로 혼자서 진행했던 프로젝트여서 그런지 코드를 다시 보니 고칠점들이 많이 보였다. 또한, 더 공부한 지금 시점에서 리팩토링을 진행하면서 얼마나 성장 했는지 확인할 수 있을 것 같아 시간을 내서 리팩토링을 진행해보려 한다. 1. 문제점 => 목표 1. 코드 가독성 - Emotion을 사용하면서 스타일 컴포넌트들을 너무 무분별하게 사용했고, 컴포넌트명도 연관성이 떨어지는 등 이해하기 어려워 가독성이 떨어짐 => 컴포넌트명을 이해할 수 있도록 쉽게 변경하고, 불필요한 컴포넌트 수를 줄인다! - 같은 결과값을 가지는 로직을 컴포넌트 별로 중복해서 사용한 함수들이 있어 코드의 길이가 길어짐 => 훅을 통해 같은 결과값을 가지는 로직들을 간결하게 사..
