그럼에도 불구하고

리덕스 미들웨어를 사용하던 도중 다음과 같은 에러가 발생했습니다. 오류의 내용은 Redux에서 값을 주고, 받을 때 object 형태의 값을 string 형태로 변환(JSON.stringfy)하는데, 이 상황에서 변환이 불가능한 값을 전달했다는 에러입니다. 좀 더 자세히 들여다보면, action에 직렬화가 불가능한 값을 전달했다는 뜻입니다. 여기서 직렬화란 redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말합니다. (JSON.stringfy) 역직렬화는 직렬화의 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정이다. (JSON.parse) Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 에러가 발생한 것입..

오늘은 firebase를 이용하여 react와 연동된 애플리케이션을 만들어 보겠습니다. [ 브라우저와 데이터베이스는 직접 소통하면 안 됩니다. ] 브라우저에서 실행되는 자바스크립트 코드가 데이터베이스와 직접 통신하면 안 됩니다. 리액트 앱이 있고, 어떤 종류의 데이터베이스가 있다면 이런 데이터베이스를 데이터베이스 서버에서 실행하는 것은 문제가 되지는 않습니다. 하지만, 매우 불안정하거나 잘못 작성된 애플리케이션이 아니고서야 앱으로 직접 데이터를 가져오거나 저장하고, 연결을 맺는 행위는 외부 환경에서는 절대 해서는 안 되는 일 중 하나입니다. 기술적으로는 어려울 수 있겠지만, 클라이언트 내부에서 데이터베이스에 직접 연결을 하거나, 브라우저의 자바스크립트 코드를 통해 직접 연결을 한다면 이는 이 코드를 통해..

오늘은 SWAPI를 이용한 애플리케이션을 만들어보겠습니다. [ SWAPI ] SWAPI에는 각종 실습을 할 수 있는 더미데이터가 존재합니다. https://swapi.dev/ SWAPI - The Star Wars API What is this? The Star Wars API, or "swapi" (Swah-pee) is the world's first quantified and programmatically-accessible data source for all the data from the Star Wars canon universe! We've taken all the rich contextual stuff from the universe and formatted swapi.dev 📌 App.j..

redux를 사용하다 보면 스토어를 만들기 위해 createStore를 사용합니다. 하지만 직접 사용해 보면 아래와 같이 밑줄이 그어집니다. 왜 그럴까요? 취소선이 그어진 곳에 마우스를 갖다대면 @reduxjs/toolkit에서 제공하는 configureStore를 쓰라고 합니다. 결과적으로 deprecated로 나오지만, 기능에 문제없이 잘 동작합니다. 하지만 RTX(Redux Tookit)을 쓰는 것을 권장하고 있습니다. redux github에 따르면 https://github.com/reduxjs/redux GitHub - reduxjs/redux: Predictable state container for JavaScript apps Predictable state container for Jav..

오늘은 SPA(Single Page Application)에 대해 알아보겠습니다. [ SPA (Single Page Application) ] SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다. 전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있습니다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 HTML을 받아 오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여 주었습니다. 이렇게 사용자에게 보이는 화면은 서버 측에서 준비했습니다. 사전에 HTML 파일을 만들어서 제공하거나, 데이터에 따라 유동적인 HTML을 생성해 주는 템플릿 엔진을 사용하기도 했..

오늘은 input 개수에 따른 useState 활용법에 대해 알아보겠습니다. 아래에는 다음과 같은 코드가 있습니다. 이 코드는 input에 사용자명과 메시지를 입력할 수 있는 text란이 2개 있고 확인 버튼을 누르면 alert 메서드로 내가 입력한 사용자명과 메시지를 알려줍니다. 📌 App.js HTML 삽입 미리보기할 수 없는 소스 📌 EventPractice2.js HTML 삽입 미리보기할 수 없는 소스 EventPractice2에는 인풋이 두 개 밖에 없기 때문에 이런 코드도 나쁘지는 않습니다. 하지만 인풋의 개수가 많아질 것 같으면 e. target.name을 활용하는 것이 더 좋을 수 있습니다. 예를 들어 HTML 삽입 미리보기할 수 없는 소스 위와 같이 객체 안에서 key를 [ ]로 감싸면 ..

