[센서 키오스크 만들기 - 2] 웹 개발 준비

1. node.js 설치

Node.js (nodejs.org)

Node.js

여기서 LTS 버전으로 설치를 진행했다.

 

2. CRA를 통해 react app 만들기

 

CRA 실행

CRA를 통해 리액트 앱 초기 준비. 명령어 한 줄이면 다 준비해주기에 편함.

3. CRA 기본 파일들 정리하기

src 폴더 속 파일들 중 App.js, index.js만 남기고 전부 삭제한다. App.js, index.js에서 필요없는 import문도 전부 삭제한다.

// 지금은 빠른 시간 내에 해야 했기에 곧바로 CRA를 통해서 했으나, 나중에는 다른 개발자가 만들어둔 boilerplate를 이용하는 것도 좋은 방법. 나만의 boilerplate를 만들어두면 시간도 아낄 수 있음.

4. firebase 초기화 파일 작성해주기

 

// 나중을 위해 폴더 구조를 따르며 파일을 만들어주자. 처음에 제대로 안 만들어두면 나중에 refactoring하면서 힘들다.
 
위와 같이, .env(환경변수)를 참조해서 firebase configuration을 읽어오고 이를 활용해 firebase 서비스를 초기화하는 코드를 작성해주자. 나중에 firebase 활용을 위해 이 모듈에서 app을 import하면 자동으로 초기화될 것이다.
 
.env.development, .env.production 파일을 만들고 .gitignore에 추가하는 것도 잊지 말자. 환경 변수를 통해 중요한 정보를 저장함으로써 외부로의 유출을 방지하여 보안 면에서 안전하다.
 

root폴더에 만든 환경변수 파일. dev/prod 환경에 따라 다른 키를 사용할 경우를 위해 두 가지 파일이다.

페이지를 개발 모드 (development)에서 시작하려면 npm start, production 모드에서 시작하려면 우선 빌드(npm build) 후 실행하면 된다. 
 
Github에 올리기

• git add .
• git commit -m "feat/add-new-page"
• git push (origin master)