on&on

목차 Nginx란? 포트포워딩(Port Forwarding) 설정 HTTP redirect to HTTPS 📍 Nginx란? Nginx란 웹사이트의 서버를 도와주는 경량화 웹 서버이다. 클라이언트로부터 요청을 받았을 때 요청에 맞는 정적 파일을 전달하는 HTTP Web Server 또는 reverse proxy server로 활용하여 WAS의 부하를 줄일 수 있는 로드 밸런서 역할을 하기도 한다. Nginx는 요청에 응답하기 위해 비동기 이벤트 기반 구조를 가진다. 이것은 아파치 HTTP 서버의 스레드/프로세스 기반 구조를 가지는 것과는 대조적이다. 이러한 구조는 서버에 많은 부하가 생길 경우의 성능을 예측하기 쉽게 해준다. Apache의 C10K(동접자 수가 만 명이 넘어갈 때 효율적 방안) 문제점 해..

목차 OSI 7계층 모델 OSI(Open System Interconnection) 7 Layer OSI 7 계층의 흐름 TCP/IP 모델 TCP/IP 모델의 계층 구조 TCP/IP 모델의 구현 환경 TCP/IP와 OSI 7 계층의 차이점 📍 OSI 7계층 모델 OSI(Open System Interconnection) 7 Layer 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것 사용하는 이유? 통신이 일어나는 과정이 단계별로 파악할 수 있다. 흐름을 한눈에 알아보기 쉽고, 사람들이 이해하기 쉽다. 7단계 중 특정한 곳에 이상이 생기면 다른 단계의 장비 및 소프트웨어를 건들이지 않고도 이상이 생긴 단계만 고칠 수 있다. 물리 계층 (Physical Layer) 노드(호스트)를 전송매체와 연결하기 ..

목차 문제 상황 해결 방법 1) 이미 만들어진 proxy 서비스 사용하기 2) proxy 서버 구축하기 📍 문제 상황 현 프로젝트에서는 회원가입을 할 때 재학생 여부와 학과를 확인함에 따라 가입 여부를 결정해야 했다. 그러기 위해서는 교내 웹 서비스에서 학번 조회하기 기능을 사용해야 했지만, 다른 도메인에서 요청을 보낼 경우에 요청을 받는 서비스에서 지정한 Origin이 아니기 때문에 보안 상의 이유로 CORS 정책이 적용되어 오류가 발생한다. 이를 해결하기 위해서 프록시 서버를 사용하려고 한다. 프록시 서버는 클라이언트와 서버 사이에서 요청을 중개하는 역할을 수행한다. 클라이언트는 프록시 서버에 요청을 보내고 프록시 서버는 해당 요청을 받아 실제로 API를 호출하고 응답을 받은 후 클라이언트에게 전달한..

목차 SOP(Same-Origin Policy)란? CORS(Cross-Origin Resource Sharing)란? CORS의 동작 원리 CORS 이슈 해결하기 📍SOP(Same-Origin Policy)란? 같은 출처에서만 리소스를 공유할 수 있는 규칙으로 브라우저에서 다른 서버에 요청할 경우에 해당되고, 브라우저를 거치지 않고 서버 간 통신을 할 때는 이 정책이 적용되지 않는다. https://www.naver.com/search 위와 같은 주소가 있을 때 'https://'는 protocol(scheme), 'www.naver.com'은 host(domain), ':443'은 port를 의미한다. 이 때 protocol, host, port가 모두 같을 때를 동일 출처라고 한다. 📍 CORS(C..

목차 proxy 서버란? proxy 서버를 사용하는 이유 proxy 서버의 유형 proxy의 문제점 proxy와 VPN의 차이점 📍 proxy 서버란? 프록시 서버 설명 이미지 proxy는 '대리'라는 의미를 가지고 있다. 즉, 프록시 서버란 클라이언트와 다른 서버 간의 중간 다리 역할을 수행하는 서버로, 클라이언트가 프록시 서버에 요청을 보내면 프록시 서버는 해당 요청을 대신하여 다른 서버로 전달하고 그 응답을 클라이언트에게 전달한다. 이를 통해 클라이언트는 직접 다른 서버에 연결하지 않고도 프록시 서버를 통해 리소스를 요청하고 응답받을 수 있다. 📍 proxy 서버를 사용하는 이유 프록시 서버를 사용하는 목적은 여러가지가 있다. 1. 보안 만약 클라이언트에서 서버 주소로 요청을 보낼 경우 서버의 주소..

[React] AWS EC2에 React 무중단 배포하기 목차 AWS EC2(Elastic Compute Cloud)란? EC2 인스턴스 생성하기 EC2로 React 프로젝트 배포하기 AWS EC2(Elastic Compute Cloud)란? EC2는 AWS에서 제공하는 클라우드 컴퓨팅 서비스이다. 클라우드 컴퓨팅은 인터넷(클 ekdms5566.tistory.com 만약 EC2에서 배포를 하기 위해 npm run build를 한 지 몇 분이 지나도 빌드가 되지 않는다면...? 나는 Creating an optimized production build... 이 문구만 십 몇분을 보고만 있었던... 그렇다면 왜 빌드가 안되는 것인가... 그 이유인 즉슨 빌드 규모 대비 램 크기가 작아서 그랬던 것이다... ..

목차 AWS EC2(Elastic Compute Cloud)란? EC2 인스턴스 생성하기 EC2로 React 프로젝트 배포하기 AWS EC2(Elastic Compute Cloud)란? EC2는 AWS에서 제공하는 클라우드 컴퓨팅 서비스이다. 클라우드 컴퓨팅은 인터넷(클라우드)를 통해 서버, 스토리지, 데이터베이스 등의 컴퓨팅 서버를 제공하는 것을 말한다. 즉, 독립된 컴퓨터를 임대해주는 서비스다. EC2는 서버를 직접 구축하는 것보다 쉽게 서버를 구축할 수 있다. 초기 구입이나 세팅비가 필요없고 사용한만큼 결제하는 것이 가능하다. 용어 정리 인스턴스 : 가상 컴퓨팅 환경 AMI(Amazon Machine Image) : 서버에 필요한 운영체제와 여러 소프트웨어들이 적절히 구성된 상태로 제공되는 템플릿 ..

목차 redux-persist란? redux-persist 적용하기 redux-persist란? redux-toolkit을 사용하여 store에 저장한 상태를 관리하다 보면 새로고침을 했을 때 상태가 모두 초기화된다. 이러한 경우 redux-persist를 사용하면 해당 문제를 해결할 수 있다. redux-persist를 사용하면 redux의 상태를 유지하고 지속성을 갖도록 도와주는 라이브러리다. 해당 라이브러리를 사용하면 로컬 스토리지, 세션 스토리지 등의 옵션을 선택하여 상태를 저장하고 새로고침 또는 애플리케이션을 종료해도 상태가 사라지는 것을 막을 수 있다. # 설치 방법 npm i redux-persist yarn add redux-persist redux-persist 적용하기 // sessio..