# OpenGraph

creyon0215

스크래핑 vs 크롤링 scraping(스크래핑) 스크래핑을 한국어로 번역하면 ‘긁다’라는 뜻이 되는데, 이 의미처럼 ‘특정 사이트를 스크래핑을 한다’ 라고 하면 특정 사이트의 한 페이지를 쭉 긁어와 1번 가져오는 것을 뜻한다. crawling(크롤링) 크롤링이란 ‘헤엄치다’ 라는 뜻을 가지고 있으며, ‘크롤링을 한다’ 라고 하면 특정 사이트에서 돌아다니며 버튼을 클릭해 여러 페이지를가지고 오는 것을 뜻한다. 즉, 여러 번 스크래핑을 한 것이 크롤링이라고 볼 수 있다. >크롤링 시 주의점 1) 크롤링한 데이터를 상업 목적으로 사용시 소송 대상이 될 수 있다. 2) 너무 많은 접속으로 해당 회사 서버에 부하를 주게 될 경우 공격으로 판단되어 주의해야 한다. <

badassong

Optimistic-UI - 낙관적 UI optimistic UI는 실패 시 좋지 못한 UX가 된다. 99% 성공을 확신 할 수 있을 때 사용하는 것이 좋다. Opengraph Scraping? Crawling? 다른 사이트 정보를 가져오는 것을 스크래핑, 크롤링이라 한다. 둘은 어떤 차이가 있을까? > Scraping: 한 번 가져오기 => 관련 라이브러리: cheerio Crawling: 꾸준히 가져오기 => 관련 라이브러리: puppeteer curl, postman, axios 다 api 요청하는 도구인데 불러왔을 때 데이터가 json이면 코드 그대로 보여주고 html이면 브라우저에서 코드를 그림으로 그려준다! 서버사이드렌더링 처

hardinpark

안녕하세요, QA 엔지니어 Hardin 입니다. 오픈 그래프(Open Graph)란? 인터넷 프로토콜의 한 종류로서 2010년에 페이스북이 발표했다. 오픈 그래프의 목적은 웹페이지에 대한 정보를 담고 있는 메타데이터의 사용방식을 표준화하여 페이스북 내에서의 링크 공유 시 해당 웹페이지에 대한 정보를 특정 형식의 미리보기 형태로 제공해주는 기능을 모든 웹페이지에서 가능하게끔 하는 것이었고, 이후 트위터와 링크드인에서 이를 차용하여 더 나은 UX를 제공하는 데에 활용하고 있다. (출처 : https://velog.io/@sweetpumpkin/Open-Graph-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0) 오픈그래프 동작 원리 먼저 오픈그래프(Open Graph) 동작 원리는 다음과 같습니다. ![](https://velog.velcdn.com/images/hardinpark/post/6c875aa2-8e4c-4dd0-9463-cb

songji

Optimistic UI Optimistic UI란? 사용자의 요청이 서버에 도달하기 전에 화면의 값을 바꾸어 놓아 사용자가 체감하는 브라우저의 속도가 보다 빠르게 만든 것이다. 화면에서의 값은 미리 바꾸어 두고 서버에 요청을 계속 보내어 응답이 돌아오면 화면을 다시 업데이트한다. 만약에 서버에서 응답을 받는 것을 실패했다면 이전의 값을 응답으로 보내주고 이전의 값을 화면에 업데이트 해준다. 따라서 결제와 같이 데이터의 중요성과 안정성이 필요한 곳에는 사용하지 않는다. 사용자가 결제를 취소했는데 결제 완료 응답을 받은 것으로 오해하면 안되기 때문이다. OpenGraph 카카오톡으로 인터넷 제품 링크를 친구에게 보내본 적이 있다면 openGraph를 경험해본 것이다. 인터넷 주소 아래에 이미지와 함께 뜨는 회사 혹은 제품의 간략한 설명 등이 openGraph이다. 링크에 대한 정보를 meta태그에 담아 미리 볼 수 있도록 해준 것이다. 라이브러리 n

kimareum

_> 다음주 배포를 앞두고 본 커리큘럼이 끝난지금, 2차 최종 평가를 앞둔지금 동기들도 많이 지쳐가는 모습이 보이고, 나도 예전처럼 마냥 밝거나 으쌰으쌰하는 마음이 떨어지고 지친것은 사실이다. 그럼에도 내가 계속해서 마인드 컨트롤을 하고, 그래, 다시 눈뜨고 집중해보자! 해보자! 할 수 있었던건 무엇보다 나와같은 열정을 가진 동기들이 있었고, 우리보다 더 늦게까지 남아서 많은 부분을 세심하게 케어해주고자 하는 코캠의 멘토님들의 열정이 느껴졌기 때문이다. 처음 코캠의 pf제도를 알게되었을땐, 혼자 공부하는것이 방해되는것이 싫었다. 왜냐면 나보다 못하는 동기 만나면 어쩌지? 내가 배울게 없을텐데? 그럼 나는 시간낭비일텐데 ? 하는 생각이었다 하지만, 나보다 잘하는 pf이건 못하는 pf이건 나는 코딩실력 뿐만 아니라, 그들의 생각하는 생각방식(뛰어난 해결방법을 들으면 그 방법을 듣는게 아니라 어떻게 그렇게 생각의 흐름을 정했는지 묻곤한다)과 열정 체력관리, 코캠 커리큘럼 외의 지식등을

yiseul

검색엔진최적화(SEO)를 위한 메타태그? 메타 태그(meta tag)는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그를 의미합니다. 이러한 웹페이지의 메타 정보는 주로 HTML의 요소를 통해 마크업을 하며, HTML 문서 내에서 요소 아래 배치되므로 일반 유저가 보게되는 웹페이지의 컨텐츠에는 아무 영향을 주지 않습니다. 반면에 검색엔진과 같은 기계들이 웹페이지를 읽어야할 때는 메타 태그의 내용들이 해당 서비스에서 어떻게 표시될지를 결정하는 매우 핵심적인 요소가 됩니다. SEO 태그 - title ` 태그의 내용 보통 해당 HTML 문서의 최상위 헤딩(heading), 즉 ` 태그의 내용과 일치시키는 경우가 많으며, 웹사이트의 이름도 포함시키기도 합니다. SEO 태그 - meta 웹사이트이 제목만 예외적으로 `` 요소를 사용하고, 그

dev-tinkerbell

프로젝트 중 공유 이미지를 업데이트 하고 확인해 보았더니 카톡에서만 업데이트 전 이미지가 계속 남아있는 것을 확인하였다. 나만 업데이트 전 이미지가 보이는건가 싶어 지인들에게 부탁드렸더니 지인들 역시 업뎃 전 이미지가 보였다. 오픈그래프 업데이트 전 이미지 이건 분명 카톡 캐시문제일 것이다 라는 것을 염두했는데 왜냐하면 meta태그에 넣어둔 og img url을 주소창에 검색해 보았을 때 내가 업데이트 한 이미지가 나왔기 때문이다.

devpark

2-1. OG Meta Tags : OpenGraph Protocol Notion의 Remark & Technique : HTML5 & CSS3 페이지 바로가기 0. References 링크 붙여넣을 때 보이는 이미지는 어디서 오는 것일까? - branch FB OpenGraph og:image not pulling images (possibly https?) -stackoverflow 1. Introduction ![](https: