융융이'Blog

yield 키워드는 제너레이터 함수 (function* 또는 레거시 generator 함수)를 중지하거나 재개하는데 사용됩니다. It is because arrow functions are not generator functions. ==> yield를 변수를 지정할려면 arrow 함수를 사용하면 안된다. 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/yield

export default { Green: "#32C12C", Teal: "#009888", Blue: "#526EFF", Purple: "#7F4FC9", LightGreen: "#87C735", Lime: "#CDE000", LightBlue: "#00A5F9", Cyan: "#00BCD9", DeepPurple: "#682CBF", Yellow: "#FFEF00", Orange: "#FFA9A00", LigthRed: "#FF9A00", Brown: "#7C5547", BlueGrey: "#5F7D8E", Amber: "#FFCD00", DeepOrange: "#FF5500", Red: "#D40C00", DeepBrown: "#50342C", Grey: "#9E9E9E" };

REACT 프로젝트를 진행 할 때 각 구성을잘 짜임새 있게 정리하는것이 중요하다. 핵심 구성 요소는 Components : View에서 필요한 요소들의 파일을 관리하는 폴더이다. Containers: Controller의 성격을 띄는 파일을 관리하는 폴더이다.(각각의 Components에 비동기적 처리) Lib : 특별한 기능(DB연동, Auth처리...)의 파일을 관리하는 폴더이다. Page : Containers와 Component을 불러와서 라우팅된 페이지를 구성하는 폴더이다. Store : redux와 관련된 파일을 관리하는 폴더이다. Styles : 스타일을 담당하는 파일로 자주 쓰이는 스타일들을 관리하는 폴더이다. Components App.js Components 하위에 App.js를 파일을..

lsof -i :포트번호 kill -9 PID번호

webpack에서 프로젝트를 번들링 할 때 파일 하나가 아니라 파일 여러개로 분리시켜서 결과물을 만들 수 있습니다. 하지만 프로젝트 단위가 커지면 불러오는 module의 크기도 커진다. 그렇기 때문에 불러오는 module도 필요에 따라 분할 하고 필요한 module만 불러온다면 속도가 향상될 것입니다. 이를 위해서 코드스플리팅을 통하여 캐쉬에 저장된 모듈은 제외하거나 필요한 모듈만 불러올 수 있도록 설정해주면 좋습니다. 라이브러리 분리하기 >> 비동기 렌더링하기 >> 빌드후 확인하기 현재 프로젝트를 git 푸시를 완료한 후 yarn eject 명령어를 치면 ![image-20200128152117885](/Users/huiyung/Library/Application Support/typora-user-i..

match,location,history 리액트에서 각 컴포넌트에서 props처럼 받는 데이터가 match, location,history에 들어 있다. import React from 'react'; import queryString from 'query-string'; const About = ({location, match, history}) => { const query = queryString.parse(location.search); console.log(location); console.log(match); console.log(history); ... location {pathname: "/about", search: "?key=value&key2=value2"..

react-router-dom 리액트 경로 설정을 도와주는 패키지입니다. NODE_PATH 설정 import의 경로 설정을 절대경로로 변경을 해준다. package.json "scripts": { "start": "NODE_PATH=src react-scripts start", "build": "NODE_PATH=src react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, BrowserRouter BrowserRouter는 HTML5의 history API를 사용하여 새로고침하지 않고도 페이지 주소를 교체할 수 있게 합니다. import React from 'react'; import { B..

##Redux-thunk와 axios 사용 Action(module)에서 사용하는 API 를 정의(리덕하고 필요한 정보를 리덕스에 저장하고 화면에 뿌려준다. redux-promise-middleware redux-promise-middleware는 Promise 기반의 비동기 작업을 좀더 편하게 해주는 미들웨어 입니다. 현재 createAction을 이용하여 커스텀하도록 이용하는 것만 되는거 같다... 저만 에러뜨나요? ㅠㅠ yarn add redux-promise-middleware store.js import promiseMiddleware from 'redux-promise-middleware'; const pm = promiseMiddleware({ promiseTypeSuffixe..