Frontend/React

[React] Issue - options.allowedHosts[0] should be a non-empty string.

평소처럼 리액트 작업을 하던 중, 집에서만 잘만 돌아가던 react가 학교에서 실행을 하니 다음과 같은 오류를 내뿜으며 작동하기를 거부했다. 구글에 Invalid options object와 관련된 에러라면서 proxy가 연결할 서버를 찾지 못 한 것이 이유라고 생각했다. 그래서 http-proxy-middleware을 설치해서 setupProxy.js에 module.exports를 정의해주었는데 여전히 실행이 되질 않았다. 정확히는 실행이 되는데 또 다른 오류가 여전히 발생했다. 즉, 엉뚱한 부분에서 문제를 수정하려고 했기 때문에 발생했기 때문이라 생각해서 이번에는 options.allowedHosts[0] should be a non-empty string이라는 문구에 집중해보았다. allowedHo..

[React] 12. React-Redux

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. What is Redux? 2. React-Redux VS Context API 1. What is Redux? 리액트는 아무래도 프레임 워크가 아니다 보니 너무 자유롭다는 느낌이 들 때가 있다. 자유롭다는 것은 단순히 좋은 의미로 들릴 수도 있지만, 개발자의 숙련도에 전적으로 의존하게 된다. 초심자 입장에선 어떻게 사용해야 할지는 커녕, 뭐가 뭔지 이해조차 불가능한 거대한 장벽에 가로막히게 된다. 따라서 리액트 관련 포스팅은 항상 구조와 원리를 먼저 파악하고 설명하는 것이 중요하다고 생각한다. 지금까지 내가 작성한 포스팅을 읽어본 사람이라면 useState에 의해 관리되는 Local State의 단점을 이미 알고 있..

[React] 11. Context API

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. What is Context API? 2. Context 3. useContext 1. What is Context API? 비단 리액트 뿐만 아니라 기초 언어 공부를 할 때도 전역 변수에 대해서 배웠을 것이다. 함수의 매개변수로 데이터를 주고 받을 수도 있긴 하지만, 굉장히 자주 사용되는 데이터의 경우에는 보통 전역으로 설정해버린다. Context API란 그런 개념에서 출발한다. 각각의 사각형은 하나의 Component라고 생각하자. React에서 컴포넌트 간 데이터 교환은 props와 state를 통하여 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 이루어진다. (굳이 알고리즘 측면으로 바라보자면 Top-down으..

[React] 10. Immer Lib

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)의 이론 개념보다는 중첩 객체의 깊은 복사하는 방법에 대해 포스팅할 것이다. 목차 1. Spread Operator의 문제점 2. immer 1. Spread Operator의 문제점 프로그래밍 언어를 하나라도 배워본 사람이라면 얕은 복사와 깊은 복사에 대한 차이를 알 것이다. [React] 6. 불변성과 Side-Effect 이 부분을 건너뛰고 공부하려고 했는데, setEffect가 side-effect를 유발하기 위한 Hooks이라는 말을 듣고 의문이 들었다. 리액트는 side-effect를 방지하는 것이 원칙이라면서 이런 기능을 제공한다고? 그 jaeseo0..