전체 글

전체 글

    브라우저 라우팅과 해시 라우팅의 차이 (Browser Routing 과 Hash Routing 의 차이)

    브라우저 라우터 (Browser Router) 모던 웹브라우저에서 제공하는 히스토리 API 를 활용하여 히스토리 스택을 조작한다. 히스토리 스택에는 브라우저 탭이나 창에서 방문한 URL 이 들어있다. 해시 라우팅과 비교하면 해시(#)가 없는 깔끔한 URL 을 사용할 수 있다. 장점 깔끔한 URL: URL 이 깔끔해진다. SEO 친화적: URL 이 깔끔하여 SEO 에 친화적이다. SSR 지원: 서버가 미리 렌더링된 초기 페이지를 반환할 수 있어서 SEO 를 용이하게 하고 처음 방문하는 방문자의 로딩 시간을 개선한다. 단점 서버 구성: 서버에서 모든 요청을 index.html 로 라우팅되도록 해야 SPA 라우팅이 올바른 뷰를 렌더링 할 수 있다. 브라우저 호환성: 일부 구형 브라우저는 히스토리 API 를 지..

    MVC 패턴이란? 짧게 설명하기 / (Model, View, Controller 패턴이란?)

    MVC 패턴이란? (Model, View, Controller 패턴이란?) 화면 개발에서 많이 쓰이는 디자인 패턴이다. MVC 는 각각 Model, View, Controller 를 의미한다. 모델 (Model) 이란? 앱의 데이터를 저장하고 관리하는 역할 데이터를 관리하는 역할이다. API, DB, 로컬 저장소 등에 있는 데이터를 가져와 앱에서 사용할 수 있는 모양으로 만든다. 데이터를 추가하거나 수정하거나 삭제할 수 있는 방법도 알고 있다. 뷰 (View) 란? 사용자에게 보여지는 화면을 구성하고 업데이트하는 역할 화면을 관리하는 역할이다. HTML, CSS, JS 를 포함한다. 데이터를 받아 화면에 UI 를 렌더링한다. 이벤트가 발생했음을 감지하고 컨트롤러에 전달한다. 컨트롤러 (Controller..

    Nest.js 웹소켓 (WebSockets) 이란? + 사용법

    웹소켓 게이트웨이 웹소켓 게이트웨이란, 웹소켓에서 REST Controller 와 비슷한 역할을 해주는 것이라고 보면 된다. 단, 진입점이 단순히 엔드포인트가 아니라 이벤트(namespace)이며, 뒤에 추가 path 가 있는 게 아니라 추가 event 가 더 있는 것으로 보면 된다. 웹소켓에서 엔드포인트는 단순히 처음 connection 을 맺을 때 한번만 쓰인다. @WebSocketGateway() 데코레이터를 단 클래스이다. 게이트웨이는 플랫폼에 구애받지 않으므로 어댑터가 생성되면 모든 WebSockets 라이브러리와 호환된다. 기본 지원은 socket.io 와 ws 이다. 의존성 설치 $ npm i --save @nestjs/websockets @nestjs/platform-socket.io 기본..

    자바스크립트의 Socket.io 라이브러리란? (웹소켓 통신 라이브러리)

    개요 WebSocket 프로토콜을 사용해서 만든 양방향 통신이다. 웹에서 일반적으로 사용하는 HTTP 는 기본적으로 클라이언트가 서버에게 요청하는 관점이라면, WebSocket 은 서로서로 요청하는 양방향이다. low-latency (낮은 지연), bi-directional (양방향), event-based (이벤트 기반) 로 클라이언트와 서버가 통신할 수 있게 해준다. 기본 통신 예제 emit() 은 메세지를 보낸다. (연결된 모든 소켓에게 보낸다.) boradcast.emit() 이란 것도 있는데, 이는 나 빼고 모두에게 메세지를 보낸다. on() 은 메세지를 받는다. 서버 코드 import { Server } from "socket.io"; // 웹소켓 서버를 생성 const io = new Ser..

    Nest.js 미들웨어 (Middleware) 란?

    미들웨어 (Middleware) 란? 라우트 핸들러 앞에 호출되는 함수 요청-응답에서 요청 및 응답 객체와 next() 미들웨어 함수에 접근 가능 다음 미들웨어 함수는 일반적으로 next 라는 변수로 표기됨 기본적으로 express 의 미들웨어와 동일 express 의 미들웨어 소개 어떤 코드든 실행한다. 요청-응답 객체를 변환한다. 요청-응답 사이클을 종료한다. 스택에서 다음 미들웨어 함수를 호출한다. 다음 미들웨어 함수에 제어권을 넘기기 위해 next() 를 호출해야 한다. 그렇지 않으면 요청이 중단된 채로 유지된다. next() 를 꼭 불러줘야 한다는 점이 Interceptor 나 Guard 와 같은 것과 구분된다. 미들웨어는 요청에 제공하는 기능 중 올인원 솔루션 같은 느낌이다. 제약받지 않고 많..

    Nest.js 인터셉터 (Interceptor) 란?

    인터셉터 Nest.js 의 인터셉터 클래스는 @Injectable 데코레이터를 추가해야 한다. NestInterceptor 인터페이스를 상속해야 한다. 인터셉터는 Aspect Oriented Programming 기술에서 영감을 받았다. 메서드 실행 전 후에 추가 로직 바인딩 함수 결과를 변환 함수 예외를 변환 함수 동작을 확장 조건부 함수 완전 재정의 (ex. 캐싱 목적) 기초 인터셉터는 intercept() 메서드를 구현해야 한다. 메서드엔 두개의 인자가 있다. 1번째 인자, ExecutionContext: 요청의 타입 정보나 호출된 컨트롤러 메서드 정보 등을 가져올 수 있다. ex) http 에서 헤더, 쿠키 등의 정보 그리고 컨트롤러 메서드 정보 이는 ArgumentsHost 를 상속한다. 2번째..

    도커 컨테이너의 라이프사이클 (Docker container lifecycle)

    컨테이너의 라이프사이클 docker run 은 실제론 docker create 와 docker start 가 하나로 합쳐진 명령이다. docker create 까지는 격리된 공간만 만들어놓는다. docker start 단계에서 실제로 메모리와 CPU 를 사용하게 된다. docker pause 명령어는 컨테이너를 일시정지 시키는데, 이 때는 컨테이너의 상태를 기억해야 해서 메모리는 사용하지만 CPU 는 사용하지 않는 상태가 된다. docker stop 명령어는 컨테이너에서 실행 중이던 프로세스를 완전히 중지시킨 것이고, CPU 도 메모리도 사용하지 않는다. 다시 시작하면 컨테이너가 처음부터 다시 시작된다. docker rm 은 모든 단계에서 실행 가능하다. 단, 실행 중인 컨테이너를 삭제하려면 docker..

    2가지 파일 업로드 방식 알아보기 (feat. pre-uploading (프리 업로드, 먼저 업로드) 방식과 일반 업로드 방식)

    업로드 방식 일반적인 파일 업로드 방식 제목, 내용, 파일을 한 번에 받아 업로드한다. 업로드 버튼을 눌른 이후에 업로드가 시작되었을 때, 사용자는 앱이 약간 느리다고 느낄 수 있다. 파일이 여러개가 되거나 첨부파일의 용량이 커질수록 이러한 불편을 느낄 확률이 커진다. 먼저 업로드 하는 방식 (Pre-uploading, Background uploading) 첨부파일을 선택하는 순간에 이미 업로드는 시작된다. 업로드된 파일은 임시 폴더에 잠시 저장된다. 첨부파일 업로드 뒤에 게시글 작성 시 첨부파일 경로만 추가해준다. S3 presigned url 을 사용하면 많이 사용되는 방식이다. 장단점 비교 일반적인 파일 업로드 방식 체감 속도: 길다 서버 과부하: 한 번의 요청만 받게 되므로 상대적으로 유리하다...

    Cgroup, 씨그룹, c그룹 이란 무엇인가?

    cgroup 이란? 제어 그룹 (control group) 의 줄임말이다. 프로세스의 리소스 사용량 (CPU, 메모리, 디스크 I/O, 네트워크) 등을 제한하고 격리하는 Linux 커널 기능이다. Docker 와 같이 컨테이너화된 환경에서 필요한 격리 및 리소스 제어를 제공하는데 필수적이다. 핵심 개념 리소스 제한 프로세스의 사용자 정의 그룹 간에 CPU 시간, 시스템 메모리, 네트워크 대역폭과 같은 리소스를 할당할 수 있다. 우선순위 지정 서로 다른 리소스 그룹의 우선순위를 정의할 수 있다. 부하가 높을 때 어떤 애플리케이션이 더 많이 리소스를 확보할지 설정이 가능하다. 감사 (Audit) 여러 작업 그룹에서 사용하는 리소스에 대한 자세한 계정을 제공한다. 모니터링 및 감사 목적에 중요하다. 제어 제어..

    컨테이너 런타임 (Container Runtime) 이란 무엇인가? 그리고 runc

    컨테이너 런타임이란? 도커에서 직접 커널과 통신하며 실제로 격리된 공간을 만드는 역할을 한다. 호스트 운영체제에서 컨테이너를 실행하고 컨테이너 이미지를 관리함 실행, 일시 중지, 중지와 네임스페이스, cgroup, 네트워크 인터페이스 관리와 같은 저수준 작업을 처리 컨테이너의 수명 주기를 담당 도커는 처음에 LXC 라는 런타임을 사용했지만 나중에 libcontainer 라는 자체 런타임을 개발하고 나중에 runc 로 발전 점진적으로 가볍고 유연하고 안정적이 됨 runc 런타임이란? OCI 스펙에 따라 컨테이너를 생성하고 실행하기 위한 CLI 도구임. Docker 및 기타 컨테이너 플랫폼이 내부적으로 사용하는 런타임이고 컨테이너 실행을 위한 사실상의 표준. 단순성, 이식성, OCI 런타임 사양 준수에 중점..

    도커의 아키텍처

    도커의 역할 커널의 컨테이너 가상화 기술을 사용자가 손쉽게 활용할 수 있게 하는 것 도커 아키텍처 컨테이너 엔진: 사용자의 요청을 받아 컨테이너를 관리하는 역할 컨테이너 런타임: 직접 커널과 통신하며 실제로 격리된 공간을 만드는 역할 도커는 runc 라는 컨테이너 런타임을 사용 runc 는 OCI (Open Container Initiative) 를 준수함 무조건 runc 를 사용해야 하는 것은 아니지만 도커에서 기본으로 사용하는 컨테이너 런타임임 리눅스 커널 버전마다 사용법이 다른데, runC는 cgroup, namespace 와 같은 기술을 버전에 구애받지 않고 사용할 수 있도록 LXC 혹은 libvirt 를 사용하여 간접적으로 관리함 도커 클라이언트 서버 구조 도커는 클라이언트 서버구조로 동작한다...

    컨테이너 가상화란?

    컨테이너 가상화 하이퍼바이저 방식보다 더 가볍고 더 빠르다. 리눅스 커널이 제공하는 LXC, 리눅스 컨테이너 라는 자체 격리 기술에서 출발했다. 커널 자체의 공간만 사용하여도 격리된 공간을 만들 수 있다. 커널의 Namespace 와 Cgroups 를 이용한다. Namespace: 프로세스, 하드드라이브, 네트워크, 사용자, 호스트 네임처럼 리소스를 나누는 기준의 역할 Cgroups: 메모리, CPU, Disk, Network Bandwidth 처럼 리소스의 사용량을 배분하는 기술 LXC 라는 기술을 통해 분리된 공간 각각을 컨테이너라고 부른다. Host OS 의 커널을 공유하는데, 이게 컨테이너 가상화의 가장 큰 특징 중 하나이다. Guest OS 를 사용하는 하이퍼바이저 방식보다 오버헤드가 작다. 하..