아 나 프론트엔드인데 서버랑 어떻게 통신해..

김도혁
2026. 02. 24. 오후 03:35·22
얕은 복사란?
객체를 복사할 때, 내부에 있는 참조 타입은 같은 주소를 공유하는 복사 방식이다.
즉, 참조를 공유하고 더 깊은 내부의 객체나 배열들을 복사가 되지 않는다는것이다.
깊은 복사란?
객체를 복사할 때, 중첩된 모든 참조 타입까지 재귀적으로 새로 생성하여 원본과 완전히 독립된 객체를 만드는 복사 방식이다.
얕은 복사의 문제점은?
딱 느껴보았을때, 얕은 복사의 문제점은 내가 의도하지 않은 데이터가 변경된다는 가장 큰 문제점이 느껴질 것이다.
이를 전문가적으로 좀 풀어말해보자면,
- 디버깅이 어렵다. 어느순간 원본 데이터가 바뀌어있기 때문에 이러한 버그는 추적하기가 매우 어렵다는 단점이 있다.
- 불변성이 깨진다. 요즘 추세는 하나의 데이터가 하나의 데이터를 반환하는 패턴이다. 이는 코드나 변수의 명확성과 개발자의 의도를 함유하기 편하고 유지보수 관리에 용이하다는 장점이 있지만, 이를 해치는 원인중 하나가 될 수 있다.
깊은 복사는 JavaScript에서 어떻게 해야하는가?
깊은 복사는 JS에서 복잡한 구조를 모두 복사하는것은 결코 쉬운일이 아니다.
- JS에는 참조 타입이 존재한다. 객체와 배열은 값이 아니라 참조로 저장된다. 따라서, 단순한 할당이나 spread 문법은 내부 참조까지 복사하지 않는다.
- 중첩 구조가 무한히 깊어질 수 있다.
{ // 예시 user: { profile: { address: { city: "Seoul" } } } }
- 다양한 타입이 존재한다. Date, Map, Set, ... , 순환 참조 등등 각 타입에 맞게 처리하기 위해선 맞는 처리 로직이 필요하다.
깊은 복사를 쉽게해주는 기술에는 어떤것이 있을까?
- structuredClone()을 사용한다.
structuredClone()이란? : MDN 문서
let deepCopy = structuredClone(original);
- JSON 방식을 사용한다.
JSON.stringify()란? : MDN 문서
JSON.parse()란? : MDN 문서
JSON.parse(JSON.stringify(obj));
프론트엔드와 백엔드간에 통신은 어떻게?
알아야하는 내용은 직렬화와 역직렬화이다.
와씨.. 직렬화가 뭔데? 위의 MDN 문서를 보았다면 우리는 이미 직렬화를 할 수 있다.
JSON.stringify(data);
이 코드가 바로 직렬화이다.
직렬화란 객체를 네트워크로 전송하거나 저장할 수 있도록 문자열 또는 바이트 형태로 변환하는 과정이다.
클라이언트와 서버는 데이터를 네트워크를 통해 전송하는데 이때 네트워크는 결국 문자열이나 바이트 데이터만 주고받을 수 있기 때문이다.
그렇게 가져온 데이터를 다시 사용 가능한 타입으로 바꿔주는것이 역직렬화이다.
JSON.parse(json);
즉 문자열의 형태를 다시 객체의 형태로 복원하는 행위를 말하는것이다.
마지막으로 서버와의 통신은 JSON으로만 하는가?
아니다. XML, CSV Protocol Buffers 등등 매우 많다.
그럼에도 JSON을 널리 사용하는 이유는?
- 사람이 읽기 쉽다.
- 디버깅이 편하다.
- 브라우저에서 기본으로 지원해준다.
- REST API와 잘 어울린다.
22

김도혁
댓글
댓글을 작성하려면 이 필요합니다.