개발 일기

1. 설치 - npm install react-bootstrap bootstrap - package.json에 추가 2. import https://react-bootstrap.netlify.app/docs/getting-started/introduction css부분 사용하고 싶은 component 파일에 import 하 import 'bootstrap/dist/css/bootstrap.min.css'; 3. 경로 추가(router.js) - 부트스트랩 쓰고자 하는 파일은 Create.js - Home의 하위 경로가 아닌 별도 파일로 빼서 Video 등록 폼을 만들 예정 4. component 작업 https://react-bootstrap.netlify.app/docs/getting-started/i..

기본화면에서 음료 목록(home) 출력 후 추가버튼 누를 시 음료명과 설명 추가할 수 있는 폼 추가하기 필요한 기능 크게 구분해보자면 1. 목록 보기 / 목록 화면에서 삭제 버튼 누르면 삭제되는 기능 (Home) 2. 추가 버튼 눌렀을 때 음료명과 설명 input 폼으로 이동하기 (Create) 3. 링크 이동을 위한 BrowserRouter, Routes, Route, Link (App) import 관련 import { BrowserRouter, Routes, Route, Link, useNavigate, } from "react-router-dom"; // NavLink는 Link랑 다르게 active 활성화 됨 import { useState } from "react"; import "./App...

1. axios(서비스 기반 비동기 처리) 설치 - Terminal 에서 npm i axios 설치 2. 연결 경로 지정 - src > api > video.js (api 관리하는 파일 별도로 생성하여 지정) - 위에서 basURL로 지정한 경로는 카테고리 목록 select로 가지고오는 경로임 - 경로 관리하는 파일을 따로 만들어 export 했기 때문에 전역에서 사용 가능 - 카테고리 목록 받아올 component에서 import 후 사용하면 됨 3. Controller에서 CrossOrigin 추가 4. Home.js 에서 목록와서 보여주기 const [categories, setCategories] = useState([]); const categoryAPI = async () => { const ..

App.js import { useState } from "react"; const App = () => { const [counter, setCounter] = useState(0); const setCount = () => { setCounter(counter + 1); }; return ( Total clicks : {counter} Click! ); }; export default App; * point 1. jsx 문법 - document.querySelector().innerHTML 대신 {counter} 2. useState import {useState} from 'react'; const [counter, setCounter] = useState(0); - counter : state에 ..

https://nodejs.org/ko * LTS 버전 다운로드 * https://ko.legacy.reactjs.org/ 리액트 공식문서(한글) CDN 링크 : 리액트 - 자바스크립트 라이브러리라서 * https://create-react-app.dev/ cmd 실행 후 C:\Users\user1>node -v v18.17.1 C:\Users\user1>npm -v 9.6.7 C:\Users\user1>npm install npx -g 경로수정 및 프로젝트 생성 C:\Users\user1>cd D:\front-end-workspace C:\Users\user1>D: D:\front-end-workspace>npx create-react-app 7_jsx 실행 D:\front-end-workspace>c..