JS-2 hours daily: Ajax

박상하·2023년 6월 21일

TIL CS/JS

목록 보기

4/22

자바스크립트 이러다 까먹겠어 😢

요즘 매일 코딩테스트만 풀고있다. 하루에 모든 공부시간을 코딩테스트에 투자하다보니 JS랑 멀어지고있는 거 같아 많아 아쉬웠다. 그러다 "흠 그냥 2시간 일찍 일어나서 JS를 공부해보는 게 어떨까?" 라는 생각이 들었고 JS에 대한 정리도 함께 해나가기로했다. 물론 코딩테스트 학습에 대한 학습시간을 줄일 생각은 없다. 개발적인 감각을 잃지 않기위한 나의 최소한의 노력이다!

Ajax ❓

짝발란스 SNS 개인 프로젝트를 진행하면서 Ajax에 대한 개념을 숙지했었는데 다시 보니 정확한 의미를 잊어버리고 있었다.

Ajax => 서버와 비동기적으로 통신하여 데이터를 얻는 자바스크립트 기술

핵심은 서버와 비동기적으로 통신할 때 사용하는 기술이다. 보통은 API를 가져오는 방법에 대한 기술이다.

필자는 fetch, axios의 둘 다 사용을 해봤는데 axios가 fetch하는 방법보다 더 간편하고 보기에 더 좋았다.

fetch는 Json 데이터 타입의 Promise 객체를 반환한다. 그렇기 때문에 json() 메서드를 통해 결과값을 변환시켜준 뒤 데이터를 사용할 수 있다.
반면, axios를 사용하면 HTTP 요청을 보내고 응답을 받을 수 있으며, JSON 데이터를 자동으로 변환해주는 기능 등을 제공한다.

Json이 뭐야 ❓

JavaScriptObejectNotation
=> 자바스크립트 오브젝트 표기법

그냥 데이터를 보관하는 형식인데 Object형식으로 데이터를 보관하는 것!

그럼 Json === Object???

그렇지않다..!

(Chat Gpt에서 발췌)

객체(Object)는 프로그래밍에서 사용되는 데이터 구조로, 여러 속성(attribute)과 메서드(method)로 구성됩니다. 객체는 클래스(class)를 기반으로 생성되며, 클래스는 객체의 설계도(blueprint) 역할을 합니다. 객체는 해당 클래스의 인스턴스(instance)입니다. 객체는 프로그래밍 언어에서 다양한 형태로 구현되며, 객체지향 프로그래밍(Object-Oriented Programming, OOP) 개념의 핵심 요소입니다.

JSON(JavaScript Object Notation)은 데이터 교환 형식으로, JavaScript 객체 표기법을 기반으로 한 경량의 텍스트 형식입니다. JSON은 자바스크립트 객체와 유사한 구조를 가지며, 키-값 쌍의 집합으로 데이터를 표현합니다. JSON은 일반적으로 데이터를 전송하거나 저장하기 위해 사용되며, 다양한 프로그래밍 언어에서 해석하고 생성할 수 있습니다.

즉, Object는 데이터 구조이고 Json은 데이터 교환 형식

또한 Json은 객체 표기법을 기반으로 한 경량의 텍스트 형식이다.

const Obj = {name:"조개소년",age:28}
const Json = Json.stringfy(Obj)

console.log(Obj)
//{name:"조개소년",age:28}
console.log(Json)
//{"name":"조개소년","age":28}