전체 글

[OpenSSL] SSL 인증서 발급 방법 요약

1. 개요 웹 서버에 https 적용을 위한 SSL 인증서를 발급 받는 방법을 정리했습니다. 2. openssl for windows 다운 https://code.google.com/archive/p/openssl-for-windows/downloads Google Code Archive - Long-term storage for Google Code Project Hosting. code.google.com 윈도우에서 SSL 인증서 생성을 위해 위의 링크에 접속해서 프로그램을 다운받습니다. k, e, d와 같은 라벨이 있는데 저는 e로 다운받고 진행했습니다. 3. 환경변수 설정 2번에서 압축 파일을 받고 푼 다음, /bin 경로에 있는 openssl.exe를 시스템 환경변수에 등록해줍니다. 4. pri..

[Nginx] 리버스 프록시(Reverse Proxy) 개념 및 사용법

1. 개요 리버스 프록시란? 클라이언트 요청을 대신 받아 내부 서버로 전달해주는 것을 리버스 프록시(Reverse Proxy) 라고 합니다. 저도 사실 프록시라는 개념이 낯설었는데요, 일단 프록시라는 개념부터 확인해야 합니다. 프록시란 대리라는 의미로, 정보를 대신 전달해주는 주체라고 생각하면 되는데, 만약 이 프록시 없이 웹 서버를 운영한다고 가정합니다. localhost:3000 라고 하는 웹서버를 열어서 운영했을 때, 사용자가 갑자기 많아지거나, 웹서버가 그대로 노출되어 있기 때문에 보안적으로 위험성이 있겠죠? nginx를 사용하면 로드 밸런싱으로 부하를 줄여줄 수 있고, 분산 처리 또한 가능하며 웹서버의 SSL 인증도 적용할 수 있습니다. 따라서 아래와 같이 사용자 -> nginx -> 웹서버로 ..

[Jenkins] ERROR: Couldn't find any revision to build. Verify the repository and branch configuration for this job. 오류 해결

1. 개요 Jenkins를 통해 Github와 웹훅으로 연결해서 자동배포를 하는데, 새 프로젝트를 연결하면서 ERROR: Couldn't find any revision to build. Verify the repository and branch configuration for this job. 라는 오류가 발생했습니다. 2. 오류 해결 레포지토리 또는 브런치 구성이 유효한지 한번 확인해라?? 같은 느낌이었는데, github 레포지토리 설정하는 부분에서 브런치가 자동적으로 */master로 설정되는 부분이 있었습니다. */master -> */main 기본적으로 git을 사용하면 root 브런치가 main으로 잡히기 때문에 위로 변경해주면 됩니다.

[Nginx] connect() failed (111: Connection refused) while connecting to upstream 오류 해결

1. 개요 Next.js 웹 서버(3000)와 Nginx(80)로 리버스 프록시를 연결하는 과정에서 docker-compose를 사용해 2개의 컨테이너를 묶어서 빌드하는 과정에서 발생했던 오류였습니다. 오류내용 *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.24.0.1, server: , request: "GET / HTTP/1.1", upstream: "http://127.0.0.1:3000/", host: "localhost" *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.24.0...

[Next.js] SSG, SSR 개념 정리

1. 개요 전 글에서는 Hydrate에 대해서 알아봤는데, 이번에는 SSG(Server-Side-Generation, Static-Site-Generation)와 SSR(Sever-Side-Rendering)에 대해 알아보려고 합니다. CSR에 알고 싶으신 분은 아래 링크 참고 부탁드릴게요! https://narup.tistory.com/264?category=1044606 [React] SSR과 CSR(SPA) 차이 1. 개요 먼저 브라우저가 동작되어 우리에게 정보를 표현할 때, HTML의 정보를 읽어 이를 내부적으로 렌더링 한 후 js나 css를 반영해 최종적으로 정보를 표현합니다. 이러한 렌더링을 하는 방식이 narup.tistory.com React: CSR(Client-Side-Rendering..

[gRPC] Protocol Buffer란?

