React (2) - React로 웹사이트 만들기

React로  웹사이트 만들기

 

*웹페이지 구현이 중심이기 때문에 CSS 파일은 작성 불필요. 복사 붙여넣기 하여 사용.

 

 

Material Icons 가져오는 사이트
https://mui.com/material-ui/material-icons/

 

시작

https://mui.com/material-ui/getting-started/installation/

설치방법 :
> npm install @mui/material @emotion/react @emotion/styled

 

Navbar.js 적용
import MenuIcon from '@mui/icons-material/Menu'    
<MenuIcon  className='menubar'/>   <--  적용할 스타일을 따로 지정한다

라우터에 사용되는 명령어정리 (vs 6버전):
BrowserRouter : 브라우저 History API를 사용해 현재 위치의 URL을 저장해주는 역할
Routes : 자식 route들을 구성하고 있는 단위
Route : path를 통해 URL을 분기시킬 수 있으며 컴포넌트 별로 원하는 url을 지정합니다
Link: 클릭시 지정한 URL로 이동하는 링크를 생성합니다 기존 컴포넌트의 상태값은 없어집니다
📝 그동안 Router에서 사용했던 Switch문은 더이상 사용하지 않습니다

 

 

 

폴더구조

---

├──node_modules               # npm install을 하여 설치된 모듈들이 위치하는 폴더           
│   
├── public                           # static 자원 폴더, 정적 파일들을 위한 폴더
│   
├── src                                # 리액트 소스코드 폴더
│   └── corsConfig.json             # cors 설정 파일

 

 

scr폴더 내부 파일

 

• index.js: React 애플리케이션의 진입점입니다. index.js 파일은 ReactDOM.render() 함수를 사용하여 React 컴포넌트를 실제 DOM에 렌더링하는 역할을 담당합니다. 주로 index.html 파일 내의 root 요소에 해당하는 DOM 노드에 앱을 렌더링합니다.
• App.js: 애플리케이션의 최상위 컴포넌트인 App 컴포넌트를 정의하는 파일입니다. 이 컴포넌트는 애플리케이션의 전체 레이아웃 및 구조를 담당하며, 다른 하위 컴포넌트들을 렌더링하고 상태(state) 및 이벤트 핸들링을 관리하는 역할을 합니다.
• index.css: index.js 파일과 함께 사용되는 CSS 스타일 시트입니다. 이 파일은 전역적으로 적용되는 스타일을 정의하고, 컴포넌트에 적용할 수 있습니다.
• App.css: App.js 파일과 함께 사용되는 CSS 스타일 시트입니다. 이 파일은 App 컴포넌트에 특정한 스타일을 적용하는 데 사용됩니다.
• App.test.js: App 컴포넌트에 대한 테스트를 작성하는 파일입니다. Jest와 같은 테스트 프레임워크를 사용하여 애플리케이션의 테스트를 자동화할 수 있습니다.
• logo.svg: React 애플리케이션의 로고 이미지 파일입니다. 주로 앱의 로고나 아이콘으로 사용됩니다.

 

 

 

 

 

시작하기 

---

 폴더 생성후 터미널에서 [npx create-react-app .]

 

[App.js] 초기설정

function App() {
    return (
    <div className="App">
        Pizza House
    </div>
    );
}

export default App;

 

 

rfce + tab키 --> 컴포넌트 코드프레임 생성 단축키 [reactFunctionExportComponet]

- vscode의 확장프로그램에서 'ES7 React/Redux/React-Native/JS snippets' 설치

import React from 'react'

function App() {
  return (
    <div>App</div>
  )
}

export default App

 

 

 

 - [index.js]에서 import ./index.css;  삭제
 

 

 

[Navbar.js]  -  src 폴더 내에 components 폴더 생성및 Navbar.js 생성

import React from 'react'

function Navbar() {
  return (
    <div className='navbar'>
      <div className="leftSide"></div>
      <div className="rightSide"></div>
    </div>
  )
}
export default Navbar

 

 - https://unsplash.com/ko 에서 샘플이미지를 다운로드하여 src 폴더 내에 assets 폴더에 삽입

assets.zip

3.98MB

 

[ Navbar.js] 왼쪽 로고 삽입

import React from 'react'
import Logo from '../assets/pizzaLogo.jpg'

