[React] 페이지 개발 - 솔루션
페이지 개발 - 솔루션
이번글 부터는 사이트맵에서 정의한 메뉴의 페이지를 하나씩 작성하도록 하겠습니다. 먼저 페이지에 들어갈 구성요소부터 정하고 하나씩 붙여보도록 하겠습니다.
작업 내용
- 페이지 폴더, 스크립트 생성
- 사이트맵 연결
- 페이지 내용 작성- Content, Bottom
페이지 구성 - 공통
페이지는 [Content, Bottom] 2부분으로 구성이 되어집니다. 헤더부분은 component로 미리 구성된 드롭다운 메뉴에 추가하는 방식이고 메뉴 연결이 끝나면 연결된 페이지 내용이 표시되게 됩니다. 작업 내용과 같이 index에 페이지를 선언하고 Header에 연결한 후 페이지 내용(content, bottom) 내용을 작성합니다. 영역은 아래 그림과 같습니다. 내가 작성할 부분이 어느 부분인지 참고하시기 바랍니다. 👌
모든 작업은 vscode에서 실행합니다. vscode에서 Control + ` 를 누르고 터미널이 실행된 상태로 #npm start 를 입력하여 브라우저에 실행시킵니다.
1. 페이지 폴더, 스크립트 생성
- 페이지를 생성할 때는 views/ 폴더에 만들 페이지 폴더와 스크립트를 생성합니다. 앞으로 만들게 될 페이지들도 같은 작업으로 이루어 지게 됩니다. views 폴더에 마우스 오른쪽 클릭 new folder, new file을 이용하여 폴더와 메뉴를 생성합니다.
2. 사이트맵 연결
- 사이트맵 구성과 같이 코드를 작성하는 방법과 순서입니다.
- index.js 파일의 페이지 연결 코드 추가
- components/Header 폴더의 HeaderLinks.js 파일의 메뉴 코드 추가
- index.js 파일의 페이지 연결 코드 추가
사이트맵에 내용과 동일한 부분이며 이번에는 import의 component명을 SolutionPage라 작성하고 Router의 Switch테그에 path 는 /solution-page, component는 SolutionPage로 작성합니다. 이후 사이트안에서 SolutionPage를 사용하면 작성한 path로 연결이 되며 url에는 / 뒤에 path로 표시되게 됩니다.
- HeaderLinks.js 파일의 메뉴 코드 추가
HeaderLinks.js의 <List> 태그를 작성합니다. 나머지 부분은 미리 작성한 코드라 연두색 태두리 안에 코드를 작성하도록 합니다. 여기까지 공통적인 내용이며 연두색 부분을 유심히 보시고 앞으로 페이지 생성 후 연결할때 어떤식으로 작성하는지 유심히 살펴 보시기 바랍니다.
3. 페이지 내용 작성 - Content, Bottom
- Content
- 이제 본격적으로 페이지 개발이 시작됩니다. 페이지 구성의 중간 부분이죠
- import는 페이지에서 사용할 컴포넌트를 선언 합니다. 여기서는 가장 기본적이고 고정적으로 들어가는 코드를 작성합니다. [필수 import]
/*eslint-disable*/
import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
// @material-ui/icons
import Camera from "@material-ui/icons/Camera";
import Palette from "@material-ui/icons/Palette";
import People from "@material-ui/icons/People";
import Add from "@material-ui/icons/Add";
import Favorite from "@material-ui/icons/Favorite";
// core components
import Header from "components/Header/Header.js";
import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import HeaderLinks from "components/Header/HeaderLinks.js";
import NavPills from "components/NavPills/NavPills.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import Badge from "components/Badge/Badge.js";
import Muted from "components/Typography/Muted.js";
import Parallax from "components/Parallax/Parallax.js";
import Clearfix from "components/Clearfix/Clearfix.js";
import Button from "components/CustomButtons/Button.js";
코드에서 보시는 것처럼 기본적으로 사용했던 header 태그도 위와 같이 header 컴포넌트를 import해서 사용하는 것입니다. core components라해서 header, footer, griditem.....등등 페이지를 만들기 위해 기본적으로 material kit에서 스크립트와 스타일을 작성해 놓은 부분을 쉽게 import해서 사용하기만 하면 됩니다. 아 물론 사용하기 위해서는 어떻게 구성되 있는지 살펴본 후에 가능하겠지요. 천천히 글을 보며 작성하시면서 살펴보시면 익숙해지실 겁니다. import에서 from 뒤에 경로에 실제 컴포넌트 코드가 있으며 앞으로의 글들에서는 코드를 하나씩 살펴보도고 사용을 어떻게 해야되는지 알려드리겠습니다.
- 내용 - 실제로 표시할 내용
export default function SolutionPage({ ...rest }) {
...
}
이런식으로 function을 만들고 {...} 안에 내용은 html로 작성할 수 있습니다. 우리는 import한 훌륭한 컴포넌트들이 많이 있으므로 이를 활용하도록 하겠습니다. react에서는 function을 호출하여 안의 html을 랜더링하여 브라우져에 표시를 합니다. 처음이라 익숙하지 않을것인데 저와 같이 페이지를 만들어 보며 조금씩 살펴보도록 하겠습니다.
안의 코드는 샘플로 나온 코드를 붙여 넣도록 하겠습니다. 시간이 나면 수정하면서 코드안에 주석을 통하여 계속하여 업데이트 하도록 하겠습니다. 👀😇😇
<Header
color="transparent"
brand="LINGSSOFT"
links={<HeaderLinks dropdownHoverColor="info" />}
fixed
changeColorOnScroll={{
height: 200,
color: "info",
}}
{...rest}
/>
<Parallax
image={require("assets/img/examples/city.jpg").default}
filter="dark"
className={classes.parallax}
/>
<div className={classNames(classes.main, classes.mainRaised)}>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={6}>
<div className={classes.profile}>
<div>
<img src={christian} alt="..." className={imageClasses} />
</div>
<div className={classes.name}>
<h3 className={classes.title}>Christian Louboutin</h3>
<h6>DESIGNER</h6>
<Button
justIcon
simple
color="dribbble"
className={classes.margin5}
>
<i className={classes.socials + " fab fa-dribbble"} />
</Button>
<Button
justIcon
simple
color="twitter"
className={classes.margin5}
>
<i className={classes.socials + " fab fa-twitter"} />
</Button>
<Button
justIcon
simple
color="pinterest"
className={classes.margin5}
>
<i className={classes.socials + " fab fa-pinterest"} />
</Button>
</div>
</div>
<div className={classes.follow}>
<Tooltip
id="tooltip-top"
title="Follow this user"
placement="top"
classes={{ tooltip: classes.tooltip }}
>
<Button
justIcon
round
color="primary"
className={classes.followButton}
>
<Add className={classes.followIcon} />
</Button>
</Tooltip>
</div>
</GridItem>
</GridContainer>
<div className={classNames(classes.description, classes.textCenter)}>
<p>
An artist of considerable range, Chet Faker — the name taken by
Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs
and records all of his own music, giving it a warm, intimate feel
with a solid groove structure.{" "}
</p>
</div>
<div className={classes.profileTabs}>
<NavPills
alignCenter
color="primary"
tabs={[
{
tabButton: "Work",
tabIcon: Palette,
tabContent: (
<GridContainer>
<GridItem
xs={12}
sm={12}
md={7}
className={classes.gridItem}
>
<h4 className={classes.title}>Latest Collections</h4>
<GridContainer className={classes.collections}>
<GridItem xs={12} sm={12} md={6}>
<Card
background
style={{
backgroundImage: "url(" + mariyaGeorgieva + ")",
}}
>
<CardBody background className={classes.cardBody}>
<Badge
color="warning"
className={classes.badge}
>
Spring 2016
</Badge>
<a href="#pablo">
<h2 className={classes.cardTitleWhite}>
Stilleto
</h2>
</a>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<Card
background
style={{
backgroundImage: "url(" + clemOnojeghuo + ")",
}}
>
<CardBody background className={classes.cardBody}>
<Badge color="info" className={classes.badge}>
Spring 2016
</Badge>
<a href="#pablo">
<h2 className={classes.cardTitleWhite}>
High Heels
</h2>
</a>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<Card
background
style={{
backgroundImage: "url(" + oluEletu + ")",
}}
>
<CardBody background className={classes.cardBody}>
<Badge color="danger" className={classes.badge}>
Summer 2016
</Badge>
<a href="#pablo">
<h2 className={classes.cardTitleWhite}>
Flats
</h2>
</a>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<Card
background
style={{
backgroundImage: "url(" + darrenColeshill + ")",
}}
>
<CardBody background className={classes.cardBody}>
<Badge
color="success"
className={classes.badge}
>
Winter 2016
</Badge>
<a href="#pablo">
<h2 className={classes.cardTitleWhite}>
Men{"'"}s Sneakers
</h2>
</a>
</CardBody>
</Card>
</GridItem>
</GridContainer>
</GridItem>
<GridItem
xs={12}
sm={12}
md={2}
className={classes.gridItem}
>
<h4 className={classes.title}>Stats</h4>
<ul className={classes.listUnstyled}>
<li>
<b>60</b> Products
</li>
<li>
<b>4</b> Collections
</li>
<li>
<b>331</b> Influencers
</li>
<li>
<b>1.2K</b> Likes
</li>
</ul>
<hr />
<h4 className={classes.title}>About this work</h4>
<p className={classes.description}>
French luxury footwear and fashion. The footwear has
incorporated shiny, red-lacquered soles that have
become his signature.
</p>
<hr />
<h4 className={classes.title}>Focus</h4>
<Badge color="primary">Footwear</Badge>
<Badge color="rose">Luxury</Badge>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Connections",
tabIcon: People,
tabContent: (
<div>
<GridContainer justify="center">
<GridItem
xs={12}
sm={12}
md={5}
className={classes.gridItem}
>
<Card profile plain className={classes.card}>
<GridContainer>
<GridItem xs={12} sm={12} md={5}>
<CardHeader image plain>
<a href="#pablo">
<img src={avatar} alt="..." />
</a>
<div
className={classes.coloredShadow}
style={{
backgroundImage: "url(" + avatar + ")",
opacity: "1",
}}
/>
</CardHeader>
</GridItem>
<GridItem xs={12} sm={12} md={7}>
<CardBody plain>
<h4 className={classes.cardTitle}>
Gigi Hadid
</h4>
<Muted>
<h6>MODEL</h6>
</Muted>
<p className={classes.description}>
Don{"'"}t be scared of the truth because we
need to restart the human foundation in
truth...
</p>
</CardBody>
</GridItem>
</GridContainer>
</Card>
</GridItem>
<GridItem
xs={12}
sm={12}
md={5}
className={classes.gridItem}
>
<Card profile plain className={classes.card}>
<GridContainer>
<GridItem xs={12} sm={12} md={5}>
<CardHeader image plain>
<a href="#pablo">
<img src={marc} alt="..." />
</a>
<div
className={classes.coloredShadow}
style={{
backgroundImage: "url(" + marc + ")",
opacity: "1",
}}
/>
</CardHeader>
</GridItem>
<GridItem xs={12} sm={12} md={7}>
<CardBody plain>
<h4 className={classes.cardTitle}>
Marc Jacobs
</h4>
<Muted>
<h6>DESIGNER</h6>
</Muted>
<p className={classes.description}>
Don{"'"}t be scared of the truth because we
need to restart the human foundation in
truth...
</p>
</CardBody>
</GridItem>
</GridContainer>
</Card>
</GridItem>
</GridContainer>
<GridContainer justify="center">
<GridItem
xs={12}
sm={12}
md={5}
className={classes.gridItem}
>
<Card profile plain className={classes.card}>
<GridContainer>
<GridItem xs={12} sm={12} md={5}>
<CardHeader image plain>
<a href="#pablo">
<img src={kendall} alt="..." />
</a>
<div
className={classes.coloredShadow}
style={{
backgroundImage: "url(" + kendall + ")",
opacity: "1",
}}
/>
</CardHeader>
</GridItem>
<GridItem xs={12} sm={12} md={7}>
<CardBody plain>
<h4 className={classes.cardTitle}>
Kendall Jenner
</h4>
<Muted>
<h6>MODEL</h6>
</Muted>
<p className={classes.description}>
I love you like Kanye loves Kanye. Don
{"'"}t be scared of the truth.
</p>
</CardBody>
</GridItem>
</GridContainer>
</Card>
</GridItem>
<GridItem
xs={12}
sm={12}
md={5}
className={classes.gridItem}
>
<Card profile plain className={classes.card}>
<GridContainer>
<GridItem xs={12} sm={12} md={5}>
<CardHeader image plain>
<a href="#pablo">
<img src={cardProfile2Square} alt="..." />
</a>
<div
className={classes.coloredShadow}
style={{
backgroundImage:
"url(" + cardProfile2Square + ")",
opacity: "1",
}}
/>
</CardHeader>
</GridItem>
<GridItem xs={12} sm={12} md={7}>
<CardBody plain>
<h4 className={classes.cardTitle}>
George West
</h4>
<Muted>
<h6>MODEL/DJ</h6>
</Muted>
<p className={classes.description}>
I love you like Kanye loves Kanye.
</p>
</CardBody>
</GridItem>
</GridContainer>
</Card>
</GridItem>
</GridContainer>
</div>
),
},
{
tabButton: "Media",
tabIcon: Camera,
tabContent: (
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={3}>
<img
alt="..."
src={mariyaGeorgieva}
className={navImageClasses}
/>
<img
alt="..."
src={clemOnojegaw}
className={navImageClasses}
/>
</GridItem>
<GridItem xs={12} sm={12} md={3}>
<img
alt="..."
src={clemOnojeghuo}
className={navImageClasses}
/>
<img
alt="..."
src={oluEletu}
className={navImageClasses}
/>
<img
alt="..."
src={cynthiaDelRio}
className={navImageClasses}
/>
</GridItem>
</GridContainer>
),
},
]}
/>
</div>
<Clearfix />
</div>
</div>
- Bottom
- 페이지 구성의 하단 부분입니다. 이 부분 역시 고정되는 영역이라 고정된 코드를 기재하고 앞으로 설명하지 않고 그대로 작성한 코드를 복사&붙여넣기로 사용하도록 하겠습니다. 코드는 아래와 같고 내용을 본인의 내용에 맞게 바꾸시면 됩니다. 💪💪
<Footer
content={
<div>
<div className={classes.left}>
<List className={classes.list}>
<ListItem className={classes.inlineBlock}>
<a
href="/"
//target="_blank"
className={classes.block}
>
LINGSSOFT
</a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a
href="/about-us"
//target="_blank"
className={classes.block}
>
About us
</a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a href="/" className={classes.block}>
Privacy
</a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a
href="/"
target="_blank"
className={classes.block}
>
Licenses
</a>
</ListItem>
</List>
</div>
<div className={classes.right}>
© {1900 + new Date().getYear()} LINGSSOFT Co.,Ltd.{" "}
All rights Reserved.{" "}
<Favorite className={classes.icon} />
</div>
</div>
}
/>
태그는 <Footer> 태그로 사용합니다. function SolutionPage안에 내용을 넣어서 화면에 잘 표시 되는지 확인합니다. 작동이 되더라도 뭔가 어색한 부분이 있을텐데요. 어떤 이유에서 그렇게 되는지 코드를 천천히 살펴보도록 하겠습니다.
*** 추후 내용 작성 예정! 시간이 정말 바람과 같습니다. ^^
*** 템플릿 살펴보기 글에 heroku API 내용 주말에 업뎃하겠습니다. <-- 미정입니다.
*** 페이지 골격 글이기 때문에 1,2,3번 부분은 계속하여 나오게 됩니다.
*** 골격이 완성된 후에는 히스토리를 통하여 추가 업데이트 하겠습니다. 💪
여기까지 페이지 개발 - 솔루션 과정이 끝났습니다. 코드 작성이 들어가며 글이 점점 길어지고 있습니다. 앞으로 더 길어질 듯 싶습니다. react에 대한 기본적인 개념도 꿀팁 형태로 작성해 보도록 하겠습니다.