01_tour_Blog Thema(블로그 테마) 수정 후 & BackEnd(백앤드), 여러 페이지 연동

테마 선정

https://themewagon.com/themes/free-bootstrap-5-travel-agency-website-template-tour/

---

npx create-react-app frontend-typescript --template typescript

C:\Work\08_Pilot_Project\01_Blog\01_JPA\03_high_thema\01_tour

README.md
패키지 설치 목록

# 1) 패키지 설치 목록
# 1-1) react-router-dom : 메뉴 라이브러리
npm i react-router-dom
# 1-2) axios            : 벡엔드 연동 라이브러리
npm i axios
# 1-5) node-sass        : css precompiler
npm i sass

# 2) Material Page component 업그레이드 
# 과거 v4 -> v5 변경 설치
npm install @mui/material @emotion/react @emotion/styled

# 2-1) 소스에서 임포트 사용법 : <Pagination />
import Pagination from '@mui/material/Pagination';

# 3) npm install typed.js  : npm 설치
npm install typed.js

# 3-1) import 방법
import Typed from "typed.js";

# 4) npm i aos 설치
npm i aos
npm i @types/aos



# * 외부 라이브러리 타입이 없을 경우 처리 : 타입 설정
# 1) tsconfig.json 파일 - compilerOptions 속성에 아래 추가 : 프로젝트시작위치/types - 이 위치에 타입을 인식하게 하는 경로 설정
"typeRoots": ["./types", "./node_modules/@types"], // 보통 types 폴더를 만들어 타입 정의
# 2) types/외부라이브러리명/index.d.ts 파일 생성 후 아래 추가
declare module '외부라이브러리명';

라이센스

license.txt

0.00MB

 

블로그 테마 선정부터 환경 세팅까지는 이전 블로그 보기

[개인메모(설치환경)] - 01_proman_Blog Thema(블로그 테마) 수정 후 & BackEnd(백앤드) 연동

---

 

index.html 
<!-- C:\Work\08_Pilot_Project\01_Blog\01_JPA\03_high_thema\01_tour\frontend-typescript\public\index.html -->
Bootstrap CSS 옮기기
js 라이브러리 및 스크립트 파일 옮기기

원본 => public => SRC 붙여넣기

개발자가 직접 코딩 js : 파일명 : scripts.js => src/assets/js 이관 후 수정하기

App.tsx
/* C:\Work\08_Pilot_Project\01_Blog\01_JPA\03_high_thema\01_tour\frontend-typescript\src\App.tsx */
머리말, 본문, 꼬리말 띄우기 테스트

---