티스토리

얄루의 개발일기🥑

검색하기

블로그 홈

얄루의 개발일기🥑

yeomylaoo.tistory.com/m

하루키의 법칙🥑

구독자: 0

방명록 방문하기

주요 글 목록

[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][인증 백엔드 통합] - 스프링 시큐리티 본 포스팅은 '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.. 공감수 0 댓글수 0 2022. 7. 1.
[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][인증 백엔드 통합] - 스프링 시큐리티 와 서블릿 필터 본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. 스프링 시큐리티를 사용한 인증, 인가 2. JWT 생성 및 반환 구현 3. 스프링 시큐리티와 서블릿 필터 4. JWT를 이용한 인증 구현 1. 스프링 시큐리티를 사용한 인증, 인가 API 요청에 토큰 또는 아이디와 비밀번호를 보내는 작업을 스프링 시큐리티를 사용해 코드를 한 번만 짜고, 이 코드가 모든 API 요청에 수행되기 전에 실행되도록 설정및 구현을 해야한다. 2. JWT 생성 및 반환 구현 사용자 정보를 바탕으로 헤더와 페이로드를 작성하고 전자 서명한 후 토큰을 리턴해야 한다. JWT 관련 라이브러리를 디펜던시에 추가한다. implementation group: 'i.. 공감수 0 댓글수 0 2022. 6. 27.
[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][인증 백엔드 통합] - User Layer 구현 본 포스팅은 '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.. 공감수 0 댓글수 0 2022. 6. 22.
[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][인증 백엔드 통합] - REST API 인증 기법 본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. Basic 인증 2. Bearer 인증 3. JSON 웹 토큰 0. 인증과 인가 인증 당신이 누구인가에 관한 문제이다. 신원 확인과 관련된 사항을 생각하면 된다. 인가 당신이 사용할 수 있는 것에 관한 문제이다. 신원이 확인된 사람이 어디까지 사용할 수 있는지를 생각하면 된다. 1. Basic 인증 HTTP는 무상태를 유지한다 했다. 이런 경우 로그인 상태를 유지하는 것을 빼면 무상태 유지를 하는 것이 맞다. 이 무상태 유지를 하는 가장 간단한 방법은 HTTP 요청에 아이디, 비밀번호를 같이 보내는 것이다. 이런 방법을 Basic 인증이라고 한다. Basic 인증의 문제점 .. 공감수 0 댓글수 0 2022. 6. 21.
[React.js, 스프링 부트, AWS로 배우는 웹 개발 101] - 백엔드와 프론트엔드 연결 작업 그리고 CORS 본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. componentDidMount( ) 2. CORS 3. fetch componentDidMount 렌더링이란? 컴포넌트의 상태가 변하면 ReactDOM은 이를 감지하고 변경 부분의 HTML을 바꿔준다. HTML이 업데이트되면 우리는 변경된 결과를 눈으로 확인할 수 있다. 이를 렌더링이라고 한다. 즉 변경된 부분을 우리가 확인하는 것을 '렌더링'이라고 생각하면 된다. 마운팅이란? render() 함수를 불러 자신의 DOM 트리를 구성하는 과정을 마운팅이라고 한다. componentDidMount()는? 마운팅 과정에서 생성자, render() 함수를 부른다. 마운팅을 마친 .. 공감수 0 댓글수 0 2022. 6. 20.
[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][프론트엔트 개발] - 서비스 개발2 본 포스팅은 '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.. 공감수 0 댓글수 0 2022. 6. 16.
[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][프론트엔트 개발] - 서비스 개발 본 포스팅은 '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() {.. 공감수 0 댓글수 0 2022. 6. 14.
[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][프론트엔트 개발] - React.js(브라우저 동작방식 2) 본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. React.js 2. React 컴포넌트 1. React.js spa 리액트, 앵글러, 뷰는 대중적 SPA 라이브러리/프레임워크다. SPA는 싱글 페이지 애플리케이션의 약자로 한 번 웹페이지를 로딩하면 사용자가 임의로 새로 고침을 하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션을 의미한다. spa의 경우 서버에게 새 HTML을 요청하지 않고 자바스크립트가 동적으로 HTML을 재구성해 만드는 클라이언트 애플리케이션을 싱글 페이지 애플리케이션이라고 하며 이 렌더링 과정을 클라이언트-사이드 렌더링이라고 한다. render() 함수가 동적으로 HTML 엘리먼트를 우리 눈에.. 공감수 0 댓글수 0 2022. 6. 14.
[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][프론트엔트 개발] - 개발환경 설정과 오류 해결, 브라우저의 동작방식 본 포스팅은 '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.. 공감수 0 댓글수 0 2022. 6. 13.
[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][백엔드 개발] - 서비스 개발 본 포스팅은 '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 애노테이션을 사용해 용도에 따라 로그 정보를 남겨주는 방식을 사용할 것이다. 로깅은 웹 서비스에 반드시 필요하며 로깅 없이 디버깅하는 것은 코와 입을 막고 숨을 쉬는 것.. 공감수 0 댓글수 0 2022. 6. 11.
[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][백엔드 개발] - 컨트롤러 레이어, 서비스 레이어, 퍼시스턴스 레이어 본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. 컨트롤러 레이어: 스프링 REST API 컨트롤러 2. 서비스 레이어: 비지니스 로직 3. 퍼시스턴스 레이어: 스프링 데이터 JPA 4. 정리 컨트롤러 레이어: 스프링 REST API 컨트롤러 HTTP는 GET/POST/PUT/DELETE/OPTIONS 등과 같은 메서드와 URI를 이용해 서버에 HTTP 요청을 보낼 수 있다. 해당 요청을 받은 서버는 어떤 HTTP 메서드를 이용했는지를 알아야 하고 그 후 해당 리소스의 HTTP 메서드에 연결된 메서드를 실행해야 한다. 스프링부트의 spring web(라이브러리)의 어노테이션을 이용하면 이 연결을 쉽게할 수 있다. @Rest.. 공감수 0 댓글수 0 2022. 6. 9.
[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][백엔드 개발] - 서비스 아키텍처 본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. 레이어드 아키텍처 2. 모델, Entity, DTO 3. REST API 레이어드 아키텍처 레이어드 아키텍처란? 레이어드 아키텍처 패턴은 스프링 프로젝트 내부에서 어떻게 코드를 적절히 분리하고 관리할 것인지에 대한 것이다. 퍼시스턴스 레이어는 데이터 베이스와 연결하는 부분으로 영속성(데이터를 생성한 프로그램의 종료에도 사라지지 않는 것을 의미한다.)을 가지는 부분이다. 비지니스 레이어는 핵심 비지니스 로직을 진행하는 부분이다. 프레젠테이션 레이어는 Controller를 가지는 부분이다. 데이터베이스 레이어는 DB 관련 부분이다. 레이어드 아키텍처 특징 사용하는 용도에 맞는 .. 공감수 0 댓글수 0 2022. 6. 8.
[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][백엔드 개발] - 백엔드 개발 환경 설정 본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. 기본 설정 2. 스프링 프레임워크와 의존성 주입 3. 스프링 프레임워크와 디스패처 서블릿 기본 설정 Build.gradle plugins { id 'org.springframework.boot' version '2.7.0' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id 'java' } group = 'com.example' version = '0.0.1-SNAPSHOT' sourceCompatibility = '1.8' configurations { compileOnly { extendsFrom annot.. 공감수 0 댓글수 0 2022. 6. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.