Ryu.log

LifeCycle API에 대해서 알아보자. 이 API는 Component가 브라우저에서 나타날 때, 사라질 때, 그리고 업데이트 될 때 호출되는 API 이다. 정말 중요한 역할을 하니깐! 세세히 파헤쳐야 한다! 컴포넌트가 브라우저에 나타나기 전 호출되는 APIconstructorcomponentWillMount ---> React v16.3 부터 사용되지 않음componentDidMount 컴포넌트가 업데이트 될 때 ( props,state 변화가 있을 때 ) 호출되는 APIcomponentWillReceiveProps ---> React v16.3 부터 사용되지 않음[NEW] static getDerivedStateFromProps()shouldComponentUpdateComponentWillUpd..

01. 새 Component 만들기새로운 Component를 한번 만들어보자. src 디렉토리에 새로운 Component인 MyName.js 이라는 파일을 생성 해보자. // MyName.js import React, { Component } from 'react'; class MyName extends Component { render() { return ( 안녕하소! {this.props.name} 입니다~ ); } } export default MyName; 자신이 받아온 props 값은 this. 키워드를 통하여 조회할 수 있다.현재 name 이라는 props를 보여주도록 설정해 두었다. 그럼 이제 이 Component를 사용해 보자. App.js를 열고 아래와같이 작성해보자. mport Reac..

01. Componet 파일 파헤치기 이전에 만든 hello-react 프로젝트를 열어보면 아래와 같은 파일이 확인된다. React는 웹 어플리케이션에서 사용되는 UI들을 재사용 가능한 Component로 분리하여 작성함으로써, 프로젝트의 유지보수성을 끌어올려준다. 여기서 Component에 해당하는 코드는 App.js 에서 확인 가능하다. // App.js import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( Welcome to React To get started, edit src/App.js and ..

01. create-react-app 설치 및 사용사전 필수 설치 요소 : Node.js, yarn create-react-app은 이름이 뜻하듯이, React App을 만들어주는 도구이다. 터미널에 아래 명령어를 입력하여 설치한다. yarn install -g create-react-app 설치가 완료되면 터미널에 다음 명령어를 입력하여 React App을 만든다. create-react-app hello-react 성공적으로 설치되면 위와같은 화면이 확인될 것이고 터미널에 아래 명령어를 입력하여 React Project를 시작한다. cd hello-react yarn start 성공적으로 React App이 만들어 졌다! 야호~! 이 글은 Velopert님의 블로그에서 React 포스팅을보며 실습하며..

01. React 란?React는 Facebook에서 만든 현재 가장 인기 높은 프론트엔드 라이브러리이다.웹사이트를 만들기 위해서는 사실 프론트엔드 라이브러리의 도움 없이도 웹사이트를 만들 수 있다.하지만! 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션이다.브라우저 상으로도 자연스럽고 동적인 많은 처리가 가능하다 그런데 어떤 UI를 동적으로 나타내기 위해서는 수많은 상태관리가 필요하다. 그 많은 DOM 요소들을 직접 관리하고 코드를 정리하는것은 매우 힘든 일이다.불가능한건 아니지만 제대로된 컨벤션을 세워서 진행하지 않는 이상, 갈수록 힘든 일이 될 것이다. 웹 개발을 할 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 UI를 구현하는 것에 집중 하도록 지원..

기본 파라미터 초기값 (Default Parameter value) ES5에서는 파라미터에 초기값을 설정할 수 없다. 따라서 적절한 인수가 전달되었는지 함수 내부에서 확인할 필요가 있다. // ES5 function plus(x, y) { x = x || 0; y = y || 0; return x + y; } console.log(plus()); // 0 console.log(plus(1, 2)); // 3 ES6에서는 파라미터에 초기값을 설정하여 함수 내에서 수행하던 파라미터 체크 및 초기화를 간편화할 수 있다. // ES6 function plus(x = 0, y = 0) { // x, y에 인수가 할당되지 않으면 초기값 0이 할당된다. return x + y; } console.log(plus())..

1. Arrow function의 선언Arrow function(화살표 함수)은 function 키워드 대신 화살표(=>)를 사용하여 간략한 방법으로 함수를 선언할 수 있다. 하지만 모든 경우 사용할 수 있는 것은 아니다. 문법은 아래와 같다. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러개인 경우, 소괄호를 생략할 수 없다. // 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 ..

