개발노트

리액트 반복문은 기본적으로 map을 사용 기본 map 의 원리는 배열안의 값들 하나씩을 v인자로 받아서 보여주는 형식 { ['apple','banana','cherry'] .map( ( v )=>{ return( {v} ) })} 2차원 배열로 표현 { [ ['apple','red'],['banana','yello'],['cherry','black'] ] .map( ( v )=>{ return( {v[0]} {v[1]} ) })} v인자가 ['fruit','color']니까 v[0], v[1] 이런식 객체로도 표현이가능 {[ { fruit:'apple', color:'red'}, { fruit:'banana', color:'yello'}, { fruit:'cherry', color:'black'} ] ...

require const React = require('react'); const ReactDom = require('react-dom'); const { Component } = require('react'); node (commonJS) 문법 import import React, { Component } from 'react'; import ReactDom from 'react-dom'; es6 문법 require은 CommonJS라고 node에서 쓰는 js인데, 이와 같은 역할을 하는 import는 리액트에서 쓰는 js문법이다 쓸수 있는 이유가 entry로 받아서 babel모듈적용해주는 과정에서 바벨이 이런es6 문법을 CommonJS로바꿔주어서 사용이 가능한 것. ( index.jsx 에서 som..

react-hot-loader , webpack-dev-server 설치 npm i -D react-hot-loader webpack-dev-server server가 있어야 frontend 코드변경점을 감지해서 자동으로 빌드 해줌(변경사항도바꿔줌) 노드몬같은것 webpack-dev-server는 ? //webpack.config.js "scripts": { "dev": "webpack-dev-server" }, 컴퓨터를 서버로 프론트엔드프로그램을 돌릴수 있게해줌 웹팩설정 1)실행부분 명령어 바꾸고 //webpack.config.js "scripts": { "dev": "webpack-dev-server --hot" }, 2) babel-loader 를 loader하는 option에 plugin에 추가 ..

웹팩설정파일(webpack.config.js)에서 presets 플러그인들의 모음 (안에는 수십개의 플러그인들) preset-env 가 옛날브라우저 지원해주는 플러그인인데 ie를 안쓰면 크롬만 설정하도록 preset-env에 세부설정을 해주는것 module: { rules:[{ test: /\.jsx?/, loader: 'babel-loader', options:{ presets:[ ['@babel/preset-env' , { 여기에 } ] , '@babel/preset-react'], } }] }, 타겟을 '한국에서 점유율이 5%이상인 브라우저만' 지원하겠다 이렇게 설정이 가능 module: { rules:[{ test: /\.jsx?/, loader: 'babel-loader', options:{ p..