Frontend/리액트 React (12) 썸네일형 리스트형 [리액트] 커링 Currying 커링은 쉽게 말하자면 함수를 반환하는 함수 커링을 사용해야 하는 이유는 함수의 재활용 때문 function multiply(a, b) { return a * b; } function multiplyTwo(a) { return multiply(a, 2); // 함수 재활용 } 이를 응용해 n배 함수를 생성해주는 커링 함수를 만들 수 있다. function multiplyX(x) { return function(a) { return multiply(a, x); } } 화살표 함수로 표현하면, const multiplyX = x => a => multiply(a, x); 커링 함수의 사용 const multiplyThree = multiplyX(3); const multiplyFour = multplyX(4).. [리액트] 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 Hook함수를 사용. / 클래스형 컴포넌트에서는 콜백함수 of React.createRef라는 함수를 사용. // JavaScript 를 사용 할 때에는, // 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. // 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다. // 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 // 추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해.. 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에 있는 것들이 설치됨 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.. 이전 1 2 다음