앱 카드 컨텐츠 구성 로컬 json 데이터 생성 후 배열내의 각 객체들을 반복문으로 출력한다. api/shoes1.json 더보기 [ { "id": 0, "title": "White and Black", "name": "화이트 앤 블랙", "content": "Born in France", "price": 120000, "image": "https://codingapple1.github.io/shop/shoes1.jpg", "qty": 0 }, { "id": 1, "title": "Red Knit", "name": "레드 니트", "content": "Born in Seoul", "price": 110000, "image": "https://codingapple1.github.io/shop/shoes2...

앱 Card 컨텐츠 구성 : 카드 컴포넌트 추가 function Card(props) { return ( 카드 ) } Card 컴포넌트 배치 : 전체 1개의 컨테이너안에 행들로 구성 App.js 더보기 import logo from './logo.svg'; import './App.css'; import { Navbar, NavDropdown, Nav, Container } from 'react-bootstrap'; function App() { return ( {/* NavBar */} React-Bootstrap Home Pricing Action Another action Something Separated link 로그인 회원가입 {/* jumbotron */} Hello, world! This ..

점보트론 코드 영역 참조 https://newbedev.com/jumbotron-react-bootstrap-5-code-example Programming tutorials | Newbedev Checkout new tutorials and guides for programming languages Javascript, Python, Java, Golang, C++, PHP newbedev.com 점보트론 소스코드 영역 App.js에 붙이기 {/* jumbotron */} Hello, world! This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or in..

리액트-부트스트랩 컴포넌트 검색 검색 컴포넌트 : navbar https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 소스코드 복사 후 App.js 에 붙여넣기 App.js 더보기 import logo from './logo.svg'; import './App.css'; import { Navbar, NavDropdown, Nav, Container } from 'react-bootstrap'; function App() { return ( {/* NavBar */} React-Bootstrap Home Pricing Ac..

리액트 부트스트랩 사이트 https://react-bootstrap.github.io/ 리액트-부트스트랩 추가 yarn add react-bootstrap bootstrap@5.1.3 리액트-부트스트랩 CSS 선언 public/index.html 수정 index.html 에서 와 사이에 하단 소스블록 임포트

쇼핑 앱 최종결과 https://ksky216.github.io React App ksky216.github.io 프로젝트에 사용할 기본 폴더 생성 C:/dev/react-web cd react-web/ PWA 프로젝트 (react-shop) 앱 생성 npx create-react-app react-shop --template cra-template-pwa VSCode로 생성된 react-shop 폴더 열기 src/index.js 수정 기존 serviceWorkerRegistration.unregister(); 수정 serviceWorkerRegistration.register(); 실행 yarn start