[클라이언트] 4. 뷰 작성

드디어 프로젝트의 기본적인 뷰를 작성하게 되었습니다.

요즘 업무적으로, 개인적으로 바쁜 일들이 생겨서 많이는 진행하지 못해도 한 페이지 레이아웃 정도는 잡아보겠습니다.

 

우선, 페이지는 세 개로 만들기로 했으니 세 개의 페이지를 작성해보겠습니다.

ProjectExplorePage, ProjectManagePage, ProjectEditPage 라고 이름을 붙이고 각 파일을 생성합니다.

내부는 아래처럼 일단 작성하지 않겠습니다.

 

const ProjectExplorePage = () => {
  return (
    <>
      <div>탐색중</div>
    </>
  );
};

export default ProjectExplorePage;

 

오늘 작성할 페이지는 ProjectEditPage입니다.

지난번에 작성한 디자인은 아래와 같습니다.

에디터 페이지

그럼 레이아웃은 아래처럼 작성할 수 있겠죠.

<바디>
	<상단바 />
    <에디터 영역>
    	<좌측바 />
        <중앙영역>
        	<페이지 />
        </중앙영역>
        <우측바 />
    </에디터 영역>
</바디>

이걸 각각 컴포넌트로 생성한 뒤 레이아웃에 맞추어 스타일을 적용해주기만 하면 됩니다.

그럼 각각의 컴포넌트가 잘 작성되었다는 가정하에 아래와 같은 예쁜 코드가 나오게 됩니다.

import TopBarComponent from 'components/editor/top-bar/TopBarComponent';
import EditorComponent from 'components/editor/EditorComponent';
import LeftPanelComponent from 'components/editor/panels/left-panel/LeftPanelComponent';
import WorkAreaComponent from 'components/editor/WorkAreaComponent';
import RightPanelComponent from 'components/editor/panels/right-panel/RightPanelComponent';

const ProjectEditPage = () => {
  return (
    <>
      <TopBarComponent />
      <EditorComponent>
        <LeftPanelComponent />
        <WorkAreaComponent />
        <RightPanelComponent />
      </EditorComponent>
    </>
  );
};

export default ProjectEditPage;

 

각 컴포넌트의 내부적인 내용은 아직 스타일밖에 적용된게 없다보니, 굳이 작성하지는 않겠습니다.

 

페이지를 대략적으로 구성했다면 라우팅을 좀 건드려보겠습니다.

 

초기에 노출될 페이지는 프로젝트 탐색 페이지이고, path에 따라 관리, 에딧 페이지를 노출하도록 할겁니다.

그럼 아래처럼 작성이 가능하죠,

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

import ProjectEditPage from 'components/pages/ProjectEditPage';
import ProjectExplorePage from 'components/pages/ProjectExplorePage';
import ProjectManagePage from 'components/pages/ProjectManagePage';

const Router = (): JSX.Element => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<ProjectExplorePage />}></Route>
        <Route path="/manage" element={<ProjectManagePage />}></Route>
        <Route path="/edit/:appId" element={<ProjectEditPage />}></Route>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

초기 라우팅은 탐색 페이지, /manage라는 path는 관리 페이지,

/edit/1 이면 1번 앱을 수정할 수 있는 수정 페이지를 노출하는 내용입니다.

 

대략적인 프로젝트 수정 페이지의 뷰는 끝났습니다.

레이아웃에 관련된게 전부였지만, 내부적인 컨트롤과 버튼들은 프레임워크가 작성되고 진행하는게 의미있습니다.

그럼 이제 방금까지 봤던 페이지에 어떻게 컴포넌트가 렌더링 될 것인가에 대해서 자료구조를 생각하고 구현해야합니다.

 

다음에는 그 내용을 좀 다뤄볼 내용인데, 드디어 좀 재밌는 부분이 나올 것 같습니다.

최대한 빨리 진행하고는 싶지만 최근 자꾸 일들이 생겨서 조금씩 진행하느라 주말이나 다음주에 진행할 것 같습니다.

 

어디까지 블로그에 작성하고 어디까지 생략할지가 어렵네요.

계속 쓰다보면 좀 감이 잡히겠죠?