01_stylish-portfolio easy_Blog Thema(블로그 테마)

Spring Boot

01_stylish-portfolio easy_Blog Thema(블로그 테마)

DEVELOPERS_Ivan 2023. 10. 31. 14:47

# 설치 패키지 
# 1) 메뉴 라이브러리 설치
npm i react-router-dom
npm i @types/react-router-dom

# 2) 벡엔드 연동 라이브러리 설치
npm i axios

# 3) pre css 컴파일러 : sass
npm i sass

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

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

# 6) npm i wowjs : npm 설치, GNU GPL 라이선스 v3
# npm i wowjs

# 6-1) import { WOW } from "wowjs"; import 하기
# import { WOW } from "wowjs";

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

scripts.js
// C:\Work\08_Pilot_Project\01_Blog\01_JPA\01_easy_thema\01_stylish-portfolio\frontend-typescript\src\assets\js\scripts.js

Home.tsx
// C:\Work\08_Pilot_Project\01_Blog\01_JPA\01_easy_thema\01_stylish-portfolio\frontend-typescript\src\pages\Home.tsx : rfce

useEffect  import : alt+Enter 로 업데이트하기,  styles.css import : react 의 최고 부모 컴포넌트 (App.tsx)

원본 index.html 에 있는 <body id="page-top"> 들고 home.tsx에 넣기 body -> div class -> className으로 수정 주석 수정 맽 밑에 js두개 없애기

styles.css
C:\Work\08_Pilot_Project\01_Blog\01_JPA\01_easy_thema\01_stylish-portfolio\frontend-typescript\src\assets\css\styles.css

img/bg-masthead.jpg URL 경로 오류 ../assets/img/bg-masthead.jpg => ..//img/bg-masthead.jpg 경로 수정

index.html
C:\Work\08_Pilot_Project\01_Blog\01_JPA\01_easy_thema\01_stylish-portfolio\frontend-typescript\public\index.html

햄버거 메뉴 아이콘 삽입 index.html head 쪽 css 링크 걸기

    <!-- TODO : Font Awesome icons (free version)-->
    <script
      src="https://use.fontawesome.com/releases/v6.1.0/js/all.js"
      crossorigin="anonymous"
    ></script>
    <!-- TODO : Simple line icons-->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css"
      rel="stylesheet"
    />
    <!-- TODO : Google fonts-->
    <link
      href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic"
      rel="stylesheet"
      type="text/css"
    />

저작자표시 비영리 동일조건 (새창열림)