[JavaScripte] - Fetch란?

비동기 통신 HTML에서 화면을 이동하려면 방식을 사용해서 페이지 이동을 한다. 이 방식은 페이지 전체를 교체하는 것이라서 컴퓨터 입장에서는 부담이 크다. 심지어 자바스크립트는 싱글 스레드 방식이라서 하나의 스레드에서 모든 것을 돌려야 한다. 이것을 보완하기 위해서 비동기 통신이라는 개념이 등장했다. 자바스크립트의 모든 비동기 통신 기술들을 통틀어 Ajax라고 하는데, 이것은 클라이언트와 서버간에 데이터를 주고 받는 기술이다. 즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. Ajax의 변화 기존에는 XMLHttpRequest 객체를 이용해서 통신을 주고 받았지만 엄청나게 번거로운 작업이였다. 불편함을 개선하기 위해 JQuery를 통해 구현하다가 fetch API가 ES6표준으로..

• format_list_bulleted Javascript
• · 2023. 3. 25.
• textsms

Open Graph 이해하기

open Graph란? 오픈 그래프는 소셜 미디어에 특화된 프로토콜이라고 할 수 있다. 소셜 미디어에서 정보 공유는 웹사이트 링크를 공유하는 방식으로 아주 흔하게 이루어 지고 있고, 우리가 익히 알고 있는 링크 공유 시 나타나는 웹사이트 미리보기는 오픈 그래프 태그를 통해서 생성된다. 간단히 말하자면 링크를 보낼때 사용자에게 어떤 사이트인지 간략하게 보여주기 위한 화면이다. 태그 사용법 meta property="og:title" content="..."> -> 콘텐츠 제목 meta property="og:url" content="..."> -> 웹페이지 URL meta property="og:type" content="..."> -> 웹페이지 타입(blog, website 등) meta property..

• format_list_bulleted Javascript
• · 2023. 2. 15.
• textsms

[JS] - innerHTML 사용법

졸업작품 제작을 하다가 자바스크립트로 html을 다루는 방법을 까먹어서 다시 찾아봤다. 사실 기본적인 원리는 알고 있지만 내가 하려는 것은 API로 가져온 데이터들을 추출해서 원하는 데이터를 가공해 각각의 요소들을 상황에 맞게 넣고 싶었다. 설명이 잘 안되서 예시를 들어보자면 만약 어떤 버튼을 누르면 div 태그 하나만 추가하는 것이 아닌 여러줄의 뭉텅이 태그를 만들고 싶었다. var div = document.createElement("div"); var txt = document.createTextNode(`음식점${i}은 ${result[i].place_name} 입니다.`); div.appendChild(txt); quickfilter.append(div); 이전까지는 이런 방식으로 해서 태그 하..

• format_list_bulleted Javascript
• · 2023. 2. 8.
• textsms