한발 먼저 가본 문과생이 알려주는
데이터 시각화 – 아무것도 모르고 React 시작하기

react JS를 이용해 저번에 배운 Github에 띄어보자.

혼자 하는데 많이 헤매고 힘들었다…

항상 할 때마다 멘탈이 튼튼한지 검사받는 것 같다. (건강 검사보다는 건강을 해치는 건지도 모르겠다.)

내가 문과생이라는 이유도 있겠지만 새로운 코딩을 할 때마다 어려움을 겪는다.

세상 모든 개발자도 이런 과정을 거쳤는지 궁금했다. 만약 그렇다면 개발자들에게 존경을 표하고 싶다!

부서진 나의 멘탈.. 정신 차려 멘탈아.. 일어나…

다른 언어들도 많지만, react 라이브러리를 선택한 이유는 매우 간단하다. 많은 사람이 사용하고 있고, 쉽기 때문이다.

나는 가능한 리소스가 많고 접근하기 쉬운 기술을 사용하려고 한다. 그래야 리소스를 통해 배울 수 있고 활용하기도 쉽기 때문이다.

아, 아직 Git에 익숙하지 않다면 전편 먼저 참고

준비물 – Node, 텍스트 에디터, Boilerplate

 

Sport-Climbing-starter-kit-1024x768

1. Node

설치 링크

Node는 요즘 이상해진 웹 프로그래밍을 하려면

반드시 설치해야 하는 요소라고 한다.

 

위 링크로 들어가서 자신의 운영체제에 맞는 버전을 다운받아 설치하면 된다.

2. 텍스트 에디터

 

파일을 수정하는 건 그냥 내장된 텍스트 에디터로도 할 수 있지만..

 

그동안 개발자들의 모니터를 보면, 형형색색의 무언가로 작업을 진행했다.

무언가 전문적이고 멋있어 보였다!

 

텍스트 에디터는, 기본적으로 코드를 수정하게 해준다.

여기에 좀 더 보기 좋게 색을 입혀주고 나아가서는 개발에 필요한 많은 자잘한(?) 도구들을 제공한다.

 

여기에서는 많은 텍스트 에디터들 중에서도 초보자들이 쓰기에 엄청나게 쉬운 Sublime Text를 쓰기로 한다. (있을 건 다 있다.)

다운로드 링크

3. Boilerplate

Boilerplate는 뭐냐고?

Boilerplate는 쉽게 설명하면 개발을 돕기 위한 template이라고 생각하면 된다.

특히, 초보자들이 처음부터 모든 코드를 짜기는 힘든 일이다.

그렇기 때문에 어느 정도의 코드 template를 이용해 작업하는 것이다. 마치 등산을 할 때, 맨몸으로 오르는 것보다 ‘등산 필수 키트’ 를 갖고 가면 좋은 것처럼!

spa-github-pages 링크

이것을 활용해 만들 계획이다.

다른 Boilerplate들도 많다. 그 중 이 예제를 고른 이유는 간단하다.

우리가 사용할 Boilerplate가 react app을 Github pages에 띄우기 제일 적합하기 때문이다.

이제 이 Boilerplate를 Github pages에 띄워보자.

 

cover-blackwhite

Github pages는 무엇을 의미하는 것일까?

Github pages는 repository에 있는 내용을 웹 페이지로 서비스해주는 기능이다.

Github는 저장소의 기능뿐만 아니라 다양한 서비스를 제공한다. 게다가 Github pages는 평생 무료다!

이제 진짜로 시작해보자.

 

우선 Github에 새로운 repository를 만든다. (전편참고 링크)

Git pages에 react를 올리려면 몇 가지 특별한 설정을 해주면 된다

이는 이 Boilerplate를 만든 rafrex라는 분의 지시대로 따라가면 만들 수 있다.

그렇지만 힘들다면, 설명충인 내가 좀 더 친절하게 설명해 보겠다..

우선 위의 저장소를 clone 해보자.

터미널에서 설치하고 싶은 디렉터리로 가서


$ git clone https://github.com/rafrex/spa-github-pages.git

이라고 입력하면 해당 디렉터리에 spa-github-pages라는 폴더와 내용물이 생겨난다.

생겨난 spa-github-pages 폴더에 들어가자.

그리고 .git이라는 디렉터리를 삭제해야 한다.


$ rm -rf .git

rm -rf는 디렉터리를 지우는 명령어다.

 

 

이제 자신의 Github repository에 올려보자.

우선 git을 새롭게 초기화해야 한다.


$ git init
$ git add --all
$ git commit -m '버전 이름'

을 순서대로 진행하자.

그리고 branch 이름을 master에서 gh-pages로 바꿔야 한다.


$ git branch -m gh-pages

입력하면 gh-pages라는 branch가 생기고 변경된다.

이제 자신의 개인 repository를 등록해야 한다. 자기의 repository url을 복사하여


$ git remote add origin [자신의 repository url] 

입력하면 위 boilerplate를 자신의 git repository로 push 할 수 있게 된다.

아까 설치한 Sublime을 이용해 설치한 repository 안에 있는 404.html 파일을 열고


var segmentCount = 1;

부분을 0에서 1로 바꿔주어야 한다.

 

참고로, 저장해야 반영이 된다.

