[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명을 HistoryPage라 작성하고 Router의 Switch테그에 path 는 /history-page, component는 HistoryPage로 작성합니다. 이후 사이트안에서 HistoryPage를 사용하면 작성한 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";

import christian from "assets/img/faces/christian.jpg";

import oluEletu from "assets/img/examples/olu-eletu.jpg";

import clemOnojeghuo from "assets/img/examples/clem-onojeghuo.jpg";

import cynthiaDelRio from "assets/img/examples/cynthia-del-rio.jpg";

import mariyaGeorgieva from "assets/img/examples/mariya-georgieva.jpg";

import clemOnojegaw from "assets/img/examples/clem-onojegaw.jpg";

import darrenColeshill from "assets/img/examples/darren-coleshill.jpg";

import avatar from "assets/img/faces/avatar.jpg";

import marc from "assets/img/faces/marc.jpg";

import kendall from "assets/img/faces/kendall.jpg";

import cardProfile2Square from "assets/img/faces/card-profile2-square.jpg";

import profilePageStyle from "assets/jss/material-kit-pro-react/views/profilePageStyle.js";

 코드에서 보시는 것처럼 기본적으로 사용했던 header 태그도 위와 같이 header 컴포넌트를 import해서 사용하는 것입니다. core components라해서 header, footer, griditem.....등등 페이지를 만들기 위해 기본적으로 material kit에서 스크립트와 스타일을 작성해 놓은 부분을 쉽게 import해서 사용하기만 하면 됩니다. 아 물론 사용하기 위해서는 어떻게 구성되 있는지 살펴본 후에 가능하겠지요. 천천히 글을 보며 작성하시면서 살펴보시면 익숙해지실 겁니다. import에서 from 뒤에 경로에 실제 컴포넌트 코드가 있으며 앞으로의 글들에서는 코드를 하나씩 살펴보도고 사용을 어떻게 해야되는지 알려드리겠습니다.

• 내용 - 실제로 표시할 내용

export default function CoreValuePage({ ...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
• 솔루션 페이지 글에서 만든 소스를 그대로 사용하도록 합니다. 하단글은 고정된 영역이기 때문에 한부분이 변경되면 삽입된 모든 페이지의 코드를 변경합니다. (물론 개발자의 마음이지만...일반적인 경우) 💪💪

 솔루션 페이지 글에서 작동이 되더라도 뭔가 어색한 부분이 있다고 하였는데 이유는 탬플릿 코드를 그대로 이용하였기 때문입니다. 페이지 글이 모두 게시되면 추가 형태로 하나씩 추가하도록 하겠습니다.

 여기까지 페이지 개발 - 핵심가치 과정이 끝났습니다. 코드 작성이 들어가며 글이 점점 길어지고 있습니다. 앞으로 더 길어질 듯 싶습니다. react에 대한 기본적인 개념도 꿀팁 형태로 작성해 보도록 하겠습니다.

 다른 부분이 있으면 문의하기를 통하여 남겨주세요.

    이전    목록    다음

history

20231007 : 목록 네비게이션 추가