[JSON] JS ↔ Java ↔ JSON 배열, 리스트 주고받기 (Spring, Jackson, JavaScript) 쉽게 정리

Julie Mingu·2023년 9월 19일
JavaScriptObjectMapperSpringjacksonjsonjson리스트json배열object넘기기리스트 여러개받기리스트넘기기배열넘기기자바스크립트
2
post-thumbnail

백엔드 코딩을 하다보면 JavaScript를 쓸 일이 많아요. 😌
특히 JSP를 계속해서 가공해줘야하는 작업이 있다거나,
API를 코드 흐름에 맞게 가공하는 일이 그렇습니다.

어떤 때에는 '이렇게 이상하고 기묘하게 생긴 리스트와 어마무시한 컬렉션의 조합을 어떻게 주고받는담..ㅠㅠ'
하고 낙담하게 되지만요. 요리조리 객체를 만들어서 던지기 놀이를 하다보면, 재미가 생길거에요.

JSON을 잘 다루기만 한다면 웬만한 API를 받아오는 것이나,
백엔드-프론트엔드의 흐름을 익히는 데에도 도움이 되실거라고 생각합니다. 😊

특히 일반적인 값이 아닌, 배열 형식의 값들을 꾸준히 주고 받기 위해서는 JSON이 꼭 필요할텐데요.
오늘은 배열의 형식을 가진 JSON을 주고받는 방법에 대해서 정리해서 예시와 함께 알려드리겠습니다.

처음 알아두셔야할 것은 자바스크립트의 데이터 타입입니다.
Object와 Array가 어떻게 다른지는 꼭 파악하셔야해요. 👀
쉽게 비교하자면, Object는 자바의 map과 비슷하고, Array는 자바의 ArrayList와 비슷하답니다.

JavaScript Data Type

8 datatypes

  • String
  • Number
  • Bigint
  • Boolean
  • Undefined
  • Null
  • Symbol
  • Object

Object Datatype

  • Object
  • Array
  • Date

Array는 대괄호로 되어있다는 것이 특징입니다.
Object는 중괄호에요. 🤖

✅ Array

  • 대괄호 [ ]
  • const cars = ["Saab", "Volvo", "BMW"]

✅ Array to JSON

const arr = ["John", "Peter", "Sally", "Jane"];		
const myJSON = JSON.stringify(arr);		
myJSON
//출력결과
["John","Peter","Sally","Jane"]

✅ Object

  • 중괄호 { }
  • name : value 페어
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

여기서 value값만 배열로 얻고싶을 때는 어떻게 하면 될까요?
배열을 새로이 만들고 Object.values를 써줍니다. 반대로 keys를 해도 됩니다.

const myObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};
const valuesArray = Object.values(myObject);

결과값
valuesArray = ['value1', 'value2', 'value3']


✔ Object와 JSON의 차이

key:value 에서 object는 key가 따옴표에 둘러싸여 있지 않습니다.

const myObject = { key: 'value' };

JSON은 엄격한 구문 규칙이 있는데요. 모든 값이 큰따옴표로 감싸있습니다.

데이터 타입의 제한

  • JSON은 문자열, 숫자, 불리언, 배열, 객체, null만을 지원한다.
  • 함수를 지원하지 않는다.
  • JS는 함수도 가능하다.
  • 또한 JSON은 메서드를 포함하지 못한다.

Array → Object로 만드는 방법

value값을 null로 지정해서 보내보겠습니다.

const myArray = ['name', 'age', 'location'];
const myObject = {};

myArray.forEach(key => {
  myObject[key] = null;
});

console.log(myObject);

결과

{
  name: null,
  age: null,
  location: null
}

Object → Array로 만드는 방법

const myObject = {
  name: 'John',
  age: 30,
  location: 'New York'
};

const myArray = Object.values(myObject);

console.log(myArray);

Object → JSON으로 만드는 방법

모든 키와 밸류에 큰따옴표를 넣어 String화 해주는 것이에요.

const myObject = {
  name: 'John',
  age: 30,
  location: 'New York'
};

const jsonString = JSON.stringify(myObject);

console.log(jsonString);

결과

{
  "name": "John",
  "age": 30,
  "location": "New York"
}

JSON → Object으로 만드는 방법

JSON.parse라는 강력한 기능으로 쉽게 말해 Object의 형식으로 바꿔주는 것입니다.

const jsonString = '{"name": "John", "age": 30, "location": "New York"}';
const myObject = JSON.parse(jsonString);

console.log(myObject);

결과

{
  name: 'John',
  age: 30,
  location: 'New York'
}

Array → JSON으로 만드는 방법

큰따옴표를 붙여주는 형식은 뭐다? stringify

const myArray = ['name', 'age', 'location'];
const jsonString = JSON.stringify(myArray);

console.log(jsonString);

결과

["name","age","location"]

Value값이 배열인 경우

❗ JSON도 배열을 가질 수 있습니다.

const myObject = {
  name: 'John',
  hobbies: ['reading', 'traveling', 'coding']
};

// Object를 JSON으로 변환
const jsonString = JSON.stringify(myObject);

// 해당 배열 추출
const hobbiesArray = myObject.hobbies;

console.log(jsonString);
console.log(hobbiesArray);

결과

{
  "name": "John",
  "hobbies": [
    "reading",
    "traveling",
    "coding"
  ]
}

여기서 배열만 추출하면 아래와 같은 값이 나옵니다.
['reading', 'traveling', 'coding']

정리하자면...

✨ JavaScript의 내장함수 ✨

  1. JSON.parse
    : JSON -> JavaScript
  2. JSON.stringify
    : JavaScript -> JSON
