프로젝트 구현(1) - 개발환경 구축 + 레이아웃 구현(1)

패스트캠퍼스 환급챌린지

16일차 화이팅!!!!!

---

개발 환경 구축

1. AWS Amplify를 이용한 개발 환경 셋업

AWS 계정 생성 후 로그인
Amplify CLI 설치
npm install -g @aws-amplify/cli

create-react-app 으로 프로젝트 생성

2. Amplify와 Github 연동

깃허브에서 새로운 레포지러티 생성
git remote add origin 깃헙주소
git push -u origin master

3. 더치페이 프로젝트 생성

---

레이아웃 구현

1. 디자인을 토대로 레이아웃 구현

1. Figma디자인과 Class diagram 비교

• 프로젝트 내 docs/디렉토리 생성 후, Part 3 에서 만든 다이어그램들 이동
• Figma 디자인과 Class diagram 비교하면서 레이아웃 잡기

2. 어떤 것들을 할까?

• 각 페이지를 렌더링하는 최 상단의 컴포넌트 생성
• 그룹 생성, 멤버 추가 페이지의 Form 컴포넌트는 화면의 중앙에 위치하도록 배치
• 비용/정산 페이지는 Left/Right pane 컴포넌트 분리
• 어플리케이션 내에서 공통적으로 적용할 수 있는 것들 (e.g. 배경 색상, 헤더)

npm install react-router-dom
으로 리액트 라우터 설치

import './App.css';

import { BrowserRouter, Routes } from 'react-router-dom';



const App = () => (

<BrowserRouter>

<Routes>

<Route path="/" element={} />

</Routes>

</BrowserRouter>

);



export default App;

src 아래에 components 폴더 생성
-> CreateGroup.jsx , AddMembers.jsx , ExpenseMain.jsx 파일 생성

export const CreateGroup = () => {

return (

<div>Create Group Component</div>

)

}

export const AddMembers = () => {

return (

<div>Add Members Component</div>

)

}

App.js 의 Route 내부 path 와 element에 연결시켜줌.

CenteredOverlayForm.jsx 파일도 같은 방법으로 생성 한 후, 이번에는 라우터에 연결 해 주지 않고 컴포넌트를 CreateGroup, AddMembers, 페이지에 선언해 줌.

import { CenteredOverlayForm } from "./CenteredOverlayForm"



export const AddMembers = () => {

return (

<div>Add Members Component

<CenteredOverlayForm />

</div>

)

}

마지막으로 화면을 분할해주는 ExpenseMain 화면 정리

export const ExpenseMain = () => {

return (

<div>

Expense Main Component

{/* Left Pane */}

<div>

{/* TODO: 비용 추가 폼 컴포넌트 렌더링 */}

{/* TODO: 정산 결과 컴포넌트 렌더링 */}

</div>

{/* Right Pane */}

<div>

{/* 그룹명 헤더 렌더링 */}

{/* 비용 리스트 컴포넌트 렌더링 */}

</div>

</div>

)

}

다음 시간에서는 BootStrap을 이용하여 레이아웃을 입힐 예정임.

---

16일차 인증

---

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]