JavaScript/React (5) 썸네일형 리스트형 [React] File Upload 구현하기 ② - 복수 파일 업로드, 썸네일 미리보기, 업로드 된 파일 목록 표시하기 2023.12.20 - [JavaScript/React] - [React] File Upload 구현하기 ① [React] File Upload 구현하기 ① 1. React 프로젝트 생성 2. 코드 작성 1) apiFile.js import axios from "axios"; const baseURL = "http://localhost:8081" const axiosInstance = axios.create({ baseURL, headers:{ 'Content-Type' : 'application/json' } }) export const postFile = async (d 100ke.tistory.com ▶ 이전 포스트에서 실행한 프로젝트에서 추가 구현 1. UploadFile.js import { u.. [React] File Upload 구현하기 ① 2023.12.20 - [Framework/SpringBoot] - [Spring Boot] File Upload 구현하기 ① [Spring Boot] File Upload 구현하기 ① 1. 프로젝트 생성 및 설정 * application.properties server.port=8081 # oracle set spring.datasource.driver-class-name=oracle.jdbc.OracleDriver spring.datasource.url=jdbc:oracle:thin:@localhost:1521/xe spring.datasource.username=(연결할 DB id) spr 100ke.tistory.com ▶ 해당 spring boot 프로젝트의 DB와 연결하여 작업했습니다. 1. .. [React] Router 적용하기 1. 라우터 설치 2. index.js 수정 3. App.js에 적용 App.js 상단에 import {Routes, Route, Link, NavLink} from 'react-router-dom' 적용하여 코드를 작성한다. import './style.scss'; import {Routes, Route, Link, NavLink} from 'react-router-dom' import { useState } from 'react'; // 231121 라우터 실습 function App() { const [isActive, setIsActive] = useState(false) return ( COM home company product community ); } export default App; s.. [React] 231110 - ① 리액트 워크스페이스 지정, ② Component와 state 1. 리액트 워크스페이스 지정 1) 프로젝트 생성할 폴더에서 cmd 실행 > npx create-react-app 2023react > cd 2023react > code . >> 2023react 폴더에서 VS code 실행됨 2) 깃허브에서 2023react 이름으로 repository 생성 3) VS code 위에서 실행했던 VS code 의 터미널에서 다음을 순차 실행 > git init > git add * > git commit -m "first" > git branch -M main > git remote add origin https://github.com/100ke/2023react.git > git push -u origin main 2023.11.10 - [Tools] - [GitHu.. [React] 리액트 개발 환경 구축 1. VS code 터미널 설정 터미널을 실행하면 기본설정이 powershell로 되어있는데 작업의 편의성을 위해 cmd로 변경합니다. 2. Node.js 설치 Node.js (nodejs.org) Node.js nodejs.org node 설치 후 VS code를 재실행 합니다. 3. npm install VS code 에서 터미널 실행하여 cmd에서 다음을 입력합니다. 정상적으로 설치되었다면 다음을 실행하여 'my-app'이라는 이름의 새 react app을 만들어봅니다. 성공 메시지와 함께 'my-app' 이 생성된 것을 확인할 수 있습니다. my-app 위치로 이동한 뒤 npm start를 실행해봅니다. 💻 서버 구동 확인 이전 1 다음
