목록React (24)
한바다
☑️ 리액트에서 삭제버튼을 누르니 '405 Method Not Allowed' 오류가 나왔다[오류화면]ERRORRequest failed with status code 405AxiosError: Request failed with status code 405 at settle (http://localhost:3000/static/js/bundle.js:43409:12) at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:42075:66) at Axios.request (http://localhost:3000/static/js/bundle.js:42562:41) at async deleteUser (http:/..
☑️ 백엔드와 프론트 앤드의 연결오늘은 새로접해본 MySQL(이전에는 오라클사용) + 스프링부트(gradle) + 리액트로유저정보 불러오기(select) 와 유저정보 입력하기(insert)를 화면에 구현해 보았다. 🔵 MySQl 작성 처음 사용해보는 MySQL이다. 저번에 사용했던 오라클보다는 구문이 많이 단축되어 있고 가볍다고 한다! - AUTO_INCREMENT는 Oracle 시퀀스 NextVal 자동으로 숫자값 증가하게 해주는 구문이다 - 만약에 테이블이 존재하지 않으면 테이블 생성 : IF NOT EXISTS🔵 스프링부트[나뭇닢 모양 하단에 아래 세개의 환경설정 땅땅!!]- src/main/resource 하단에 환경설정(application.properties/Config.pro..
✅ 'useState'는 리액트 훅(Hook) 중 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해준다[코드예제]import React, {useState} from 'react';const Mycomponent = () => { const [const,setConst] =useState(0); return( 현재 카운트 : {count} setCount(count +1)}>카운트 증가 ); };[코드 실행 시 오류 발생]Compiled with problems:×ERROR in ./src/component/R07_State2.jsModule build failed (from ./node_modules/babel-loader/lib/index..
☑️ YarnYarn은 Facebook에서 개발한 패키지 관리자npm의 문제점을 보완하기 위해 개발됨병렬 설치와 더 나은 캐시 시스템 제공빠른 설치 속도 제공🔸 Yarn 주요명령어yarn init : 새로운 Yarn 프로젝트 초기화yarn add : 패키지설치 vs npm iyarn upgrade : 패키지 업데이트yarn remove : 패키지 제거개발서버 시작 : yarn start vs npm (run) start앱설치 : yarn create react-app vs npx create-react-app프로덕션용 빌드 생성 : yarn build vs npm run build🔸 설치 방법https://classic.yarnpkg.com/lang/en..
☑️리액트 폴더 설정폴더 경로를 제대로 지정해 주지 않으면 아래와 같은 오류가 발생한다.- 폴더 아래 폴더 명 표기 하지 않아 발생한 오류Module not found: Error: Can't resolve './component/Header' ===> 에러가 발생한 파일 위치 App.js에서 해당 파일 위치 찾을 수 없음이라는 에러 발생in 'C:\Users\user1\react-workspace\my-simple-website\src' ERROR in ./src/App.js 9:0-40 ===> 에러가 발생한 파일 위치▶ 에러를 해결하려면 폴더 위치를 잘 파악 후 component폴더 아래 layout 폴더아래 Header.js가 있다는 것으로 수정해준다import Header from '..
☑️ 리액트 와 스프링부트 의 연동 - 깃허브에 'springboot-react' 레포지토리를 생성한다. - C:\Users\user1 경로에 'Spring-React-Workspace' 폴더를 생성한다 - 해당폴더 주소에 'cmd'를 입력한다.( 여기서 깃허브와 해당폴더를 연결한다) git init -> git 허브에 생성된 레포지토리를 입력한다 보통 주소는 'https://github.com/jinhwa2/springboot-react.git' 이다. => 이것이 바로 깃허브 레포지토리( 'springboot-react') 와 C:\Users\user1 경로에 'Spring-React-Workspace' 폴더를 연동해준다, 주소가 동일한지는 config에서 확인이 가능하다 - ..