'10 HTML'에 해당되는 글 2건

  1. 2021.08.26 json 기초개념
  2. 2021.07.29 ---01 HTML의 4가지 요소

json 기초개념

10 HTML 2021. 8. 26. 17:22

 

일단 JSON파싱을 하려면 JSON이 뭔지 알아겠죠?

JSON은 JavaScript Object Notation의 약자에요. 줄여서 JSON. 우리말로는 "제이슨"이라고 하죠.

왜 다들 JSON, JSON거리는 걸까요? 이걸 왜 파싱해? 

 

 

JSON은 "네트워크를 통해 데이터를 주고받는 데 자주 사용되는 경량의 데이터 형식"이에요.  

더이상 어렵게 말하지 않겠습니다...왜냐면 왕초보를 위한 글이기 때문 ㅎ_ㅎ

JSON에 대해 이론적으로 더 알고싶다! 하시는 분들은 여기에 가시면 자세하게 설명되어 있답니다. 

 

 

지금 이 글을 보시는 분들중에 JSON이 어떻게 생긴지 아시는분도, 아닌분들도 계실거에요.

(JSON Parsing으로 들어오셨을테니..아실지도)

 

JSON은 바로

 

이런식으로 생겼답니다. 

이런식으로 데이터를 저장하는거죠. 

 

저도 JSON에 대해 완벽하게 아는건 아니지만, 만약 정말 초보시라면

이 JSON이 어떻게 이루어져있는지 아는것이 배우는데 큰 도움이 될 거라고 생각해요.

이 JSON이 어떻게 되어있구나~~를 알게된다면, 코딩하는데도 훨씬 쉬울겁니다.

그럼 같이해볼까요?

 

음...위키백과에 있는 간단한 JSON예제를 가져와볼게요.

 

{

"이름": "테스트",

"나이": 25,

"성별": "여",

"주소": "서울특별시 양천구 목동",

"특기": ["농구", "도술"],

"가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"},

"회사": "경기 수원시 팔달구 우만동"

}

 

자. 먼저 JSON은  name - value 형태의 쌍으로 이루어져있어요.  

예를들어 "나이"가 name이고 value가 25인거죠.

이때, name인 애들은 무조건 String이기때문에 반드시 큰따옴표로 묶어줘야한답니다. 

만약 value도 String이라면, 큰따옴표로 묶어줘야겠죠? 하지만 25는 String이 아니기 때문에 큰따옴표로 안묶어준 것입니다.

 

이제 JSON이라는 큰 숲을 본거에요. 이제 나무들을 보러가봅시다.

 

 

