Develop/Web (24) 썸네일형 리스트형 웹브라우저에 www.naver.com을 치면 생기는 일 과정 도메인 주소에 맞는 IP주소를 알아낸다. DNS record에 대한 캐시를 찾는다. 브라우저 캐시에서 찾는다. OS에서 시스템 콜을 통해 찾는다. 라우터에 요청하여 찾는다. ISP에 요청하여 찾는다. IP를 못 찾은 경우, PC는 Local DNS에 요청한다. Local DNS가 IP주소를 모르는 경우, Root DNS에 요청한다. Root DNS가 IP주소를 모르는 경우, Local DNS는 'com' 도메인을 관리하는 DNS에 요청한다. 'com' 도메인을 관리하는 DNS가 IP주소를 모르는 경우, Local DNS에게 'naver.com' 도메인을 관리하는 DNS를 알려주고, Local DNS는 이 DNS에 요청한다. Local DNS는 IP주소를 찾은뒤 캐시하고 PC에 전달한다. TCP 연결.. Typescript 공부 시작 이제 Typescript를 배우고자 한다. 시작이 반이라는 말처럼, 뭐든 처음이 제일 어려운 법이다. Typescript는 Javascript의 superset으로, Javascript로 컴파일된다. JS가 타입을 명시하지 않는 반면, TS는 타입을 명시한다. TS로 개발함으로써 다양한 장점이 있겠고 물론 단점도 있을 것이다. 이것들은 듣기만 하고 판단할게 아니라, 직접 해보며 겪는게 제일이다. 개발환경 준비 Node.js, npm 설치 https://nodejs.org/ko/ 에서 Node.js를 설치할 수 있고, 이 과정에서 npm도 같이 설치한다. Typescript 모듈 설치 Typescript 개발을 위한 모듈을 설치한다. npm i -g typescript Typescript를 직접 실행하기 .. [UOSTime] iconv를 iconv-lite로 어쩌다보니 node와 npm을 업데이트 하게 되었고, iconv 모듈을 업데이트 해야하게 되었다. 하지만 iconv는 설치 과정에서 다양한 오류를 내었다.. python, visual studio, node-gyp, windows-build-tool 등... (구글링 해보면 관련 글이 정말정말 많다) 결국 몇 시간을 보내다가 iconv-lite를 사용하기로 바꿨다! 저번에도 같은 일로 많은 시간을 쏟았는데, 다음부터는 마음이 편할 것 같다. UOSTime 업데이트 계획 나는 현재 서울시립대학교 시간표 관리 서비스 UOSTime을 개발/관리 중이다. UOSTime은 08학번 선배님이 만드신 것으로 알고 있다. 그것이 이후 다른 선배님들에 의해 계속해서 개선되어왔고, 나는 2017년 말부터 팀에 합류했다. 내가 합류했을 당시, UOSTime은 완전히 새롭게 개발될 계획이었다(서버 작성 언어도 기존 PHP에서 Node.js로 변경되었다). 나는 프론트엔드를 맡았고, 나를 포함한 총 3명의 학우가 선배들의 도움을 받아 개발을 시작했다. 그렇게 2018년 8월, 새 UOSTime이 출시했다. 같이 UOSTime을 개발했던 두 선배는 이후 자연스레 졸업 및 취직을 했고, 그때부터는 나 혼자 간단한 유지보수 및 업데이트를 진행해오고 있다. 출시 이후로 UOSTime은 많은 것이 변.. Bitnami WAMP Stack 설치 과정 Bitnami 설치 바로가기 WAMP 7.3.8-0 기준 [Next]를 눌러 설치를 시작한다. 선택사항은 자유롭게 설정한다. 모두 체크해제해도 무방하다. 설치경로를 설정한다. 데이터베이스의 root 계정 비밀번호를 설정한다. 알파벳과 숫자로 구성된다. 웹서버 SSL 포트를 설정한다. 기본값으로 진행해도 무방하다. 웹 클라우드 관련사항은 체크해제해도 무방하다. [Next]를 눌러 설치를 진행한다. 설치는 몇 분 정도 소요된다. 방화벽 경고가 나오면 [액세스 허용]을 눌러준다. 방화벽 경고가 나오면 [액세스 허용]을 눌러준다. 설치를 종료한다. [Launch Bitnami WAMP Stack]을 체크해제한 후 끝내면 아래와 같은 페이지(127.0.0.1)가 뜬다. [Bluebird] Promise.map Node.js에서 bluebird 패키지를 이용하면, ES6의 Promise를 map function과 함께 사용할 수 있다. bluebird의 map 함수는 Iterable한 value와 각 value를 위한 mapper function을 인자로 한다. 좀 더 살펴보자. Promise, Resolve, Reject map 함수는 Promise를 반환하며, 각 mapper function 또한 Promise를 반환한다. 하나 이상의 mapper function이 reject를 반환하면 map 또한 reject를 반환한다. map은 모든 mapper function이 fulfilled일때 fulfilled이다. Order 각 value에 대한 mapper function의 실행은 그 순서가 보장되어있지 않.. Service Worker 지원 브라우저 service worker 및 ES8(일부 제외)을 지원하는 브라우저 버전 Browser support ES8 ES8 Supported Version SW Supported Version Edge 17~ 17~ Firefox 44~ 44 (disabled in 44~52 ESR) Chrome 45~ 40~ Safari 11.1~ 11.1~ Opera 32~ 27~ iOS Safari 11,3~ 11.3~ Chrome for Android 75~ 75~ Firefox for Android 67~ 67~ Samsung Internet 4~ 4~ 개인적인 권장 버전 Browser Version Edge 17~ Firefox 44~ Chrome 49~ Safari 11.1~ Opera 33~ Samsung In.. [Node.js + Express] Redirect HTTP to HTTPS Node.js + Express 환경에서 HTTP 요청을 HTTPS로 redirect하는 미들웨어는 아래와 같이 구현할 수 있다. 이 미들웨어는 request의 method와 무관하게 모든 요청을 다루지만, 특정 method(예: GET)만을 다루고 싶다면 5번째 줄의 .all() 대신 .get() 등을 사용하면 된다. (ES6 기준) const express = require('express'); const app = express(); // redirect HTTP to HTTPS app.all('*', (req, res, next) => { let protocol = req.headers['x-forwarded-proto'] || req.protocol; if (protocol == 'https').. 이전 1 2 3 다음
