React JS로 SPA 만들기
멍카 웹페이지 - 1
앱을 등록할 때 필요한 앱 정보 몇 가지가 있다. 설명, 키워드, 스크린샷, 아이콘 등 눈에 띄는 값들 외에도 잘 보지는 않지만 Information 잴 하단에 노출하는 Developer Website, App Support 링크 같은 것들,,, 한국어로는 정보 세션의 개발자 사이트와 앱 지원으로 보인다.
멍카 앱 스토어 프리뷰 웹페이지위 링크를 iTunes Connect에서 확인하면 지원 URL, 마케팅 URL로 노출되는데 그중 지원 URL은 필수 값이기 때문에 웹페이지가 없다면 보통 페이스북 페이지나 인스타그램, 블로그 주소를 사용한다.
iTunes Connect 등록화면현재 마켓에 등록돼있는 멍카도 인스타그램(@meongca) 주소를 넣었지만 0.3 버전에는 앱 정보를 줄 수 있는 간단한 SPA(Single Page Application)을 만들어 등록하기로 했다.
SPA는 약자 그대로 단일 페이지로 이루어진 웹 애플리케이션을 말한다. 최초 페이지가 로드될 때 필요한 정적 리소스를 모두 가져와 새로운 페이지 요청 시 새로고침 없이 필요한 데이터를 뿌려주는 방법이다.
SPA를 만들기 위해서는 대표적으로 Angular 2, React JS, Vue.js를 사용하는데, 사실 이전부터 React에 대한 관심이 생겨 봐왔던 터라 고민 없이 우린 React를 선택했다. 하지만 아직 시작하지 않았다면, 아래 링크를 참고하여 좀 더 고민해보고 자신이 만들려는 목적에 맞게 라이브러리, 프레임워크를 선택하면 좋을 것 같다.
https://vuejs.org/v2/guide/comparison.html
React JS는?
facebook에서 만든 인터페이스 구현을 위한 JavaScript 라이브러리이다. 프레임워크가 아니다.
단방향 데이터 흐름을 지향하고, Virtual DOM을 가지고 있어 변경이 필요한 최소한의 DOM만 갱신하는 장점을 가지고 있다. 또한 Component 의 가독성이 매우 높고 간단하여, 나 같은 초보자들이 쉽게 배울 수 있다.
Instagram, Airbnb, Netflix, Dropbox, Twitter 등 이름만 들어도 알만한 서비스들이 사용하고 있으니 구글링을 하여 많은 정보를 얻을 수 있다. 리액트에 대해 더 알고 싶다면 공식 페이지에서 doc 읽어보는 것을 추천한다. 페이스북 리액트 공식 페이지 https://reactjs.org/
React 시작하기
리액트를 시작하기 위해서는 다소 복잡한 모듈들을 설정해줘야 하는데, 우린 create-react-app 프로젝트를 통해 빠르고 간편하게 설치할 것이다. 그리고 리액트 설치하기 전 npm(Node Package Manager) 패키지 관리자가 필요한데, npm은 Node.js에 포함되어 있으니 Node.js를 설치하면 된다.
이제 터미널을 켜고 아래 명령어를 수행해보자.
npm으로 create-react-app을 설치하고
npm install -g create-react-app
앱을 생성하고, 들어가서
create-react-app react-test
cd react-test
앱을 실행하면, http://localhost:3000/ 에서 띄어진 리액트를 확인할 수 있다.
npm start
쉽죠잉~?이번 글에서는 리액트를 설치하여 로컬에 띄어봤고, 다음 글에서는 아래 기술들을 사용해서 멍카 웹 페이지를 구현하는 과정을 정리해보겠습니다.
- React JS
- Firebase database
- GA (Google Analytics)
- git / git hub
- git pages