function Navbar() {
  return (
    <div className='navbar'>
      <div className="leftSide">
        <img src={Logo} />
      </div>
      <div className="rightSide"></div>
    </div>
  )
}
export default Navbar

 

 [App.js ] 코드 변경

import Navbar from './components/Navbar'

function App() {
  return (
    <div className="App">
     <Navbar />
    </div>
  );
}

export default App;

 

 

[Router] 홈페이지 상단 네비게이션bar  생성 (경로에 따라 각각의  페이지를 보여주도록 )

---

 

 - localhost:3000/about 와 같은 경우 경로를 지정하여 다른 페이지를 보여줄때 Router 기능을 이용해야 한다.

 - 보여줄 페이지가 들어가는 폴더를 생성하고 그 안에 해당 페이지를 만들겠습니다

 - React Router Dom의 버전은 v6입니다

 

설치.

npm install react-router-dom

 

 

 

[Home.js]    src -> pages 폴더에 Home.js 생성.  rfce탭키 활용!

import React from 'react'

function Home() {
  return (
    <div>Home page</div>
  )
}

export default Home

 

 

[App.js] 변경

 

import Navbar from './components/Navbar'
import Home from './pages/Home'
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
         <Routes>
            <Route  path="/" element={ <Home />} />
         </Routes>
     </Router>
    </div>
  );
}

export default App;

* 터미널에서 npm start 했는지 확인.

* 사용되는 이미지가 너무 크면  <Route  path="/" element={ <Home />} />    Home.js에서 작성된 문장이 작게 보임.....

 

 

 

 

[Link] 홈페이지 링크 만들기 및 페이지 이동 구현

---

 

Link: 클릭 시 지정한 URL로 이동하는 링크를 생성합니다
Link로 Home, Menu, About, Contact 4개의 메뉴를 만듭니다.

 

 

[Navbar.js] 코드 변경

import React from 'react'
import Logo from '../assets/pizzaLogo.jpg'
import {Link} from 'react-router-dom'

function Navbar() {
  return (
    <div>
       <div className='navbar'>
      <div className="leftSide">
        <img src={Logo} />
      </div>
      <div className="rightSide">
        <Link to="/">Home</Link>
        <Link to="/menu">Menu</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </div>
    </div>
    </div>
  )
}
export default Navbar

 

 - src 폴더 내에 styles 폴더 생성.

 - styles 폴더 안에 Navbar.css 생성.    주의)     해당 css파일을 [ Navbar.js ] 안에 import 해야 합니다.

import '../styles/Navbar.css'

 

 

styles.zip

0.00MB

 

https://mui.com/material-ui/material-icons/ 에 접속해서 왼쪽메뉴 

중 'Getting started' > 'Installation' 를 따라 설치합니다. 

아이콘부분을 찾아 설치합니다.

 

 

npm

npm install @mui/material @emotion/react @emotion/styled

npm install @mui/icons-material

 

 

[Navbar.js]  코드 변경

import React from 'react'
import Logo from '../assets/pizzaLogo.jpg'
import {Link} from 'react-router-dom'
import '../styles/Navbar.css'
import MenuIcon from '@mui/icons-material/Menu';

function Navbar() {
  return (
    <div>
       <div className='navbar'>
      <div className="leftSide">
        <img src={Logo} />
      </div>
      <div className="rightSide">
        <Link to="/">Home</Link>
        <Link to="/menu">Menu</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
        <button> <MenuIcon /> </button>
      </div>
    </div>
    </div>
  )
}
export default Navbar

 

 

 

 

 

 

홈페이지 축소된 상태에서 메뉴란 클릭하면 세부 항목 표시되도록 만들기

---

[Navbar.js] 코드 변경

import React ,{useState} from 'react'
import Logo from '../assets/pizzaLogo.jpg'
import {Link} from 'react-router-dom'
import '../styles/Navbar.css'
import MenuIcon from '@mui/icons-material/Menu';

function Navbar() {
    const [openLinks ,setOpenLinks] =useState(false)
    const toggleNavbar =() =>{
        setOpenLinks(!openLinks);
    }
    return (
        <div>
            <div className='navbar'>
                <div className="leftSide" id={openLinks ? "open":"close"}>
                    <img src={Logo}/>
                    <div className ="hiddenLinks">
                        <Link to="/">Home</Link>
                        <Link to="/menu">Menu</Link>
                        <Link to="/about">About</Link>
                        <Link to="/contact">Contact</Link>
                    </div>
                </div>
                <div className="rightSide">
                    <Link to="/">Home</Link>
                    <Link to="/menu">Menu</Link>
                    <Link to="/about">About</Link>
                    <Link to="/contact">Contact</Link>
                    <button onClick={toggleNavbar}>
                        <MenuIcon/>
                    </button>
                </div>
            </div>
        </div>
    )
}
export default Navbar

 

 

 

