준준의 기록일지

[React] JSON 형태로 입력 데이터 출력 JSON형태로 입력된 값들을 출력하기 위해서는 key, value값을 setState하고 JSON.stringify로 변환해줘야한다. 아래 코드를 보면 3가지 age, name, address로 input이 가능하고, form submit으로 값을 담아 window.alert로 뿌려줄 수 있다. 여기서 주의해야될 점은 input에 name을 지정해주지 않으면 this.age와 같은 값이 key값을 제대로 찾지 못한다. 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 31 32 33 import React, {Component} from 'react' export..

라이프사이클 : 어떤 객체가 생성부터 파괴되는 시점 사이에서 자동으로 호출되는 메서드들의 집합 컴포넌트 생성과 DOM에 마운트 - 컴포넌트가 생성되고, DOM에 마운트(추가)될 때 다음과 같은 순서로 메서드가 호출된다. 이러한 과정은 딱 한번만 반복된다 constructor(props) : 객체가 생성될 때 componentWillMount() : 컴포넌트가 DOM에 마운트되기 직전 render() : 컴포넌트가 렌더링될 때 componentDidMount() : 컴포넌트가 DOM에 마운트된 직후. 컴포넌트 업데이트 - 컴포넌트의 프로퍼티가 변경되면 다음과 같은 메서드가 호출된다. componentWillReceiveProps(nextProps) : 컴포넌트의 프로퍼티가 변경될 때, 새로운 속성을 받았을..

자바스크립트가 주, html 부가 되는 형식의 코드로 시대가 변해가고 있다. toString(2) : 숫자에 toString(2)를 하면 이진수로 변환된다. 컴포넌트 함수 명시 : 대문자 ex) Card, Name 리액트에서 컴포넌트를 만들때 가장 중요한 부분 상태(state) : 화면에 출력하고 싶은 것. this.state = {} function일때와 화살표일때 this의 의미가 다른데, function일 경우 this 값이 undefined로 정의된다. 해결방안 -> function (){}.bind(this)와 같이 정의한다. 화살표일 경우 this 값이 변하지 않고 잘 가져오므로 걱정할 필요 없다.

node 전용 모드 위치 : npm root -g npm root : 현재 사용자의 node modules 위치 npm으로 프로젝트 관리 npm init : 프로젝트를 생성할때 여러 node, npm 정보를 다른 사용자에게 차후 손쉽게 전달할 수 있음. -> package.json이 생성됨. json 형태로. npm install --save npm install : packgage.json 내부의 값들을 읽어서 modules를 설치해준다. npm으로 스크립트 실행하기. - npm run "000" Yarn : 페이스북이 현재 지원하고 있는 패키지 매니저라고 한다. -> 기존 npm보다 훨씬 fast