▶▶▶현재 시간 : 2022년 10월 17일 3:17 P.M.
집중 하기 위해 데스크, 모니터,의자 전부다 바꿨다. 최상의 컨디션으로 코딩연습하기 위해...ㅎ
좋은 결과 있기를..!
▶JSON이란 ?
데이터는 무엇보다 중요합니다. 하지만 다양한 종류의 데이터를 어떻게 활용해야 할지 아는 일은 그보다 더 중요하죠. 프로그래머, 개발자, IT 전문가들은 어떤 언어에서든 데이터 구조와 실제 데이터를 다른 언어 및 플랫폼에서 해석 가능한 형식으로 전송할 수 있어야 합니다. JavaScript Object Notation(JSON)은 이를 가능케 하는 데이터 교환 포맷이죠.
JSON이 개발자들 사이에서 인기를 얻게 된 이유는 인간이 읽을 수 있는 문서로 이루어졌기 때문입니다. 게다가 코딩도 더 적게 필요하고, 처리 속도가 빠른, 경량 언어이기 때문이죠.
직역하면 '자바 스크립트 객체 표기법'으로
데이터를 쉽게 ' 교 환 ' 하고 ' 저 장 ' 하기 위한 텍스트 기반의 데이터 교환 표준 입니다.
▶JSON 구조
JSON은 자바스크립트의 객체 표기법으로부터 파생된 부분 집합입니다.
따라서 JSON 데이터는 다음과 같은 자바스크립트 객체 표기법에 따른 구조로 구성됩니다.
1. JSON 데이터는 이름과 값의 쌍으로 이루어집니다.
2. JSON 데이터는 쉼표(,)로 나열됩니다.
3. 객체(object)는 중괄호({})로 둘러쌓아 표현합니다.
4. 배열(array)은 대괄호([])로 둘러쌓아 표현합니다.
▶JSON 데이터 유형 및 예시
JSON은 파싱 또는 직렬화 없이도 JavaScript 프로그램에서 사용할 수 있습니다. JSON은 JavaScript 객체 리터럴, 배열, 스칼라 데이터를 표현하는 텍스트 기반의 방식입니다.
JSON은 상대적으로 쉽게 읽고 작성할 수 있고, 소프트웨어에서 파싱 및 생성하기도 쉽습니다. 종종 구조화된 데이터를 직렬화해 이를 네트워크에서 교환할 때(보통 서버와 웹 애플리케이션 간) 사용됩니다.
JSON은 여러 데이터 유형으로 세분화할 수 있습니다.
- 문자열
- 숫자
- 부울
- Null
- 객체
- 배열
JSON 데이터
JSON 데이터는 이름과 값의 쌍으로 구성됩니다.
이러한 JSON 데이터는 데이터 이름, 콜론(:), 값의 순서로 구성됩니다.
"데이터이름": 값
다음 예제는 데이터의 이름이 "name"이고, 값은 "식빵"이라는 문자열을 갖는 JSON 데이터의 예제입니다.
"name": "식빵"
데이터의 이름도 문자열이므로, 항상 큰따옴표("")와 함께 입력해야 합니다.
데이터의 값으로는 다음과 같은 타입이 올 수 있습니다.
1. 숫자(number)
2. 문자열(string)
3. 불리언(boolean)
4. 객체(object)
5. 배열(array)
6. NULL
JSON 객체
JSON 객체는 중괄호({})로 둘러쌓아 표현합니다.
또한, JSON 객체는 쉼표(,)를 사용하여 여러 프로퍼티를 포함할 수 있습니다.
{
"name": "식빵",
"family": "웰시코기",
"age": 1,
"weight": 2.14
}
JSON 객체를 그림으로 나타내면 다음과 같습니다.
JSON 배열
JSON 배열은 대괄호([])로 둘러쌓아 표현합니다.
또한, JSON 배열은 쉼표(,)를 사용하여 여러 JSON 데이터를 포함할 수 있습니다.
다음 예제는 배열의 이름이 "dog"이고, 3개의 JSON 객체를 요소로 가지는 JSON 배열의 예제입니다.
"dog": [
{"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14},
{"name": "콩콩", "family": "포메라니안", "age": 3, "weight": 2.5},
{"name": "젤리", "family": "푸들", "age": 7, "weight": 3.1}
]
JSON 배열을 그림으로 나타내면 다음과 같습니다.
참고 : https://www.oracle.com/kr/database/what-is-json/
http://www.tcpschool.com/json/json_basic_structure
▶서버-클라이언트 통신 이해하기
1) 서버→클라이언트: "JSON"을 이해하기
JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유사하죠
RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
2) 클라이언트→서버: GET 요청 이해하기
API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다. * GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정
▶GET
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.
* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
* 영화 정보: code=161967
- GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다. & : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8 위 주소는 google.com의 search 창구에 다음 정보를 전달합니다! q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)
여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은 누가 정하는 것일까요?
→ 네, 바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다. 프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?" 백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"
'Web development (2)' 카테고리의 다른 글
| 웹개발 2주차 (6) -JQuery+Ajax 연습 (0) | 2022.10.17 |
|---|---|
| 웹개발 2주차 (5) - Ajax (0) | 2022.10.17 |
| 웹개발 2주차 (3) - jQuery + Javascript의 조합을 연습 (0) | 2022.10.17 |
| 웹개발 2주차 (2) - JQuery 연습 (0) | 2022.10.17 |
| 웹개발 2주차 (1) - jQuery (0) | 2022.10.14 |