const jsonString = '{"name": "John", "age": 30}';
const myObject = JSON.parse(jsonString);
console.log(myObject.name); // 출력: John

const myObject = { name: "John", age: 30 };
const jsonString = JSON.stringify(myObject);
console.log(jsonString); // 출력: {"name":"John","age":30}
const jsonString = '{"name": "John", "age": 30, "location": "New York"}';
const myObject = JSON.parse(jsonString);

console.log(myObject);

결과
{ name: 'John', age: 30, location: 'New York' }

요리조리 요리를 해서 백엔드로 JSON을 받게 된다면,
혹은 JSON을 넘겨줘야하는 상황이 있다면 자바에서는 어떻게 하면 될까요?

백엔드 자바진영에서 JSON을 사용하고 싶다면 Jackson 라이브러리를 사용하면 됩니다. 🌞
물론 하드코딩을 해도 되지만요.

자바 진영에서도 JSON을 파싱하는 다양한 라이브러리가 있는데,
그중에서도 전세계적으로 가장 많은 개발자들의 사랑을 받고 있는 라이브러리가 바로 Jackson입니다.
대용량 데이터를 처리하는 데에 있어 가장 빠르다고 하니, 이걸로 먼저 연습을 해보면 좋겠죠.

Jackson을 사용하기 위한 준비

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-dataformat-xml</artifactId>
    <version>2.14.2</version>
</dependency>

Java에서 프론트로 보내기

import com.fasterxml.jackson.databind.ObjectMapper;
import java.util.Arrays;
import java.util.List;

public class Main {
    public static void main(String[] args) {
        ObjectMapper objectMapper = new ObjectMapper();

        List<String> myList = Arrays.asList("apple", "banana", "cherry");

        try {
            String jsonString = objectMapper.writeValueAsString(myList);
            System.out.println(jsonString);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

결과
["apple","banana","cherry"]

JSON을 받은 백엔드

아까 위에서 자바스크립트를 가지고 JSON을 요리조리 바꿔보는 것을 해봤죠.
그 데이터를 백엔드가 받았을 경우입니다.
보통 가장 많이 사용할 부분이 바로 이 코드라고 생각되는데요.

자바의 object로 받기

// String to Object
String json = "{ \"name\" : \"Ryan\", \"age\" : 30 }";
User user = objectMapper.readValue(json, User.class);
// JSON File to Object
User user = objectMapper.readValue(new File("user.json"), User.class);
// JSON URL to Object
User user = objectMapper.readValue(new URL("file:user.json"), User.class);

자바의 List로 받기

String jsonArr = "[{\"name\":\"Ryan\",\"age\":30},{\"name\":\"Jake\",\"age\":20}]";
List<User> users = objectMapper.readValue(jsonArr, new TypeReference<>() {});

✅ 자바를 JSON으로 변환하는 것을 Serialize 직렬화라고 합니다.
✅ 반대로 JSON을 자바의 객체로 가져오는 것을 역직렬화, Deserialize라고 합니다.

위 두 예시는 JSON을 받아와서 역직렬화하는 것을 보여주고 있어요.

자바의 객체를 JSON으로 변환하는 것은 writeValueAsString을 사용하시면 됩니다.

자바의 리스트를 JSON으로 바꾸기

import com.fasterxml.jackson.databind.ObjectMapper;
import java.util.List;

public class Main {
    public static void main(String[] args) throws Exception {
        List<String> myList = List.of("value1", "value2", "value3");

        // ObjectMapper 생성
        ObjectMapper objectMapper = new ObjectMapper();

        // 리스트를 JSON으로 변환
        String json = objectMapper.writeValueAsString(myList);

        System.out.println(json);
    }
}

결과
["value1","value2","value3"]

🚩JSON To List

제 코드의 경우, 한참 가공을 하고 API로부터 받아온 값들이 배열 형태의 JSON이었습니다.
이 배열들의 값들을 다시 서버로 가지고와 DB에 저장해야했어요.

저장하기 위해 저는 자바로 리스트를 만들어줄겁니다.

import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;

import java.io.IOException;
import java.util.List;

public class Main {
    public static void main(String[] args) {
        String jsonArray = "[{\"name\":\"Ryan\",\"age\":30,\"city\":\"New York\"}," +
                          "{\"name\":\"Jake\",\"age\":20,\"city\":\"Los Angeles\"}]";

        ObjectMapper objectMapper = new ObjectMapper();

        try {
            List<User> users = objectMapper.readValue(jsonArray, new TypeReference<List<User>>() {});

            for (User user : users) {
                System.out.println("Name: " + user.getName() + ", Age: " + user.getAge() + ", City: " + user.getCity());
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

파싱 전 JSON

[
    {"name": "Ryan", "age": 30},
    {"name": "Jake", "age": 20}
]

파싱 후 List

users: [
    User{name='Ryan', age=30},
    User{name='Jake', age=20}
]

이렇게 Jackson과 JavaScript의 내장함수로
JSON 을 요리조리 변환해보는 방법에 대해 알아보았습니다.
도움이 되셨길 바라며...

그럼 오늘도 행복한 코딩 되세요! 💘

profile
Julie Mingu
(੭˙ ˘ ˙)੭🌱 자란다, 잘한다!
이전 포스트

[네아로] 네이버 소셜로그인 Spring MVC로 DB까지 : POST 방식으로 연결하기

다음 포스트

[Nginx] 쉽게 이해하는 Nginx 설치부터 Reverse Proxy 까지 (서버에 포트 여러개 연결하기)

0개의 댓글