준준의 기록일지

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) : 컴포넌트의 프로퍼티가 변경될 때, 새로운 속성을 받았을..

render : 어떤 Html을 그릴 것인가를 결정하는 함수. 리액트에서는 props나 state의 값이 바뀌면 해당되는 컴포넌트의 render함수가 호출되도록 약속되어 있다. - 즉 props나 state값이 바뀔때마다 화면이 다시 그려진다. debugger; : 만 해도 여기에 breakpoint가 걸림. {this.state.subject.title} 이부분에서 원래는 alert 팝업 페이지로 넘어가야되는데, e.preventDefault() 함수로 인해서 a태그 onClick에 대한 동작을 막는다.