노드와 리액트를 연동시키기 위한 세팅을 알아보겠다. 프로젝트 생성 터미널에서 하단의 내용들을 순서대로 입력해준다. Node.js 서버 생성 $ mkdir node_react $ cd node_react $ npm init node_react 파일을 만들고 들어간다. $ npm install mongoose --save $ npm install express --save $ npm install nodemon concurrently --save-dev 몽고 DB 연동을 위한 mongoose Node.js의 웹앱 프레임워크인 Express 여러 개의 명령어를 동시에 실행하는 nodemon concurrently. 변경될 때마다 자동으로 재실행되게 한다. React App 생성 $ npm create reac..

Props 'props'는 properties를 의미한다. 부모 컨트롤러에서 자식 컨트롤러로 값을 전달할 때 사용한다. 매개변수에 각각의 변수들을 미리 입력해줌으로써 변수명을 그대로 가져올 수 있다. props 비구조 할당 매개변수에 각각의 변수명을 넘겨주지만 이를 비구조 할당으로 넘기려면 const {title,name,age,addr,tel,color,done} = props 로 입력해주면 된다. 또한 제일 기본적인 것은 const Test6Sub = (props) => { 의 경우, props.name 또는 props.age처럼 앞에 props로 붙여줘야 한다. propType - 데이터 유형 정의 Test6Sub.propTypes = { name: PropTypes.string.isRequired..

리액트를 사용할 툴인 비주얼 스튜디오 코드(Visual Studio Code)를 설치하고 ES6(ecmascript) 문법에 대해서 살펴보겠다! React 리액트란 UI를 구현하는 자바스크립트 라이브러리다. 페이스북에서 제공해주는 프론트엔드 라이브러리로 사용하는 큰 기업들이 많다. 자바스크립트 친화적인 es6기반이며 성능 최적화와 유지보수가 쉽다. 공식 라이브러리가 없고 자유도가 높다. Visual Studio Code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debug..