자, 첫번째 줄. { <- 중괄호로 시작되네요. 

이 중괄호의 의미는, 이제 객체(Object)가 나올거야! 라는 소리입니다. 

JSON에서의 객체는, 위에서 말한 name-value의 쌍의 집합입니다. 

다시 한번말하지만, 여기서 name은 반드시 String이며, value는 기본 자료형이거나 배열, 객체입니다. 또한, 각 쌍들은 쉼표(,)로 구분돼요. 

또한 name 과 value는 콜론(:)으로 이어져있습니다. 

"나이" : 25 

이렇게요.

또한 쉼표로 각 쌍들이 구분되어 있는 것. 보이시죠?ㅎㅎ

 

가장 첫줄에 {

그리고 가장 마지막줄에 }. 즉 객체가 하나 나왔네요. 

그 객체안에 name-value의 쌍이 있는 것입니다. 

 

그런데, 잘 보면 

"특기": ["농구", "도술"],

 

이부분, 대괄호가 나왔네요..?

한번 살펴봅시다.

 

JSON에서 대괄호([])의 의미는 "배열"을 의미해요. 

배열의 각 요소는 저기 예제처럼 기본 자료형(String)이어도 되고, 배열, 객체여도 괜찮아요.

배열안에 배열..방금 배열은 []로 나타낸다며..?또..배열안에 객체요?...JSON에서 객체는 위에서 {}로 나타낸댔는데..이 두개가 배열안에 들어가도 되나요..?

 

네! 됩니다. 다음 예제를 보실까요? 

[ 10, {"v": 20}, [30, "마흔"] ]

자, 대괄호( [ )로 시작했으니 이건 배열을 나타내는 것이겠네요. 이 안에는 기본자료형(10), 객체 ({ "v" : 20 }) , 배열([30,"마흔])이 들어갈 수 있는것이죠!

주의하실점은 객체는 반드시 name-value의 쌍이라는 것. 잊지마세요.

 

또한, 

"특기": ["농구", "도술"],

위에서 제가 뭐랬죠?

이 특기 쌍 또한 {}안에 있으니 name-value의 쌍입니다.

name에는 String이 들어갔는데, value에는 배열이 들어왔네요?

제가 위에서 언급했다시피,

"여기서 name은 반드시 String이며, value는 기본 자료형이거나 배열, 객체입니다. 또한, 각 쌍들은 쉼표(,)로 구분돼요."

value는 배열, 또는 객체여도 됩니다. 우리는 지금 value가 배열인 것을 본거죠.

 

{

"이름": "테스트",

"나이": 25,

"성별": "여",

"주소": "서울특별시 양천구 목동",

"특기": ["농구", "도술"],

"가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"},

"회사": "경기 수원시 팔달구 우만동"

}

자, 그럼 여기서 value가 "객체"인 것은 무엇일까요?

네!!맞습니다. 객체는 {} 중괄호를 사용한댔죠? 

 

"가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"},

 

이부분이 value로 객체를 사용한 부분이 되겠네요.

중괄호로 시작했으니까!!!XD

 

자. 잊어버리시면 안돼요. JSON에서 객체는 뭐라구요?

"name-value쌍들의 집합"입니다. 무조건 쌍들로 나타나야해요. 또한, 그 쌍들은 쉼표로 구분되어야 합니다.

자 한번 보세요! 잘 나와있나요? 

 

 

네. 잘나와있는것 같아요. 

각 name은 큰따옴표로 잘 묶여있고,

 value도 있고, 

name-value가 콜론으로 잘 이어져있고,

 각 쌍들이 쉼표로 잘 구분되어있네요.

 

 

이제 여러분은 JSON이 어떻게 이루어졌는지 이제 다 아는거에요!!!!!XD

축하드려요. 

그럼 위에서 했던 질문. 

이걸 왜 파싱해?

간단하죠. 저희는 이렇게 JSON형태로 온 데이터들을 파싱, 음..데이터를 뽑아낸다고 말하는게 좋을까요?

저 형태로는 저 데이터들을 이용할 수 없으니까요. 

우리는 저기서 데이터들을 뽑아서 

아 이름이 테스트고, 나이가 25고.. 배열 또는 딕셔너리 형태로 저장해야 저 데이터들을 쓸 수 있겠죠?

그래서 다들 JSON 파싱 파싱 그러는거랍니다. 



출처: https://zeddios.tistory.com/90 [ZeddiOS]

'10 HTML' 카테고리의 다른 글

---01 HTML의 4가지 요소  (0) 2021.07.29
Posted by useways
,

출처:

http://clubhouse.xtx.kr/kiss2me/start.php?id=TG2&page=42&divpage=1&sn=off&ss=on&sc=off&select_arrange=headnum&desc=asc&no=309 

 

HTML은 다음 4가지 종류의 코드들의 집합체입니다.

※ 요소(Elements)

요소란 HTML 명령을 말합니다.
시작태그와 끝내기 태그를 가질 수 있으며 컨테이너(시작태그와 더불어 끝내기 태그를 갖는 요소)라면
시작태그와 끝내기 태그 사이에 텍스트나 다른 요소를 가질 수 있습니다.
예를 들어 <TITLE></TITLE>이라는 요소는 웹브라우저에게 제작된 웹 문서의 제목을 웹 브라우저가
제목 표시창에 표시하도록하는 명령하는 것입니다.
시작태그와 끝내기 태그 사이에 제목을 써 주기 때문에 컨테이너라고 부릅니다.
<IMG> 처럼 시작 태그만 있는 요소도 있습니다.

※ 태그(Tags)

태그는 요소의 일부로서 시작태그와 끝내기 태그 두 종류가 있습니다.
시작태그는 요소를 시작하며 끝내기 태그는 요소를 끝냅니다. 물론 모든 요소들이 끝내기 태그로 끝나는 것은 아닙니다.
예를 들어 <TITLE>로 시작한 제목요소는 </TITLE>라는 끝내기 태그를 갖지만
이미지 요소인 <IMG>는 끝내기 태그를 갖지 않습니다.

※ 속성(Attributes)

속성은 요소의 시작 태그내에 사용하는 것으로 명령을 구체화시키는 것입니다.
예를들어 텍스트의 폰트 지정을 위해 사용하는 <FONT></FONT> 요소는
SIZE, COLOR, FACE 등의 속성을 갖는데 <FONT SIZE=5>처럼
시작태그 내에 사용되며 속성과 변수 사이에는 = 이 라는 부호를 사용하여 연결합니다.
속성은 보통 변수를 갖지만 NOSHADE등 일부 속성은 변수를 갖지 않습니다.

※ 변수(Arguments)

변수는 속성과 관련된 값을 말합니다.
<BR CLEAR="left">에서 " "내에는 right나 all도 사 용될 수 있는데 이들은 속성 CLEAR의 변수이며
속성과 변수는 등호 '='에 의해 구분됩니 다.
변수 중에는 변수를 " " 내에 넣는 것과
넣지 SIZE=5 처럼 넣지 않는 것이 있으므로
속성마다 사용여부를 잘 알아 두어야 합니다.

'10 HTML' 카테고리의 다른 글

json 기초개념  (0) 2021.08.26
Posted by useways
,