실전 프로젝트) Apoorpoor - 아이템 이미지 나타내기

아이템 이미지 나타내기

 

이슈 내용 1

 

FE에서 아이템 이미지관리를 하면 느려지는 현상

 

아이템 이미지처리를 원래는 FE단에서 하고 있었다.

BE에서는 ItemEnumList를 만들어서 49가지의 아이템을 관리하고 있으며,

각각의 아이템 이미지를 따로 관리하지는 않았다.

 

FE 측에서 아이템이 생각보다 무거워 렌더링에 오래 걸린다고 하였다.

S3에 아이템이미지를 따로 저장하여 Be에서 해당 URL을 보내주어

FE에서 이미지 태그로 감싼다면 더 빠를 것이라는 의견이 나왔다.

 

 

이전 ItemListEnum

@Getter
public enum ItemListEnum {
    //tops
    top_lv2_01(0L, "촉촉한 종이 박스", 20L, 2L, "top"),
    top_lv3_01(1L, "꼬질꼬질 홀터넥", 20L, 3L, "top"),
    top_lv3_02(2L, "꼬질꼬질 난닝구", 20L, 3L, "top"),
    top_lv4_01(3L, "구찌..아니 아구찜", 20L, 4L, "top"),
    top_lv4_02(4L, "늘어난 반팔", 20L, 4L, "top"),
    .
    .
    .
    .

 

 

수정한 ItemListEnum

@Getter
public enum ItemListEnum {
    //tops
    top_lv2_01(0L, "촉촉한 종이 박스", 20L, 2L, "top", "top_lv2_01.svg"),
    top_lv3_01(1L, "꼬질꼬질 홀터넥", 20L, 3L, "top", "top_lv3_01.svg"),
    top_lv3_02(2L, "꼬질꼬질 난닝구", 20L, 3L, "top", "top_lv3_02.svg"),
    top_lv4_01(3L, "구찌..아니 아구찜", 20L, 4L, "top", "top_lv4_01.svg"),
    top_lv4_02(4L, "늘어난 반팔", 20L, 4L, "top", "top_lv4_02.svg"),

 

위와 같이 수정한 이유는 S3의 공통된 URL을 

 

    @Value("${secret.url.item}")
    private String itemUrl;

이렇게 필요한 부분에 yml로 넣은 다음

ItemListEnum에서 아이템 이미지 파일들의 이름을 약속한다면,

모든 URL을 보여주지 않으므로

보안적으로도 괜찮겠다는 생각이 들어 위와 같이 수정하였다.

 

---

이슈내용 2

 

캐릭터가 아이템 착용여부 이미지를 보낼 때 오류 발생

 

하지만 착용 여부에 따라 FE에 이미지 URL을 줘야 했는데

또 다른 문제가 생겼다.

 

캐릭터가 해당 아이템을 입고 있지 않을 경우에 대한 처리가 되어있지 않아

오류가 발생했다.

 

 

나의 캐릭터 조회 메서드

    @Transactional(readOnly = true)
    public ResponseEntity<BeggarSearchResponseDto> myBeggar(String username) {
        User user = userCheck(username);
        boolean beggarCheck = beggarRepository.existsBeggarByUserId(user.getId());

        if(!beggarCheck) {
           return new ResponseEntity<>(null, HttpStatus.NOT_FOUND);
        }
        Beggar beggar = beggarCheck(username);

        Long beggarId = beggar.getId();
        Long userId = user.getId();
        String nickname = beggar.getNickname();
        Long point = beggar.getPoint();
        Long level = beggar.getLevel();
        String description = beggar.getDescription();
        String gender = user.getGender();
        Long age = user.getAge();
        Long exp = beggar.getExp();
        List<Badge> badgeList = getBadgeList(beggarId);

        String topImage = beggar.getTop() == null ? null : itemUrl + beggar.getTop().getItemImage();
        String bottomImage = beggar.getBottom() == null ? null : itemUrl  + beggar.getBottom().getItemImage();
        String shoesImage = beggar.getShoes() == null ? null : itemUrl  + beggar.getShoes().getItemImage();
        String accImage = beggar.getAcc() == null ? null : itemUrl  + beggar.getAcc().getItemImage();
        String customImage = beggar.getCustom() == null ? null : itemUrl + beggar.getCustom().getItemImage();

        BeggarSearchResponseDto beggarSearchResponseDto = BeggarSearchResponseDto
                .builder().beggarId(beggarId)
                .userId(userId).nickname(nickname)
                .point(point).level(level)
                .exp(exp)
                .badgeList(badgeList)
                .description(description).gender(gender)
                .age(age).topImage(topImage).bottomImage(bottomImage)
                .shoesImage(shoesImage).accImage(accImage)
                .customImage(customImage)
                .build();

        return new ResponseEntity<>(beggarSearchResponseDto, HttpStatus.OK);
    }

 

어디서 문제가 일어나는지 살펴보다가 내가 짠 코드에 null에 대한 처리가 제대로 되지 않고 있다는 것을 알게 되었다.

 

이미지 변수들에는 이미지 URL들이 들어가야 하는데

beggar.get아이템() 들에서부터 null이므로 오류가 난다.

 

나는 삼항연산자로 가독성도 높일 수 있으며 이것으로 null에 대한

처리를 좀 더 유연하게 할 수 있을 거란 확신이 들어 위와 같이 작성하였다.

 

beggar.get아이템()이 null이라고 가정하여

true이면(null) URL을 null을 주고(입고 있지 않은 상태)

false이면(null이 아니면)

 

S3 공통주소 + ItemTitle 형식으로 FE에 보내주었다.

 

 

이전에 FE에서 이미지를 저장하고 처리해 줄 때는

아이템 리스트가 10초 정도는 걸렸는데

BE에서 처리해 주니 위처럼 압도적으로 빨라졌다.