Frontend (48) 썸네일형 리스트형 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에 있는 것들이 설치됨 Sass loader사용 #Sass loader사용 새로 생긴 config디렉토리의 webpack.config.js에서 sassRegex있는 곳 찾아서 'sass loader' 지우고 아래와 같이작성 { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction && shouldUseSourceMap, }, ).concat({ loader: require.resolve('sass-loader'), options: { includePaths: [paths.appSrc + '/style_dir'], sourceMap: isEnvProduction && shouldUseSourceMap, dat.. Intellij react, sass, yarn 설치 sudo apt-get install curl (apt-get(Advanced Packaging Tool): 우분투(Ubuntu)를 포함안 데비안(Debian)계열의 리눅스에서 쓰이는 팩키지 관리 명령어 도구. sudo는 superuser권한으로 실행하기 위함입니다.) curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - (API를 테스트 하거나 웹사이트 정보를 얻기 위해서 다양한 방법을 사용합니다. 이 중에 가벼운 어플리케이션으로 간단하게 사용하는 curl이 많이 사용되죠. 이는 컬이라고 불립니다. #curl이란?서버와 통신할 수 있는 커맨드 명령어 툴입니다. 웹개발에 매우 많이 사용되고 있는 무료 오픈소스입니다. curl의 특징으로는 다음과.. 리액트 시작 VS Code, Nodejs, Yarn 설치 VS Code, Nodejs, Yarn 설치 emmet 플러그인 설치: html태그 안의 내용 쓰고 tab누르면 자동완성 index.html만들고 DOCTYPE html> Indecision App This is my HTML file! 입력 후 터미널창에 yarn global add live-server :라이브서버 추가 live-server -v :버전확인 live-server public :서버실행 React 설치 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 npm install -g create-react-app sudo chown -R bitai /usr/bin/create-react-app create-react-app react_frontend cd react_frontend npm start 이전 1 2 3 4 5 다음