[Web] SPA(SinglePage Application) 에서 크롤링이나 SNS 링크 썸네일은 어떻게 대응되는지 간단 정리
프론트엔드 개발 첫걸음이라는 책을 읽다가 초반 즈음 흥미로운 내용이 있어 잊어버리기 전에 정리를 해두려고 합니다. 간략하고 얕은 지식이니 참고만 해주시면 감사하겠습니다.SPA에서 화면 렌더링과 문제점SPA는 고전 웹어플리케이션과 달리 서버로 요청시 완성된 HTML을 받는 형식이 아니라 비어있는 기본 HTML만을 응답받게 되고 그 이후 UI와 관련된 자바스크립트 프레임워크(vue.js, react, Angular)를 통해 화면을 완성하게 됩니다.그렇다 보니 문제점이 발생하게 되는데, 구글같은 검색엔진이나 크롤러, 카카오톡이나 페이스북같은곳에서 링크를 보냈을때 생성되는 SNS 썸네일등에서 비어있는 화면이 보인다는점입니다.이들은 URL에 요청을 보냈을때 응답받은 내용을 인덱싱하여 사용할 것인데, 앞서 말했듯 ..
웹[Web]
2019. 3. 28. 10:25
[HTTP] HTTP 헤더 중 Content-Type 헤더와 Accept 헤더의 용도와 차이점
Content-Type 헤더Content-Type은 말그대로 HTTP 메시지(요청과 응답 모두)에 담겨 보내는 데이터의 형식을 알려주는 헤더입니다. 세상에 모든 브라우저와 모든 웹서버가 그렇다고는 말할 수 없겠지만 대부분의 HTTP 표준 스펙을 따르는 브라우저와 웹서버는 우선적으로 저 Content-Type 헤더를 기준으로 HTTP 메시지에 담긴 데이터를 분석하고 파싱할것입니다.만약 Content-Type 헤더가 없다면 데이터를 전송하는쪽(브라우저나 웹서버)에서는 특정한 형식의 데이터일지라도 받아들이는 쪽에서는 단순 텍스트 데이터라고밖에 생각할 수 없을것이며, 이를 분석하고 파싱하는 프로그램을 별도로 작성해주어야 겠지요.그러나 여기서 알아야할 점은 HTTP 요청의 경우 GET방식인 경우에는 무조건 URL..
웹[Web]
2019. 1. 23. 12:52
[HTTP] HTTPS 사용시 혼합 콘텐츠(Mixed Content) 및 안전하지 않은 콘텐츠에 대한 설명
관련글[Tistory] 티스토리 블로그 HTTPS 적용 차단된 콘텐츠 및 안전하지 않은 컨텐츠 차단 해결 방법[Tistory] 티스토리 블로그 HTTPS 적용하기. HTTPS가 무엇이길래?[HTTP] HTTPS란? 비전공자를 위한 HTTPS 개념 알아보기HTTPS 사용시 혼합 콘텐츠(Mixed Content) 및 안전하지 않은 콘텐츠에 대한 설명티스토리 블로그를 운영하면서 통신 방식을 HTTP에서 암호화된 HTTPS로 변경하게 되면서 알게된 사실들 중 혼합 콘텐츠(Mixed Content)에 대한 내용을 정리하고자 글을 작성합니다. 글의 원문은 구글 개발자문서에서 가져온 것이므로 글 하단의 참고글 링크를 참고해주세요.혼합 콘텐츠란(Mixed Content)?혼합 콘텐츠는 HTTPS를 통해 접속한 사이트에..
웹[Web]
2018. 9. 12. 23:36
[HTTP] HTTPS란? 비전공자를 위한 HTTPS 개념 알아보기
HTTPS란 뭘까? 비전공자 수준으로 알아보도록 하자HTTPS란 무엇일까요? SSL? HTTP? HTTPS? 비 전공자는 용어마저도 너무나 헷날립니다. 이번 글에서는 HTTPS에 대해서 알아보도록 합니다. 단! 이번 글은 전공자를 위한 설명이 아닌 비 전공자를 위한 설명입니다. 미리 말하자면 많은 설명이 생략되어 있으며, 암호화 알고리즘이나 암호화 키에 대한 내용은 실제 HTTPS에서 사용되는 내용과 다릅니다. 그러나 큰 개념을 쉽게 설명하기 위함이므로 양해 부탁드립니다.물론 이렇게 많은 설명을 줄이고 내용을 쉽게 바꾸었다고 해도 한 번 읽는것만으로는 이해가 되지 않을것입니다. 따라서 여러번 읽어보시고 궁금증이 생기는 내용은 댓글 또는 비공개 댓글로 질문을 해주시거나 글 최하단의 이고잉님의 링크를 추가로..
웹[Web]
2018. 9. 11. 00:21
[HTTP] HTTP 쿠키란(Cookie)? 쿠키 등장 배경 그리고 쿠키와 세션의 차이점.
쿠키란(Cookie)? 쿠키 등장 배경쿠키는 HTTP 환경(웹환경)에서 상태를 유지하기 위한 기술입니다. HTTP의 특성상 매번 발생하는 HTTP 트랜잭션은 별개의 요청으로 판단하기 때문에 상태를 가질수 없습니다. 예를 들어 www.exam.com/page1 요청 후 www.exam.com/page2 를 요청하는 경우 이 둘의 요청은 서로 연관성을 가지지 않고 독립적이며, page1에서 만들어진 데이터는 page2를 요청할때 유지되지 않는 것입니다.이러한 사실때문에 상태를 가지지 않는다고 하여 HTTP를 stateless protocol(무상태 프로토콜)이라고 합니다. 그러나 웹 서비스를 개발하다 보면 필연적으로 여러 요청(또는 여러 페이지)에 걸쳐 상태를 유지해야 하는 경우가 있습니다.최초 페이지에서 ..
웹[Web]
2018. 3. 24. 01:04
JSON이란? JSON 규칙
참고글MIME Type(Multipurpose Internet Mail Extensions)https://ko.wikipedia.org/wiki/JSONJSON(제이슨, JavaScript Object Notation)이란 ?JSON이란 자바스크립트 언어에서 객체를 표현하는 표기법입니다.그러나 JSON은 자바스크립트에서만 사용하는것은 아닙니다. JSON은 자바스크립트 구문을 따르기는 하지만 자바스크립트에서 파생되었기 때문에 JSON으로 불리울 뿐 XML이나 CSV처럼 어디서나 사용 가능한 개방형 표준 데이터 포맷(형식) 입니다.앞서 말했듯 JSON은 개방형 표준 포맷으로 RFC 7159와 ECMA-404라는 두 개의 표준에 의해 기술되고 있으며, 공식 MIME 타입으로는 application/json을,..
웹[Web]
2018. 2. 15. 00:30
[HTTP] 리다이렉트(Redirect)란?
HTTP 리다이렉트(Redirect)란?리다이렉트란 말 그대로 re(다시) + 지시하다(direct) 다시 지시하는 것입니다.예를 들어 브라우저가 www.test.com/page1 URL을 웹 서버에 요청했습니다. 서버는 HTTP 응답 메시지를 통해 "www.test.com/page2 로 다시 요청하세요~" 라고 브라우저에게 다른 URL(길, 방향) 을 지시할 수 있습니다.HTTP 리다이렉트는 HTTP 표준으로 정의 되어 있는데 최초 요청을 받은 웹서버는 HTTP 응답 상태코드로 302를 보내고 응답 메시지 헤더 중 Location 값으로 리다이렉트 되어야 할 주소를 설정해 리턴합니다.브라우저등의 웹 클라이언트는 HTTP 응답 메시지의 상태코드가 302라는 것을 보고 리다이렉트라는 것을 인지하여 Loca..
웹[Web]
2018. 1. 30. 22:50
[HTTP] MIME Type(Multipurpose Internet Mail Extensions)
MIME(Multipurpose Internet Mail Extensions) 이란MIME은 다목적 인터넷 메일 확장이란 뜻으로 전자우편의 데이터 형식을 정의한 표준 포맷입니다.전자우편은 7비트 ASCII 코드를 사용하여 전송되기 때문에 문자 데이터 이외의 바이너리 데이터(이미지, 동영상, MS 워드같은 문서 등)를 전송할 수 없었습니다.때문에 여러 멀티미디어 데이터들의 바이너리 데이터를 ASCII 코드로 변환하는 방법(인코딩)과 미디어 종류를 MIME 타입 목록으로 정의하였고, MIME 사양에 따라 멀티미디어 파일의 데이터를 ASCII 데이터로 변환 후 전송하였습니다.이때 송신측에서는 전송 ASCII 데이터가 원래는 어떤 형식의 파일이었는지 MIME 타입을 기록하여 전송하는데 수신측에서는 해당 MIME..
웹[Web]
2017. 12. 20. 06:00
[WEB] 웹에서의 정적 자원과 동적 자원
정적 자원과 동적 자원의 구분웹 환경에서 클라이언트와 서버가 주고 받는 자원들은 크게 정적 자원과 동적 자원으로 구분됩니다.먼저 위 화면을 예로 들자면 파란색 박스의 NAVER 로고 이미지의 경우 정말 가끔 업데이트 되지 않는 이상 거의 고정된 이미지 파일이 서버로부터 전송받게 됩니다.이렇게 변하지 않는 자원들(ex 이미지파일, HTML, javascript 등) 을 정적(static) 자원이라 합니다.이러한 정적 자원들은 클라이언트가 요청하면 요청한 자원 그대로 돌려주면 되기 때문에 웹서버(대표적으로 아파치 웹서버가 있다)에서 요청을 처리하게 됩니다.그리고 동적 자원(dynamic)의 경우 빨간 박스안의 실시간 급상승 검색어를 예로 들 수 있습니다.실시간 검색어는 말 그대로 실시간으로 계속 바뀌는 데이..
웹[Web]
2017. 10. 30. 20:31
[HTTP] URL Encoding
HTTP URLHTTP URL은 다음과 같은 형식으로 구성되어 있습니다.http://localhost:8080/test.jsp?name=dhsense&age=13여기서 http: 는 http 라는 프로토콜을 사용하겠다는 의미로 해석됩니다.// 뒤부터는 도메인 주소를 의미하고 그 다음에 오는 : (콜론) 뒤에는 포트번호를 의미하는데 생략시 80번을 기본적으로 사용합니다.그 뒤의 /는 웹서버의 루트(/) 를 의미합니다.?는 그 뒤로 쿼리스트링(호출파라미터가 온다는 의미)이 이어진다는 의미로 해석됩니다.쿼리스트링의 경우 변수이름=변수값 의 형태를 이루는데 해당 URL을 호출하면서 넘길 파라미터들을 문자열로 나열한 것이며 파라미터가 여러개인 경우 & 을 붙여 사용합니다.이렇게 URL을 해석하는데 필요한 규칙들이..
