본문 바로가기

전체 글58

[HTML] 오픈 그래프 (og) 📢 오픈 그래프란? 웹 페이지 공유 시 미리보기 화면을 구성하는것이 오픈 그래프 프로토콜이다. 태그를 사용해서 공유할 제목과 이미지, 요약 정보 등을 구성 📌 오픈 그래프 속성 - og:title : 웹 페이지 제목 - og:type : 웹 페이지 유형(ex : article, movie 등) - og:image : 대표 이미지 - og:url : 링크 주소 - og:description : 웹 페이지 내용 요약 2023. 9. 15.
[Jquery] attr()과 prop()의 차이 📌attr() , prop() ? element에 특정한 속성을 지정하게 되는 경우에 attr()과 prop()을 사용한다. attr() => attribute(속성) prop() => property(속성) 📢 attr()과 prop()의 차이점 attr()은 속성 그 자체의 값을 반환하고, prop()은 속성값을 명시적으로 찾아낼 수 있는 방법을 제공 📢 attr() vs prop() 결과값 .attr('checked') : checked .prop('checked') : true .is(':checked') : true 📢 attr() attribute값을 가져오거나 설정할때 사용 var className = $("#userName").attr("class"); // 클래스 값 가져오기 $("#us.. 2023. 9. 13.
[HTML] meta 태그 📌meta 태그란? 태그는 해당 문서에 대한 정보인 메타데이터를 정의할 때 사용된다. ,,, 요소와 같은 다른 메타데이터 관련 요소들이, 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용 📢 메타태그 속성? - http-equiv 웹 브라우저 서버에 명령을 내리는 속성 name 속성을 대신해 사용할 수 있다. - content = "정보값" meta정보의 내용을 지정 - name = "정보 이름" 몇 개의 meta정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv와 같은 기능 📢 메타태그 종류? 1. Keywords (검색엔진에 의해 검색되는 단어 지정) 2. description (웹 페이지에 대한 설명을 정의) 3. viewport (모든 장치에서 웹 사이트가 잘 보이도록 뷰포.. 2023. 9. 12.
[JavaScript] fetch() fetch() 함수란? HTTP 요청 전송 기능을 제공하는 Web API 입니다. 데이터를 받아오는 경우에 사용 됩니다. fetch("https://jsonplaceholder.typicode.com/posts/1") .then((response) => response.json()) .then((data) => console.log(data)) fetch('URL')은 웹 브라우저에 'URL요청' 이라는 의미이고, .then은 '요청이 끝나고나서 실행' 이라는 의미 입니다. 2023. 8. 1.
[JavaScript] Promise Promise란? Promise는 자바스크립트 비동기 처리에 사용되는 객체입니다. 비동기 처리란 예를 들어 서버에 데이터를 요청했는데 해당 데이터가 오기도 전에 화면에 데이터를 표시하는것 입니다. 이런 문제점을 해결하기 위한 방법 중 하나가 Promise입니다. Promise 코드 아래는 ajax 코드입니다. function getData(callbackFunc) { $.get('url 주소/products/1', function(response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function(tableData) { console.log(tableData); // $.get()의.. 2023. 8. 1.
[JavaScript] 비동기와 콜백 함수 비동기 처리란? javascript의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성입니다. 비동기 처리의 예시 (1) setTimeout() setTimeout()은 Web API의 한 종류로 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행합니다. // #1 console.log('Hello'); // #2 setTimeout(function() { console.log('Bye'); }, 3000); // #3 console.log('Hello Again'); /* 실행결과 */ Hello Hello Again Bye setTimeout()은 비동기 방식으로 실행되기 때문에 3초를 기다렸다가 다음 코드를 수행하는.. 2023. 8. 1.

티스토리툴바