본문 바로가기

전체보기

 (286)
주소 창 입력부터 렌더링까지 브라우저가 작동하는 과정 주소 창에 URL(Uniform Resource Locator)를 입력하면 URL에 해당하는 서버에 HTTP 방식으로 request를 보내게 되는 것이고 서버는 요청한 내용을 다시 HTTP 방식으로 response해서 클라이언트에 보내게 된다. 이 과정에서 클라이언트가 받은 내용은 보통 HTML 문서이고 이에 따라 브라우저가 DOM을 구성하게 된다. 여기서 DOM은 HTML 태그 각각을 객체로 만든 것이라고 생각하자. DOM에서 필요한 이미지와 폰트 등을 불러오기 위해 다시 HTTP 요청을 병렬로 보낸다. 브라우저는 DOM과 불러온 resource를 바탕으로 화면에 렌더링을 한다.
Express에서 cookie를 생성하는 방법 cookie-parser를 설치하고 npm i cookie-parser 아래의 코드를 입력한 뒤 서버를 실행한다. node index.js const express = require('express'); const cookieParser = require('cookie-parser'); const app = express(); const port = 3000; app.use(cookieParser()); app.get('/', (req, res) => { console.log('req.cookies:', req.cookies.cookieKey); res.cookie('cookieKey', 'cookieValue', { maxAge: 900000, httpOnly: true }); res.status(20..
Route 53과 S3를 이용해서 웹 페이지에 도메인 주소를 설정하는 방법 AWS의 Route 53과 S3만 이용하더라도 도메인 주소를 설정한 웹 페이지를 만들 수 있다. 1. Route 53에서 도메인을 구입한다. thinkforthink.tistory.com/287 나머지 과정은 아래 문서에 잘 나와 있다. docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html 이하는 큰 흐름을 볼 수 있도록 대략적인 과정만 적어보겠다. 2. S3에서 두 버킷을 생성한다. trshooter.com으로 도메인을 생성했다면 두 버킷의 이름을 trshooter.com과 www.trshooter.com으로 해야 한다. trshooter.com은 메인으로 쓸 버킷이다. 버킷의 속성 탭에서 제일 아래에..
Route 53을 이용해서 도메인을 등록하는 방법 1. Route 53 콘솔에 접속한다. https://console.aws.amazon.com/route53/ 2. 도메인 등록에 들어간다. 처음 접속이라면 시작하기를 클릭한다. Get started 이미 사용한적이 있다면 네비게이션 패널에서 Registerd Domains를 선택한다. 3. 도메인 등록을 선택하고 시작하기를 클릭한다. 4. 도메인 이름을 선택한다. 5. 주소 등을 입력하고 이메일 인증까지 마치면 도메인을 구입할 수 있다. 15,000원 정도 비용이 든다. 참고 : docs.aws.amazon.com/Route53/latest/DeveloperGuide/domain-register.html
다른 곳을 클릭 했을 때 드롭다운 메뉴를 사라지게 하는 방법 버튼을 클릭 했을 때 드롭다운 메뉴가 나타나게 하는 것까지는 했다고 치자. 여기서 메뉴를 클릭하지 않고 다른 곳을 클릭 했을 때 드롭다운 메뉴가 사라지는 방법에 대해 다루겠다. 알고 보면 별 것 아닌데 모르면 어렵게 구현해야 한다. 1. HTML 클릭 서울 대전 대구 부산 반드시 button 엘리먼트를 써서 이벤트를 구현해야 한다. input류의 엘리먼트만 blur 이벤트가 적용되기 때문이다. (일반 엘리먼트에 blur 이벤트를 넣고 싶다면 tabindex 속성을 활용하자.) https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/tabindex blur 이벤트는 선택이 해제됐을 때 발생하는 이벤트다. 버튼을 클릭했을 때 버튼을 선택한 상태가 ..
AWS EC2를 이용해서 백엔드 api 서버 만들기 요즘에는 정적 인터넷 웹페이지를 S3에 올리고 EC2를 백엔드 api로 활용하는 방식을 많이 쓰는 것 같다. 별도의 자동화 툴 없이도 S3에 변화된 내용을 바로 적용할 수 있어 개발하기 좋다. S3는 이미 다뤘고 정적 웹사이트 호스팅 옵션만 검색해 만지면 되니 여기서는 EC2를 이용해 처음부터 끝까지 어떻게 api를 만드는지 다루겠다. 다음 두 링크를 참고해서 EC2를 생성하고 thinkforthink.tistory.com/274 EC2에 접속해서 소스 코드를 돌아가게 할 node js와 데이터베이스인 mysql을 설치하자. thinkforthink.tistory.com/283 기본 1. 프로젝트 폴더를 만든다. mkdir 이름 2. 프로젝트 폴더로 들어가 git을 생성한다. cd 이름 git init ..
AWS EC2에 MySQL, NodeJS 설치하기 우선 EC2를 생성하고 터미널로 pem 키를 이용해서 EC2의 ubuntu 컴퓨터 접속까지 성공해야 한다. MySQL을 설치하는 방법이 다양해서인지 에러도 많고 피곤하지만 여기서 소개할 방법이 제일 깔끔한 것 같다. 참고로 필자는 다음 버전의 ubuntu를 사용했다. NodeJS 설치 0. 먼저 터미널을 이용해 EC2에 접속한다. 1. nvm을 설치한다. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash 2. nvm을 작동시킨다. . ~/.nvm/nvm.sh 3. nvm을 이용해서 최신 버전의 node js를 설치한다. nvm install node 4. 제대로 설치됐는지 확인한다. node -e "console..
웹 앱에서 AWS S3에 파일 올리는 방법 AWS의 콘솔에서 S3에 파일을 직접 올리는 방법도 있지만 앱에서 사용자가 파일을 올릴 수 있게 하려면 web에서 javascript 코드를 이용해 파일을 올리는 방법을 알아야 한다. 먼저 준비 해야 할 것들 1. 버킷 생성과 접근 권한 설정 버킷(저장소)를 먼저 만들고 권한 설정을 해야 한다. thinkforthink.tistory.com/280 2. 버킷의 CORS 설정 버킷의 권한 탭에서 CORS 항목의 편집 버튼을 클릭해 다음 설정을 넣는다. [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ] AllowedOrigins를..

티스토리툴바