절취선 블로그

layout: post title: "내 채널 페이지 메인화면을 꾸며보자" date: 2022-01-16 14:05:21 +0800 tags: Self-CodeReview color: rgb(255,90,90) author: KIM-JS-95 subtitle: 'CutLinePage를 업데이트 하자!' 목표 🤔🤔 메인화면을 보자 하니... 🤔🤔 굉장히 허전하다. 게다가 저 화면 링크는 어떠한 기능도 없는 장식이다. 게임 관련 사이트이며 포트폴리오로 사용하기 위해 멋을 추가할 것이다. 이미지 슬라이드 추가 유튜브 영상에서는 썸네일을 사용하는데 메인 페이지에도 추가하면 좋을듯 하다. 많은 선배 개발자분들이 이미지를 저장하는 방법은에서는 로컬저장법 AWS를 사용한다면 **AWS Bucket**을..

목표 나의 포트폴리오 게임 페이지는 배포까지의 괴정을 완료한 프로젝트이다. 그러나 지속적인 최적화 그리고 기능 추가를 위해 지속적 관리를 이어가고 있다. 게시판 기능의 완전한 기능을 구현하고자 추가적으로 Reply(댓글)기능을 추가 한다. 구성 Table 추가 댓글 기능의 경우 게시판 하나당 댓글정보는 여러개가 연결되기 때문에 @OnetoMany 양방향 매핑츨 시켜주어 사용하기로 한다. 추가적으로 게시판이 삭제될 경우 매핑되어 있는 댓글 또한 같이 지워질 수 있도록 cascade를 All로 지정하여 별도 삭제 기능 추가 없이 작업이 이루어 질 수 있도록 한다. 단, 추후 Account와 매핑할 경우 cascade 기능을 사용하지 않고 고아 객체로 만들어 두어야한다. @OneToMany(mappedBy =..

목표 나의 포트폴리오 게임 페이지는 배포까지의 괴정을 완료한 프로젝트이다. 그러나 지속적인 최적화 그리고 기능 추가를 위해 지속적 관리를 이어가고 있다. 현재는 그렇기 않지만 DB 모델링의 문제로 추후 Delay 현상이 발생한 문제가 있었다. 때문에 DB 모델링을 개성하기 위해 단일 객체 테이블 방식에서 다대일 방식을 적용하여 게시판 Table 과 댓글 Table 을 Mapping 하는 것을 목표로 한다. Before A. Account(사용자) Table public class Account { @Id @GeneratedValue(strategy = GenerationType.SEQUENCE) private Long id; @Column(nullable = false) @NotBlank private ..

서론 내가 처음 Springboot 를 배울때 mvc 테스트 하는 방식에 대해 방법이 많았지만 모두 이해할 수 없었다. 이제는 MVC 테스트에 대해 정리가 필요하다 느껴 정리해본다. 본론 1. @WebMvcTest 컨트롤러의 정확한 동작 여부를 확인하기 위한 도구 때문에 @WebMvcTest(대상컨트롤러.class) 처럼 명시해줘야한다. @WebMvcTest 어노테이션을 사용시 다음 내용만 스캔 하도록 제한한다. (보다 가벼운 테스팅이 가능하다.) @Controller @ControllerAdvice, @JsonComponent, Converter, GenericConverter, Filter, HandlerInterceptor, WebMvcConf ● 장점 WebApplication 관련된 Bean들만..

TDD(Test Driven Development) ? 애자일 방법론 중 하나인 eXtream Programming(XP)의 'Test-First' 개념에 기반을 둔 단순한 설계방법이다. TDD와 일반적인 개발 방식의 가장 큰 차이점은 *한다는 점이다. 설계 단계에서 프로그래밍 목적을 반드시 미리 정의해야만 하고, 정의테스트 케이스 작성해야만 한다. 테스트 코드를 작성하는 도중에 발생하는 예외 사항(버그, 수정사항)들은 테스트 케이스에 추가하고 설계를 개선한다. 이후 테스트가 통과된 코드만을 코드 개발 단계에서 실제 코드로 작성한다. 🍀 TDD 개발 방식의 장점 보다 튼튼한 객체 지향적인 코드 생산 TDD는 코드의 재사용 보장을 명시하므로 TDD를 통한 소프트웨어 개발 시 기능 별 철저한 ..

AJAX(Asynchronous JavaScript and XML) Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나 Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. AJAX 장점 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다. 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다. 백그라운드 영역에서 서버로 데이터를 보낼 수 있다. Ajax의 한계 Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 ..

서론 홈페이지 제작과정에서 가장 중요한 것은 보안이라고 생각한다. 사용자의 정보를 크립토그래피 과정을 통해 해쉬처리하고 JWT를 통해 로그인 유지와 인증을 보장하는 과정은 쉬운 과정은 아니었다. 그중에서도 SecurityConfig 를 구성하는 과정은 보기만 해서는 이해할 수 없었다. 때문에 직접 로그인 화면을 제작하고 스프링 Security 에서 제공하는 HttpSecurity 메소드를 직접 사용해보며 스프링 보안에 한발 더 접근해 보도록 한다. 어떤 로그인 화면을 가져올 것인가? 스프링에서는 기본적으로 제공되는 보안 화면이 있다. 일방적으로 로그인만 가능하고 회원가입 구성이 없어 개발자 이외에는 로그인이 불가능하다. 반대로 개발자가 직접 제작하는 페이지를 사용하고자 한다면 SecurityConfig ..

암호화(Encode) 웹 서비스 개발에 대해 유저의 정보를 안전하게 저장하기 위해서는 정보를 있는 그대로 저장하기보다 암호화를 통해 복잡한 문자열로 보관하는 방식이 더욱 안전할 것이다. Spring Security 5.3.3 버전에서는 비밀번호 암호화 인터페이스인 PasswordEncoder와 구현체를 지원함으로서 정보의 안전정을 강화 시켰다. Spring Security에는 4가지의 기본 암호화 클래스를 제공하고 있다. BcryptPasswordEncoder : BCrypt 해시 함수 Argon2PasswordEncoder : Argon2 해시 함수 Pbkdf2PasswordEncoder : PBKDF2 해시 함수 SCryptPasswordEncoder : SCrypt 해시 함수 저장된 암호는 복호화가..

목표 @Controller 페이지를 개설 후 JWT 토큰이 발급된 사용자만이 접근할 수 있도록 기능을 구성하여 접근 권한 관리하도록 한다. 구현 1. 멤버등록(회원가입) 구현 웹페이지 접근 이전에 사용자가 가입된 상태인지 확인하도록 한다. 구현은 CRUD 구현괴 유사하지만 보한 특성을 강화하기 위해 Password는 PasswordEncoder.encode 메소드를 통해 함수화 한다. @RestController @RequiredArgsConstructor public class MemberController { final MemberRepository memberRepository; final PasswordEncoder encode; @PostMapping("/api/member") public St..

JSON Web Token? JSON 웹 토큰(JSON Web Token, JWT, "jot”[1])은 선택적 서명 및 선택적 암호화를 사용하여 데이터를 만들기 위한 인터넷 표준으로, 페이로드는 몇몇 클레임(claim) 표명(assert)을 처리하는 JSON을 보관하고 있다. 이를테면 서버는 "관리자로 로그인됨"이라는 클레임이 있는 토큰을 생성하여 이를 클라이언트에 제공할 수 있다. 그러면 클라이언트는 해당 토큰을 사용하여 관리자로 로그인됨을 증명한다. 구조 JWT는 크게 (Header , Payload , Sign) 3가지로 나뉘며 역할은 다음과 같다. 구조 표현 역할 Header { "alg" : "HS256", "typ" : "JWT" } Token의 타입(jwt, jws 등)과 해시 암호화 알고리..