[Challenge / day-27] 디자인 토대로 레이아웃 구현하기

study/Challenge

[Challenge / day-27] 디자인 토대로 레이아웃 구현하기

creatorAron 2023. 3. 18. 01:44

오늘의 공부범위 : 48강 내용(Part4. ch1. 3강)

오늘은 큰 목차는 하나지만, 소 목차로 React Router를 사용하거나 class diagram을 이용하는 과정이 포함되어 있다. 지금까지 잘 만들어온 디자인을 토대로 앱 개발의 뼈대인 컴포넌트 제작을 성공적으로 마치는 것이 오늘의 목표이다.

대략 이런식으로 CLI를 너무 잘 활용하셔서 하셨는데

docs pwd
docs ll

docs cp react_component_diagram.plantuml ~/personalWorkspace/dutchpay-fastcampus/docs
docs cp sequence_diagram.plantuml ~/personalWorkspace/dutchpay~fastcampus/docs
docs cd ~/personalWorkspace/dutchpay-fastcampus

dutchpay-fastcampus git:(main) // ll

...

dutchpay-fastcampus git:(main) // rm -rf docs
dutchpay-fastcampus git:(main) mkdir docs
dutchpay-fastcampus git:(main) cd ~/Desktop/DutchpayService/docs
docs cp react_component_diagram.plantuml ~/personalWorkspace/dutchpay-fastcampus/docs
docs cp sequence_diagram.plantuml ~/personalWorkspace/dutchpay~fastcampus/docs
docs cd ~/personalWorkspace/dutchpay-fastcampus

dutchpay-fastcampus git:(main) // ll

중간에 // 로 표시한게 맥북에서 어떤 표시인지 잘 모르겠다..

저기 (main)하고 다음에 나오는 표시인데 어떤 표시인지... 아무튼 나는 애당초 시퀀스 다이어그램과 클래스 다이어그램을 docs로 해서 미리 앱을 만드는 경로에 생성해두어서 위와 같은 과정없이 바로 진행하였다.

가장 만들기가 까다로워 보이는 페이지는 다음과 같다.

Expense Main이라는 페이지로 비용을 추가하고 정산결과를 보여주는 틀이 왼쪽에 있고, 그룹명을 헤더로 보여주고 비용과 리스트 목록을 보여주는 컴포넌트가 오른쪽에 배치된다. 물론 이것들의 내용은 서로 좌우 대칭적으로 바뀌거나 새로운 컴포넌트가 추가/제거될 수 있기 때문에 절대적인 것은 아니라고 생각해야한다.

주요한 컴포넌트의 목록으로는 1. 그룹을 생성하는 랜딩페이지인 CreateGroup

2. 그 다음으로 그룹의 멤버를 추가하는 페이지인 AddMembers

3. 그 둘에 공통으로 사용되는 화면 중앙의 컴포넌트인 CenteredOverlayForm이 있고,

4. ExpenseMain은 위에서 본 것 같이 비용을 추가/제거하고 정산결과까지 보여주는 User flow의 거의 끝단에 있는 페이지 이다.

이 컴포넌트들을 하나하나 CSS를 적용하면서 구현해봐도 되지만, 우리는 다음시간에 Bootstrap이라는 미리 생성된 틀을 이용하여 조금은 편리하게 앱의 레이아웃을 구성하는 방법을 알아보고 실습해 볼 것이다. CSS알못인 나에게 이런 것들은 너무 편리하다. 다음 강의가 너무 기대가된다.

[Challenge / day-27] 디자인 토대로 레이아웃 구현하기

목차

관련링크