TIL (16) 썸네일형 리스트형 JSON (2) 개념 이 포스트는 드림코딩 by 엘리님의 자바스크립트 10. JSON 강의를 정리한 것입니다. youtu.be/FN_D4Ihs3LE 저번 시간 복습) 웹브라우저와 서버가 통신할 때 사용하는 규칙이 http http의 단점을 보완한 Ajax라는 기술이 등장했다. - Ajax 기술을 구현하는 다양한 방법 중 하나가 fetch API - 주고받는 데이터의 포맷으로 주로 XML을 사용했지만 최근에는 JSON을 사용한다. JSON 공부 포인트 1. Objet를 JSON으로 어떻게 serialize 할지 2. JSON을 어떻게 deserialize해서 Object로 바꿔줄지 1. Object to JSON JSON.stringify('object'); stringify라는 API를 사용하면 간단하게 Object가 JSO.. JSON (1) Intro 이 포스트는 드림코딩 by 엘리님의 강의를 듣고 정리한 내용입니다. youtu.be/FN_D4Ihs3LE Intro 웹 브라우저와 같은 Client들이 어떻게 Server와 통신할 수 있는지를 정한 것이 바로 HTTP(Hyper Text Transfer Protocol)라고 했다. 어떻게 Client와 Server가 Hypertext를 주고 받을 것인가..를 정한 것인데 여기서 Hypertext는 hyperlinks뿐만 아니라 문서, 이미지 파일, css, javascript 등등을 의미한다! 그런데 이 HTTP에는 단점이 있었다. 바로 사용자가 페이지를 이동해야만 무언가를 요청할 수 있거나 일부 정보만 바뀌면 되는데 페이지 전체가 리로드 되는 등.. 비효율 적인 점이 많았다. 그래서 이런 단점들을 해결.. Ajax (2) - Fetch API 이 포스트는 이고잉님의 Fetch API 수업을 듣고 정리한 내용입니다. https://opentutorials.org/course/3281/20562 fetch API - 생활코딩 수업소개 ajax를 구현하는 여러가지 기술이 있습니다. 우리 수업에서는 최신 기술인 fetch API를 이용할 것입니다. fetch API는 기존의 방식에 비해서 더 유연하고, 분명합니다. fetch API 기본 사용법 소 opentutorials.org Ajax를 구현하는 여러가지 기술이 있지만, 그 중 가장 최신 기술인 fetch API에 대해 알아보겠다. 요청과 응답 내가 fetch('hello'); 라는 코드를 치면 웹브라우저에게 "hello라는 이름의 파을을 서버에게 요청해줘~"라는 뜻이다. 그러면 이 Request.. Ajax (1) - Intro 이번 포스트는 이고잉님의 'Ajax' 강의를 듣고 정리한 내용입니다. https://opentutorials.org/course/3281 Ajax - 생활코딩 수업소개 웹페이지에서 일부 정보가 달라졌음에도 전체 페이지를 리로드하는 것은 효율적이지 않습니다. Ajax는 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 기술입 opentutorials.org 웹페이지에서 일부 정보만 달라졌음에도 불구하고 전체 페이지를 리로드하는 것은 효율적이지 않다. 구글 검색창을 생각해보면 내가 검색창에 a만 쳤는데도 화면이 다시 리로드 된다면.. 내 apple iphone release 라고 가정했을때, 페이지가 무려 18번 리로드 되어야 한다. 하지만 전체 페이지는 그대로 있고 검색창 부분만 달라진다.. HTTP (3) HTTP Response Message 이번 포스트는 이고잉님의 'HTTP 소개' 강의를 듣고 정리한 내용입니다. https://opentutorials.org/course/3385/21675 HTTP Response message - 생활코딩 수업소개 HTTP 응답 메시지의 자세한 내용을 살펴봅니다. 강의 opentutorials.org content-encoding:gzip - 웹서버가 어떤 형식으로 데이터를 압축해서 웹브라우저에게 보내주었는지 content-length - 데이터의 크기. 단위는 Byte content-type - text/html : 웹 서버가 응답할 때, "이 응답은 text이고 html이라는 컴퓨터 언어다 ~" 웹 브라우저는 이 것을 보고 html로 해석해서 화면에 보여준다. - image/jpg : 이미지 파일일 .. HTTP (2) HTTP Response Message 이번 포스트는 이고잉님의 'HTTP 소개' 강의를 듣고 정리한 내용입니다. https://opentutorials.org/course/3385/21675 HTTP Response message - 생활코딩 수업소개 HTTP 응답 메시지의 자세한 내용을 살펴봅니다. 강의 opentutorials.org 강의를 듣고 복습하기 위해 F12를 눌러서 ㅋㅋ 개발자 도구에 들어왔다. 이고잉님 화면과 다르지만 겹치는 부분 위주로 복습을 해보겠다! HTTP Request Header는 이렇게 이루어져 있다. Request Line과 Request Headers를 합쳐서 Request Message Header 그리고 혹시 웹브라우저가 서버에게 보내야 할 컨텐츠가 있다면? (GET이 아니라 POST Method 이용한 .. HTTP (1) Intro 이번 포스트는 이고잉님의 'HTTP 소개' 강의를 듣고 정리한 내용입니다. https://opentutorials.org/course/3385/21673 HTTP 소개 - 생활코딩 수업소개 HTTP가 무엇인지를 살펴봅니다. 크롬 개발자 도구 내의 네트워트 기능도 살짝 살펴봅니다. 강의 opentutorials.org 지난 시간에 Client와 Server가 무엇인지에 대해 배웠다. 이번 시간에는 HTTP에 대해 배워보려고 한다. Client가 Server에게 html과 같은 데이터를 요구하는 것을 'request'라고 한다. 그에 응답해 Server가 Client에게 데이터를 보내주는 것을 'response'라고 한다. 이렇게 데이터를 주고 받기 위해 서버와 클라이언트가 알아들을 수 있는 공통의 메시지가.. 인터넷 Server와 Client 이번 포스트는 이고잉님의 '인터넷을 여는 열쇠: 서버와 클라이언트' 강의를 듣고 정리한 내용입니다. https://opentutorials.org/course/3084/18890 인터넷을 여는 열쇠 : 서버와 클라이언트 - 생활코딩 --- 지금부터 인터넷이 동작하는 기본적인 원리를 알아보겠습니다. 질문입니다 인터넷이 동작하기 위해서는 컴퓨터가 최소 몇 대가 있어야 할까요? 2대입니다 1대는 인터넷이 아니고 3대는 본질 opentutorials.org 처음 팀 버너스 리는 인터넷을 이용해서 웹을 만들기로 한다. 컴퓨터 2대를 장만하고 이 컴퓨터들을 인터넷으로 연결한다. 각 컴퓨터에 프로그램을 하나씩 개발하는데, 한 프로그램은 '웹 브라우저'이고 다른 프로그램은 '웹 서버'이다. 그는 '웹 서버' 프로그램이.. 이전 1 2 다음
