Develop/React (14) 썸네일형 리스트형 [Develop/React] middleware is not a function redux-promise-middleware 이슈 middleware is not a function redux-promise-middleware 이슈 리액트를 다루는 기술을 통하여 미들웨어를 사용하여 비동기 통신하는 부분에서 이슈가 있어 혹시나 개정판이 아닌 리액트를 다루는 기술 도서를 통해서 공부하는 개발자들을 위해 블로그 포스팅을 통하여 정리한다. redux-promise-middleware를 통한 redux 비동기 통신 작업 시 middleware is not a function 발생 import { createStore, applyMiddleware } from 'redux'; import modules from './modules'; //import ReduxThunk from 'redux-thunk'.. [Develop/React] createStrore applyMiddleware와 devToolsExtension 함께 사용 createStrore applyMiddleware와 devToolsExtension 함께 사용 리엑트에서 리덕스 개발자 도구 사용을 위해서 store 생성 시 devToolsExtension 설정을 해줘야 했다. 설정에 대한 내용을 모른다면 아래 포스팅을 참고 https://hoons-up.tistory.com/16 [Develop/React] 리덕스 개발자 도구 사용 리덕스 개발자 도구 사용 리덕스 개발 시 디버깅에 유용한 툴로 스토어의 상태나 어떤 액션들이 디스패치 되었는지 알 수 있어 유용한 툴이다. 설치방법 1. 크롬 웹 스토어에 접속한다. https://chrome.google.co.. hoons-up.tistory.com 소스 미들웨어와 함께 사용하면서 개발자 도구와 함께 사용하는 방법을 알.. [Develop/React] Immutable 정리 Immutable 정리 리엑트 공부 중 리덕스를 사용하면서 액션 타입, 액션 생성 함수, 리듀서를 수정하면서 새로운 객체 반환을 위해 ...을 이용한 전개연산자와 slice함수로 새로운 수정된 새로운 객체를 반환 하였다. 책에서 이러한 불편함을 편리하게 하기 위해서 페이스북 팀이 만든 라이브러리인 Immutable.js 정리가 되어있어 정리 포스팅을 작성한다. Immutable 설치 npm run immutable Immutable 필요성 이미 알고 있는 사실이겠지만, 아래와 같이 객체 불변성을 설명한다. let obj1 = {a: 1}; let obj2 = {a: 1}; obj1 === obj2 // false let obj3 = obj2; obj3 === obj2; // true 같은 객체를 가르킴 .. [Develop/React] 리덕스 개발자 도구 사용 리덕스 개발자 도구 사용 리덕스 개발 시 디버깅에 유용한 툴로 스토어의 상태나 어떤 액션들이 디스패치 되었는지 알 수 있어 유용한 툴이다. 설치방법 1. 크롬 웹 스토어에 접속한다. https://chrome.google.com/webstore/category/extensions 2. Redux DevTools 검색한다. 3. 설치 후 크롬 개발자 도구를 열어 Redux 탭을 확인한다. (바로 생성되지 않을 경우 프로젝트 재실행) 4. 설치 후엔 아래와 같은 문구가 표출되며 제대로 작동하지 않을것이다. 5. 마지막으로 프로젝트 스토어 생성 부분에 툴을 인식 할 수 있도록 아래 소스를 추가한다. const store = createStore(reducers, window.devToolsExtension &.. [Develop/React] React scss 커스터마이징 오류 React scss 커스터마이징 오류 리액트를 다루는 기술이라는 책을 통해 예제를 공부하던 중 아래와 같은 에러가 발생 'options has an unknown property 'includePaths'. These properties are valid' 책에는 scss import의 편리함을 위하여 webpack.config를 커스터마이징하여 scss파일을 불러올 때 styles 경로를 잡아주어 절대경로로 불러올 수 있도록 설정하는 방법을 설명해줬다. 참고 - https://velog.io/@velopert/react-component-styling 현재 보고있는 책은 리액트를 다루는 기술에 개정판이 아닌 초판이라 설명이 다른건진 모르겠지만 찾아본 결과 책에는 아래와 같이 options에 추가하도록 .. [Develop/React] React ie지원 설정하기 React ie지원 설정하기 create-app-react로 프로젝트로 기본 설정을 잡고 시작하였을 때 기본적으로 크게 아래와 같은 모듈 설정이 잡힌다. Webpack : minify, uglify 등을 포함한 모듈 번들링 도구 Babel : ES6, React 등의 문법을 ES5 코드로 변환시켜주는 트랜스파일러 Autoprefixer : 다양한 벤더(브라우저)들에게 적절한 CSS 가 적용될 수 있도록 prefix를 붙여준다. ESLint : 자바스크립트 lint, 코드 컨벤션과 오류 등을 잡아준다. Jest : 자바스크립트 테스트 도구 ie11, 9를 지원하기 위해서는 react-app-polyfill이 필요하다 babel이 크로스브라우징을 위해 es6 구문들을 es5 구문으로 이해할 수 있도록 해준다.. 이전 1 2 다음
