개발블로그

Action — object : { type: SOME_TYPE [, USER_DEFINE_DATA ]} 우리는 액션객체를 리듀서에 전달함으로써 상황에 따라 원하는대로 스토어의 상태를 변경시킬 수 있다. 액션의 type은 꼭 지정해주어야 하며, 타입값은 이 액션이 할 일로 하자! ex) 값을 증가시키는 액션 → type : INCREMENT Tip) type을 자주 사용하게 된다면 상수변수로 등록해놓자! const INCREMENT = “increment”; 이런식으로… Reducer — params : state, action 파라미터로 받은 액션객체의 타입(action.type)에 따라 상태(state)를 어떻게 업데이트 할 것인지를 정의하는 함수. state는 immutable하게 유지시켜주어야 한..

What’s immutable.js? 자바스크립트 상에서 데이터를 Immutable하게 관리할 수 있도록 도와주는 라이브러리. Immutable Data : ‘변하지 않는(수정할 수 없는)’ 데이터. 데이터를 Immutable하게 관리한다는 말은 수정하려면 무조건 새로운 객체를 만들어야 한다고 강제하는것과 같다. (필자의 개인적 생각이다…) Immutable data in React React는 State 또는 Props의 변경을 감지하면 해당 컴포넌트를 리랜더링한다. 만약, State(or Props)가 객체 형태라면, 그 내부의 값이 변경되어도 레퍼런스 값이 같기 때문에 컴포넌트가 리랜더링되지 않는다. 이렇게 써진 글을 꽤나 많이 봤는데, 몇번 보다보니 새로운 질문이 하나 떠올랐다. State를 변경..

CORS : Cross Origin Resource Sharing Script 내에서 다른 도메인에 리소스를 요청하는 Cross-Site HTTP Requests는 보안 상의 이유(Same Origin Policy)로 불가능했었는데, 이를 가능하게 하면서 만들어진 일종의 규약. Simple Request —GET, HEAD, POST 중의 한 가지 방식을 사용해야 한다. — POST 방식일 경우 Content-type이 아래 셋 중의 하나여야 한다. application/x-www-form-urlencoded multipart/form-data text/plain — 커스텀 헤더를 전송하지 말아야 한다. Preflight Request Simple Request에 해당하지 않으면 이 방식으로 요청. 서버..

module bundler 모든 것은 모듈이다! entry 의존성 그래프의 시작 webpack이 파일을 읽어들이기 시작하는 부분 output entry에서 설정한 파일을 시작으로 의존된 모든 모듈을 하나로묶는다 bundling 결과물 처리 위치 ( path ), 파일 이름 ( filename) 설정 가능 loader test에 파일지정 ( 정규표현식 ), use에 사용할 loader를 지정한다 eslint-loader / babel-loader /css-loader / style-loader (비)자바스크립트 파일을 웹팩이 이해하게 변경해줌 css-loader :적용 시 CSS코드가 JS로 변경됨 style-loader : css-loader를 통해 변경된 stylesheet를 DOM에 동적으로 추가 p..

What is babel? JavaScript Compiler ( mainly used to convert ES2015+ code ) parsing, transforming, and generation babel-cli command line을 통해 code를 transpile할 수 있는 도구 @babel/ployfill - polyfill 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각 또는 플러그인 - @babel/polyfill polyfill들 ( includes custom regenerator runtime & core-js )을 사용하기 편리하게 랩핑해놓은 모듈 새로이 추가된 전역 객체들 & 전역 객체에 추가된 메소드들을 사용할 수 있도록 지원해준다 ( ES6환경을 제공..