리액트로 서비스 만들기

스펙

프론트 - 리액트 js

백엔드 AWS Code Star

 

백엔드에는 AWS Code star 를 사용했다.

Codestar 를 사용하면 CI/CD가 구축되어 있는채로 개발을 할 수 있다.

서버리스 앱을 선택했고 node 로 개발했다.

 

프론트는 리액트로 개발했다.

material design 을 적용해봤다.

 

aws codestar로 앱을 만드는 방법은 이미 작성했다.

https://fors.tistory.com/559

AWS CodeStar - Serverless 앱 만들기

 

 

리액트 프로젝트를 만들었다.

https://create-react-app.dev/docs/getting-started/

Create React App · Set up a modern web app by running one command.

링크에서 소개하는대로 아래 명령어를 입력했다.

npx create-react-app my-app
cd my-app
npm start

my-app부분에 앱 이름을 입력했다.

 

대략 살펴보니 index.html 은 메인 페이지 부분이다.

 

아래 src 에서 내용이 나뉜다.

 

먼저 App.js 이부분은 JSX라는 문법으로 컴포넌트를 리턴하는 내용들을 적는 것 같다.

대략 이런식으로 <div> 태그 , <button> 태그 같은거를 리턴해주는 것이다.

 

그럼 index.js 부분에서 리턴 받은 컴포넌트를 사용한다.

그리고 화면에 렌더링한다. 이때 화면에 컴포넌트가 표시된다.

 

index.css 는 index.html 에 대한 css 기능을 한다.

나는 별도로 css를 정의하지 않고 material design 을 썼기 때문에 여길 비워놨다.

 

App.css 도 비워놨다.

 

아직 리액트에 익숙하지 않다.

 

material design 은 아래와 같이 적용한다.

관련 링크 : https://haleyryu.gitbook.io/engineer/frontend/react-x-redux/3.-material-ui

3. Material UI 적용하기

 

 $ npm install @material-ui/core

설치한다.

그리고 App.js 에서 사용한다.

저렇게 가져와서 쓰면 된다.

 

 

리액트 앱은 firebase에 배포했다.

 

서비스 링크 : https://untitled-c36d1.web.app/

Document

아래 글의 내용을 따라서 했다.

 

https://fors.tistory.com/515

react 앱 firebase 에 배포하기

리액트 앱을 aws ec2 같은 곳에 배포 하는 경우도 있을 수 있다.

 

먼저 빌드를 한다.

 

npm run build

그리고 아래 배포 명령어를 입력한다.

npx serve -s build

npx serve -s build 를 하면 localhost:5000 에서 앱이 실행 된다.

 

ec2 에 build 파일을 가져가서 npx serve -s build 하면 된다.