홈페이지 메인에 문구 수정및 주문버튼 생성& 배경이미지 삽입

---

 

styles 폴더에 Home.css 파일 생성

 

Home.css

0.00MB

 

 

[home.js] 코드 변경

import React from 'react'
import {Link} from "react-router-dom"
import BannerImage from "../assets/pizza_background.jpg"
import "../styles/Home.css"
function Home() {
    return (
        <div className="home">
            <div className="headerContainer" style={{backgroundImage: `url(${BannerImage})`}}>
                <h1>
                    Pizza House
                </h1>
                <p>Taste the Finest Pizza</p>
                <Link to="/menu">
                    <button>ORDER NOW</button>
                </Link>
            </div>
        </div>
    )
}

export default Home

*로고와 배경을 따로 쓰려면 배경이미지로 사용할 pizza_background 사진이 하나더 필요함.

 

 

 

 

홈페이지 하단에 바닥글 (저작권, 소셜미디어 로고 )추가

---

[App.css] 코드 변경

 

App.css

0.00MB

components 폴더에 Footer.js 파일 생성

*Footer.css 파일 import 확인!

import React from 'react'
import InstagramIcon from '@mui/icons-material/Instagram';
import TwitterIcon from '@mui/icons-material/Twitter';
import FacebookIcon from '@mui/icons-material/Facebook';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import '../styles/Footer.css'

function Footer() {
  return (
    <div className="footer">
      <div className="socialMedia">
        <InstagramIcon /> <TwitterIcon /> <FacebookIcon />  <LinkedInIcon />
      </div>
      <p> &copy; 2023 PizzaHouse.com</p>
    </div>
  )
}

export default Footer

 

 

[App.js] 코드 변경

 

import './App.css';
import Navbar from './components/Navbar'
import Footer from './components/Footer'
import Home from './pages/Home'
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
         <Routes>
            <Route  path="/" element={ <Home />} />
         </Routes>
         <Footer />
     </Router>
    </div>
  );
}

export default App;

 

styles 폴더에 Footer.css 파일 생성.

 

Footer.css

0.00MB

 

 

홈페이지 전체에 피자 이미지 채우기

---

 

.........
function Home() {
    return (
        <div className="home" style={{backgroundImage: `url(${BannerImage})`}}>
            <div className="headerContainer" >
                <h1>
............

 

 

 

메뉴 페이지 만들기

---

pages 폴더에 Menu.js 생성

[Menu.js]

import React from 'react'
import {MenuList} from '../helpers/MenuList'
import MenuItem from '../components/MenuItem'
import "../styles/Menu.css"
function Menu() {
    return (
        <div className="menu">
            <h1 classname="menuTitle">Our Menu</h1>
            <div className='menuList'>{
                    MenuList.map((menuItem, key) => {
                        return <MenuItem key ={key} image={menuItem.image} name={menuItem.name} price={menuItem.price}/>
                    })
                }</div>
        </div>
    )
}

export default Menu

src 폴더에 helpers 폴더 생성후 MenuList.js 생성

[MenuList.js ]

import Pepperoni from "../assets/pepperoni.jpg";
import Margherita from "../assets/margherita.jpg";
import PedroTechSpecial from "../assets/pedrotechspecial.jpg";
import Vegan from "../assets/vegan.jpg";
import Pineapple from "../assets/pineapple.jpg";
import Expensive from "../assets/expensive.jpg";

export const MenuList = [
  {
    name: "Pepperoni Pizza",
    image: Pepperoni,
    price: 15.99,
  },
  {
    name: "Margherita Pizza",
    image: Margherita,
    price: 11.99,
  },
  {
    name: "PedroTech Special Pizza",
    image: PedroTechSpecial,
    price: 256.53,
  },
  {
    name: "Vegan Pizza",
    image: Vegan,
    price: 17.99,
  },
  {
    name: "Pineapple Pizza",
    image: Pineapple,
    price: 4.99,
  },
  {
    name: "Very Expensive Pizza",
    image: Expensive,
    price: 1997.99,
  },
];

assets.zip

1.03MB

 

 

[App.js] 코드 변경

import './App.css';
import Navbar from './components/Navbar'
import Footer from './components/Footer'
import Home from './pages/Home'
import Menu from './pages/Menu'
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
         <Routes>
            <Route  path="/" element={ <Home />} />
            <Route  path="/menu" element={ <Menu />} />
         </Routes>
         <Footer />
     </Router>
    </div>
  );
}

