OP.GG 클론하기 - 롤 전적 검색 사이트 만들기 9

 저번 글까지 op.gg 클론인 simple.gg의 백엔드를 완성했습니다. 백엔드를 구성하는 과정에서도 생각보다는 심플하면서 심플하지 않다는 것을 느끼셨을 수도 있습니다. 제가 생각하기에는 그래도 django는 쉽게 backend를 구성하는 편이라고 생각합니다.

 이번 글에서부터는 드디어 Frontend 작업을 시작하도록 하겠습니다. Frontend란 말 그대로 앞쪽에서 보여지는 부분입니다. 즉, 사용자가 화면을 보는 부분들을 작업하는 것이라고 생각하시면 편합니다.

기본적인 프론트엔드 구성은 html css javascript입니다. 각각은 다음과 같이 생각하시면 편합니다.

 ○ html : 웹의 구조

 ○ css : 웹의 시각적 표현

 ○ javascript : 웹의 동적 처리

사실 html css javascript를 raw하게 작성하는 것이 프로그램을 처음배우시는 분들이 이 글을 따라하기에는 이해하기 쉬울 수 있으나, raw하게 처음부터 구성해나가면 웹 페이지를 구성해 나갈 때 매우 귀찮습니다. 따라서 저는 라이브러리를 이용할 것입니다. 자바스크립트 기반 라이브러리는 종류가 굉장히 많습니다.

 

 ● Angural JS

 ● Node JS

 ● React JS

 ● Vue JS

 

필자는 React와 Node에 대해서만 공부하여 이번 글에서는 페이스북에서 만든 라이브러리인 React를 사용하도록 하겠습니다. 리액트 프레임워크에 대한 설명은 다음 홈페이지를 살펴보시면 됩니다.

이번 글에서 리액트를 사용하는 이유는 Django framework와 React가 매우 쉽게 연결되기 때문입니다.

 

이제 본격적으로 시작해보도록 하겠습니다. 우선 code로 지금까지 진행하고 있었던 프로젝트를 열어줍니다.

우선 npm을 사용하기 위해 node.js를 설치하도록 하겠습니다. node.js 다운로드

Download | Node.js

node.js를 설치하였다면 터미널에서 npm이라는 것을 사용할 수 있습니다. npm -v로 정상적으로 설치되었는지 확인해보겠습니다.

(simple) C:\Users\devgu\simplegg>npm -v
6.14.6

정상적으로 설치된 것을 확인하였습니다. 이번엔 create-react-app을 설치하도록 하겠습니다. react를 설치할 수 있도록 페이스북에서 만든 프로젝트라고 생각하시면 됩니다. 다음 명령어를 이용하여 설치하도록 하겠습니다.

npm install create-react-app

이제 react를 설치할 수 있습니다. 보통 frontend 프로젝트는 이름 그대로 frontend라고 생성 하기 때문에 다음 명령어로 react project를 생성해보도록 하겠습니다.

create-react-app frontend

django simplegg 폴더에 다음과 같이 frontend라는 폴더와 node_module이 생긴 것을 확인할 수 있습니다.

django의 경우 manage.py를 이용하여 runserver하여 서버가 돌아가고 화면을 살펴볼 수 있었습니다. react의 경우, 다음 명령어를 이용하여 간단하게 시작할 수 있습니다. 우선 frontend 폴더로 이동 후 시작하도록 하겠습니다.

cd frontend
npm start

react가 시작되고 http://localhost:3000/에 접속하면 다음과 같은 화면이 나옵니다. django의 경우 8000포트를 이용했는데 react는 3000포트를 이용합니다. 따라서 보통 백엔드 작업 후 프론트를 작업하지만 프론트 작업 도중 백엔드를 수정해야한 경우가 많기 때문에 동시작업하기 매우 편리합니다.

 

이번 글에서는 frontend에 대한 개념과, react frontend를 simplegg에 설치해봤습니다. 다음 글에서부터 본격적인 frontend작업을 해보도록 하겠습니다. 이해가 가지 않는 부분