💚react + spring boot + toast ui editor로 글 작성해보기-#2

작성일 | In

Back 설계

Back단에 markdown을 저장할 서버를 구축해서 연동해보고 AWS도 연동해보자

좀 사설이지만 별로 무겁지도 않은 작업인데 너무 노트북이 느리다 ㅠㅠ 진짜 너무 바꾸고 싶지만 군대를 가야하니 참는다 ㅠㅠ😥

구상

본격적으로 설명하기 전에 어떤식으로 구상을 했는지 보자

저장시 image

조회시 image

아직 조회부분은 구현하지 못했다

S3연동

이미 인터넷에 많은 자료가 있기 때문에 세세하게 설명은 하지 않을 예정이다. 간단하게 컨트롤러 부분만 보면(절대 깔끔한 코드가 아닙니다 ㅋㅋ)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@RestController
@RequestMapping("/s3")
@RequiredArgsConstructor
@Slf4j
public class AWSS3Controller {
    private final FileUploadService fileUploadService;

    //이미지 업로드
    @PostMapping("/upload")
    public String uploadImage(@RequestPart MultipartFile file){
        log.info("이미지 파일 어떤것이 들어왔나?? fileName = {}",file.getName());
        String url = fileUploadService.uploadImage(file);
        log.info("S3에 저장되고 나온 이미지 url = {}",url);
        return url;
    }
}
  • post매핑으로 /s3/upload로 MultipartFile이 들어오면 fileUploadService.uploadImage(file)로 넘어가고 url를 반환한다. (MultipartFile 설명)

DB연동

다음은 editor로 작성한 내용을 저장하는 MariaDB를 연동해보겠다. 이것도 너무 좋은 자료가 많기 때문에 연동하는 것은 어렵지 않게 할 수 있다

  • ToastController
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@RestController
@Slf4j
public class ToastController {
    @Autowired
    private ToastService toastService;

    //MariaDB에 Editor에 저장되어있던 markdown 저장
    @PostMapping("/submit")
    public String testControllerRequestBody(@RequestBody ToastEntityDTO toast) {
        ToastEntity entity = ToastEntityDTO.toEntity(toast);
        log.info("어떤것이 들어왔니?? markdown={}", entity.getContentMarkdown());
        //todo: 기존에 있던 이미지 URL 배열과 새로 들어온 이미지링크랑 비교해서 없는 URL 삭제
        toastService.saveToast(entity);
        return "OK";
    }
}
  • ToastEntityDTO
1
2
3
4
5
6
7
8
9
10
11
12
13
@Data
@NoArgsConstructor
@Builder
@AllArgsConstructor
public class ToastEntityDTO {
    private String content;

    public static ToastEntity toEntity(final ToastEntityDTO dto){
        return ToastEntity.builder()
                .contentMarkdown(dto.getContent())
                .build();
    }
}

프론트에서 post로 /submit 으로 마크다운이 json형식으로 날아온것을 받아서 ToastEntityDTO에 toEntity로 ToastEntity로 바꿔준다 그후 toastService.saveToast(entity)실행한다.

  • ToastService
1
2
3
4
5
6
7
8
9
10
11
12
@Service
@RequiredArgsConstructor
public class ToastService {

    private final ToastRepository toastRepository;

    @Transactional
    public Long saveToast(ToastEntity toast){
        toastRepository.save(toast);
        return toast.getId();
    }
}
  • ToastRepository
1
2
3
4
5
6
7
8
9
10
11
12
13
@Repository
public class ToastRepository {
    @PersistenceContext
    private EntityManager em;

    public void save(ToastEntity toast){
        em.persist(toast);
    }

    public ToastEntity findOne(Long id){
        return em.find(ToastEntity.class, id);
    }
}

이렇게 하면 DB에 자동으로 JPA에서 값을 집어넣어 준다.

주 목적이 단순히 테스트 용도라 작동에만 초점을 맞췄다. 너무 지저분하고 예외처리 하나도 안되어있다.. 여전히 너무 부족한 실력이다. 많이 공부해야겠다😂😅