React (13) 썸네일형 리스트형 [React Redux] Redux-Saga 사용하기 (Starwars api 활용 테스트) Redux-Saga 를 세팅한 후 Axios 로 api 를 호출하여 얻은 결과 데이터를 store에 저장하고 뷰 화면에서 가져다 사용해보자. api 는 직접 만들어서 사용해도 되지만 필자는 SWAPI 라는 곳에 Starwars api 를 테스트에 활용했다. 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.. [React Redux] store에 reducer 여러개 등록하여 사용하기. React 에 Redux 를 세팅할때 store 는 무조건 하나여야 한다. 하지만 여러 효율적 그리고 유지보수의 용이성 측면을 고려할때 하나의 store 안에서도 여러개의 reducer 를 활용해 store 를 구조화하여 사용할 수도 있다. 예를들어 하나의 앱에 상품 구매 목록 관련 action, reducer와 장바구니용 action, reducer 를 따로 관리할 수 있다는 것이다. 위 모든 기능들을 하나의 action, reducer 로 관리한다면 각각의 action 과 reducer 코드가 너무나도 길어져 효율성이 떨아지고 유지보수측면에서도 많이 떨어질것이다. 현재 포스팅에서는 멀티 Reducer 를 활용하여 store 를 구조화시키는 아주 간단한 방법을 기록할것이다. 멀티 리듀서 적용 결과물 g.. [React Redux] Redux 적용중 발생한 A non-serializable value was detected 오류 열심히 React 에 Redux 를 구축을 완료했는데 테스트를 해보는 과정에서 A non-serializable value was detected... 오류가 발생하였다. 이건 도대체 무엇인가. 위 오류를 해석해보면 바로 "직렬화 할수 없는 값을 발견했다." 라는 뜻이다. 직렬화란 무엇인가? - 객체를 파일의 형태, 통신하기 쉬운 포맷(ex. JSON) 으로 변환하는 과정을 의미한다. - 객채를 특정 포맷으로 직렬화 하던가 아니면 특정 포맷으로 직렬화된 데이터를 역직렬화하여 특정 객체로 변환 한다고 할때 사용되는 단어이다. JavaScript 에서 직렬화 / 역직렬화 1.) 직렬화(Serialize) - JSON.stringfy( JSON 형식의 객체 ex. {key1 : value1, key2 : va.. [React] input 태그 onKeyDown 엔터키 - 한글 랜더링 두번 이슈 해결 개요 React 에서 검색 기능 작업중에 검색 버튼 클릭 외에 엔터키로도 검색을 작동시키고자 onKeyPress 를 사용했는데 deprecated 됐다고 하여 onKeyDown 기능을 사용하게 됐고 onKeyDown 이 사용된 input 태그에 한글을 입력후 onKeyDown 을 작동 시 랜더링이 2번 돈다는 문제를 발견하게 된것이다. 문제 확인 해당 작업은 React 에서 쿼리 스트링을 활용하여 검색 기능을 구현하는 작업이였다. 그리고 빈값으로 검색시 리스트 전체가 나오고 특정 키워드로 검색시 키워드와 관련된 내용만 검색되도록 기능을 만들었다. 문제 발견 당시의 코드는 아래와 같다. input 태그에 값을 입력하면 setKeyword 를 통해 keyword 에 값이 담긴다. 그 후 onKeyDown 을.. [React] CRA : 리액트 프로젝트 생성 // yarn $ yarn create react-app 프로젝트이름 // npx $ npx create-react-app 프로젝트이름 ex ) $ yarn create react-app NewProject $ npx create-react-app NewProject [React] React Router : 기본 세팅 1. 설치 진행 yarn add react-router-dom 2. BrowserRouter 최상단 컴포넌트 감싸주기 BrowserRouter 란? HTML5 의 History api 를 사용하여 페이지를 새로 고침하지 않고도 url 변경을 통해 특정 경로에 route 돼있는 리액트 컴포넌트를 불러와 사용할 수 있게 해준다. 내 블로그 내 History api 간단 설명 url : src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.creat.. [React] digital envelope routines 에러 해결법 - Node.js 버전 문제 Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:130:10) at module.exports (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/util/createHash.js:135:53) at NormalModule._initBuildHash (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js.. [React] Context API 사용하기 Context API 란? Context API 는 리액트 프로젝트에서 데이터를 전역적으로 사용할 수 있게 해주는 유용한 리액트 내장 기능이다. 전역적인 데이터는 예를들어 사용자 로그인 정보, 앱 환경 설정 및 테마 등이 있다. 리액트는 기본적으로 부모 컴포넌트에서 자식 컴포넌트로 순차적으로 데이터를 props 로 내려준다. 이렇게 보면 상당히 간단한 개념이지만 프로젝트의 크기가 커지고 기능이 다양해지면 여러개의 컴포넌트들이 부모 자식으로 구성이 돼있는 상태에서 멀리있는 자식 컴포넌트간에 데이터를 props 로 주고받는것은 매우 어려운 일이다. 이럴경우 해당 데이터는 불필요하게 많은 다른 자식 컴포넌트들을 거치게 돼 상당히 코드가 복잡하여 추후 유지 보수에 어려움을 줄 수 있다. 왼쪽 이미지를 통해 상기.. 이전 1 2 다음 목록 더보기
