Front-End 썸네일형 리스트형 [ReactJS] 개발환경 설정, 프로젝트 진행 1. 작업환경 설정하기1) GIT : 버전관리 시스템2) NPM / NODE- Node.js는 자바스크립트를 서버환경에서 실행하는 자바스크립트 런타임이다. - NPM은 Node.js로 만들어진 모듈들을 설치 및 버전관리 할 수 있는 프로그램이다.- Node.js를 설치하면 NPM도 함께 설치된다.3) MONGODB4) EDITOR 2. React Project 만들기1) Global Dependency 설치1$npm install -g webpack webpack-dev-servercs 2) webpack : 브라우저 위에서 import를 할 수 있게 해주고 자바스크립트 파일을 하나로 합쳐준다. 3) webpack-dev-server : 별도의 서버를 구축하지 않고도 static 파일을 다루는 웹서버를 .. 더보기 [ReactJS] 컴포넌트 매핑(Component Mapping) 컴포넌트 매핑 (Component Mapping): 비슷한 코드를 반복해서 렌더링할 수 있다. Component Mapping- 데이터 배열을 리엑트에서 렌더링할 때는 자바스크립트 내장함수인 map()을 사용한다.- map() 메소드는 파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 처리해서 그 결과로 새로운 배열을 생성한다. map() 사용문법arr.map(callback, [thisArg])- callback : 새로운 배열의 요소를 생성하는 함수로서 다음 세가지 인수를 가진다.- currentValue : 현재 처리되고 있는 요소- index : 현재 처리되고 있는 요소의 index 값- array : 메소드가 불려진 배열 - thisArg : (선택항목) callback 함수 내부에서 사용.. 더보기 [ReactJS] state State: react.js 컴포넌트의 또 다른 핵심적인 개념, state state- 컴포넌트에서 유동적인 데이터를 보여줄 때 사용된다.- 초기값 설정이 필수인데, 초기값 설정을 할 때는 생성자(constructor)에서 this.state = { } 으로 설정한다.- 값을 수정할 때는 this.setState({...}) 을 사용하여 컴포넌트 내부에서 값을 변경할 수 있다.- 렌더링 되기 전에는 setState 메소드를 사용하지 못한다.- 렌더링 된 다음에는 this.state = 절대 사용하지 말 것. 예제(줄 1~7) Conter라는 이름의 새로운 컴포넌트를 작성, 간단하게 text를 렌더링하는 컴포넌트를 만들었다.(줄 12) App 컴포넌트에서 Counter 컴포넌트를 렌더링한다. this.st.. 더보기 [ReactJS] props Props:Component 내부의 Immutable Data(변화하지 않는 데이터)를 처리할 때 사용되는 Props props- 컴포넌트 내부의 데이터를 처리할 때 사용된다.- JSX 내부의 { this.props.propsName } 이 있을 때, 컴포넌트를 렌더링할 때 propsName = "value" 이런 식으로 전달하면 된다.- this.props.childeren은 기본적으로 갖고있는 props로써, 여기에 있는 값이 들어간다 props 설정(줄 5, 줄 15) Codelab의 props 값 설정해준다. name을 "jessie"로 설정했다. Children Props(줄 6, 줄 15) Children props는 와 사이에 있는 값 "Hi Children!!!"이 전달된다. 하위 Comp.. 더보기 [ReactJS] Codepen 설정, ES6 클래스, JSX의 특징 JavaScript Class와 JSXJavaScript Class와 JSX: ES6에 새롭게 도입된 문법인 JavaScript Class == Component Codepen 설정- https://codepen.io/pen/ 접속- setting 클릭 1. javascript : babel로 설정한다. 2. Add External Scripts/Pens : https://unpkg.com/react@15/dist/react.js , https://unpkg.com/react-dom@15/dist/react-dom.js 를 추가시킨다. babel로 설정하는 이유는 2015년에 업데이트된 JavaScript 문법인 ES6를 사용하기 위해서다. ES6로 작성된 코드를 이전 문법인 ES5로 변환시켜주는 것이 .. 더보기 [ReactJS] React.JS를 배워보자 React.JS: Facebook에서 UI를 구현하기 위하여 만든 JavaScript Library 우리가 사용할 Skill- ES6 : 2015년에 업데이트된 공식 JavaScript 문법- Redux : 애플리케이션의 상태를 관리하는 라이브러리- Webpack : 각종 모듈 및 플러그인을 통해 프로젝트를 build하는 작업을 도와주는 모듈번들러- Express : Node.JS 환경에서 웹서버 여는 것을 도와주는 프레임워크- MongoDB : SQL DataBase Management System- mongoos : NodeJS 웹서버에서 MongoDB를 간편하게 사용할 수 있게 해주는 프레임워크 앞으로 만들어 볼 프로젝트1. 전화번호부- 서버와 통신하지 않고 로컬스토리지를 사용하는 전화번호부 2. .. 더보기 이전 1 2 3 다음
