2023. 01. 04 개발일지 - 서버 클라이언트 통신 이해

클로이🖤·2023년 1월 4일
0

Web-developer

목록 보기
9/22
post-thumbnail

서버 - 클라이언트 통신 이해하기

이번 강의는 코드 작성은 없당 ! ! ! 흑흑 (아쉬운 척)

First. 서버 → 클라이언트 : "JSON" 이해하기

일단 서울시 미세먼지 OpenAPI를 열어준다.

?????? 이게 뭐임 도대체 ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ 보이는 거라곤 동북권 .. 마포구 .. 등등 ; 그래서 우리한테 필요한 건 ? JSONVue 크롬에 확장프로그램 추가 해 주세요 ^^..

아까 미세먼지 창을 새로고침 해주면 다행히 이렇게 보여집니다 .. 감사합니다 똑똑하신 분들 .. 여러분 덕분에 공부하고 살아요 .. 일단 내용을 좀 접어서 차근차근 하나씩 봐보자구요. 나는 아직 한눈에 알아보기 힘드니까 .. ★

일단 아래 사진을 보면서 차근차근 뜯어보자구용

다 접은 다음에 보면 중괄호 {} (dictionary) 안에 RealtimeCityAir라고 하는 key에 dictionary( { } )가 value로 들어가 있고, 그 안을 보면 list_total_count에 25, RESULT key에 또 dictionary( { } ), row 안에는 list ( [ ] )가 들어가 있는 것을 확인했다. list 내부에는 순서대로 dictionary 내부에 구가 하나씩 들어가 있는 것을 확인했다 ~~ !

이처럼 JSON은 Key : Value로 이루어져 있음 ! 자료형 dictionary와 많이 유사함.

이게 서버에서 클라이언트로 데이터를 내려줄 때 가지고 올 수 있는 포맷이라고 하셨다.

Second. 클라이언트 → 서버 : GET 요청 이해하기

API는 은행 창구랑 비슷하다고 생각하면 된다. 같은 예금 창구에서도 개인 고객인지 기업 고객인지에 따라 가져와야 하는 것과 처리해주는 것이 다른 것처럼, 클라이언트가 서버에 요청할 때에도 "타입" 이라는 것이 존재한다.

⭐GET   → 통상적으로 데이터 조회(read)를 요청할 때 ex) 목록 조회
⭐POST → 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)
                요청할 때 ex) 회원가입, 탈퇴, 비밀번호 수정

오늘은 GET 방식에 대해서 배우고 POST는 4주차에 배운다고 한다. 근데 이거 이클립스에서 톰캣 연동해서 프로젝트 만들 때랑 거의 비슷한 거 같은데 ? .. 그 때도 겟방식 포스트방식 달라서 꽤나 우왕좌왕 했었는데 .. 아무튼 차근차근 다시 해보자구요~

GET 방식으로 데이터를 전달하는 방법 !

? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻

ex1) https://google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8 에서

google.com의 search 창구에 q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보) 이 정보들을 전달한다.

ex2) https://movie.naver.com/movie/bi/mi/basic.naver?code=103331

위 주소에서 분홍색까지는 이 컴퓨터의 위치 (예를 들어 국민은행 중앙지점 같은 느낌?), 하늘색 부분은 창구 이름(입출금 창구 정도?)이라고 보면 된다. 주황색 부분은 데이터를 가져오는 부분 (음 .. 코드? 주민등록번호 같은 느낌?) 일단 위 주소는 네이버 영화 사이트에서 가져왔는데, 이 영화 말고 다른 영화 소개(?) 페이지에 들어가면 위 code= 뒤 번호만 다르고 나머지는 똑같다 !

이제 다음 강의에서 실질적으로 사이트에 적용해보자 !

profile
front-end developer

0개의 댓글