ES6는 템플릿 리터럴(template Literals)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용한다. const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할 수 있다.`; console.log(template); 일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백(white-space)를 표현하기 위해서는 백슬래시(\)로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용하여야 한다. ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며..

ES5에서 변수를 선언하는 유일한 방법은 var 키워드를 사용하는 것이였다. var 키워드로 선언된 변수는 아래와 같은 특징을 갖는다. 1. Function-level scope전역변수 남발for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조가능2. var 키워드 생략 허용의도하지 않은 변수의 전역화3. 중복 선언 허용의도하지 않은 변수값 변경4. 변수 호이스팅변수를 선언하기 전에 참조가 가능하다. 대부분의 문제는 전역 변수로 인해 발생, 전역 변수는 간단한 애플리케이션의 경우, 사용이 편리하다 라는 장점이 있지만 불가피한 상황을 제외하고 사용을 억제해야 한다. 전역 변수는 유효범위(scope)가 넓어서 어디에서 어떻게 사용도리 것인지 파악하기 힘들며 비순수 함수(Impur..

HTML5 Canvas 란?JavaScript를 통하여 다양한 그림을 그릴 수 있는 공간(Container)을 제공해주며,독립된 해상도 SVG 그래픽을 활용하고 있다. 이는 그래프를 그리거나 게임 그래픽, 다른 기타 이미지를 실시간으로 그려서 사용할 수 있는 기능을 제공해 준다.Canvas는 높이와 넓이 속성이 있는 그리기가 가능한 지역이라고 HTML코드에서 정의 된다. 기존 HTML은 매우 정적이다. 허나 canvas는 이런 정적인 느낌을 동적으로 느낄 수 있도록 하는 HTML5의 막강한 기능 중 하나이다.canvas를 사용하기 위해서는 HTML5가 지원되는 브라우저 사용하여야 한다. MS IE9 Beta를 비롯한 최신 브라우저에서 모두 지원하고 있으며, IE8 이하 버전에서는 exCanvas, htm..

1.서버만들기 Node.js는 자체적으로 웹서버를 내장하고있다. 다른 서버들과 달리 간단한 코드 몇자로서버를 가동 시킬 수 있다. 1.서버작업 루트(c:/workspaces/nodejs/)폴더에 server.js 파일생성 const http = require('http'); // 서버를 만드는 모듈 불러옴 http.createServer((request, response) => { // 서버 만드는 메소드 console.log('서버 시작!'); }).listen(8080);

SettingNode.js 실습을 진행 하기전 먼저 선행 되어야할 목록 1. Node.js 설치 Node.JS 공식 홈페이지 접속 후 LTS버젼 Download 안정화가 된 LTS버젼을 설치한다. 설치가 완료된 후 명령프롬포트(cmd)를 열고 node -v 명령어를 통해 현재 설치된 Node.js의 버젼정보를 알 수 있다. 2. 경로 C드라이브에 workspaces 폴더를 생성 그뒤에 nodejs폴더를 생성하여 진행되는 프로젝트별로 구분이 쉽게 만든다.

1.Node.jsNode.js는 Google Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경으로 JavaScript를 브라우저 외의 다른 환경에서도 사용할 수 있게 해주는 플랫폼이다. http서버가 내장되어 있어 보통은 서버로 많이 사용하지만 데스크탑 용으로도 쓸 수 있다.웹팩, 바벨과 같은 도구들과 일렉트론 같이 JavaScript로 데스크탑 프로그램을 만드는 프레임워크가 모두Node.js를 기반으로 돌아간다. 흔이들 서버가 복잡하다 생각한다 하지만 Node.js에서는 20줄도 안되는 코드로 서버를 구동시킬 수 있다.게다가 JavaScript문법을 사용하기 때문에 다른 서버 언어를 배우지 않아도 되서 부담이 덜하다.이처럼 JavaScript를 통하여 클라이언트와 서..

CSS3의 개념 및 특징 CSS2와 CSS3의 가장 큰 차이점은 CSS3가 모듈 기반으로 개발되고 있다는 점이다. 이것은 각종 브라우저나 디바이스가 필요에 따라 원하는 CSS 모듈만을 탑재하거나 또는 필요한 모듈만을 빠르게 자주 업데이트 하는 것을 돕는다. CSS3는 text, fonts, color, backgrounds & borders, transforms, transitions, animaitons와 같은 종류의 모듈들을 추가로 개발하고 있다. CSS3는 기존의 CSS2가 갖지 못했던 화려하고 역동적인 면모를 추가하여 포토샵과 자바스크립트 및 서버측 기술에만 완전히 의존하던 영역들을 개척했다. 상자의 크기에 따른 말줄임 표시, 투명한 배경, 그림자 효과, 둥근 모서리, 그라디언트, 도형의 회전과 ..

HTML5의 개념 및 특징 차세대 웹 표준으로 확정(2014년 10월 28일)되었으며, 기존 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현·제공하도록 진화한 “웹 프로그래밍 언어“입니다. 예로, 오디오·비디오·그래픽 처리, 위치정보 제공 등 다양한 기능을 제공함으로써, 웹 자체에서 처리할 수 있는 기능이 대폭 향상 되었습니다.※ HTML(Hyper Text Markup Language)는 웹 문서를 만들 때 사용하는 프로그래밍 언어입니다. HTML5의 주요기능 3D, GRAPHICS & EFFECTS다양한 2차원 및 3차원 그래픽 기능을 지원 CONNECTIVITY웹 (클라이언트)에서 서버 측과 직접적인 양방향 통신 가능 CSS3글씨체, 색상, 배경 등 다양한 스타일..