쌓고 쌓다

PC버전에서는 웹 에디터에 정상적으로 텍스트가 입력이 되었지만모바일 환경에서 텍스트 입력시 띄어쓰기 이후로 자음 모음이 분리되는 현상이 일어났다.Expect :가 나 다 라 Result :가 ㄴㅏ  https://github.com/ckeditor/ckeditor5/pull/16755 Fix: composition breaks typing a Korean after space key on Android Chrome by Johnyworld · Pull Request #16755 · ckeditor/ckediThis issue still exists after version 42.0.1. Issue typing Korean after two space characters #11569 Composition ..

현재 CKEditor5를 사용해서 게시글의 텍스트 중간중간에 이미지 파일을 출력하고 있다. 이러한 방식의 게시글을 위해서는 사용자가 이미지 파일 업로드시에서버에서 업로드한 이미지파일을 저장하고 그 URL 경로를 통해서 게시글의 중간에 이미지 파일을 출력할 수 있다.  그런데 바로 이미지 파일을 바로 업로드 해버리면 다음과 같은 문제가 발생한다. 문제게시글 작성(수정)중에 나가버리는 경우 업로드한 파일은 쓰레기가 된다. 그래서 다음과 같은 구현 방법을 고민해야한다.게시글 작성(수정)중에 나가버리는 경우 업로드된 파일은 어떻게 관리할 것인가?게시글 수정하여 지워버린 이미지 파일은 어떻게 관리할 것인가? 해결 방법이미지 파일 업로드시에 게시글과의 연관관계는 우선 NULL로 맺어놓는다.이미지 파일의 저장 정보는..

SpringBoot와 javascript를 이용해 이미지 파일 업로드를 구현해보자.공식 레퍼런스는 https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html 이다. 우선 CKEditor를 통해 서버로 파일을 전송 받는 과정까지만 코드를 작성했다. 에디터를 통해 업로드 요청온 파일을 처리하는 Controller 코드는 다음과 같다.@PostMapping("/test")@ResponseBodypublic Map test(@RequestPart(name = "posterImages", required = false) MultipartFile uploadPosterImages) { String originalFilen..

프로젝트에 위지윅 에디터를 사용하기위해 CKEditor 오픈소스를 적용했다. 사용자가 굵은 글씨, 기울임 등 에디터를 통해 작성한 내용을 서버에서 저장하기위해서는태그를 함께 저장해야한다. 태그를 함께 저장해야할텐데 XSS 공격은 어떻게 대응할까? 동작 예시를 통해 대응 방법을 이해해보자. 사용자가 의도적으로 굵은 글씨를 표현하는 태그인 태그를 다음과 같이 삽입했다고 하자.  에디터를 통해 서버로 넘어와 저장되는 값은 다음과 같다. ' html에서 , & 는 같은 특수한 기능을하는 문자들이므로서버에서는 안전한 문자로 저장할 필요가 있기에 변환하여 저장한 것이다. 그러면 의도적으로 태그를 삽입하는것이 아닌에디터를 통해서 굵은 글씨를 작성해보자. 서버에는 어떻게 저장이 될까? DB에는 '그렇다. 라이브러리에..

다음과 같은 상황에 문제 해결을 하고자 생각해낸 구현 방법이다. 사용자가 게시글과 같은 도메인 DTO와 태그를 통해 파일도 함께 컨트롤러로 요청을 보냈을때함께 보낸 도메인 클래스의 유효성 검사가 실패한다면 다음과 같은 컨트롤러 로직을 탈것이다. Controller 코드@PostMapping("/signup")public String signup(@Validated MemberSignupRequest memberSignupRequest, BindingResult bindingResult) { if (bindingResult.hasErrors()) return "member/signup"; memberService.signup(memberSignupRequest)..

현제 해더에 프로필 이미지 미리보기는 다음과 같은 html 태그를 갖는다.타임리프를 이용해 세션에 담긴 사용자 정보를 가지고 프로필 이미지를 출력하고 있다. 여기서 발생한 문제는 다음과 같다. 사용자가 프로필 변경 페이지에서 프로필 이미지를 변경한다. 프로필 이미지를 변경하고 저장을 눌러 저장한다. 그러나 문제가 여기서 발생한다.변경 완료시 헤더 부분의 프로필 이미지 미리보기가 바뀌지 않는다. 프로필 이미지는 세션 정보를 통해 가져오므로 재 로그인시 세션을 새로 저장하며 변경이 적용 된다. 세션 값을 변경하여 저장해보자. 그럼 프로필 변경 로직에 세션 변경 로직도 포함해서 문제를 해결할 수 있다.@Transactionalpublic void updateMemberProfile(...) {Authentic..

principalName cannot be empty 에러가 발생했다. 보통 UserDetails의 구현체를 만들때getUsername에 null을 반환하면 발생하는 에러라고한다. principalName에 텍스트가 없으면 발생하는 에러이다.  하지만 다음과 같이 모두 반환값을 만들어 놨다.public class CustomUserDetails implements UserDetails, OAuth2User { @Override public String getUsername() { return this.loginId; } @Override public String getName() { return nickname; } } 이 에러는 Us..

문제 상황기존에 카카오 로그인을 RestTemplate를 이용해 REST API로 구현을 했었는데Spring Security의 OAuth2를 이용해 손쉽게 카카오 로그인 API 결과를 얻을 수 있다. 그런데 이상하게 AccessToken을 얻은 다음 이뤄지는 loadUser 메소드가 동작하지 않는것이다. SecurityConfig.classhttp.oauth2Login((auth2) -> auth2 .userInfoEndpoint(userInfo -> userInfo .userService(customOAuthService)));사용자 정보를 가져온 후 처리하는 customOAuthService를 설정해주었는데 package com.example.bucketlist.config.secu..