본문 바로가기

Web

(10)
EC2 포트 열기 하나의 도커 이미지로 여러개의 컨테이너를 실행할 수 있다. 이 때 컨테이너를 실행하면서 각기 다른 포트를 주어야 된다. 이처럼 EC2에서 여러개의 서버를 돌리고 8000번 외 다른 포트로 접근을 시도하면 응답이 너무 오래 걸린다며 접근이 안 되었다. ubuntu 포트 확인 $ netstat -tnlp 8000, 80001 포트에서 서버를 돌리고 있는 상태에서 위 커맨드를 실행해보면 아래와 같이 8000, 8001 포트가 열려있는 걸 확인할 수 있다. 내부적으로는 열려 있지만 AWS 인스턴스 자체에서는 포트를 열어주지 못하는 것. EC2 포트 열기 AWS EC2 인스턴스에 적용되어 있는 보안그룹 세부정보를 확인하면 인바운드 규칙 항목이 있다. (EC2 대시보드 > 실행중인 인스턴스 > 해당 인스턴스 ID ..
Docker 배포하기 도커 이미지를 docker hub에 올리고 AWS EC2에서 다운로드 받아 서버를 실행하는 과정 준비물: 만들어둔 AWS EC2, RDS RDS에서 할 것 RDS 접속 $ mysql -h -u -p user명은 대개 root로 설정해둔 경우가 많다. 위를 실행하고 비밀번호를 입력하면 RDS에 접속할 수 있다. DB 생성 > create database character set utf8mb4 collate utf8mb4_general_ci; 로컬에서 할 것 프로젝트 DB 설정 수정 name -> RDS에 만들어둔 DB명 user, password -> RDS user, password host -> RDS 엔드포인트 주소 그리고 RDS에 만들어둔 DB에 데이터를 채워 넣는다. 기존 로컬 DB를 mysqld..
Docker 시작하기 도커는 컨테이너를 실행하고 관리할 수 있도록 도와주는 도구이다. 도커 이전에도 컨테이너 기술은 존재했다. 왜 굳이 도커(컨테이너)를 써야 하나요? 도커를 이해하는 데 위 참고 링크가 정말 도움됐다. 특히 클래스와 인스턴스처럼 도커 이미지 바라보기 파트에서 도커 파일에 실행 시점을 더한 게 도커 이미지고, 도커 이미지에 실행 시점에 수정되어야 할 정보들을 더한 게 도커 컨테이너라는 설명! 같이 보기 좋은 글 - 도커 입문편 가상머신 중 하나인 Virtual Box를 사용해본 적이 있다. 지금 사용하고 있는 컴퓨터 위에 다른 컴퓨터를 얹는 것 같은 느낌이었고, 가상머신의 근간이 되는 파일은 기본 십여기가에 이르렀다. GUI가 갖춰진 새 컴퓨터가 기존 컴퓨터의 RAM 용량을 나눠 사용하기 때문에 컴퓨터의 속도..
소셜로그인 - kakao API Kakao API를 활용하는 소셜 로그인 기능에서 프론트가 하는 부분에 대해서 다 이해하진 못하지만, 백엔드 개발자도 전체적인 통신이 어떤 단계를 거쳐서 이루어지는지를 공식 문서를 통해 파악하고 코드 외적인 설정에는 어떤 게 있는지를 알고 있어야 된다고 생각한다. 구현 코드는 링크를 참고했고 이 글에서는 데이터의 형태가 어떤지, 자잘하게 놓친 점은 어떤 게 있었는지 기록했다. 프론트엔드 개발자가 하는 부분이지만, kakao login 기능을 사용하기 전 필요한 절차이다. 1. kakao developers에 로그인 한 뒤 앱을 생성한다. 2. 이 앱 메뉴에서 kakao login에 들어간 뒤 state를 ON으로 설정한다. Platform 부분에 redirect URI를 준다. 3. consent ite..
RESTful API 처음에는 RESTful API를 백엔드 입장에서의 사용자(프론트엔드 개발자)가 API를 사용할 때 엔드포인드 url과 용도를 명확하게 인지할 수 있도록 깔끔하게 만든 API라고만 생각했다. REST가 무엇인지에 대해 더 찾아보니 이게 많은 목적 중 일부라는 걸 알았다. 프립 사이트의 URI를 예시로 이해한 바를 정리했다. REST Representational State Transfer의 약자로, 아키텍쳐 디자인 가이드이다. REST의 6가지 조건(constraints) 옆에 붙인 설명은 내가 이해한 대로 쓴 표현이라 추후 더 공부하다보면 틀린 점이 나올 수도 있겠다. 1. client-server: 서버, 클라이언트가 각자의 자세한 사항에 대해 신경쓸 필요가 없다. 2. steteless: 서버측에서 ..
Style We 프로젝트 이미지 2 user 17명의 게시글 이미지 unsplash.com/ 학습 목적으로 사용 중 user1 feed1 feed2 - onverse sneakers 1 feed3 feed4 user2 feed1 - onverse high top 1 feed2 - onverse high top 2 feed3 feed4 user3 feed1 feed2 feed3 feed4 - onverse high top 1 user4 feed1 feed2 feed3 - cike high top 1 feed4 user5 feed1 feed2 - cike sneakers 1 feed3 user6 feed1 - naddidas sneakers 1 feed2 feed3 - naddidas sneakers 1 feed4 user7 feed1 fee..
Style We 프로젝트 이미지 1 상품 12종 unsplash.com/ 학습 목적으로 사용 중 cike running shoes 1 naddidas running shoes 1 naddidas running shoes 2 naddidas running shoes 3 (5) cike sneakers 1 (6) naddidas sneakers 1 (7) naddidas sneakers 2 (8) onverse sneakers 1 (9) cike high top 1 (10) cike high top 2 (11) onverse high top 1 (12) onverse high top 2
Auth 전체적인 인증, 인가는 프론트와 백엔드 간의 상호 작용이다. 사용자의 권한에 따라 접근할 수 있는 영역이 달라질 때 인증 인가가 필요하다. 파이썬 기반 백엔드에서 구현하는데 bcrypt, pyjwt를 사용했다. 인증 Authentication 사용자 입장 - 내가 나임을 증명하는 과정 개발자 입장 - 회원가입, 로그인 비밀번호 암호화는 법규상의 강제이다. 복원할 수 없게 암호화한 뒤 저장해야 된다. HTTP 통신시에는 SSL을 적용하여 암호화해야 정보를 보호할 수 있다. SSL SSL은 전자상거래보안을 위해 개발한 암호화 방식이고 웹 서버와 브라우저간 보안 통신 규약(프로토콜)이다. 참고 링크 HTTP의 보안 강화 버전인 HTTPS 프로토콜이 SSL 상에서 돌아간다. 1. 인증기관이 사이트의 정보를 검토..
How the Web works 사용자가 크롬 주소창에 www.google.com을 치면 크롬은 구글 홈페이지를 띄운다. 컴퓨터에 홈페이지의 html 파일이 있는 것도 아닌데 어떻게 보여줄까? 크롬이 구글 홈페이지의 html 파일을 가져오는 과정을 4단계로 보자면 아래와 같다. 1. 브라우저가 DNS 서버에 IP 주소를 찾기 위한 요청을 보낸다. 이 때 이 요청에 domain name이 담겨있다. 2. DNS 서버가 IP 주소를 찾아 응답한다. 3. 해당 IP 주소가 나타내는 웹 서버(호스트 서버)에 브라우저가 요청을 보낸다. 4. 브라우저는 호스트 서버의 응답을 받아 사용자에게 보여준다. 조금 더 자세히 보자면, 1. Send a request to the DNS Server 구글 홈페이지 html 파일은 구글 웹서버에서 가져와야 된..
개발자 도구 - Application panel 크롬 개발자 도구 단축키: Windows 기준 F12 또는 ctrl + shift + i 개발자 도구란 브라우저가 제공하는 tool이다. element, console, network, application 등 여러 panel이 있다. 이 중 application panel에서는 storage(브라우저 저장소)를 확인할 수 있다. Local storage, session storage 그리고 cookie가 있다. storage에 저장된 데이터는 key-value 형태의 객체이다. 어떤 데이터를 storage에 저장할지 서비스 기획 및 특성에 맞게 적절히 계획하고 처리해야 된다. 클라이언트 사이드에 저장되기 때문에 중요 정보를 저장하는 건 위험하다. 쿠키(cookie) 쿠키는 작은 데이터 파일으로, 클라이..