티스토리 뷰
Reference
이 프로젝트는 코딩애플 리액트 강의를 참고하여 제작되었습니다.
https://codingapple.com/course/react-basic/
React 리액트 기초부터 쇼핑몰 프로젝트까지!
Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때문에 React, Vue만 사
codingapple.com
Final build
https://stackblitz.com/edit/vitejs-vite-w8s3td76?file=src%2FApp.jsx
coding-apple-ecommerce-project - StackBlitz
Next generation frontend tooling. It's fast!
stackblitz.com
New project building
https://lshjju.tistory.com/104
StackBlitz web editor - 스택블리츠 웹 에디터
스택블리츠로 새 프로젝트 생성하기 https://stackblitz.com/ 로그인 방법 선택 대쉬보드에서 new project + 버튼 - 탭 모달 - frontend 탭 - 탭react javascript - 탭 바이트 리액트가 생성됩니다.프로젝트 생성 완
lshjju.tistory.com
Data
https://github.com/lshjju/data/blob/main/data2.json
data/data2.json at main · lshjju/data
Contribute to lshjju/data development by creating an account on GitHub.
github.com
이 프로젝트에서는 json파일을 데이터로 사용합니다.
프로젝트에 사용할 json 파일입니다.
이 파일을 본인의 깃허브에 업로드 하세요.
https://lshjju.tistory.com/178
github CDN json data raw file
깃허브에 json 데이터를 CDN으로 사용하는 방법입니다. 깃허브에 json 데이터 파일을 업로드 합니다. ex[ { "id" : 3, "title" : "Flowey", "content" : "only 5 inches", "price" : 120000 }, { "id" : 4, "title" : "Baby shoes", "cont
lshjju.tistory.com
데이터는 로우파일로 사용해야 합니다.
매뉴얼대로 로우파일을 세팅 합니다.
CDN img
https://github.com/lshjju/cdn/tree/main/ca-shop
cdn/ca-shop at main · lshjju/cdn
Contribute to lshjju/cdn development by creating an account on GitHub.
github.com
이 프로젝트의 이미지 경로는 CDN을 사용할 것입니다.프로젝트에 사용할 img 파일입니다.
이 파일을 본인의 깃허브에 업로드 하세요.
압축파일 다운로드 방법
- https://github.com/lshjju/cdn/tree/main
이 패스로 가서 우측 코드 버튼 탭하면 압축파일 다운로드 버튼이 보입니다.
그걸 다운받아서 사용하면 편리 합니다.
https://lshjju.tistory.com/170
github CDN image absoute path
CDN 이미지를 깃허브에서 사용하고 싶다면 이렇게 하면 됩니다. 깃허브에 CDN 디렉토리를 하나 만듭니다.디렉토리에 이미지를 업로드 합니다.이미지를 엽니다.우클릭 - 새탭에서 이미지 열기우클
lshjju.tistory.com
Bootstarp install
bootstrap install setting manual
Bootstrap? Bootstrap은 Twitter 개발자들이 만들었습니다.성능이 좋아서 현재도 지속적으로 관리되고 있는 오픈소스 프로젝트입니다. 프로젝트 진행 시 팀에 디자이너가 없는 경우에도 개발자가 괜찮
lshjju.tistory.com
유아이이 디자인 경험이 없는 개발자를 위해 본 프로젝트는 부트스트랩을 사용합니다.
부트스트랩만 있다면 유아이디자인 스트레스에서 자유로워 집니다.
위 매뉴얼에서
For React install
부분을 보고 설치 합니다.
설치 후 펑션 앱에서 버튼 하나 만들어서 테스트 추천 합니다.
본 프로젝트는 모바일온리 유아이를 세팅 합니다.
Completion
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"
></script>
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
root/index.html
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
function App() {
return (
<div className="container">
<button className="btn btn-primary">클릭하세요</button>
</div>
);
}
export default App;
root/src/App.jsx
TEST 실행
버튼이 잘 출력 되는지 체크 합니다.
이 버튼이 잘 보인다면 부트스트랩이 설치에 성공한 것입니다.
축하 합니다!
React.js Router DOM
https://lshjju.tistory.com/135
React.js Router DOM - 리액트 라우터 돔
React Router DOM의 주요 기능 React는 '단일 페이지 애플리케이션(SPA)'을 만드는 데 주로 사용됩니다. SPA는 기본적으로 HTML 파일 하나만을 로드한 뒤, JavaScript를 통해 화면의 내용을 동적으로 바꾸는
lshjju.tistory.com
리액트에서 네브와 링크를 만들려면 라우터돔이 당연히 필요합니다.
맨 아래에 보면 터미널 설치 코드가 있습니다.
그 매뉴얼대로 리액트 라우터 돔 설치 합니다.
브라우저라우터와 네브 유아이 설치 합니다.
import { BrowserRouter } from "react-router-dom";
main.jsx
리액트라우터 돔 설치 합니다.
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>
앱을 브라우저라우터로 래핑합니다.
이제부터 앱은 브라우저라우터를 사용할 수 있습니다.
<div className="App">
<button className="btn btn-primary">클릭하세요</button>
</div>
클래스 네임 변경 합니다.
import { Link } from "react-router-dom";
링크 임포트 합니다.
https://getbootstrap.com/docs/5.3/components/navbar/#nav
Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse
function App() {
return (
<div className="App">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">
Disabled
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
);
}
이제부터 부트스트랩 유아이를 설치할 것입니다.
이 과정은 어렵지 않습니다.
하지만 약간 지루하고 복잡합니다.
케이참을성으로 설치해 보겠습니다.
위 유알엘에 있는 부트스트랩 네브를 위처럼 페이스트 합니다.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<Link to="/" class="nav-link active" aria-current="page">
Home
</Link>
<Link to="/" class="nav-link active" aria-current="page">
Detail
</Link>
<Link to="/" class="nav-link active" aria-current="page">
about
</Link>
</div>
</div>
</div>
</nav>
페이스트 했다면 그 다음 해야 할 일은 이 프로젝트에 맞게 코드를 수정하는 일입니다.
코드를 프로젝트에 맞게 수정 합니다.
블로거가 작성한 위 코드를 참고해서 기존 페이스트 코드를 수정해 보겠습니다.
test
네브가 잘 설치되었는지 체크 합니다.
브라우저 넓이에 따라 다른 유아이가 출력 됩니다.
Completion
main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import { BrowserRouter } from 'react-router-dom';
createRoot(document.getElementById('root')).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>
);
App.jsx
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import { Link } from "react-router-dom";
function App() {
return (
<div className="App">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<Link to="/" class="nav-link active" aria-current="page">
Home
</Link>
<Link to="/" class="nav-link active" aria-current="page">
Detail
</Link>
<Link to="/" class="nav-link active" aria-current="page">
about
</Link>
</div>
</div>
</div>
</nav>
</div>
);
}
export default App;
메인/상품/푸터 유아이를 빌딩 합니다.
index.css 코드를 모두 삭제 합니다.
App.jsx
기본 코드 올 삭제 합니다.
위 코드 추가 합니다.
.App {
font-family: sans-serif;
text-align: center;
}
.main-bg {
height: 300px;
background-image: url("https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s-main2.PNG");
background-size: cover;
background-position: center;
}
네브태그 아래에 메인 디브를 추가 합니다.
<div className="main-bg"></div>
https://getbootstrap.com/docs/5.3/utilities/flex/#direction
Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
메인 디브 아래에 부트스트랩 플렉스 박스를 설치 합니다.
<div class="d-flex flex-row mb-3">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
코드를 수정 합니다.
위에 타이틀도 살짝 추가 합니다.
<h1 className="my-5">Nike shop</h1>
<div className="d-flex flex-column mb-3">
<div className="p-2">
<img
src="https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s1.PNG"
width="80%"
/>
<h4 className="my-3">title</h4>
<p>price</p>
</div>
<div className="p-2">
<img
src="https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s2.PNG"
width="80%"
/>
<h4 className="my-3">title</h4>
<p>price</p>
</div>
<div className="p-2">
<img
src="https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s3.PNG"
width="80%"
/>
<h4 className="my-3">title</h4>
<p>price</p>
</div>
</div>
https://getbootstrap.com/docs/5.3/components/card/#header-and-footer
Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
상품 아래에 부트스트랩 푸터를 세팅 합니다.
<div class="card m-5">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">
With supporting text below as a natural lead-in to additional
content.
</p>
<a href="#" class="btn btn-primary">
Go somewhere
</a>
</div>
</div>
코드를 수정 합니다.
마진도 좀 수정 합니다.
test
뷰를 체크 합니다.
Completion
App.css
.App {
font-family: sans-serif;
text-align: center;
}
.main-bg {
height: 300px;
background-image: url("https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s-main2.PNG");
background-size: cover;
background-position: center;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"
></script>
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import { BrowserRouter } from 'react-router-dom';
createRoot(document.getElementById('root')).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>
);
App.jsx
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import { Link } from 'react-router-dom';
function App() {
return (
<div className="App">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<Link to="/" class="nav-link active" aria-current="page">
Home
</Link>
<Link to="/" class="nav-link active" aria-current="page">
Detail
</Link>
<Link to="/" class="nav-link active" aria-current="page">
about
</Link>
</div>
</div>
</div>
</nav>
<div className="main-bg"></div>
<h1 className="my-5">Nike shop</h1>
<div className="d-flex flex-column mb-3">
<div className="p-2">
<img
src="https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s1.PNG"
width="80%"
/>
<h4 className="my-3">title</h4>
<p>price</p>
</div>
<div className="p-2">
<img
src="https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s2.PNG"
width="80%"
/>
<h4 className="my-3">title</h4>
<p>price</p>
</div>
<div className="p-2">
<img
src="https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s3.PNG"
width="80%"
/>
<h4 className="my-3">title</h4>
<p>price</p>
</div>
</div>
<div class="card m-5">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">
With supporting text below as a natural lead-in to additional
content.
</p>
<a href="#" class="btn btn-primary">
Go somewhere
</a>
</div>
</div>
</div>
);
}
export default App;
참고사이트 : ca01
ca01
Reference이 프로젝트는 코딩애플 리액트 강의를 참고하여 제작되었습니다.https://codingapple.com/course/react-basic/ React 리액트 기초부터 쇼핑몰 프로젝트까지! Next.js는 프론트엔드부터 서버까지 만들 수
lshjju.tistory.com
'프로그래밍언어 > 리엑트' 카테고리의 다른 글
| [React] Hash URL (0) | 2026.03.21 |
|---|---|
| [React] 리액트 라우터 돔 (0) | 2026.03.21 |
| [React] 리덕스 툴킷 (0) | 2026.03.08 |
| [React] react-redux (0) | 2026.03.08 |
| [React] useReducer (0) | 2026.03.08 |