리액트7 [JPA] Creative-stylish-portfolio (블로그 테마) 연습 예제 stylish-portfolio easy_thema Blog 연습 예제 https://startbootstrap.com/theme/creative 기본 설정 # 설치 패키지 # 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/mater.. 2023. 11. 3. [JPA] 프론트엔드 (02_SimpleDMS_Page) 반응형 게시판 플러그인 설치 CamelCase 단축키 (shift + alt + u) 프론트 ReplyBoardList.tsx -> app.tsx -> IReplyBoard.ts(벡엔드의 schema.sql 폴더 참고) -> ReplyBoardService.ts ReplyBoardList.tsx // ReplyBoardList.tsx : rfce import React, { useEffect, useState } from "react"; import TitleCom from "../../../components/common/TitleCom"; import { Link } from "react-router-dom"; import IReplyBoard from "../../../types/normal/IReplyBoard.. 2023. 11. 1. [JPA] Pilot Project 2 https://startbootstrap.com/ 무료 템플릿 다운 사용한 툴 // # 설치 패키지 # 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) typescript jquer.. 2023. 10. 31. [React] Props 복습 https://shins99.tistory.com/68 [React] export default 복습 https://shins99.tistory.com/67 [React] export와 import 복습 https://shins99.tistory.com/66 [React] 컴포넌트(component) 복습 https://shins99.tistory.com/65 [React] 엘리먼트(element) 복습 https://shins99.tistory.com/63 [React] JSX 문 shins99.tistory.com Props props(properties) - props는 함수에서 인수(argument)의 개념과 비슷하게 이해가능 - 컴포넌트에 데이터를 전달하고자 할 때 사용 (전달된 값은 변수.. 2023. 9. 6. [React] 컴포넌트(component) 복습 https://shins99.tistory.com/65 [React] 엘리먼트(element) 복습 https://shins99.tistory.com/63 [React] JSX 문법 복습 https://shins99.tistory.com/62 [React] JSX (JavaScript XML) 복습 https://shins99.tistory.com/61 [React] React 란? React란? - 사용자 인터페이스(UI)를 만들기 위해 사용되는 shins99.tistory.com 컴포넌트(component) - React에서 컴포넌트란 자바스크립트 함수의 개념과 비슷하게 이해 - React에서는 애플리케이션의 UI를 설계할 때 사용자가 볼 수 있는 화면을 여러 개의 컴포넌트로 나누어 구성함 (각.. 2023. 9. 3. [React] JSX (JavaScript XML) 복습 https://shins99.tistory.com/61 [React] React 란? React란? - 사용자 인터페이스(UI)를 만들기 위해 사용되는 자바스크립트 라이브러리 - 싱글 페이지 애플리케이션(Single Page Application, SPA) 개발에 주로 사용 - Virtual DOM과 JSX라는 독특한 개념을 사용 shins99.tistory.com JSX(JavaScript XML) 란? - 자바스크립트를 확장한 문법 - React에서는 UI를 어떻게 표현해야 하는지를 설명하기 위해 React와 함께 사용할 것을 권장 장점 : - JSX를 사용하면 자바스크립트 코드 내에서도 HTML 코드처럼 UI를 바로 표현 가능 - UI 관련 작업을 할 때 좀 더 직관적이고 용이한 개발이 가능 .. 2023. 8. 30. 이전 1 2 다음