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

이번 글에서는 드디어 실질적인 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를 만들어보도록 하겠습니다. ..

첫 번째 클론을 해볼 사이트는 OP.GG 입니다. OP.GG의 경우, 월간 방문자 수가 4,500만 명에 달하며 Riot Games와 PUBG Corp과 같은 글로벌 게임사들과 긴밀한 협력 관계를 유지하며 서비스를 제공하고 있습니다. op.gg은 소환사명을 검색하면 해당 소환사의 전적과 인게임 정보 티어 그래프 등을 보여주는 기능을 제공합니다. op.gg를 완벽하게 클로닝하는 것은 매우 복잡한 작업이며 오랜 시간이 소요됩니다. 따라서 간단한 op.gg 즉 simple.gg를 만들어보려고 합니다. 우리가 클로닝한 사이트 simple.gg에서 제공하는 기능은 다음과 같습니다. 소환사의 현재 티어를 보여 줌 소환사의 최근 10게임 승률을 보여 줌. 소환사가 현재 게임을 진행 중인지 알려 줌. 고작 기능이 3개..