일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- mongo
- nodejs교과서
- express-generator
- mongoose
- 제로초예제
- node
- 리액트기초
- 리액트스타디
- component
- NPM
- NoSQL
- 리액트
- npm명령어
- sequelize
- 리액트컴포넌트
- 클래스컴포넌트
- MongoDB
- sementicversion
- React Component
- 시퀄라이즈
- nodeJS
- React
- 시퀄라이즈공부
- Today
- Total
목록React (40)
개발노트
(클래스컴포넌트에서) 매서드 화살표 함수 대신 매서드로 사용하려면 class Number extends Component{ constructor(props){ super(props); this.state = { result: '', value: '', answer: getNumbers(), tries:[] }; this.onSubmitForm = this.onSubmitForm.bind(this); //여기 this.onChangeInput = this.onChangeInput.bind(this); } onSubmitForm (e){ e.preventDefault(); console.log(this.state.value); } //사용자입력값 onChangeInput (e){ console.log( th..
리액트 반복문은 기본적으로 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에 추가 ..