Grace's Tech Blog

첫 번째 프로젝트로 진행한 SAFU 웹 서비스 을 배포하기 위해 서버 구축을 하려하며, '서버 단위의 로드 밸런서' 아키텍쳐 중 애플리케이션 서버가 (일단은)하나인 아래의 구성으로 진행하고자 한다. 순서는 1. EC2 배포 및 inbound 설정 2. ACM 에서 SSL 인증서 발급 3. ELB 생성 및 리스너 세팅 4. Route53의 도메인과 ELB의 인스턴스 DNS 연결 5. EC2에 nginx 설치 및 세팅 으로 진행 될 것이다. 세 번째 단계인 ELB 생성 및 리스너 세팅을 해보고자 한다. Load Balancing이란 로드 밸런싱은 네트워크 기술 중 하나로 네트워크 트래픽을 하나 이상의 서버나 장비로 분산하기 위한 *기술이다. * 그리고 이 기술을 수행하는 소프트웨어나 하드웨어를 Load Ba..

첫 번째 프로젝트로 진행한 SAFU 웹 서비스 을 배포하기 위해 서버 구축을 하려하며, '서버 단위의 로드 밸런서' 아키텍쳐 중 애플리케이션 서버가 (일단은)하나인 아래의 구성으로 진행하고자 한다. 순서는 1. EC2 배포 및 inbound 설정 2. ACM 에서 SSL 인증서 발급 3. ELB 생성 및 리스너 세팅 4. Route53의 도메인과 ELB의 인스턴스 DNS 연결 5. EC2에 nginx 설치 및 세팅 으로 진행 될 것이다. 두 번째 단계인 ACM 에서 SSL 인증서 발급을 해보고자 한다. 참, 왜 이러한 다섯 단계가 필요한가? 왜냐면 SAFU 웹 서비스 을 배포단계에서 막혔던 부분이 sameSite issue였는데, 이유는 HTTPS 프로토콜을 사용하지 않아서 sameSite = none을..

Amazon Web Service에는 매우 많은 서비스들이 있다. 이 중에는 가장 기본이 되어 다른 서비스들의 인프라와 같이 가장 폭넓게 역할을 하는 서비스도 있고, 특정 상황에서 편리하고 저렴하게 사용할 수 있는 특수화 된 서비스도 있다. AWS의 주요 서비스에 대해서 정리해보자면 아래와 같다. 1. AWS의 주요 서비스 1) 컴퓨팅 서비스 - Amazon EC2(Elastic Compute Cloud): 가상화 서버. 다양한 형태의 타입과 서비스에 따라 적합한 사양을 선택할 수 있으며, 사용량만큼 비용을 지불하는 컴퓨팅 서버. - Amazon Auto Scaling: 서버의 특정 조건(서버 사용량이 많은 경우 추가로 생성하고, 사용하지 않는 경우 서버를 자동으로 삭제)에 따라 서버를 추가/삭제 할 수..

+ 더 읽어볼 거리 SPA(single page app)에서 webpack을 사용하는 이유 1. Webpack? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는모듈 번들러(Module Bundler)이다. ※ Module은 뭔가? 프로그래밍 관점에서의 모듈은 특정 기능을 갖는 작은 코드 단위를 의미한다. 예를들어 아래 코드가 모듈이 될 수 있겠다. // math.js function sum(a, b) { return a + b; } function substract(a, b) { return a - b; } const pi = 3.14; export { sum, substract, pi } 이 math.js파일은 아래와 같이 3가지 기능을 갖고 있는 모듈인 것이다. . 두 숫자의 합을 구하는s..

학습한 웹팩 버전: v4.41 학습 자료: 프론트엔드 개발자를 위한 웹팩, 웹팩 핸드북 학습 내용 - Frontend 빌드 시스템 이해: NPM, Webpack - 자바스크립트 모듈화(AMD, Common.js, ES6 Modules) - Webpack 개요(등장 배경, 철학 등) - Webpack 주요 속성 4가지 - 배포 환경에서 알고 있어야 할 Webpack특징과 설정 등 웹팩을 사용하기 위해서는 Node.js와 NPM이 컴퓨터에서 설치되어 있어야 한다. 그래서 이 둘이 뭔지를 알고있어야 한다. 1. Node.js Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경을 의미한다. 2. NPM Nods.js를 설치하면 같이 설치되는 NPM(Node Package Manager)는 명령..

