이번 글에서는 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 ..

이번 글에서는 본격적으로 frontend를 다루도록 하겠습니다. 우선 프론트엔드는 앞에서 보여지고 어쨌든 디자인이기 때문에 사이트 구성에 대한 생각을 해야합니다. simplegg의 기능은 현재 티어, 최근 10게임 승률, 게임 진행중인지를 출력하는 세가지 기능을 가지고 있습니다. 따라서 다음과 같이 페이지 구성을 하겠습니다. 페이지 1) 메인페이지로 소환사 이름을 검색할 수 있음. 페이지 2) 검색한 소환사에 대한 현재 티어, 10게임 승률, 현재 게임 진행중인지 확인 즉 접속했을 때 페이지 1은 다음과 같이 파란색 화면에 소환사 이름을 칠 수 있는 하나의 칸이 있을 예정입니다. 페이지 2는 페이지1의 로고쪽에 다음과 같이 회색바탕으로 소환사를 검색하면 검색한 소환사에 대한 현재 티어, 10게임 승률, ..

저번 글까지 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..

이번 글에서는 드디어 실질적인 API 기능을 수행하는 views.py를 수정해보도록 하겠습니다. views.py를 수정하기 전 rest_framework라는 것을 사용하도록 하기 위해 다음 명령어를 사용하여 rest_framework를 설치합니다. pip install djangorestframework restframework를 사용하려면 base.py를 수정하여 django로 하여금 사용한다는 것을 알려주어야 합니다. THIRD_PARTY_APPS = [ "crispy_forms", "allauth", "allauth.account", "allauth.socialaccount", "rest_framework", ] restframework 설치를 다했다면 첫 번째 view를 만들어보도록 하겠습니다. ..

지난 번 글에서 필요한 api들을 모두 python code로 만들고, pip 파일 설치까지 완료했습니다. 이제 서버를 가동하려고 다음과 같은 명령어를 치고나니 에러가 납니다. python manage.py runserver File "C:\Users\devgu\Envs\simple\lib\site-packages\psycopg2\__init__.py", line 127, in connect conn = _connect(dsn, connection_factory=connection_factory, **kwasync) django.db.utils.OperationalError: fe_sendauth: no password supplied 다음 에러는 매우 간단한 에러입니다. 우리가 데이터베이스를 생성하지않..

저번글에서 두번째 기능인 소환사의 최근 10게임 승률을 보여주는 코드까지 완성했습니다. 소환사의 현재 티어를 보여 줌 소환사의 최근 10게임 승률을 보여 줌. 소환사가 현재 게임을 진행 중인지 알려 줌. 이번 글에서는 마지막 기능인 소환사가 현재 게임을 진행 중인지 확인하는 코드를 작성해보도록 하겠습니다. 현재 게임을 진행 중인지 알려주는 api는 SPECTATOR-V4 입니다. 이 API는 소환사가 게임을 진행 중이다면, 현재 게임의 고유 ID 값과, 게임 타입과, 게임 모드 등의 정보를 제공해줍니다. 우리는 관전 기능보다는 현재 게임이 진행중인지 진행중이지 않은지만 확인하면 되기 때문에, GameId가 null인지 체크를 통해 소환사가 현재 게임을 진행중인지 확인 할 수 있습니다. 코드를 작성해보도록..

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

OP.GG를 클로닝한 SIMPLE.GG의 기능은 다음과 같습니다. 소환사의 현재 티어를 보여 줌 소환사의 최근 10게임 승률을 보여 줌. 소환사가 현재 게임을 진행 중인지 알려 줌. 이 기능들은 Riot Games 사의 API를 이용하여 만들 수 있습니다. 라이엇 게임즈의 API를 이용하기 위해서 다음 사이트로 이동합니다. developer.riotgames.com/ Riot Developer Portal About the Riot Games API With this site we hope to provide the League of Legends developer community with access to game data in a secure and reliable way. This is just ..

이번 글은 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 ..