Ryu.log

01. 액션과 액션 생성함수액션은 스토어에서 상태 변화를 일으킬 때 참조하는 객체이다. 이 객체는 type 값을 반드시 가지고 있어야 한다. 액션 타입은 해당 액션이 어떤 작업을 하는 액션인지 정의하며, 대문자와 밑줄을 조합하여 만든다. { type: "INCREMENT" } 이 액션은 상태에 있는 값의 수치를 올린다. 이 값을 어떻게 업데이트 할지는 나중에 리듀서라는 함수에서 정의한다.지금은 우선 액션을 이해하는데 집중해보자. 액션 객체 안에서 type 값은 필수고, 나머지는 선택이다. 즉, 있어도 되고 없어도 되며 형식도 자유다.예를 들자면 아래와 같이 작성 가능하다. { type: "INCREMENT_NUMBER" text: "리덕스 깨부시기" } 또한 아래와 같이 객체 형태로 넣을 수도 있다. {..

01. Redux의 소개Redux에 대해서 알아보자. Redux는 React에서 상태를 더 효율적으로 관리하는데 사용되는 상태 관리 라이브러리이다.이전에 진행했던 React프로젝트에서 상태관리 로직은 상태관리를 쉽게 하기위하여 App 컴포넌트에서 모든 로직을 처리했다. App 컴포넌트에서 모든 상태로직을 관리했기 때문에 App 컴포넌트의 state를 업데이트하면,App 컴포넌트가 리렌더링 되고, React의 특성상 하위 컴포넌트도 모두 리렌더링 된다. 그렇기 때문에 컴포넌트 최적화 과정에서 shouldComponentUpdate()를 통하여 방지해 주었는데,기존 프로젝트의 경우에는 사용한 컴포넌트의 개수가 많지 않기 대문에 App 컴포넌트에서 상태관리를 하고, 최적화 하는것이 그리 어렵지 않았다. 하지만..

01. console 객체console객체에 대해서 알아보자.Front-End에서 에러 확인시 console객체를 아주아주 자주 사용하는데 이는,Node에서도 마찬가지이다 일단 Node에서 console객체에 무엇이 있는지 알아보자.먼저 nodeStudy루트에 console.js파일을 만들어서 코드를 입력할 준비를 한다. 그 뒤에 터미널에서 아래와같이 입력해보자 // C:\Junho\nodeStudy/>node>console 위와같이 터미널에서 Node의 console객체를 입력하였을 때 아래와같은 메서드들이 나온다. console객체 안에는 디버깅을 도와주는 많은 메서드들이 들어있다.console.log, console.error정도는 알거라 생각하지만 이 외에도 유용한 메서드들 몇개를 알아보자. 먼저..

1. global 객체지금부터는 Node내장객체에 대해 알아보자.브라우저에서 window라는 전역 객체를 많이 사용했을것이다.그렇다면 Node에서 window를 찍어보면 어떻게 될까? 한번찍어보자. window is not defined.. 찾을수 없다고나온다... window를 사용할 수가 없다.그렇다면 Node에서는 전역 객체가 없는 것일까?... 아니다. Node에는 global이라는 새로운 전역 객체가 존재한다.같은 방식으로 global을 찍어보면 global을 console.log()로 찍었을 때 위같은 정보들이 쏟아져나온다. ( 최신브라우저에서는 Node와 통일을위해 global객체를 반영했다. )어짜피 쓰다 보면... 외워질 것이니 일단 각각이 무엇인지는 패스하고.익숙한것 하나만 봐보자. 익..

01. 모듈 시스템이번에는 모듈을 만들어 보자, 먼저 이전에 만들어놓은 nodeStudy 라는 디렉토리에 (본인이 편한곳 아무데나 상관없음) var.js 라는 js파일을 생성한 후, 아래와 같이 코드를 입력해보자. // nodeStudy/var.js const odd = '홀수입니다.'; const even = '짝수입니다.'; 그 뒤에 func.js 파일을 만들어보자,만약 odd와 even이라는 변수를 var.js가 아닌 비어있는 func.js 파일에서 사용 하기위해서는 어떻게 해야할까? 기존 front-end 방식으로는 아래와 같이html 파일에 var.js 를 먼저 링크하고 그 뒤에 func.js 링크를 걸어서, func.js에서 var.js안쪽에 선언된 변수를 사용할 수 있었다. 기존에 위같은 방..

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 ..