메로그

Webpack 의존관계이 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러 입니다. 여러 개의 자바스크립트 파일을 번들링하고, 트랜스파일링 작업을 할 수 있습니다. Webpack vs Gulp Gulp 도 위의 동작과 비슷하게 할 수 있지만, Gulp 는 단순 task runner 일 뿐이다. (같은 일을 자동으로 처리하는..) Webpack 은 Package Builder 라고 불리는데 Package.json 의 스크립트를 기반으로 동작하기 때문이다. (Gulp 는 gulpfile..) 쉽게 생각해보면, 규모가 작고 간단한 일만 처리하는 프로젝트라면 Gulp 를 사용하는 것이 훨씬 가성비가 좋다. 대신에 규모가 큰 프로젝트라면, Gulp 의 기능 + 의존성 관리 기능(예: 노드 기반으로 ..

Redux state 종속성 탈피 (컴포넌트에 종속되지 않고 store 라는 곳에 state 형태로 저장함. state 가 변결되면 해당 state 를 바라보고 있는 컴포넌트는 모두 리렌더링 됩니다.) props depth 해결방법. 심지어 리액트는 단방향이기 때문에 Vue 처럼 부모로 올리기가 어렵습니다. action(dispatch 함수 이름) => dispatch(store 에 state 를 변경하는 함수) => store(state 변화) => view(리렌더링) 흐름으로 flux 패턴을 따릅니다. 설치 yarn add redux react-redux redux-devtools-extension redux-logger 용어 Action: 객체 형식으로 이루어져 있고, type 을 가지고 있음. A..

.gitignore GIt 에서 포함하지 않을 파일을 설정할 수 있는 File 입니다. 위치 위치는 항상 디렉토리의 최상위의 정의 됩니다. 사용방법 포함하지 않을 파일을 경로로 지정하여 .gitignore 를 생성해줍니다. .vscode/settings.json public/lib node_modules

React-Router SPA 화면처럼 화면에 깜빡임이 일어나지 않으면서, 다른 URL 을 가질 수 있도록 하는 것이 react-router 의 기능입니다. 라우터를 설치해 봅시다. npm install --save react-router-dom or yarn add react-router-dom Example 참고 로 감싸줘야 이제 라우터를 사용할 수 있습니다. 를 사용하여 다른 주소로 컴포넌트를 뿌릴 수 있도록 도와주는 컴포넌트입니다. 를 사용하여 특정 주소로 컴포넌트를 연동하여 사용할 수 있습니다. 에서 exact 를 사용하여 해당 path 에서 라우팅이 이뤄지기 때문이다. 사용하지 않으면, 주소를 이동할 때마다 컴포넌트가 계속 붙어서 나오게 됨... (주의) 메뉴바를 이용하여 각 페이지당 컴포넌트..

React Hooks React Hooks 는 React 16.8 버전에서 도입된 기능으로, 함수형 컴포넌트에서 상태 관리와 라이프사이클 메소드 등을 사용할 수 있게 해줍니다. 이전에는 클래스형 컴포넌트에서만 사용할 수 있었던 기능들을 함수형 컴포넌트에서도 사용할 수 있게 되면서 코드의 재사용성과 가독성이 증가하며, 컴포넌트의 성능도 최적화할 수 있습니다. React Hooks 에서는 다음과 같은 기능들을 사용할 수 있습니다. useState : 상태값을 관리하는 Hook useEffect : 라이프사이클 메소드를 함수형 컴포넌트에서 사용할 수 있게 해주는 Hook useRef : ref 를 사용할 수 있게 해주는 Hook useContext : Context API 를 사용할 수 있게 해주는 Hook ..

Promise 콜백 지옥을 우리는 기억할 것이다.. 그 콜백 지옥을 해결하는 방법 중 하나로 손꼽힌다. 또한 예외처리를 쉽게 할 수 있는 방법 중 하나이다. 비동기를 처리하는 패턴 중 하나라고 보면 된다. 상태 pending(대기): 비동기 처리가 수행중이거나 초기 상태 fulfilled(이행): 비동기 처리 완료 rejected(거부): 비동기 처리 실패 아래 간단한 예제를 봐보자. 다음 3가지 상태는 아래와 같다고 생각하면 된다. const msgPromise = new Promise((resolve, reject) => { // pending const msgFunc = (msg) => { if (msg === 'success') { // fulfilled resolve('Success!'); } ..