준준의 기록일지

SPA : Single Page Application, 하나의 웹 페이지로 구성된 애플리케이션 ex : 페이스북, 인스타그램, 핀터레스트 HTML/CSS/Javascript로 UI를 구현한다. 웹 페이지 하나로 대부분의 것들을 처리하지만 필요에 따라 웹 서버와 통신해서 처리한다. 기존 웹 기술과의 차이 기존 웹 기술 HTTP 요청과 응답의 반복으로 구성됐다. 따라서 다른 화면으로 변경하고자 한다면 반드시 웹 서버와 통신해야 했다. SPA HTML로 많은 부분을 처리할 수 있어 필요할 때만 웹 서버와 통신하면 된다. -> 더 편리, fast SPA 단점 여러 모듈을 읽어 들이므로 초기 실행에 시간이 오래 걸린다. 또한 화면을 구성하는 첫 렌더링 때도 시간이 오래 걸린다. 물론 한 번 읽어 들인 이후에는 쾌..

[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 값이 변하지 않고 잘 가져오므로 걱정할 필요 없다.