React

Router 의 파일 관계

• router 의 index.js -> index.js -> App.jsx 의 currentOutlet 으로 가지고 옴
  

as (React boot-strap)

• as 는 역할 변환 , 부여를 한다.
  

왜 button 이 form 안에 있으면 안되는가?

• Form 은 상태값을 전달하기에 button 이 안에 있으면 안됨
  
  
• handleChange 함수 = post의 상태값 업데이트
  

  Form의 handleChange 은 post 상태값을 업데이트 역할
  button 은 그런 상태값을 spring 에 보내는 역할이기에
  역할이 겹치면 안된다.

Build

경로

• axios 요청 시 버전 맞추기

build

• build 파일 생성하기
• index.html 안에 react 의 결과물 포함되어있음
  
  
• build 파일 안에 있는 내용 모두 복사해서 spring boot의 static 안에 붙이기
• src 안에 코딩한 내용을 compile 한 결과의 javascript 가 들어가 있다.
• proxy 환경이 아닌 서버와 웹브라우저가 하나의 존재로 합쳐짐
  
  

  React 를 실행하지 않고 spring 만으로 앱이 실행된다.
  즉 서버와 웹브라우저가 하나의 존재로 합쳐짐.

hash

• Hash 로 변경하면 새로고침 해도 접속됨
  

  build 하기 전에 router 의 index.jsx을 hash 로 변경하자

React css

• import 한 css 는 글로벌로 사용됨 = head 요소의 style 로 들어옴

pirvate 한 css 생성방법

• css 파일의 이름을 "xxx.module.css" 형식으로 만들고 import 하기
  
• 임포트한 css 의 타입 = object
• css 의 키값에는 보통 "-" 가 많이 포함되므로 myCss.my-color 로 사용 못함
  => object 의 키 값을 문자열로 전달

{myCss["my-color"]} 로 {import 한 object 명[" class 이름"]}

module 로 css 만들고 import 해서 불러오고 선택해서 적용

외부 css 를 사용 라이브러리

• 외부 css 를 사용 라이브러리 설치
  
• 바인더로 외부 css 를 가지고 올 수도 있다.
  

css 활용

• 배열과 오브젝트 + 상태값 관리를 통해서 동적으로 상태 변경 가능

체크된 부분만의 css 특징 적용하기

• 분할할당 해서 체크된 class 요소만 반영하기
  

React { }

• react 에서 { } 에는 html 의 요소 이외의 것들을 작성한다.

JWT(Json Web Token)

• 연습용 예제 설정
  

전체 프로세스

• Token 을 발급받아서 token 이 있어야만 응답을 받을 수 있는 구조
• 서버에 요청시 토근을 들고감 -> 서버는 토큰을 키 검증 & 유효기간 확인
  ( & 토큰 안에 있는 userName 을 확인)
• token 은 상태값 관리를 하지 않음

  토큰 환경 설정 후 main 에서 토큰 생성

session 로그인을 하지 않겠다.

JWT_Security

• session 사용하지 않도록 설정
  

JWT security 환경설정

• AuthSuccessHandler 를 cookie 기반으로 변경

보완

2. 근데 왜 hash 로 변경하면 되는가?
3. {}의 의미?