1. 프로토콜 버퍼(Protocol Buffer)란? gRPC에서 사용되는 .proto를 사용하기에 앞서 프로토콜 버퍼에 대한 이해가 선행되어야 하는데, 프로토콜 버퍼는 흔히 볼수 있는 XML, JSON과 유사한 직렬화 데이터 구조이며 보통 protobuf로 줄여서 부릅니다. 직렬화란, 데이터 표현을 바이트 단위로 변환하는 작업을 의미합니다. 문자열 직렬화를 예로 들자면, hello라는 문자를 16진수로 인코딩을 해서 68 65 6C 6C 6F와 같은 형태로 표현하는 것을 말합니다. 위 그림은 json과 Protocol buffer를 사용한 직렬화의 차이를 나타낸 것인데 json: 82byte protocol buffer: 33 byte 와 같은 차이가 납니다. .proto 파일은 위와 같이 프로토콜 버..

[Redis] *:6379: bind: No such file or directory 오류 해결

1. 개요 Window에서 레디스 설치파일을 통해 설치를 하고, 기본 설치 경로("C:\Program Files\Redis")로 들어가서 redis-server.exe를 cmd로 실행하면 서버가 동작한다고 해서 따라했는데 기본 설정이 지정되지 않았고, 6379 포트에 바인딩 된 디렉토리나 파일이 없다고 에러가 나왔습니다. 뭐지? 6379포트를 따로 쓰는건 없을텐데... 구글링을 해보니 쉽게 해결되는 문제였습니다 2. 해결 1) 레디스 설치 폴더의 redis-cli.exe 실행 2) shutdown 입력 3) exit 입력 4) redis-server.exe 실행 끝입니다.

JWT(Json Web Token) 토큰이란?

1. 개요 회원의 로그인 기능을 구현하려고 하다보니 자연스럽게 JWT토큰에 대해 알게 되었고, 대부분의 웹 서비스는 이 JWT토큰를 사용해서 로그인과 로그인 상태를 유지하고 있었습니다. 이러한 기능을 구현하기 위해서는 JWT토큰에 대한 이해와 로그인 서비스에 대한 이해가 필요합니다. 2. 인증(Authentication)과 인가(Authorization) 로그인 서비스에 대해 알아보기 전에 먼저 인증과 인가에 대한 차이를 알아야 합니다. 인증(Authentication): 대표적인 로그인 기능입니다. 아이디와 패스워드 등을 통해 특정 서비스에 일정 권한이 주어진 사용자임을 인증받는 서비스입니다. 인가(Authorization): 사용자가 한 번 인증을 받은 후에, 해당 특정 서비스를 이용할 수 있는 지에..

[Javascript] RxJS란?

1. 개요 Nest.js에서 Microservice를 구현하면서 RxJS개념을 사용이 되어 정확하게 이해하고자 정리를 합니다. 듣기로는 Angular에서 사용되는 개념이라고 하네요(Angular를 쓸 기회가 있을지는 모르겠지만...) RxJS는 Reactive Extensions For JavaScript 라이브러리라고 해서 리액티브 프로그래밍을 javascript에서 지원하기 위해 만들어진 라이브러리입니다. 리액티브 프로그래밍이란 이벤트나 배열 같은 데이터 스트림과 전파를 중심으로 변화에 유연하게 반응하는 프로그래밍을 의미합니다. 이 리액티브 프로그래밍은 Push 시나리오 방식으로 외부와 통신합니다. *Push 시나리오 : 외부에서 명령하면서 응답이 오면 그때 반응하여 처리함. 데이터를 가지고 오기 위..

[Next.js] Hydrate란?

1. 개요 Hydrate란, Server Side단에서 렌더링 된 정적 페이지와 번들링된 js파일(Webpack)을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 js 코드를 서로 매칭시키는 과정을 말합니다. 일단, Client Side Rendering인 기본 React에서는 js파일만을 이용하여 public/index.html의 기본 뼈대만 있는 내용을 제외하고 src/index.js의 자바스크립트 코드에서 모든 화면을 렌더링 한 뒤, HTML DOM 요소 중 root라는 엘리먼트를 찾아 하위로 주입을 하여 웹 화면이 구성합니다. Next.js에서는 클라이언트에게 웹 페이지를 보내기 전에 Server Side 단에서 미리 웹 페이지를 Pre-Rendering 합니다. Pre-..