libertegrace.tistory.com/entry/8-Social-Login-Oct-30-2020-%ED%9A%8C%EA%B3%A0 여기에 아래의 내용을 더 자세하고 보충하여 정리하였습니다. 1. OAuth 소개 앞서 회원가입/로그인/로그아웃 등을 express와 session 개념을 사용해서 구현해보았다. 그러나 우리가 편하게 사용하고 있는 소셜로그인( 카카오 아이디로 로그인, 구글 아이디로 로그인 등.. ) 방법은 어떻게 작동하는 것일까? 이 기능을 사용하기 위해선 나, 내가 사용하고 싶은 앱/웹, 로그인을 중개해주는 카카오, 구글 같은 소셜이 관여할 것이다. 만약 '소셜 로그인' 이라는 것이 진짜 '내가 사용하고 싶은 앱/웹'과 '로그인을 중개해주는 카카오, 구글 같은 소셜' 사이에서 내 아이..

1. Express의 cookie-parser middleware의 사용 expressjs.com/en/resources/middleware/cookie-parser.html Express cookie-parser middleware cookie-parser Parse Cookie header and populate req.cookies with an object keyed by the cookie names. Optionally you may enable signed cookie support by passing a secret string, which assigns req.secret so it may be used by other middleware. Installation $ expressjs.c..

+ Authentication에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) libertegrace.tistory.com/entry/33-Authentication-Cookie?category=869766 33. Authentication - Cookie 인증(Authentication)을 할 때는 보통 (로그인을 통해) user를 판별한다. 이때 Session, Cookie가 필요하다고 했는데 왜 필요한 것일까? 로그인 한 후 새로고침(새로운 요청)을 할 때마다 초기화된다면? 그�� libertegrace.tistory.com 앞서서 "서버는 브라우저에게 응답(response)의 header에 set-cookie를 통해 '키=값..

인증(Authentication)을 할 때는 보통 (로그인을 통해) user를 판별한다. 이때 Session, Cookie가 필요하다고 했는데 왜 필요한 것일까? 로그인 한 후 새로고침(새로운 요청)을 할 때마다 초기화된다면? 그래서 로그아웃 된다면? 계속해서 아이디와 비밀번호를 쳐야할 것이다. 그런데 현재 우리가 사용하는 웹사이트에서 그렇지않은 이유는 클라이언트가 서버에게 사용자(내)가 누구인지 지속적으로 알려주기 때문이고, 새로운 요청을 하고 응답을 할 때 서버는 쿠키라는 것을 같이 보내 준다. 정리하면, 새로운 요청/응답이 오갈때마다 사용자(내)가 누구인지 지속적으로 기억하는 방법은 처음에 서버는 클라이언트에게 요청자(사용자)를 추적할 만한 정보를 쿠키로 만들어서 브라우저로 보내고 (우리가 코딩해야..

Client의 요청의 단점은 하나의 Server가 여러 Client를 구분할 줄 모른다는 것이다. (IP 주소와 브라우저 정보는 알 수 있을것이다. 그래도 '누가'에 대한 정보는 더 까다로운데, 여러 컴퓨터가 공통 IP 주소를 가지거나 한 컴퓨터를 여러 사람이 사용할 수도 있기 때문이다. ) 이렇게 (로그인을 통해) user를 판별하는데 필요한 것이 Session, Cookie라고 할 수 있다. 이번 sprint에서는 인증에 대해 알아본 후, Cookie, Session을 통해 회원 가입 및 로그인 기능을 구현해보았다. 1. 인증과 권한의 개념 (Authentication & Authorization) 인증(Authentication)은 요청이 왔을 때 그 요청을 보낸 사람이 누구인지를 증명하고, 그 요..