Javascript (43) 썸네일형 리스트형 ES6 화살표 함수(arrow function)를 배우기 전 자바스크립트 this 이해하기 ES6 arrow function 배우기 전 자바스크립트 this 이해하기 ES6 arrow function을 배우기 전 이해를 돕기 위해 자바스크립트의 this 에 대해서 간단하게 정리한다.JAVA같은 언어에서 this는 클래스로부터 생성되는 인스턴스 객체를 의미한다.다른 의미를 가질 염려가 없어서 혼란이 생기지 않는다.자바스크립트에서는 this는 함수의 현재 실행 문맥(context)이다.자바 스크립트에서는 4가지의 함수 실행 타입이 존재한다.1. 함수 실행 alert('hello world');2. 메소드 실행 console.log('hello world');3. 생성자 실행 new Sample();4. 간접 실행 alert.call(undefined, 'hello world');각 타입은 서로 다.. ES6 문법 배우기 - const, let, Template Literals 왜 ES6를 배워야 하는가? - 개인적인 생각입니다.ES6는 새로운 문법이 생긴 만큼 변경점이 큰 자바스크립트의 버전이다.angular, typescript, react, nodejs등 자바스크립트를 사용하는 곳에서 ES6를 이용한 개발이 주를 이루고 코드도 많이 나오고 있다.게다가 자바스크립트의 비약적인 발전으로 어느곳에서든 자바스크립트를 이용해 프로그래밍을 할 가능성이 높다.따라서 자바스크립트를 사용하든 하지 않든 자바스크립트(ES6)를 공부하는 것은 많은 도움이 될 것이다.* 다만 현재 모든 브라우저 버전에서 ES6를 지원해주지 않고 있다.const, let기존 자바스크립트에서 변수 선언을 var로 했었다.ES6부터는 var뿐만 아니라 const와 let이 생겼다.var vs const, letco.. React 바인딩(이벤트/메서드 연결) 자바스크립트에서 바인딩 (Javascript Binding) 결론부터 이야기하면 key point는 자바스크립트에서 "this"에 대한 이해가 완벽히 되어있어야 한다.리액트 바인딩을 알아보기 전 자바스크립트에서 바인딩을 알아본다.자바스크립트에서 객체안의 메서드에서 this는 그 메서드가 포함된 object를 가리키게 된다. 12345678var obj = { prop: 'Hello', sayHello: function() { console.log( this.prop ); }}; obj.sayHello(); //"Hello" 즉, 위의 예제에서 sayHello 메서드안의 this는 obj객체가 되어 obj.prop인 Hello를 전달받아 콘솔 로그를 찍는다.obj의 sayHello()를 다르게 출력해보면 .. Node MVC패턴 웹 애플리케이션 만들기 Node MVC패턴 웹 애플리케이션 만들기 Node.js 기본기를 다시 잡으면서 MVC패턴을 적용해서 웹 애플리케이션을 만들어 본다.(도서 Node.js 6.x 블루프린트 Chapter1 예제) Props, State (리액트 컴포넌트 속성, 상태) Props, State (리액트 컴포넌트 속성, 상태) Properties(속성)의 Props이다. 리액트에서 변동하지 않는 데이터를 다룰 때 사용한다.123456789101112131415161718192021222324252627282930import React, { Component } from 'react';import PropTypes from 'prop-types';import logo from './logo.svg';import './App.css'; class App extends Component { render() { return ( Welcome to React 이름은 {this.props.name} 이고, 나이는 {this.props.age} 입니다. ); }} App.PropTyp.. JSX (React Component) JSX React에서는 Javascript 문법이 아닌 JSX문법을 사용해서 UI를 만든다.JSX의 특징1. 빠르다. (컴파일)2. Type-safe 다. (예측불가능한 결과를 내지 않는다. 쉽게 얘기하면 타입에 엄격)12345678910import React from 'react'; class App extends React.Component { render(){ return ( jeong-pro blog ); }}export default App; [App.js]import React from 'react'는 ES6문법으로 var React = require('react')와 같다.React 모듈은 Component를 만들 때 사용한다.class 도 ES6문법으로 이전에는 클래스를 느낌만 주고 pro.. 리액트(React) 환경 설정 (create-react-app) 리액트(React) 시작하기 - (create-react-app) 리액트를 시작하는 가장 쉬운 방법은 create-react-app을 이용하는 방법이다.환경설정할 때 babel, webpack 등을 설치해야 하지만 create-react-app으로 리액트 애플리케이션을 만들면이러한 작업들을 create-react-app이 대신 설정해주고 숨겨준다.리액트 프로젝트 만들기1. "npm install -g create-react-app"2. "create-react-app 프로젝트명(my-app)"3. "cd 프로젝트명(my-app)"4. "npm start"이렇게하면 샘플 애플리케이션이 localhost:3000 에서 실행된다.[create-react-app 샘플 화면] create-react-app을 통해.. 리액트(React) 리액트(React) React는 페이스북에서 개발한 UI 라이브러리로 재사용 가능한 UI를 생성할 수 있게 해준다.React는 라이브러리긴 하지만 Redux, react-router와 함께 프레임워크처럼 사용된다.React는 Virtual DOM이라는 개념을 사용하여 상태 변화에 따라 선택적으로 UI를 렌더링한다.DOM (Document Object Model)객체를 통해 구조화된 문서를 표현하는 방법. (XML,HTML로 작성)웹 브라우저(클라이언트)는 DOM을 통해서 javascript, css를 적용한다.DOM의 문제점DOM API의 최대 문제점은 동적 UI에 최적화되지 않음이다.대규모 애플리케이션 또는 수 많은 데이터가 로딩되고 표현해야하는 애플리케이션에서 DOM에 직접 접근하여 프론트엔드에 변화.. 이전 1 2 3 4 5 6 다음
