1. Introduction 📌 도대체 언제부터 본가에 있다고 착각한 거지?사이드 프로젝트에서 지도 상에서 내 행정구역 주소지를 확인하는 기능이 존재했다.Kakao developer REST API에 좌표만 던져주면 주소지를 반환해주기에, 내 좌표만 알아내면 끝날 일이었다.JS에서 가장 잘 알려진 게, 브라우저가 제공하는 Geolocation API인 듯하여 빠르게 적용함과 동시에 카카오 api로 쏴봤다.연휴 기간 본가로 내려와 있었기에 정상 동작한다면 대구시 수성구로 나와야 했다. 무려 내 위치와 200km 이상 차이가 나는 대참사가 발생했다..내가 대구에 있다고 착각하고 있었던 걸까? 조금 더 찾아보니 데이터 핫스팟에 연결하지 않고, wifi를 사용하면 정확도가 조금 더 올라간다고 해서 사용해봤지..

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

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

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