[Web] SPA(SinglePage Application) 에서 크롤링이나 SNS 링크 썸네일은 어떻게 대응되는지 간단 정리
프론트엔드 개발 첫걸음이라는 책을 읽다가 초반 즈음 흥미로운 내용이 있어 잊어버리기 전에 정리를 해두려고 합니다. 간략하고 얕은 지식이니 참고만 해주시면 감사하겠습니다.SPA에서 화면 렌더링과 문제점SPA는 고전 웹어플리케이션과 달리 서버로 요청시 완성된 HTML을 받는 형식이 아니라 비어있는 기본 HTML만을 응답받게 되고 그 이후 UI와 관련된 자바스크립트 프레임워크(vue.js, react, Angular)를 통해 화면을 완성하게 됩니다.그렇다 보니 문제점이 발생하게 되는데, 구글같은 검색엔진이나 크롤러, 카카오톡이나 페이스북같은곳에서 링크를 보냈을때 생성되는 SNS 썸네일등에서 비어있는 화면이 보인다는점입니다.이들은 URL에 요청을 보냈을때 응답받은 내용을 인덱싱하여 사용할 것인데, 앞서 말했듯 ..
툴 [Tool]
2019. 4. 6. 18:00
[PHP] Windows 에 PHP + MySQL 환경 구축하기. Bitnami WAMP 설치하는 방법
WAMPPHP를 통해 웹 어플리케이션을 개발 혹은 구축하기 위해서는 PHP와 Apache Web 서버 그리고 MySQL같은 DBMS까지 설치한 후에 환경을 구축해야 합니다. 그러나 이러한 작업은 PHP 환경을 구축하는데에 필요한 공통되는 작업이며 많은 시간과 노력이 필요합니다.따라서 Windows 환경에서 이러한 것들을 한꺼번에 설치하고 설정되도록 해주는 WAMP라는 툴이 있습니다. WAMP(웜프?)는 Windows, Apache, MySQL, PHP의 앞글자만을 딴 것입니다.WAMP 다운로드하기다음의 주소로 접속하여 Oh my computer 의 Win / Mac / Linux 버튼을 클릭합니다.https://bitnami.com/stack/wampWin / Mac / Linux를 클릭하고 하단으로 스..
NodeJS
2018. 2. 20. 02:30
[Node.js] NodeJS 웹서버에서 한 덩어리씩 파일 읽어서 클라이언트에게 출력하기
이전글[Node.js] NodeJS 웹서버에서 스트림을 이용하여 클라이언트에게 파일 응답Node 웹서버 파일을 한덩어리씩 로딩한 후에 출력하기이전 글에 이어서 이번에는 파일을 한 덩어리(chunk)씩 서버로 로딩한 후에 클라이언트와 연결된 출력스트림으로 내보내 보도록 하겠습니다.var http = require('http');var fs = require('fs');var server = http.createServer();server.listen(7070, function() { console.log('웹서버 시작');});server.on('request', function(req, res) { var filename = 'flower.png'; var file = fs.createR..
웹[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을 해석하는데 필요한 규칙들이..
