Ryu.log

프로젝트 시작전 설정및 필요한것들을 정리해본다. http://www.op.gg/ 이 사이트를 참고하여 요즘 주로하는 게임인 league-of-legends의 상태정보 및 게임 전적을 조회할수 있는 App를 만들어 보려한다. [시작 전 준비물]React, create-react-app v Riot games API KEY 생성 및 승인 v GitHub Repository 생성 및 연결 v github Repository https://github.com/RyuJun/lol-state01. op.gg사이트 구조 분석 첫번째로 http://www.op.gg/ 에서는 유저의 ID값을 input 박스에 입력받아 Riot Games API 로 요청을 보낸다. 요청 후 전 송 받은 데이터를 가공하여 위 사진과 같은 ..

지난 섹션에서 배열을 어떻게 다뤄야 하는지에 대해서 알아보았다. 데이터를 업데이트하는 과정에서 불변성을 지켜야한다는 것을 강조 하였는데, 왜 그래야 하는지 알아보자. 01. 데이터 필터링 구현하기우선, 불변성의 중요성을 알아보는 과정에서 이름으로 전화번호를 찾는 데이터 필터링 기능을 구현해보자.먼저 App 컴포넌트에서 input 하나를 렌더링하고 해당 input의 값을 state의 keyword 라는 값에 담겠다.이를 위해 이벤트 핸들러도 만들어주자! // file: src/App.js import React, { Component } from 'react'; import PhoneForm from './components/PhoneForm'; import PhoneInfoList from './comp..

이전 섹션에서 배열에 데이터를 추가하는 방법과 배열 내부의 내용들을 화면에 보여주는 기능을 구현해 보았었다.이번에는 배열 내부의 데이터를 제거하는 방법과 수정하는 방법을 알아볼 것이다. 01. 데이터 제거id를 파라미터로 받아오는 handleRemove라는 함수를 만들고, PhoneInfoList로 전달한다. // file: src/App.js import React, { Component } from 'react'; import PhoneForm from './components/PhoneForm'; import PhoneInfoList from './components/PhoneInfoList'; class App extends Component { id = 2 state = { information..

이번에는 리엑트 프로젝트에서 배열을 다루는 방법을 알아보자. 리엑트에서는 배열을 다룰 때 평상시에 하던것 처럼 하면 안된다.데이터 추가의 경우, 자바스크립트에서 배열을 다뤄본 사람이라면 그냥 배열에 데이터를 추가할 때,push를 사용하니까 this.state.array.push('some value'); 이런식으로 하면 되겠지? 라고 생각할 수 있다.리엑트에서는 state 내부의 값을 직접적으로 수정하면 절대로 안된다. 이를 불변성 유지라고 하는데,push, splice, unshift, pop 같은 내장함수는 배열 자체를 직접 수정하게 되므로 적합하지 않다.그 대신에, 기존의 배열에 기반하여 새 배열을 만들어내는 함수인 concat, clice, map, filter 같은 함수를 사용해야 한다. 리엑트..

지금까지 배웠던 것을 요약해보자면Component 만들기props와 stateLifeCycle API기존 에 배웠던 지식을 통하여 input 상태를 관리하는 방법과 배열을 다루는 방법을 알아보자. 01. 프로젝트 생성기존에 만들었던 프로젝트는 그대로 두고, 새로운 프로젝트를 만들어보자 create-react-app phone-book그리고, cd phone-book 을 통해 해당 디렉토리를 열고, yarn start 를 통해서 개발서버를 시작한다. 02. 첫번째 컴포넌트, PhoneForm 만들기먼저 만들 컴포넌트는 PhoneForm 이다. 이 컴포넌트에서는 사용자에게서 이름과 전화번호를 입력 받을 것이다.아직 input 컴포넌트의 입력을 state에 담는 방법에 대해서는 알아보지 않았으니 한번알아보자!..

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글씨체, 색상, 배경 등 다양한 스타일..