얄루의 개발일기🥑

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. 스프링 시큐리티 설정 2. 인증된 사용자 사용하기 3. 패스워드 암호화 4. 정리 1. 스프링 시큐리티 설정 서블릿 필터 사용을 위한 작업 두 가지 서블릿 필터 구현 서블릿 컨테이너에 이 서블릿 필터를 사용하라고 알려주는 설정 작업 [서블릿 컨테이너에 이 서블릿 필터 사용하라고 알려주는 설정 작업] package com.example.demo.config; import com.example.demo.security.JwtAuthenticationFilter; import lombok.extern.slf4j.Slf4j; import org.springframework.bean..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. 스프링 시큐리티를 사용한 인증, 인가 2. JWT 생성 및 반환 구현 3. 스프링 시큐리티와 서블릿 필터 4. JWT를 이용한 인증 구현 1. 스프링 시큐리티를 사용한 인증, 인가 API 요청에 토큰 또는 아이디와 비밀번호를 보내는 작업을 스프링 시큐리티를 사용해 코드를 한 번만 짜고, 이 코드가 모든 API 요청에 수행되기 전에 실행되도록 설정및 구현을 해야한다. 2. JWT 생성 및 반환 구현 사용자 정보를 바탕으로 헤더와 페이로드를 작성하고 전자 서명한 후 토큰을 리턴해야 한다. JWT 관련 라이브러리를 디펜던시에 추가한다. implementation group: 'i..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. UserEntity 구현 2. UserRepository 구현 3. UserService 구현 4. UserDTO 5. UserController 구현 스프링 시큐리티를 사용해서 인증과 인가를 구현하는 방법과 사용자 관리를 하는 방법을 실제 구현을 통해 알아보도록 하자. 1. UserEntity 구현 package com.example.demo.model; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import org.hi..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. Basic 인증 2. Bearer 인증 3. JSON 웹 토큰 0. 인증과 인가 인증 당신이 누구인가에 관한 문제이다. 신원 확인과 관련된 사항을 생각하면 된다. 인가 당신이 사용할 수 있는 것에 관한 문제이다. 신원이 확인된 사람이 어디까지 사용할 수 있는지를 생각하면 된다. 1. Basic 인증 HTTP는 무상태를 유지한다 했다. 이런 경우 로그인 상태를 유지하는 것을 빼면 무상태 유지를 하는 것이 맞다. 이 무상태 유지를 하는 가장 간단한 방법은 HTTP 요청에 아이디, 비밀번호를 같이 보내는 것이다. 이런 방법을 Basic 인증이라고 한다. Basic 인증의 문제점 ..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. componentDidMount( ) 2. CORS 3. fetch componentDidMount 렌더링이란? 컴포넌트의 상태가 변하면 ReactDOM은 이를 감지하고 변경 부분의 HTML을 바꿔준다. HTML이 업데이트되면 우리는 변경된 결과를 눈으로 확인할 수 있다. 이를 렌더링이라고 한다. 즉 변경된 부분을 우리가 확인하는 것을 '렌더링'이라고 생각하면 된다. 마운팅이란? render() 함수를 불러 자신의 DOM 트리를 구성하는 과정을 마운팅이라고 한다. componentDidMount()는? 마운팅 과정에서 생성자, render() 함수를 부른다. 마운팅을 마친 ..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. 삭제 2. 수정 1. 삭제 삭제 기능은 각 리스트 아이템의 오른쪽에 삭제 아이콘을 추가해주어야 한다.(UI 부분) 그 뒤 삭제 버튼을 누르면 아이템이 삭제되는 기능을 추가한다.(이벤트 핸들러 사용 부분) 삭제 아이콘 추가 import React from "react"; import {ListItem, ListItemText, InputBase, Checkbox, ListItemSecondaryAction, IconButton} from '@material-ui/core'; import DeleteOutline from '@material-ui/icons/DeleteOutli..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. 컴포넌트 2. Props와 state 3. material ui를 이용한 디자인 4. 이벤트 핸들러 1. 컴포넌트 Todo 컴포넌트 checkbox와 label을 렌더링하는 컴포넌트 import React from 'react' class Todo extends React.Component { render() { return ( Todo 컴포넌트 만들기 ); } } export default Todo; App컴포넌트에서 Todo 컴포넌트 사용 import React from "react"; class Todo extends React.Component { render() {..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. React.js 2. React 컴포넌트 1. React.js spa 리액트, 앵글러, 뷰는 대중적 SPA 라이브러리/프레임워크다. SPA는 싱글 페이지 애플리케이션의 약자로 한 번 웹페이지를 로딩하면 사용자가 임의로 새로 고침을 하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션을 의미한다. spa의 경우 서버에게 새 HTML을 요청하지 않고 자바스크립트가 동적으로 HTML을 재구성해 만드는 클라이언트 애플리케이션을 싱글 페이지 애플리케이션이라고 하며 이 렌더링 과정을 클라이언트-사이드 렌더링이라고 한다. render() 함수가 동적으로 HTML 엘리먼트를 우리 눈에..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. CRA 버전 오류 해결 방안 https://velog.io/@soonmac/%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0-You-are-running-create-react-app-5.0.0-which-is-behind-the-latest-release-5.0.1 [오류해결] You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). Create React App의 글로벌(전역) 설치를 더 이상 지원하지 않을 때 전역 설치를 제거한 후 다시 설치하면 됨 velog.io n..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. Logger 설정 2. HTTP POST를 이용하는 Create REST API 개발 3. HTTP GET를 이용하는 Get REST API 개발 4. HTTP UPDATE를 이용하는 Update REST API 개발 5. HTTP DELETE를 이용하는 DeleteREST API 개발 1. Logger 설정 기존의 출력문을 사용해서 로그를 남길 수 있지만 이 방법은 제한적이다. 그렇기에 우리는 @Slf4j 애노테이션을 사용해 용도에 따라 로그 정보를 남겨주는 방식을 사용할 것이다. 로깅은 웹 서비스에 반드시 필요하며 로깅 없이 디버깅하는 것은 코와 입을 막고 숨을 쉬는 것..