Ryu.log

01. async / awaitasync / await 의 개념을 이해하기 전에 아래 코드를보자. Users.findOne('juno') .then((user) => { console.log(user); return Users.update('juno', 'jjuno'); }) .then((updateUser) => { console.log(updateUser); return Users.remove('jjuno'); }) .then((removedUser) => { console.log(removedUser); }) .catch((err) => { console.error(error); }); console.log('다 찾았니?'); 이전 챕터에서 진행했던 Promise 예제 코드이다, 이젠많이 익숙하다...

01. Promise APIPromise의 API들에 대해 알아보자, 먼저 첫번째로 아래 코드를 보면 const handleMessage = (message) => { return new Promise((resolve, reject) => { resolve(message); }); } const handleMessage2 = (message2) => { console.log(message2); return new Promise((resolve, reject) => { resolve(message2); }) } promise .then(handleMessage) .then(handleMessage2) .then((message3) => { console.log(message3); }) .catch((err..

1. Promise 이해하기Promise가 무엇인지 한번 찢어보자...!!먼저 크롬 개발자 도구에서 Promise를 한번 쳐보자! Promise라는 함수가 존재한다, 사실 함수라기 보다는 앞글자가 대문자면 생성자라는 의미이다. 그래서 함수의 앞에 new를 붙힐 수 있고, 아래 코드와 같은 구조로 Promise는 구성되어 있다. new Promise((resolve, reject) => { // 이곳에 코딩... }) Promise는 위 코드와 같은 방식으로, 앞쪽에 new를 붙혀서 new Promise를 해주고, 생성자의 첫번재 인자로 resolve와 reject가 매개변수인 함수를 넣어준다. 이 구조는 그냥 외우면 된다. resolve - 성공 메시지reject - 실패 메시지 그 뒤에 안쪽에서 코딩을..

01. Callback아래 코드들 중 Users.findOne , Users.update , Users.remove함수들은 콜백을 설명하기위해 예시로 작성된 코드이다. Users.findOne('juno', (err,user)) => { if(err){ return console.error(err); } console.log(user); });만약 이런 코드가 있다고 치자, 콜백형식으로 코드를 작성했을때 위 코드와 같이 구성된다.위 코드는 Users라는 Data에서 juno라는 이름을 찾아서 응답으로 기다린다. 보통 이렇게 콜백을 쓰는 이유는 위 코드가 비동기(논 블러킹)으로 작동하기 때문이다. 아래 코드를 보자 Users.findOne('juno', (err,user)) => { if(err){ ret..

이전에 이벤트 루프를 알아야만 이벤트 기반, 싱글쓰레드, 논블러킹 I/O 에 대해 이해할 수 있다고 설명했다.3강 에서 이벤트 루프를 통해서 함수의 호출을 인위적으로 조절 가능한 것을 알았으며,2강 에서는 Node프로그램 hello Node도 실행시켜 보았다. 그렇다면 실제 서버로 이용하려면 어떻게 해야 할까?어떻게 해야 Node가 서버의 역활을 할 수 있을까? 먼저 서버에 대해 알아보자간단히 설명하면 요청을 받아서 응답을 하는것을 서버라 한다.요청을 보내는 주체는 클라이언트(사용자)라 한다. 클라이언트는 서버에 요청을하고 서버는 그에대해 응답을 한다.또한 서버가 클라이언트가 될 수도있다. 서버가 서버에게 요청을 보내는것이다. 요청의 특징은 언제올지 모른다는 것이다. ( 유저가 서버로 보내는 모든 요청 ..

내가 Node를 배우는이유는 실제 서버로 동작시키기 위함이다.실제서버는 사용자의 요청에 응답을 위해서 항상 실행 되어 있어야 한다.1장과 2장에서 예제로 작성된 코드만으로는, Node가 어떻게 서버로서 동작하는가에 대한것을 알아보기 힘들었다. 이번에는 Node가 어떻게 서버로서 동작하는가를 알아보자! 노드에는 핵심적인 개념 세가지가 있다. 이벤트 기반논블로킹 I/O싱글 쓰레드먼저 세가지를 이해하기 전에 이벤트기반, 논블로킹 I/O, 싱글쓰레드를 이해하기 위해서는 이벤트루프를 알아야한다 이벤트 루프는 JavaScript 코드가 쭉 있을때 이코드가 어떤순서로 실행되는지 이해하는 것을 말한다. 01. 호출 스택(콜 스택)아래 JavaScript 코드를 보고 이코드의 실행순서를 한번 알아보자. function ..

오늘은 인게임 정보를 나타내는 리스트의 디테일 페이지를 만들어 볼것이다.인게임 리스트 디테일 구현 v 위 사진과 같은 매치의 디테일 정보를 볼수있는 Component를 제작해야 된다. 상업용 API키와 개인용 API키의 차이는 API 호출 요청량의 차이가있다op.gg처럼 상업용 API키는 많은데이터를 요청할 수 있는반면에나는 지금 개인적인 용도의 API 키를 사용하므로 요청수의 제한이 있다. 이전 작업( [ Riot Games API 활용 전적 검색 App 07] - In Game 정보 리스트 구현 )에서 넘어온 매치 데이터 중 gameId라는 데이터가 있었다. 나는 요청수 제한을 뛰어넘기위해 이전에 작업에서 넘어온 매치 데이터 중 gameId를 통해서 상세보기를 클릭했을 때새롭게 Axios로 Ajax요..

오늘은 인게임 정보를 나타내는 리스트를 만들어 보려한다!오늘하려는 것은 게임내에서 어떤아이템을 사용했고 어떤 캐릭터를 사용했고 우리팀은 누구고 킬,데스,어시스트 현황을보여주는리스트 라고 생각하면 된다.일단은 대충 간단한 내용 정도만 뿌려줘 보자! 인게임 리스트 구현 v 먼저 구현할것은 위 사진처럼 View를 구성할것이다.하지만 위 사진처럼 리스트를 구성하기 위해서는 필요한 데이터가 너무나 많다. 먼저 내가 사용할 수 있는 데이터는 아래 사진과 같다. 처음에 Axios를 통해 받아온 match 데이터 구조를 분석해보면 위 사진처럼 각 매치마다 8개의 Data가 들어온다. 여기서 내가 사용할만한 데이터는 해당 매치에서 플레이한 챔피언, 라인, 시간 ... 정도?? 이다.그렇게 되었을때 리스트 중 내가 컴포넌..

01.REPL명령 프롬포트 창을 열어서 아래 명령어를 입력한다. node 커멘더 창의 명령어 입력 란의 모양이 한칸내려와서 > 하나로만 되어있다.이렇게 되면 JavaScript를 입력할 준비가 되었다는 뜻이다. 이런식으로 명령 프롬포트에서 JavaScript 구문을 작성할 수 있게 되었다.이렇게 웹브라우저 바깥에서 JavaScript를 사용할 수 있도록 도와주는게 Node의 힘이다. 명령 프롬포트를 자세히 보면 명령어를 한줄씩 치는게 어디선가 많이본 것같은데, 바로! 크롬 개발자도구 콘솔과 매우 비슷하다! 명령 프롬포트에서 한줄 씩 입력한 것과 똑같다 이런것을 REPL 이라 부른다.REPL 이란 ? 아래 4가지 행동을 반복하여 계속 진행한다고 해서 REPL이라 한다. 1. Read 입력한 값을 읽는다.2..

01. Node JS 란?Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. Node.js를 서버라 생각하는 사람도있고, 그냥 JavaScript라 생각하는 사람도 있지만 Node.js는 런타임이다 사전적으로 런타임과 런타임 환경을 정의해보면런타임의 정의는 컴퓨터 프로그램이 실행되고 있는 동안의 동작을 말한다.런타임 환경의 정의는 컴퓨터가 실행되는 동안 프로세스나 프로그램을 위한 소프트웨어 서비스를 제공하는 가상 머신의 상태이다.Node는 런타임 환경의 정의와 조금더 가깝다. Node는 JavaScript 런타임이기 때문에 Node를 설치하면 Node안에 VM이란 가상머신이 들어있다, Node가 설치만 되어있다면 어느 플랫폼에서나 JavaScript런타임..

mmr 점수란? 해당게임내에서 자신의 기여도 ? 손 빠르기 ? 라고 이해하면 되려나..?아무튼 이 mmr 이란 것은 lol에서 무진장 중요한 기준? 이다.mmr에 따라서 상대가 매칭되는데 이 mmr을 계산하는 식은 Riot 만이 알고 있다.. 물론 비공개이다. 나는 최대한 op.gg에 맞게 mmr을 맞추었다. mmr점수 구현 v 01. MMR 점수 구현 op.gg에서는 MMR 점수가 위와같이 표현된다.이 점수를 통해서 자신의 실력을 가늠할 수 있으며, MMR이 높을수록 높은 티어의 상대와 매칭이된다.op.gg에서는 MMR을 구현 함에 있어서 매경기마다 점수를 매긴 뒤 (예를 들자면 K/D/A, 와드 설치 수, 연승횟수 등등..) 최근 몇경기의 평균을내서 저렇게 평균 MMR점수를 출력 하는 것 같다. 하지..

받아온 매치 Data를 활용하여 최근 100게임 내에서 선호하는 챔피언 및 라인을 추출해주는 작업을 진행해보자. 선호 챔피언 및 라인 추출 v 01. 선호 챔프 및 라인 추출 Axios를 통해 받아온 데이터 중에 match Data를 잘보면 최근 100경기의 Data가 간략하게나온다.여기서 프로젝트를 진행할때 필요할만한 것은, 해당 게임에서 자신이 플레이한 챔피언, 라인, 포지션 정도이다. 이 Data들을 활용하여 선호챔프,라인 추출하는 함수를 제작하였다. getPreferData = (data) => { let champ = [], playChamp = [], playChampCnt = [], preferData = { preferChamp : '', preferLane : '', champ : [],..

오늘은.. 매치,리그 데이터를 axios를 통하여 받아와서 state에 저장시킨뒤에게임 리스트화면을 구현해보자.. 디자인이문제인데 디자인은 bootstrap을 활용하여 대~~충 해보자!! 매치, 리그 데이터 받아오기 v bootstrap을 활용한 리그 상태정보를 활용한 화면 레이아웃 구성 v 01. 매치, 리그 데이터 받아오기지난 번 axios를 통해서 소환사 정보를 받아왔었다.같은방법을 통해서 매치,리그 데이터를 받아왔다. getLOLData = () => { let summonerUrl, matchUrl, leagueUrl; summonerUrl = `${apiDefault.url}/summoner/v3/summoners/by-name/${apiDefault.name}?api_key=${apiDefa..

React Project 생성 v ID 검색이 가능하도록 Input Component 구현 v Axios를 통한 Data 요청 v 01. create-react-app 을 통하여 react 프로젝트생성 create-react-app lol-state 04. id 검색이 가능하도록 Input Component 구현Riot games API에서 Data를 받아오기 전에, 검색할 아이디를 입력받을 Input Component를 만든다. // src/components/ViewSearchID.js import React from 'react'; const ViewSearchID = () => ( 검색 ); export default ViewSearchID; 05. axios를 통해 data 받아오기axios는 ..

01. Riot games API KEY 생성 및 승인https://developer.riotgames.com/ 이곳에 로그인을 한다. (없다면 가입) 해당 메인 페이지에서 REGISTER PROJECT 버튼을 누른다. 개인용 APP을 선택해준 뒤 순서대로 계속 진행한다. 해당 화면 까지 왔다면 필수항목에 내용을 채워넣고 API KEY 신청을하면 된다.중요한것은 Project Description란에 간략한 용도와 본인이 요청을하여 사용할 API Methods 들을 작성해주어야한다.( The API Methods we are using are: Match-V3, Summoner-V3, and Champion-V3. We also have a companion Android app and the link ..

프로젝트 시작전 설정및 필요한것들을 정리해본다. 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에 담는 방법에 대해서는 알아보지 않았으니 한번알아보자!..