그러므로 텍스트 에디터를 이용해 수정한다면 꼭 저장하는 것을 잊지 마라.

그리고 index.html 파일에 들어가


script src="/reactapp/build/bundle.js"

로 변경하면 된다. (나는 ‘reactapp’ 라는 이름으로 내 repository를 생성했다.)

이처럼 변경해주면 된다.

다음으로 src폴더에 있는 index.js를 변경해주어야 한다.


BrowserRouter

에서 repository 이름을 지정해야 한다.


BrowserRouter basename="/reactapp"

을 입력해주면 끝이다. 위와 마찬가지로 ‘reactapp’은 내 repository 이름이다. 당신의 repository 이름으로 바꾸어라!

 

 

이제 Node 관련된 패키지들을 설치해보자. 다시 터미널을 이용해서


$ npm install

을 입력하면 자동으로 설치된다.

이 작업은 간단히 말해 node.js에서 사용 가능한 리액트 등등의 모듈들을 설치하는 것이다.

즉, 웹에서 요구하는 기능들을 개별적으로 개발하지 않고 쉽게 개발할 수 있도록 도와주는 고마운 존재이다.

다시 돌아와서, 이 패키지들이 설치되었다면,


$ npm run build

입력하여 Github pages에 올릴 build 파일들을 만들어주자

그리고 다시 commit하고 push 해주면 등록한 repository에 올라간다.

 

짜잔!

웹 주소에 ‘[Github 닉네임].github.io/[개인 repository 이름]’ 을 입력하면 페이지가 떠야 정상이다.

오오!! 간단하지만 뭔가 뿌듯하다. 벌써 프로그래밍과 조금 친해진(?) 느낌이다.

물론 프로그래밍은 그렇게 생각하지 않는 것 같다..

우리는 위에서 무엇을 한 것일까?

 

우리는 위에서 뭔가 프로그래밍인 것 같으면서도 아닌 과정들을 왜 해야하는지 궁금증이 생긴다.

우리는 자신의 repository를 이용해 Github pages에 react 웹페이지를 띄워야 했었다.

 

이는 별도의 url을 지정해주지 않는 이상 [github 닉네임].github.io/[repository 이름] 의 형태로 나온다.

 

이는 우리가 알고 있는 많은 url들의 형태와 다르고,

이러해서 url이 바뀌었으니

헷갈리지 말것! 이라고 위 설정들이 Git pages 서버에 말해주는 것이다. 

(이제 우리가 올린 리액트 build파일들과 Git pages서버는 마치 영미야아ㅏㅏㅏ!!!!!!!!!!!! 하는 것처럼 그들만의 시그널을 아주 잘 주고 받는다.)

자, 이제 드디어 뭔가를 바꾸어보자!

 

이제는 배경 색과 화면의 글을 조금 바꾸어 보자.

우선 텍스트 에디터를 사용해 index.html 파일을 살펴보자.

보다보면 <style>이 있다.


#root { background-color: #F0F0F0; min-height: 100%; }

그 중간에 background-color의 코드를 바꿔주면 배경색이 변경된다.

예를 들어 ‘#F0F0F0’대신 ‘skyblue’를 입력하면 미세먼지 없는 하늘색이 나온다. ???? ????

이름코드만이 아니라 html 색상 코드를 찾아서 원하는 색을 적용할 수 있다.

이번에는 글을 조금 변경해보자.

/src/component/App.js 파일에 들어가 보면


<h1 style={s.title}>Single Page Apps for GitHub Pages</h1>

이렇게 head가 있다. 그중 ‘Single Page Apps for GitHub Pages’를 자신이 원하는 타이틀로 바꿔보자.

나는 간단하게 ‘Hello’라는 제목을 넣었다.

그리고


npm install
npm run build

를 하면, 막 멋있는 화면들이 휘리릭 하면서 내가 바꾼 것들로 뭔가 파일이 생성되는걸 볼 수 있다.

 

이걸 git을 이용해 다음과 같이 다시 올리자.


git add --all
git commit -m 'Change Text and Colors'
git push origin gh-pages

 

성공적으로 push를 했다면 다음과 같이 색과 글자가 바뀐 화면이 뜰 것이다!

오늘은 여기가 마지막이다! 복잡해 보이지만 실제로 해보면 간단하다.

여기까지 Boilerplate를 이용해 react app이라는 것을 맛봤다. 그리고 내 Github pages를 이용해 웹 페이지로 띄어보았다.

다음에는 실제 데이터 시각화에 필요한 차트를 넣어보자.

이 과정을 진행하며 react app을 만들다 실패하고 미끄러지는 나의 모습이다..

차근차근 해보면 쉬운 과정이지만 나는 차근차근 진행하지 않았었다. 하하하

무작정 부딪히지  말고 천천히, 차근차근, 차분히, 생각 있게 진행했다면 조금 더 빨리 만들지 않았을까 싶다.

Summary
한발 먼저 가본 문과생이 알려주는, 데이터 시각화 - 아무것도 모르고 React 시작하기
Article Name
한발 먼저 가본 문과생이 알려주는, 데이터 시각화 - 아무것도 모르고 React 시작하기
Description
데이터 시각화를 위해 문과생이 React에 부딪혀 보는 이야기
Author