: 리액트 컴포넌트 [ 라우터(리액트 가상경로) 매핑 ] - 새로고침 X , : HTML DOM [ HTTP GET ] - 새로고침 O , 스프링 ( 시큐리티 인가 )

import { BrowserRouter, Routes, Route, Link } from react-router-dom 컴포넌트형 함수 *첫글자는 대문자 import { useState, useEffect } from 'react' 일반 함수 *첫글자는 소문자 useState - 상태관리 함수 사용방법 1. useState(초기값) 초기값 : 데이터, 객체, 배열, 함수 2. useState() 반환값 배열 : [ (0)초기값, (1)수정함수 ] 3. 사용 const [ 상태변수명 , set상태수정함수명 ] = useState( 초기값 ) const [ login , setLogin ] = useState( null ); - 특징 1. set상태수정함수명(): 사용시 컴포넌트(함수) 재실행 2. 컴포넌..

리액트 실행 : 터미널 [alt + f12] -> npm start localhost:3000 스프링 : appstart 실행 localhost:80 - Failed to load resousce : net::ERR_CONNECTION_REFUSED -> axios 통신 시도했을때 스프링 서버 안켰을때 나오는에러 - Access to XMLHttpRequest at 'http://localhost/member/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-O..

- HTTP 기반의 비동기 통신 함수. Axios ( React 라이브러리 ) Ajax( jquery라이브러리 ) 1. 설치 1. 터미널[ alt + f12 ] 2. 리액트 프로젝트 폴더내 설치 3. npm i axios 2. 컴포넌트에서 axios 사용하기 1. import 파일 상단에 import axios from 'axios' 2. ajax vs axios $ajax({ url: '' , method : , data : , success : , }) vs axios.methodType(url).then( 반환 매개변수 => {}) 3. axios .methodType( url , data , headerOption ) .then( 반환 매개변수 => { } ) .catch( 오류매개변수 => { ..

[SPA] - 싱글페이지 애플리케이션 : HTML 1개 ( 새로고침 없다..! ) - 새로고침하면 다시 파일들을 재로딩하는 시간 걸림. - MPA VS SPA(스타트업 앱/웹 통합) - React.js , vue.js , AngularJs [ 실무 환경 세팅 힘듬] - 화면(모듈/컴포넌트 단위 개발) 헤더 컴포넌트 메인 컴포넌트 -> 로그인 컴포넌트 -> 회원가입 컴포넌트 푸터 컴포넌트 - 화면 부분 수정( 부분 모듈/컴포넌트 랜더링 ) 1. JSP 개발 환경 - http url 을 이용한 jsp페이지 요청 2. React 개발 환경 - http url 을 이용한 jsp페이지 요청??? X 페이지 한개인데..? - 가짜/가상 url 만들자 가상 http url 정의해서 컴포넌트를 리턴하자. - react..

[ alt + f12 ] 터미널 진입 . 새 세션(상단 화살표 ) - > git bash $ git config --local user.name 이름 $ git config --local user.email 이메일 1번째 3번째 줄처럼 아무것도 안나와야 성공.