분류 전체보기 (93) 썸네일형 리스트형 COR와 Webpack DevServer Proxy Webpack Dev Server 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구이다. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다. 매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용된다. 웹팩 데브 서버의 특징 웹팩 데브 서버는 일반 웹팩 빌드와 다른점이 있다. "scripts": { "dev": "webpack serve", "build": "webpack" } 웹팩 데브 서버를 실행하여 웹팩 빌드를 하는 경우에는 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지.. [ES6] 전개 연산자 ...Array / [...배열이름] / ...Object ...array1 하면 array1배열 안의 모든 요소들을 나열하는 형태 var array1 = ['one', 'two']; var array2 = ['three', 'four']; var combined = array1.concat(array2); // concat으로 배열array 합치기 console.log(combined) -> ['one', 'two', 'three', 'four'] (합쳐진 새로운 배열 생김. 기존배열은 그대로 유지됨) 이걸 전개 연산자로 바꾸면 var combined = [array1, array2]; console.log(combined); ->[ ['one', 'two'], ['three', 'four'] ] 어레이 안에 어레이가 들어감 요소를 나열해서 하나의 배열로 합치.. Array의 push, concat 차이 const names = ['Andrew', 'Steve']; names.push('Jen') 하면 ['Andrew', 'Steve', 'Jen'] 기존 배열에 추가 됨 반면 여기에 names.concat('julie') 하면 ["Andrew", "Steve", "Jen", "Julie"] 추가된 새로운 배열이 생기고 기존 배열은 ["Andrew", "Steve", "Jen"] 유지됨 connect API connect( [mapStateToProps], [mapDispatchToProps], [mergeProps], [options] ) connect는 react-redux의 내장API. React Component를 Redux Store에 연결해 줌. 이 함수의 리턴값은 특정 컴포넌트 클래스의 props를 store의 데이터에 연결시켜주는 또 다른 함수를 리턴한다. 리턴된 함수에 컴포넌트를 인수로 넣어 실행하면, 기존 컴포넌트를 수정하는게 아니라 새로운 컴포넌트를 return한다. 인수: mapStateToProps(state, [ownProps]) (Function)store의 state를 컴포넌트의 props에 매핑시켜줌. ownProps인수가 명시될 경우, 이를 통해 함수 내부에서 컴포넌트의 pr.. Redux Reducer state를 위한 단 하나의 store만 사용한다. state를 직접 변경하지 않는다. state를 변경하기 위해서는 action을 dispatch(보내다)하여 상태값을 변경한다. (action: 어떤 변화가 일어나야 할 지 알려주는 객체) 이 과정에서 받아온 action객체를 처리하는 함수를 Reducer라고 부른다. action의 정보를 받고 애플리케이션의 상태를 어떻게 바꿀지 정의한다. Reducer는 '순수 함수'로만 작성되어야 한다. - 외부 네트워크 혹은 데이터베이스에 접근하지 않아야 한다. - return값은 오직 parameter값에만 의존되어야 한다. - 인수는 변경되지 않아야 한다. - 같은 인수로 실행된 함수는 언제나 같은 결과를 반환해야 한다. - 순수하지 않은 API호출을 하지 않.. config.txt sudo apt-get install curl curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - npm install -g create-react-app sudo chown -R bitai /usr/lib/node_modules sudo chown -R bitai /usr/bin/create-react-app sudo npm install -g create-react-app create-react-app react_frontend cd react_frontend npm start npm install bootstrap react-bootstrap --save-dev npm install react-router-dom --save-dev np.. 웹팩 Webpack Webpack은 모듈 번들러이다. 웹팩에서는 자바스크립트 , 스타일시트, 이미지 등 모든 것을 모듈로 보아 여러 개의 모듈을 하나의 파일로 묶어서 보낸다. Webpack의 속성 1. Entry 2. Output 3. Loader 4. Plugin 1. Entry: 웹팩에서 웹자원을 변환하기 위해 필요한 최초 진입점이며 자바스크립트 파일 경로이다. 웹펙은 entry를 통해서 모듈을 로딩하고 하나의 파일로 묶는다. require, @import 등 모듈 간의 의존성을 해석하며 의존성 트리를 생성, 하나 이상의 진입 포인트를 설정할 수 있다. { entry: { app: './src/app.js' } } 2. Output: 웹팩에서 entry로 찾은 모듈을 하나로 묶은 결과물을 반환할 위치이다. 매개변수 설정.. Node.js 설치하기 윈도우는 node.js사이트 맥, 리눅스는 터미널 이용해 nvm(node version manager)으로 설치 - 여러 버전 설치, 사용할 버전 설정 가능, 업데이트도 쉬움 curl -0- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 혹은 wget -q0- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash nvm install --lts Node.js를 설치하면 node module 관리자인 npm이 설치됨. 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전관리에 사용됨. npm대신 yarn사용 가능 더 나은 .. rfce vs code plugin에서 ES7 React/Redux/GraphQL/React-Native snippets 설치하고 js파일에서 rfce누르면 Post기본형식나옴 JSX, Babel JSX : JavaScript XML babel을 이용해 각 버전에 맞게 자동으로 전환 babel src/app.js --out-file=public/scripts/app.js --presets=env,react babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch src/app.js를 관찰하고 변화가 있으면 자동으로 public/scripts/app.js를 바꿈(덮어씀) node_module을 지우면 babel preset이 작동을 안함 yarn install 하면 indepency에 있는 것들이 설치됨 이전 1 2 3 4 5 6 7 8 ··· 10 다음
