탄탄한 기본기!

Client Side Routing (React Router 등)을 사용한 React 앱을 배포했을 때, index.html(root)에서 HTML5 pushState history API 를 활용해서 앱이 잘 동작하지만 만약 /www.example.com/user 등의 root가 아닌 경로에서 새로고침을 하거나, 직접 해당 경로를 요청하면 404 page not found 에러를 만나게 되었다.  분명 webpack의 dev server에서는 잘 동작했는데 도커 컨테이너로 테스트해보니 라우팅 과정에서 에러가 발생하는 것 같았다. 로컬에서 dev server로 라우팅을 할 때에는 라우팅 경로에서 새로고침을 하거나, /subject/ko 등으로 직접 접근해도 정상적으로 동작하는 반면에, productio..

React 내부 동작 원리를 알아야 하는 이유 React는 아주 많이 추상화되어 있는데, 일반적으로 React를 공부하는 개발자라면 React가 내부적으로 VirtualDOM을 사용하고 있다는 사실을 다들 알 것이다. (모른다면...? Virtual DOM and Internals) 그리고 React가 16.8 버전업이 되며 hook이라는 개념이 등장한 후 많은 (거의 대부분...) 개발자들이 이 hook에 대해서 공부하고, 사용하고 있다 (참고). 그 이유는 hook이 아주 편리하고, 사용하기 간편하며 심지어 가독성까지 좋기 때문인데 라이브러리가 깊게 추상화가 되어있어서 그런 것이라고 생각한다. 이렇게 사용하기 쉬움에도 불구하고, 내부 동작 원리를 정확하게 이해하지 못하고 사용할 경우 예상치 못한 에러..

1. 프로젝트 진행 동기 나는 평소에 공부할 때, 공부한 내용들을 진짜 내 것으로 만들었는지 확인하기 위해서 직접 코드로 짜보며 궁금했던 것들을 직접 확인하는 습관이 있다. 그래서 최근 리액트를 공부하면서 배운 내용들이 진짜 내 지식이 되었는지, 스스로 코드를 짤 수 있는지 확인하고 싶어서 간단한 프로젝트 하나를 만들어보며 더 많이 공부해보기로 결심했다. 그래서 Git 버전 관리, React 개발 환경 (webpack, babel 등) 세팅 및 컴포넌트 상태 관리, 스타일링 방법 등에 중점을 두고 아래와 같이 동작하는 아주 간단한 애플리케이션 하나를 제작해보았다. 이번 프로젝트에서는 관리해줄 상태가 매우 적었기 때문에 Redux와 같은 상태 관리 라이브러리는 사용하지 않았고, React의 Context ..

동일한 데이터를 여러 컴포넌트에서 공유하고 싶을 때, 상태를 끌어올려서 반영해줄 수 있다 Lifting State Up – React A JavaScript library for building user interfaces reactjs.org Source of truth 리액트 공식 문서에서는 변경 사항들을 관리할 때에 단 하나의 "source of truth"를 두어야 한다고 설명하고 있다. 보통 리액트 컴포넌트를 설계할 때, 먼저 해당 컴포넌트에 state를 저장하여 관리하게 한다. 하지만 애플리케이션이 커지고, 로직이 변화하거나 하는 등의 과정을 거치면서 다른 컴포넌트도 역시 같은 상태를 공유해 함께 반영되어야 할 상황이 충분히 생길 수 있다. 이때, 여러 가지 방식으로 상태들을 "동기화"할 수 ..