React
React + Spring Boot 연동하여 환경 구축하기
React + Spring Boot 연동하여 환경 구축하기 프로젝트 진행에 앞서 연습해보자! Front-end : React Back-end : Spring Boot 스프링 부트를 통해 서버 API 역할을 구축하고, UI 로직을 React에서 담당 ( React는 컴포넌트화가 잘되어있어서 재사용성이 좋고, 수많은 오픈소스 라이브러리 활용 장점 존재) 개발 환경도구 (설치할 것) - VSCode : 확장 프로그램으로 Java Extension Pack, Spring Boot Extension Pack 설치 (메뉴-기본설정-설정에서 JDK 검색 후 'setting.json에서 편집'을 들어가 `java.home`으로 jdk 경로 넣어주기) "java.home": "C:\\Program Files\\Java\..
![[React] 5주차 - 외부 API 연결, ES6 Promise, Async/Await, Surge 연결](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99CB61475BF761AF0F)
[React] 5주차 - 외부 API 연결, ES6 Promise, Async/Await, Surge 연결
5주차(18.11.22)비동기 처리특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 다음 코드를 먼저 실행하는 자바스크립트의 특성왜 필요?대부분 클라이언트의 코드이므로, 서버에 요청을 하는 경우가 많음. 이런 요청이 많은데 요청마다 끝날 때까지 기다리면, 다른 작업을 못하는 문제 발생 간단한 동기/비동기 알아보기동기for(var i = 0; i { console.log(i); }, 10); } console.log('done!');0.01초 뒤에 setTimeout이 수행되므로, 먼저 d..
![[React] 4주차 - 리액트 이벤트(3가지 형태), 라이프 사이클(8개 API), 컴포넌트 간 통신 방법, ESLint, Bootstrap](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F990DC14C5BF761371A)
[React] 4주차 - 리액트 이벤트(3가지 형태), 라이프 사이클(8개 API), 컴포넌트 간 통신 방법, ESLint, Bootstrap
4주차(18.11.15)리액트 이벤트이벤트 : 유저가 웹 브라우저에서 DOM요소들과 상호 작용하는 것이벤트 이름은 camelCase로 작성한다. ( ex. onclick이 아니라 onClick)DOM 요소에만 이벤트 설정이 가능함 (div, button, input)사용자가 만든 컴포넌트는 props를 전달하게 됨 화살표 함수로 구현한 이벤트 { alert("리액트 이벤트 연습. 화살표 함수로" + e.target.value); }} /> 텍스트 박스를 통해 스테이트 값 디스플레이코드input 값이 여러 개인 key를 동적으로 할당코드입력 박스에서 keyEvent를 받기코드 라이프 사이클리액트 UI 컴포넌트는 3단계로 이루어짐생성 : 마운팅 이벤트constructor()componentWillMount(..
![[React] 3주차 - 리액트 클래스, 컴포넌트 설계, ES6 오브젝트, 배열 데이터 사용, 리액트 State, 리액트 라우팅](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99B3963F5BDBF5C12D)
[React] 3주차 - 리액트 클래스, 컴포넌트 설계, ES6 오브젝트, 배열 데이터 사용, 리액트 State, 리액트 라우팅
3주차(18.11.01)리액트 클래스클래스로 만들면 state, lifecycle, ref 참조 등 추가적인 사용이 가능함class 개념은 ES6에서 새로 도입된 요소로, 모든 컴포넌트가 React.Component를 상속클래스로 작성 예시//MovieCardCls.js import React, { Component } from 'react'; class MovieCardCls extends Component { render(){ return ( {this.props.movieTitle} 주연배우 영화설명 ); } } export default MovieCardCls;이처럼 컴포넌트를 상속한 클래스로 생성 후, export로 내보내서 App.js에서 활용할 수 있음//App.js impor..
![[React] 2주차 - 개발 환경세팅 및 분석(CRA), JSX 연습, 간단 무비카드 실습, ES6(array, push, for, 삼항 연산자)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F991ECF365BDBEF0712)
[React] 2주차 - 개발 환경세팅 및 분석(CRA), JSX 연습, 간단 무비카드 실습, ES6(array, push, for, 삼항 연산자)
CRA 개발환경리액트를 로컬에서 개발서버처럼 활용해서 세팅하는 방법CRA : create-react-app이를 사용하면 webpack 같은 환경구설 툴이 필요없음!개발에만 집중할 수 있도록 환경 구성 방법을 숨기고 미리 구성해놓음npx create-react-app '프로젝트 이름' cd '프로젝트 이름'서버 중지 : Ctrl+Cnpx : npm 패키지 사용에 도움이 되는 도구JSX React 연습Javascirpt Syntax extensionJSX는 리액트에서 element를 만들어내는 것중괄호를 이용해 자바스크립트 표현을 JSX에 포함시킬 수 있다JSX 태그는 반드시 닫아줘야 함JSX 자식을 포함할 수 있음//compo_test.js export const user = { firstName: '..
![[React] 1주차 - 리액트 인트로, 간단 리액트 소스 작성 실습](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F9986A9425BC7F3F212)
[React] 1주차 - 리액트 인트로, 간단 리액트 소스 작성 실습
리액트란?자바스크립트 라이브러리이며, 페이스북에서 만들고 사용중인 오프소스 프로젝트앵귤러와 달리, 프레임워크는 아님프론트엔드 UI를 만드는데 사용 (MVC 중 View)컴포넌트 형식으로 구현하여 재사용이 가능함 virtual DOM실제 DOM에 적용되기 전에, 가상의 DOM에 먼저 적용시키고 최종 단계에 달라진 부분만 실제 DOM으로 전달해준다.기존의 DOM은 변화가 생기면, 렌더 트리를 재생성하고 (모든 요소의 스타일이 다시 계산) 레이아웃을 만들고 페인팅을 하는 과정을 다시 처음부터 반복하게 됨특히 SPA에서는 DOM 조작이 많이 발생하므로, 브라우저의 연산량이 늘어나고 전체적인 프로세스를 비효율적으로 만들 수도 있기에 virtual DOM이 탄생한 것 디지털 시계를 통해 확인해보기기존의 DOM을 활..