전체 글

리액트에서는 properties 줄여서 `props`를 사용해서 변수를 전달합니다.props를 사용하는 방식에는 두가지가 있는데 간단하게 살펴봅시다.01. 기본 사용법App.jsfunction App() { return ( );}먼저 사용할 컴포넌트에 인자를 넘겨준다.Hello.jsconst Hello = function (props) { return Hello {props.name}! your age is {props.age} };export default Hello;이때, 인자를 넘겨줄 컴포넌트에서는 props라는 변수명을 가진 객체를 인자로 받는다.실행 결과02. 응용 사용법js의 구조 분해 할당 문법을 적용하여 다음과 같이 prop..

문제 상황export default function(){ let name = "Hayden" function showname(e){ name = name === "Hayden" ? "Nedyah":"Hayden" console.log(name) } return {name} btn1 }해당 코드를 살펴보자.해당 코드에서 의도한 바로는, 버튼을 클릭하면 name 변수 안의 값이 바뀌면서 화면에 표시되는 이름도 바뀌어야 한다.하지만 실제 실행 결과를 보면, 분명 변수에는 바뀐 이름이 들어 있는데 화면에는 이전 이름이 그래도 표시되는 것을 볼 수 있다.이는 변수의 바뀐 값을 렌더링해주지 않아서 발생하는 문제이다.이를 해결하기 위해 n..

이번에는 리액트에서 CSS 스타일을 적용시키는 방법들을 알아보려고 한다.하나씩 살펴보자.00. 사전준비./component/Hello.jsexport default function(){ return hello component}먼저 CSS 스타일을 적용시킬 컴포넌트를 정의해준다.App.jsimport logo from './logo.svg';import './App.css';import Hello from './component/Hello'function App() { return ( );}export default App;이후 해당 컴포넌트를 App Component에 추가해준다.01. In-line 방식으로 적용하기먼저 태그 안에 직접적으로 CSS 스타일을 명시하는 ..

01. node.js 설치하기Node.js 사이트에 접속해서 lts 파일을 다운다운받은 인스톨러를 사용하여 설치02. 리액트 프로젝트 생성하기cmd를 열로 프로젝트를 설치할 경로로 이동cmd에 아래와 같은 명령어 입력npx create-react-app 프로젝트이름설치가 완료되면 Visual Studio 등의 에디터로 해당 프로젝트 폴더 열기03. 페이지 띄우기설치된 프로젝트에서 터미널을 띄운 후 아래 명령어 입력npm start브라우저에서 아래 경로로 접속http://localhost:3000/

지난번 JWT를 구현한 과정에 이어서 Refresh Token을 사용하여 더욱 강화된 JWT를 구현해보고자 한다.만약 JWT에 대한 기본 구현 방법을 모른다면 해당 글을 읽기 이전에 이전에 작성한 글을 먼저 읽어보길 추천한다.아래에 작성된 예제 코드도 위 링크의 코드를 기반으로 작성했음을 유의하자.먼저 Refresh Token이 왜 필요한지를 먼저 알아보자01. Refresh Token의 필요성과 장단점기존 Access Token만을 사용한 인증 방식의 문제점물론 지난번에 구현한 기초적인 jwt만으로도 간편하게 클라이언트의 요청에 다한 인가 작업을 처리할 수 있다.하지만 jwt 방식에는 큰 문제가 하나 있다.그것은 바로 jwt 토큰이 탈취되었을 경우 어떻게 대처할 것인가?에 관련된 문제이다.다들 알다시피..

이번에는 스프링부트에서 JWT를 활용한 인증 방식을 구현해보고자 한다.이때 Spring Security의 필터단에 JWT를 사용하는 커스텀 필터를 끼워넣어 구현하고자 한다.JWT의 구조에 관한 글은 이전에 작성한 글을 참고하자.그럼 바로 시작하겠다.01. 전체 동작 과정JWT를 구현하는 코드를 설명하기 전에 먼저 Spring Security를 활용하여 JWT를 동작시키는 과정을 살펴보고자 한다.하나씩 살펴보자회원가입 과정회원가입은 기존 회원가입과 다르지 않게, DTO로 회원가입 정보를 전달받으면 Controller가 이를 Service에 전달 이후 비즈니스 로직을 실행한다.위 그림에는 나오지 않지만 회원 정보를 저장할때 비밀번호를 암호화 하여 저장하는 부분만 유의하자.최초인증(로그인) 과정원래 스프링 시..