[React] Layout 분리 전, 샘플 페이지 작성

이전 기록에서 프로젝트 생성까지 진행하였습니다.

 

이번 기록에서는 

Layout 화면을 컴포넌트로 분리 전, 샘플 페이지로 표현하고 싶은 부분을 대략 작성하는 것까지 입니다. 

(다음 기록에서 Lnb, Top, Contents로 분리하는 부분을 작업하려고 합니다.)

 

css는 따로 컴포넌트화 하지 않고, 전체적으로 참조하도록 진행할 예정입니다. 

 

1. Prettier 설치 및 설정 

 

1-1. 사용이유 

* 정해진 코딩스타일에 맞추어 저장되도록 

* 본인 작성시에도 편하고, 여러 명이 함께 개발할 때 코딩 스타일을 자동으로 맞추어주니 편함 

 

1-2. 설치 

npm i prettier --save-dev

 

1-3. 코딩 스타일 지정

.prettierrc.js : 해당 파일 없을 경우 default 값으로 지정, 별도 지정하려면 해당 파일에 지정 

module.exports = {
    //semi:  true,
    //trailingComma:  'all',
    //singleQuote: true,
    printWidth: 150,
    tabWidth: 4,
};

 

1-3. 설정 : 저장시 마다 preettier 설정 적용되도록 

Settings > Languages & Frameworks > JavaScript > Prettier : [체크] On save 

 

2. 기존(초기) 내용 제거 

- README.md : 내용 삭제
- /src/App.js 내용 초기화

import './App.css';

function App() {
  return (
    <>!App!</>
  );
}

export default App;

 

3. component 분리 전 sample page 작성 

* 실제 프로젝트는 디자이너 > 퍼블리셔 > 웹 서버 개발자 이렇게 작업이 되며, 퍼블리셔가 공유한 html / css를 이용하여 작업 (웹 서버 개발자인지라, html / css 기술이 약한 것을 감안 부탁드립니다.) 

 

3-1. /src/assets 폴더 생성 및 필요한 리소스(images/css 등) 

- reset.css 추가 ( https://meyerweb.com/eric/tools/css/reset/ )

- common.css 추가

 

3-2. /src/samples/SampleLayout.js 샘플 페이지 생성 및 간단하게 확인용으로 작성

function SampleLayout(){
    return <>SampleLayout</>
}

export default SampleLayout;

 

 4. /src/App.js 에서 SampleLayout 컴포넌트 호출하도록 수정 

import "./assets/css/reset.css";
import "./assets/css/common.css";
import SampleLayout from "./samples/SampleLayout";

function App() {
    return <SampleLayout />;
}

export default App;

 

5. /src/samples/SampleLayout.js 샘플 페이지 작성  

import logo from "../assets/images/logo.png";

function SampleLayout() {
    return (
        <div className="wrap">
            <div className="container">
                <div className="left_area">
                    <div className="lnb">
                        <div className="logo">
                            <img src={logo} alt={"sosohanya logo"} />
                        </div>
                        <div className="menus">
                            <p className="tit">Menu 1</p>
                            <ul>
                                <li>
                                    <a href={"/#"}>Sub 1</a>
                                </li>
                                <li className={"on"}>
                                    <a href={"/#"}>Sub 2</a>
                                </li>
                                <li>
                                    <a href={"/#"}>Sub 3</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="right_area">
                    <div className="top_area">
                        <div className="menus">
                            <ul>
                                <li className={"on"}>
                                    <a href={"/#"}>Menu 1</a>
                                </li>
                                <li>
                                    <a href={"/#"}>Menu 2</a>
                                </li>
                                <li>
                                    <a href={"/#"}>Menu 3</a>
                                </li>
                                <li>
                                    <a href={"/#"}>Menu 4</a>
                                </li>
                                <li>
                                    <a href={"/#"}>Menu 5</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div className="contents_area">
                        <div className="contents">Contents</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default SampleLayout;

 

현재까지 화면

 

 

 

Git : https://github.com/sosohanya/sosohanya-react-admin/tree/002._SampleLayout 

 

2022.07.31 - [React] React 프로젝트 만들기 (CRA)

2022.08.14 - [React] Layout 분리 전, 샘플 페이지 작성

2022.08.21 - [React] Layout / Contents 컴포넌트 분리

2022.10.25 - [React] Modal Popup 처리 (ReactDOM.createPortal)