기술 블로그

02_tour_Blog Thema(블로그 테마) react 형태로 수정 후 & 드롭다운 메뉴 BackEnd(백앤드), 여러 페이지 연동

테마선정 https://bootstrapmade.com/mentor-free-education-bootstrap-theme npx create-react-app frontend-typescript --template typescript README.md 패키지 설치 목록 더보기 # 설치 패키지 # 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 @emo..

Blog Thema(블로그 테마) 기본 환경 설치

블로그 테마 선정 template typescript cmd 리액트 생성 npx create-react-app frontend-typescript --template typescript src 폴더 생성 후 원본(public 파일들) 복사 붙여넣기 assets - css - js components -common pages services types utils README.md 라이브러리 설치(npm 잘못 설치시 설치 제거 명령어npm uninstall 이름) # 설치 패키지 # 1) 메뉴 라이브러리 설치 npm i react-router-dom npm i @types/react-router-dom # 2) 벡엔드 연동 라이브러리 설치 npm i axios # 3) pre css 컴파일러 : sass n..

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 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 ins..

02_prixima_Blog Thema(블로그 테마) 수정 후 & BackEnd(백앤드) 연동

블로그 테마 선정부터 환경 세팅까지는 이전 블로그 보기 [개인메모(설치환경)] - 01_proman_Blog Thema(블로그 테마) 수정 후 & BackEnd(백앤드) 연동 README.md 설치 패키지 npm 설치 또는 cmd 로 진행하기 더보기 # 설치 패키지 # 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-..

01_proman_Blog Thema(블로그 테마) 수정 후 & BackEnd(백앤드) 연동

https://themewagon.github.io/proman/ ProMan - Personal Portfolio HTML Template Full Name Designer themewagon.github.io 블로그 테마 선정 [개인메모(설치환경)] - 블로그 테마 선정 및 환경 설치 방법 template typescript cmd 리액트 생성 npx create-react-app frontend-typescript --template typescript index.html C:\Work\08_Pilot_Project\01_Blog\01_JPA\02_normal_thema\01_proman\frontend-typescript\public\index.html 외부 라이브러리 설정 더보기 src 폴더 생..

컴포넌트 간에 통신(Props 사용)을 통해 상세 조회 및 삭제 기능

Home.tsx 상세조회 컴포넌트 간에 통신한 상세 조회(props) // C:\Work\08_Pilot_Project\01_Blog\01_JPA\01_easy_thema\02_creative-gh\frontend-typescript\src\pages\Home.tsx 기본키를 저장 할 변수 const [pid, setPid] = useState(0); 화면 바꿔 보여주기 함수 props : 자식쪽으로 함수(handleChange) 전달 return ; else if(viewName === "dept") { // props : 자식쪽으로 변수(dno) 전달 return 더보기 더보기 // C:\Work\08_Pilot_Project\01_Blog\01_JPA\01_easy_thema\01_stylish-p..

Blog Thema(블로그 테마) & BackEnd(백앤드) 연동

폴더 구조 복사해오기 아래 BackEnd 파일 사용하기 C:\Work\07_Si\02_SimpleDMS_Page\frontend-react-new\src\utils\http-common.ts C:\Work\07_Si\02_SimpleDMS_Page\frontend-react-new\src\services\basic C:\Work\07_Si\02_SimpleDMS_Page\frontend-react-new\src\pages\basic(customer, dept) C:\Work\07_Si\02_SimpleDMS_Page\frontend-react-new\src\types\basic C:\Work\07_Si\02_SimpleDMS_Page\frontend-react-new\src\components\commo..

02_creative-gh easy_Blog Thema(블로그 테마) 연습 예제

[분류 전체보기] - 01_stylish-portfolio easy_Blog Thema(블로그 테마) # 설치 패키지 # 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) 소스에서 임포트 사용법 : import Pagination from '@mui/material/Pagination'; # 5) typescrip..