이번 글에서는 redux라는 것을 사용하여 프론트엔드 작업을 이어서 해보도록 하겠습니다. redux는 django의 view.py에서 정의했던 api들을 연결해주는 과정이라고 생각하시면 됩니다. src아래에 redux 폴더를 만들어줍니다. redux 폴더 아래에 configureStore.js 파일을 만들고, modules 폴더를 만들어줍니다. 또한 modules 폴더 아래에는 lol.js를 만들어줍니다. 구성을 그림으로 보면 다음과 같습니다. configureStore.js와 lol.js를 채워보도록 하겠습니다. configureStore.js를 다음과 같이 작성합니다. #configureStore.js import { combineReducers, createStore, applyMiddleware ..

저번 글까지 op.gg 클론인 simple.gg의 백엔드를 완성했습니다. 백엔드를 구성하는 과정에서도 생각보다는 심플하면서 심플하지 않다는 것을 느끼셨을 수도 있습니다. 제가 생각하기에는 그래도 django는 쉽게 backend를 구성하는 편이라고 생각합니다. 이번 글에서부터는 드디어 Frontend 작업을 시작하도록 하겠습니다. Frontend란 말 그대로 앞쪽에서 보여지는 부분입니다. 즉, 사용자가 화면을 보는 부분들을 작업하는 것이라고 생각하시면 편합니다. 기본적인 프론트엔드 구성은 html css javascript입니다. 각각은 다음과 같이 생각하시면 편합니다. ○ html : 웹의 구조 ○ css : 웹의 시각적 표현 ○ javascript : 웹의 동적 처리 사실 html css javasc..

저번 글에서 API를 views.py로 적용하는 단계 중 첫 번째 단계를 완료했습니다. 소환사의 현재 티어를 보여 줌 소환사의 최근 10게임 승률을 보여 줌. 소환사가 현재 게임을 진행 중인지 알려 줌. 아래 최근 10게임 승률을 보여주는 getRate view와, getIngame view를 만들어주도록 하겠습니다. 마찬가지로 특정 url로 get형식으로 summoner name이 parameter로 들어왔을 때 승률 혹은 인게임중인지 보여주기 위해 다음과 같이 view를 작성합니다. class getRate(APIView): def get(self, request, format=None): summoner_name = request.query_params.get('summoner_name', None..

저번글까지 구현 한 기능은 다음과 같습니다. 소환사의 현재 티어를 보여 줌 소환사의 최근 10게임 승률을 보여 줌. 소환사가 현재 게임을 진행 중인지 알려 줌. 이번 글에서는 아래 두가지인 최근 10게임 승률을 계산하는 코드와 현재 게임을 진행 중인지 확인하는 코드를 만들어보도록 하겠습니다. 최근 10게임 승률을 보여주는 코드를 먼저 만들어보도록 하겠습니다. 사용할 api는 Match 부분의 /lol/match/v4/matchlists/by-account/{encryptedAccountId} 입니다. 현재 티어를 보여주는 api의 경우 encryptedId였는데 이 친구는 encryptedAccountId를 사용합니다. 왜 다르게 만들어 놨는지는 알 수 없으나 우리는 api가 시키는대로 해야합니다. en..

이번 글은 OP.GG 클론하기의 실질적인 시작입니다. 프레임워크와 라이브러리, 데이터베이스를 설치하는 것으로 시작하도록 하겠습니다. 우선 데이터베이스를 설치하도록 하겠습니다. 우리가 사용할 데이터베이스는 지난 글에서 말씀 드렸던 대로 postgreSQL입니다. postgreSQL은 다음 사이트에서 다운 받을 수 있습니다. www.postgresql.org/download/ PostgreSQL: Downloads Downloads PostgreSQL Downloads PostgreSQL is available for download as ready-to-use packages or installers for various platforms, as well as a source code archive if ..