오늘은 propTypes를 통한 props 검증에 대해 알아보겠습니다. [ propTypes를 통한 props 검증 ] 컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propTypes를 사용합니다. 컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷합니다. 우선 propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야 합니다. HTML 삽입 미리보기할 수 없는 소스 PropTypes를 불러왔다면 코드 하단에 다음과 같이 입력해 보세요. HTML 삽입 미리보기할 수 없는 소스 이렇게 설정해 주면 name 값은 무조건 문자열(string) 형태로 전달해야 된다는 것을 의미합니다. App 컴포넌트에서 name 값을..

오늘은 Redux middleware에 대해 알아보겠습니다. 리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, '미들웨어(middleware)'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있습니다. 다음은 리덕스를 적용한 간단한 리액트 프로젝트를 준비후, 이 프로젝트를 통해 리덕스 미들웨어에 대해 알아보겠습니다. 1..

오늘은 react-router-dom v6에 대해 알아보겠습니다. react-router-dom v6의 경우 이전 버전과 달라진 점이 있습니다. 본 게시물은 v6을 기준으로 작성하였습니다. [ install ] yarn add react-router-dom [ 프로젝트에 라우터 적용 ] 프로젝트에 리액트 라우터를 적용할 때는 src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTML5 dml History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해 줍니다. 📌 index.js HTML..

오늘은 immer에 대해 알아보겠습니다. :) [ immer ] immer는 React에서 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트하기 위해 사용하는 라이브러리입니다. 📌 불변성이란? 쉽게 말해 상태를 변경하지 않는 것입니다. [ install ] yarn add immer [ immer를 사용하지 않고 불변성 유지 ] 아래 예시는 immer를 사용했을 때와 비교하기 위해 작성된 코드입니다. HTML 삽입 미리보기할 수 없는 소스 폼에서 아이디와 이름을 입력하면 하단 리스트에 추가되고, 리스트 항목을 클릭하면 삭제되는 컴포넌트입니다. 이렇게 전개 연산자와 배열 내장 함수를 사용하여 불변성을 유지하는 것은 어렵지 않지만, 상태가 복잡해진다면 조금 귀찮은 작업이 될 ..

props의 defaultProps에 대해 알아보겠습니다. 📌 App.js HTML 삽입 미리보기할 수 없는 소스 App 컴포넌트에서 MyComponent의 props 값을 Zenghyun으로 지정한 상태입니다. 📌 MyComponent.js HTML 삽입 미리보기할 수 없는 소스 MyComponent 컴포넌트에서는 name이라는 props를 렌더링 하도록 설정되어 있습니다. 🧷 결과 여기서 만약, app.js에서 props의 값을 지정하지 않으면 어떻게 될까요? HTML 삽입 미리보기할 수 없는 소스 위와 같이 이름란은 공백이 나오게 됩니다. 이를 방지하기 위해 부모 컴포넌트에서 props의 값을 지정하지 않아도 자식 컴포넌트의 props에서 default value를 설정할 수 있습니다. [ .def..

오늘은 Redux에 대해 알아보겠습니다. :) [ Redux ] Redux(리덕스)란 JavaScript 상태관리 라이브러리입니다. 여기서 말하는 상태(State)란 간단하게 말하자면 데이터를 말합니다. 덧붙이자면 상태는 컴포넌트 내부에서 사용하는 데이터라고 할 수 있습니다. 요즘은 웹 사이트를 구성할 때, 사용자에게 보이는 UI들을 하나의 파일로 몽땅 구현하지 않고, 요소들을 컴포넌트 단위로 구성하여 조합하는 식으로 만듭니다. [ Redux의 원칙 ] 1. Single source of truth - 동일한 데이터는 항상 같은 곳에서 가져옵니다. - 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미입니다. 2. State is read-only - 리액트에서는 setState 메소드를 활용해야만 상태..