formData의 metadata란?

File형식의 데이터를 보내줘야되서 formdata 를 사용하는도중,
JSON형식으로 담아서 보내주기 위해 metadata 라는 배열에 담아 String 타입으로 받고
object로 파싱을 해서 데이터 형변환을 시켜주는 동작 원리를 이해해보려고 합니다.

의문 코드

Java Script

 document.querySelectorAll('#chaptersContainer .chapter').forEach(chapterDiv => {
        const chapterName = chapterDiv.querySelector('h3').textContent;

        chapters.push({ chapterName });
    });

    // FormData에 데이터 추가
    const formData = new FormData();
    const metadata = [];

    chapters.forEach((chapter, chapterIndex) => {
        const chapterData = { chapterName: chapter.chapterName, videos: [] };

        chapter.videos.forEach((video, videoIndex) => {
            chapterData.videos.push({ videoTitle: video.videoTitle });
        });
        metadata.push(chapterData);
    });

    // 메타데이터 추가
    formData.append('metadata', JSON.stringify(metadata));

위 코드는 챕터에 대한 value 를 뽑아서 formData 에 넣어주는 로직입니다.
맨 밑에 metadata 추가 라는 곳에서 의문점이 생긴 지점입니다.

JAVA

 @PostMapping("/save/lecture-video")
    public ResponseEntity<String> saveLectureVideoRelation(@RequestPart("metadata") String postData) {
}

위 처럼 metadata 를 String 타입으로 받아주고

private List<LectureReq.Chapters> parseMetadata(String postData) {
       try {
           return objectMapper.readValue(postData, new TypeReference<>() {});
       } catch (Exception e) {
           throw new InvalidMetadataException("Invalid metadata format", e);
       }
   }

다음 메서드로 형변환 해주는데
정확한 동작 원리를 풀어서 정리해볼까 합니다.

동작 방식

js에서 metadata 에 대한 배열을 생성 후 객체를 담아주는 과정이 보일것입니다.

metadata: [ 객체들 ]

위 처럼 데이터를 JSON 형식으로 담아 보내면

metadata: [
    {
        "chapterName": "Chapter 1",
        "videos": [
            { "videoTitle": "Video Title 1" },
            { "videoTitle": "Video Title 2" }
        ]
    },
    {
        "chapterName": "Chapter 2",
        "videos": [
            { "videoTitle": "Video Title 3" }
        ]
    }
]

다음과 같이 데이터가 담겨져서 보내집니다.

이렇게 담겨진 metadata 를 컨트롤러에서 String 으로 데이터를 받고
json 형식으로 담아져있는 키,밸류 값들을 변수에 대한 데이터로 변환 시키기 위해

return objectMapper.readValue(postData, new TypeReference<>() {});

readValue 로 데이터를 읽는 메서드 호출하고
TypeReference는 제네릭 타입의 정보를 제공하여 JSON을 올바른 타입으로 변환을 해줍니다.
마지막으로 return 타입을 일치하는 변수명이 담겨져있는 DTO 클래스로 반환을 해주게 됩니다.

metadata 라는 이름을 자주 쓰려나?

블로그를 작성하다 문득 궁금해진 문제인데 찾아보니 단순 변수명이지만 종종 쓰일경우엔,
metadata는 "데이터에 대한 데이터"를 나타내며, 보통 파일, 리소스, 객체에 대한 부가 정보를 담는 데 사용됩니다.
즉, 파일형식의 대한 데이터를 보내줄때에 부가적인 파일정보를 담을 때 쓰이는것같습니다.
무심코 사용했지만 용도에 알맞게 잘 사용한것같습니다. ^^

후기

프론트와 백엔드의 데이터 통신에 관해서는 공부를 많이 안해놓은 상태여서
정확한 동작에 대해 알아보며 js와 java 의 여러 기능에 신기했고,
유능한 백엔드 개발자가 되기 위해서 데이터 통신이 이뤄지는 과정과 여러 기능에 관해 공부해야할것같았습니다.