개발하면 축구 개발됨

ㄹㅇ

@Slf4j@Componentpublic class JwtTokenProvider { @Autowired private SignatureRepository signatureRepository; @Autowired private JWTTokenRepository jwtTokenRepository; @Autowired private HttpServletResponse response; @Autowired private UserRepository userRepository; //서명키 저장 private Key key; public void setKey(Key key){ this.key = key; } public JwtToke..

어제는 CORS 에러에 대해 알아보기 까지 했다.이를 해결하기 위해서 백엔드에서 cors 설정을 해주어야 한다. 리액트 npm install 이 안되는 에러c드라이브에 옮겨서 해보려고 하는중에 npm start 를 하니까 무반응이어서평소처럼 node modules 와 package.json lock 을 지우고 npm install 을 해서다시 실행하는게 안되길래 왜그런가 보니 상위폴더 이름이 “React수업” 이어서한글이 포함된 경로 안에 들어있어서 안되는 거였음.유효성체크package com.example.app.controller;import com.example.app.domain.dto.MemoDto;import com.example.app.domain.dto.PersonDto;import jak..

컴포넌트 Props 으로 전달리액트에서 프롭스(props) 란 ??props 란 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법이다.(props 는 propertis 의 줄임말)props 는 읽기 전용이라, 자식 컴포넌트에서 직접 수정할 수 없다.//부모 컴포넌트function Parent(){ return ; } //자식 컴포넌트 function Chile(){ return ( 간단히 생각.props 는 부모에서 자식으로 데이터를 전달리액트 훅(React Hook)은 함수형 컴포넌트에서도 상태(state)나 생명주기(lifecycle) 메서드 등 클래스형 컴포넌트에서 사용할 수 있는 기능을 제공하는 것입니다. React 16.8 버전부터 추가된 기능으로, 함수형 컴포넌트에서 상태 ..

계속 복습리액트 프로젝트 생성create-react-app myapp근데 하다가 뭔가 오류가 나면node-modules , package-lock.json 파일 지우고다시 폴더 위치에서 cmd 연 다음에 npm install 실행다시 설치됨.리액트 앱 시작terminal 오픈 후에 npm start페이지에 나타나는 부분인 App.js 파일에 작성📌 useState 란?컴포넌트의 상태를 간편하게 생성하고 관리할 수 있게 해주는 hook 이다.📌 state란?컴포넌트의 상태를 말한다.리액트 이벤트처리onMouse 이벤트import { useState } from "react"import OnclickTest from "./Onclick"const OnMouseTest = ()=>{ const [st..

리액트란 ?React는 Facebook에서 개발하고 유지 관리하는 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용된다. 주로 단일 페이지 애플리케이션(SPA)에서 빠르고 효율적인 UI 업데이트를 위해 사용됩니다. React는 컴포넌트 기반 아키텍처를 사용하여 복잡한 UI를 작은, 재사용 가능한 컴포넌트로 분할할 수 있게 해줌.특징기본적으로 비동기 처리 방식컴포넌트 기반 구조UI를 독립적인 컴포넌트 단위로 나눠서 재사용 가능하게 설계함.각 컴포넌트는 자체적인 상태와 로직을 가질 수 있어서 유지보수가 쉬움.가상 DOM (Virtual DOM)변경 사항을 가상 DOM에서 먼저 계산한 뒤 실제 DOM에 최소한의 업데이트를 함.이를 통해 성능 최적화가 이루어짐.단방향 데이터 흐..

node js 란 ?Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임이다.Node.js를 설치하면 브라우저를 키지 않아도 자바스크립트를 컴퓨터에서 수행할 수 있게됩니다.간단히 이해하면 브라우저 없이 자바스크립트를 실행할 수 있게하는 프로그램 ?NPM ?Node Package Manager Node Package : Node.js 환경에서 사용가능한 모듈(라이브러리)를 의미 Node.js 환경에서 사용 가능한 패키지를 다운 받을 수 있게 하는 도구 Node.js 를 설치하면 자동으로 설치된다. 다운 받아진 모듈들은 ./node_modules 에 설치된다 npm install [모듈명] 로 다운받아 사용가능사용할 폴더에서 cmd 로 npm init -y하면 p..

JWT 토큰에 관한 용어- 액세스 토큰(Access Token) : 사용자나 컴퓨터 프로그램이 접근할 권리를 증명하는데 사용되는 문자열이며 , 일반적으로 인터넷 웹에서 사용자 인증 및 권한 부여를 위해 주로 사용된다.예를 들어보자면 , 소셜미디어 플랫폼이나 웹사이트에서 사용자가 로그인을 할 때 서버에서 사용자의 인증 정보를 확인한 후 엑세스 토큰을 발급해준다. 그리고 사용자가 이후 서비스를 이용할 때마마 이 토큰을 사용하여 자신의 인증상태를 증명하게 된다. - 리프레쉬 토큰(Refresh Token) : 엑세스 토큰만을 사용하게 되면 짧은 유효기간 때문에 사용자는 로그인을 자주 해야돼서 자꾸 새롭게 토큰을 발급받아야 하는 단점이 있다. 그렇다고 유효기간을 길게 해버리면 토큰을 탈취당했을 때 큰 보안문제가..

오늘은 학원에서 JWT 토큰 기반의 인증 방식에 대해서 알아보았다.  토큰 기반의 인증 방식 (JWT)https://wookkl.tistory.com/24토큰 인증 방식 :원래 예전부터 요청을 처리하는 인증방식에는 세션을 사용한 방법을 사용했는데이게 사용자가 많아지면 많아질수록 서버에 부하가 많아져서 성능에 무리가 간다.그래서 나온게 토큰 인증 방식.그 중에 지금은 JWT 를 사용하기로 함.JWT 란 ?JSON 객체를 사용하여 토큰을 사용하는 토큰 형식정보를 안전하고 간단하게 주고받기 위해 사용되는 표준JWT 는 세 부분으로 구성된다.헤더(Header)토큰의 타입과 사용된 암호화 알고리즘을 포함페이로드(Payload)서명(Signature)JWT의 동작원리  사용자가 id와 password를 입력하여 로..

UserDetails 인터페이스스프링 시큐리티에서 사용자의 정보를 담는 인터페이스이다.사용자의 정보를 불러오기 위해 구현해야 하는 인터페이스로 기본 재정의 메서드는 다음과 같다.메소드 리턴 타입 설명 기본값getAuthorities()Collection계정의 권한 목록을 리턴 getPassword()String계정의 비밀번호를 리턴 getUsername()String계정의 고유한 값을 리턴( ex : DB PK값, 중복이 없는 이메일 값 ) isAccountNonExpired()boolean계정의 만료 여부 리턴true ( 만료 안됨 )isAccountNonLocked()boolean계정의 잠김 여부 리턴true ( 잠기지 않음 )isCredentialsNonExpired()boolean비밀번호 만료 여..