ReactJS 테스트서버 구축하기

안녕하세요. 오틸라 입니다.

이번시간에는 테스트서버를 구축해 보겠습니다.

아니! 지난시간에 실컷 firebase에 웹호스팅 시켜놨더니, 왜 테스트서버를 만드냐구요?

흠....

그게....

ReactJS의 가장 큰 장점중의 하나가, 빌드과정 없이 파일만 수정하고 저장하면 바로바로 바뀌는 결과를 볼수 있는데...

firebase에다가 호스팅 해놓으니, 파일을 직접 수정할수도 없고,

수정하고 나면 firebase deploy해서 파일 올리고 

그제서야 수정한 부분을 본다 이거에요!!!!

이건 ReactJS 장점 하나를 그냥 버리는거쟎아요!!!

그래서, firebase의 웹호스팅은 마지막에 런칭할때나 최종테스트시에 올려보도록 하고, 

일단은 개발PC에다가 로컬로 테스트서버를 구축합시다 ^^;

자! 너무 화내지 마시고....

고고!!!!

로컬PC에 개발환경을 구축하려면 일단 필요한게

node.js <- 요건 설치했을테고

npm <- 요것도 설치했을테고

webpack을 설치할 차례입니다.

자 이건 뭐냐!

음....정말정말정말 간단하게 얘기하면

ReactJS로 짠 코드를 각종 브라우저에 읽을 수 있게 요리조리 처리해주는 겁니다 

뭐 그렇게만 알고 계시고!!!

(제가 올리는 강좌의 지향성은 클론코딩입니다. 더 깊이 알고 싶으시면 구글신께 여쭤보세요.)

webpack 깝시다.

사실 webpack뿐만 아니라 node-sass또 깔고..뭐 이런저런 행위들을 다 해야 하는데

워낙에 복잡하다보니, 간단하게 깔아라고 지침내려준게 있습니다.

그게 뭐냐면!

create-react-app <- 요것만 설치하면 된다! 입니다!

cmd창 여시고,

npm install -g create-react-app

실행합니다.

-g 붙었으니 무슨뜻인줄 알죠? npm 공통폴더에 인스톨 되는겁니다~

자 그 다음

프로젝트를 하나 만듭시다.

D드라이브로 가서

Shift 우클릭으로 "여기서 명령창 열기" 하신 다음에

create-react-app AgmHealingTest 라고 때려줍니다!

잉?

대문자 썼다고 에러나네요?

하놔...이런...

저는 폴더나 변수 만들때 꼭 대소문자 구분해서 만드는데...이거참..난감하구려~

다시

create-react-app agmhealingtest 라고 합니다.

(아 소문자 보기 싫어....)

프로젝트 생성이 잘 되었네요.

이제 npm start 를 해주면!!!!

3000번 포트로 해서 localhost 화면이 확 뜹니다!

(기존에 했던 react-native 설치나, fireabase 웹호스팅에 비해 무지 쉽죠?)

자 그럼 이제 ReactJS를 본격적으로 작업할 에디트툴을 하나 설치합시다.

무료로 아주 좋은거 있습니다!

바로 Sublime Text죠!

https://www.sublimetext.com/3

요기 가셔서 OS에 맞는 툴을 다운받아 깔아 봅시다.

저는 Windows64bit를 깔았어요.

암것도 없는 휑한 프로그램이 실행되었네요.

우선 여기서 하나 설치해줄것이 있습니다.

프로그래밍하다가 오타가 나거나, 맞지 않는 문법을 썼을때 잘못됐다고 밑줄 쳐주는 애드온인데요.

babel이라 합니다.

안깔아도 상관없습니다만, 오타 잘내는 사람들은 깔아줍시다 ^^;

먼저 Tools -> Install Package Control을 클릭해 주세요.

이제 각종 패키지를 다운할 수 있다!라고 알려줍니다.

그러면

Preferences -> Package Control을 클릭해 줍니다.

창이 하나 뜰텐데 여기서 babel을 검색해서 첫번째 나오는거 클릭하시면 설치가 됩니다.

전 이미 설치한 이후에 캡쳐화면이라, bable snippets가 첫번째 이지만, 저거 아닙니다!

맨처음에 babel검색하면 나오는 첫번째꺼 선택하면 됩니다.

자 그럼 이제 File -> Open Folder로

아까 설치했던 agmhealingtest폴더를 열어봅니다.

그리고, App.js파일 수정하라고 했으니 그 파일 열어봅니다.

파일 수정하라는 그 문구에 Hello Test Server라고 입력하고, Ctrl+s로 저장한뒤

잽싸게 브라우저 보세요!!!

아무런 빌드과정 없이 자동으로 변경되어 있습니다!

자 그럼 이제 테스트서버 구축이 끝났으니, 본격적으로 시작해봅시다 ^^

오늘은 여기까지....

이상 오틸라였습니다.

건강하세요.