export default App;

 

components 폴더에 menuItem.js 파일 생성.

import React from 'react'

function MenuItem({image ,name ,price}) {
  return (
    <div className='menuItem' >
   <div style={{backgroundImage: `url(${image})`}}></div>   
   <h1>{name}</h1>
   <p>${price}</p>
    </div>
  )
}

export default MenuItem

 

styles 폴더에 Menu.css 파일 생성

Menu.css

0.00MB

 

 

About 페이지 만들기

---

pages 폴더에 About.js 파일 생성

import React from "react";
import MultiplePizzas from "../assets/multiplePizzas.jpeg";
import "../styles/About.css";
function About() {
  return (
    <div className="about">
      <div
        className="aboutTop"
        style={{ backgroundImage: `url(${MultiplePizzas})` }}
      ></div>
      <div className="aboutBottom">
        <h1> ABOUT US</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
          mollitia, molestiae quas vel sint commodi repudiandae consequuntur
          voluptatum laborum numquam blanditiis harum quisquam eius sed odit
          fugiat iusto fuga praesentium optio, eaque rerum! Provident similique
          accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut
          molestias architecto voluptate aliquam nihil, eveniet aliquid culpa
          officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum
          nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque
          error repudiandae fuga? Ipsa laudantium molestias eos sapiente
          officiis modi at sunt excepturi expedita sint? Sed quibusdam
          recusandae alias error harum maxime adipisci amet laborum.
          Perspiciatis minima nesciunt dolorem! Officiis iure rerum voluptates a
          cumque velit
        </p>
      </div>
    </div>
  );
}

export default About;

multiplePizzas.jpeg

0.43MB

 

[App.js] 코드 변경

......
import About from './pages/About';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

.....
         <Routes>
            <Route  path="/" element={ <Home />} />
            <Route  path="/menu" element={ <Menu />} />
            <Route  path="/about" element={ <About />} />
         </Routes>
.........

 

styles 폴더에 About.css 파일 생성

 

About.css

0.00MB

 

 

contact 페이지 만들기

---

pages 폴더에 Contact.js 파일 생성.

import React from "react";
import PizzaLeft from "../assets/pizzaLeft.jpg";
import "../styles/Contact.css";

function Contact() {
  return (
    <div className="contact">
      <div
        className="leftSide"
        style={{ backgroundImage: `url(${PizzaLeft})` }}
      ></div>
      <div className="rightSide">
        <h1> Contact Us</h1>

        <form id="contact-form" method="POST">
          <label htmlFor="name">Full Name</label>
          <input name="name" placeholder="Enter full name..." type="text" />
          <label htmlFor="email">Email</label>
          <input name="email" placeholder="Enter email..." type="email" />
          <label htmlFor="message">Message</label>
          <textarea
            rows="6"
            placeholder="Enter message..."
            name="message"
            required
          ></textarea>
          <button type="submit"> Send Message</button>
        </form>
      </div>
    </div>
  );
}

export default Contact;

 

 

 

pizzaLeft.jpg

1.69MB

 

 

[App.js] 코드 변경

 

..................
import About from './pages/About';
import Contact from './pages/Contact';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

..............
         <Routes>
            <Route  path="/" element={ <Home />} />
            <Route  path="/menu" element={ <Menu />} />
            <Route  path="/about" element={ <About />} />
            <Route  path="/contact" element={ <Contact />} />
         </Routes>
 .............

 

styles 폴더에 Contact.css 파일 생성

 

Contact.css

0.00MB

 

 

출처

---

https://github.com/machadop1407/react-website-tutorial

GitHub - machadop1407/react-website-tutorial

 

https://www.youtube.com/watch?v=QwarZBtFoFA&t=2906s

GitHub - machadop1407/react-website-tutorial