[React] Day_11 데일리 정리

 

서버까진 자신이 없으니.. 이곳에 뼈를 묻겠읍니다.

 

여러분, 데일리 정리는 오랜만입니다.🙃..

다름이 아니라.. 교육듣고 애프터로 약속이 연달아 잡히기도 했고..

외국도.. 다녀오기도.. 했고.. 뭐.. 핑계는 아니지만..?

정리는 다 해놨지만 바로바로 써야지.. 한게 냅다 밀려버렸네요...? 하하.🫠

할때는 제대로 잡아서 하는 J이지만 원래 본투비 P였던 me로서..

이게 제대로 안되면.. 잘 안하는 편이라.. (고쳐먹어야죠. 꾸준함 챙겨.🤦🏻‍♂️)

오늘 한번 지대로 작성해보겠습니다. 가시죠.

 

출↘바알↗!

 

오늘은 간단하게 적어보겠습니다. (강의정리 뒤엔 실습이기 때문이죠.)

이후엔.. 퀘스트를 해볼 예정.. (해야겠...지..?😞)

 

일단 냅다 웃어요.. 웃..으면 복이..와요..하하하...

 

 

강의 정리 (1) - JSON

클라이언트와 서버는 서로 데이터를 주고받으며 공유한다.

그 중 클라이언트는 서버에서 데이터를 받을 때, 대부분 텍스트로 데이터를 긁어오는 편인데,

서울시 미세먼지 데이터가 들어있는 OpenAPI 를 통해 확인해보자.

(아, 참고로 OpenAPI 는 모든 사용자가 사용이 가능한 API 이니, 자유롭게 사용이 가능하다.)

냅다 API 링크에 접속하니 나온 화면. 정말 어지럽다.

 

냅다 API 를 열어 봤을때는... 뭐가 뭔지 하나도 눈에 들어오지 않는다!

이렇게 옆으로 느으으으을어진 코드를 이쁘게 정렬시켜주는 칭구가 바로 JSON 이올시다.

우선 JSON 을 보기 위해선 크롬에 JSONView 라는 확장프로그램을 설치해야 하는데,

놀랍게도 생각보다 간단하다(!) 그냥 크롬에JSONView 를 검색해서 가장 위에 있는 링크 를 누른 후 '확장 프로그램 추가' 를 눌러주면 끝.

(간단하게 주고받는 형식이라고 생각하기. 이전에 봤던 자료형 딕셔너리의 클론마냥 비슷하게 생겼다.)

JSONView 설치 가이드

 

설치 후, API 에 적용시키면..

이렇게 이쁘게 나온답니다. 어때요, 깔끔하죠? (feat. 밥아조씨)

 

아까는 뭐가 뭔지 몰랐던 부분이 구조화가 되어

Raw 값에 비해 깔끔하게 정리되었다는 것을 알 수 있다.

JSON은 Key 와 Value 로 이루어져 있는데,

위의 이미지에서는 JSON 의 구조가 잘 보이지 않으니 아래의 이미지를 통해 확인해보도록 하자.

이미지로 간단하게 확인해보는 JSON 의 구조

 

두 이미지를 통해 좌측은 RealtimeCityAir 라는 key 값에 딕셔너리 형 value 가 들어가 있음을,

오른쪽 이미지에서는 내부는 row 라는 key 값에 리스트형 value 가 들어가 있다라는 것을 알 수 있다.

 

강의 정리 (2) - API

위에서 API API 거리는데.. API가 도대체 뭐에요? 라고 물으신다면..

클라이언트와 서버를 연결하여 데이터를 주고받을 수 있도록 도와주는 연결다리라 생각하면 된다.

 

서버에 요청하는 조건에 따라 GET 과 POST 이 두가지 방식으로 나뉘어지는데

통상적으로 GET 은 데이터 조회(Read) 를 요청할 때,

POST 는 데이터 생성(Create), 변경(Update), 삭제(Delete) 를 요청 할 때 사용된다.

이 중 우리는 GET 방식에 대해 아래의 예시를 보며 더 자세히 알아보도록 하자.

  

GET - 용어정리

GET 방식으로 데이터를 전달시 사용되는 각 용어를 예시를 통해 알아보도록 하자.

 

google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

 

위 주소는 google.com 의 search 에 정보를 전달하는데, 그 중 q 는 검색어를 보여준다고 생각하면 된다.

q = 아이폰 에서, 우리가 가져가는 데이터는 '아이폰' 이라고 보면 된다.

추가적으로 sourceid 는 브라우저 정보 (chrome), ie 는 인코딩 정보이다. (UTF-8) 

 

다른 예시를 통해 복습해보도록 하자.

 

https://movie.daum.net/moviedb/main?movieId=68593 

 

위 주소는 "?"를 기준으로 크게 두 부분으로 나뉘어지는데,

앞 부분이 <서버 주소>, 뒷 부분이 [영화 번호] 로 생각하면 된다.

('영화번호 = 주민등록번호' 처럼 고유 번호와 같은 형태를 가짐)

주소를 다시 분리하여 각 부분 별로 나누어 정리하게 되면 아래와 같다.

• 서버 주소: https://movie.daum.net/moviedb/main?movieId=68593
• 영화 정보: movieId=68593 ← 우리가 가져가는 데이터!
• 서버의 위치 : movie.daum.net/
• 창구의 이름 : moviedb/main?

 

마무리 - Fetch는 다음시간에.. 그리고 업로드 관련 이슈들

아 이것도 TIL 일부임. 여튼 들어주삼...

 

Fetch 전까지 딱 깔꼼하게..는 아닌 얼렁뚱땅 마무리 ~.~

분명 오늘은 공휴일인데.. 코딩하랴 강의정리하랴.. 휴일 반납 쉽지 않네요;

데일리 정리도 중요하지만.. 내일은 아무래도 프로젝트를 우다다다 해야하기 때문에?

아마 배운 내용과 정리가 왔다갔다 하면서 업로드 될 예정입니둥.

어딜가나 왜 그런진 모르겠으나.. 리-다 의 자리는 쉽지 않네요..🤦🏻‍♂️

그래도 믿고 잘 따라와주시는 팀원분들에게.. 감사의 인사를.. 전하며...

내일 또 뵙겠습니다. 굿바이. (내일 수업듣기 싫다. 정말 싫다.)