개발
[WebSocket/Socket IO] 채팅 서비스 구현 1. 프로젝트 설정
안녕하세요. 휘입니다. 이번 시리즈에서는 WebSocket과 Socket IO를 사용한 실시간 채팅 서비스를 구현하는 방법에 대해 살펴보려고 합니다. 1. 백엔드 설정하기 먼저, 프로젝트를 진행할 새로운 디렉토리를 생성하고 이동한 다음 터미널을 엽니다. (1) NodeJS 설치와 package.json 생성 Node.js를 설치합니다. 설치 완료 후 node -v를 통해 설치가 잘 됐는지 확인할 수 있습니다. 다음으로 package.json 파일을 생성해줍니다. npm init -y express를 설치해줍니다. npm i express (2) Babel 설치와 설정 자바스크립트 컴파일러 Babel을 설치해줍니다. npm i @babel/core @babel/cli @babel/node @babel/pr..
NestJS 기초 (15) MVC 디자인 패턴 구현하기
MVC(Model-View-Controller) 패턴은 사용자 인터페이스, 데이터 및 논리 구조를 구현하는 소프트웨어 디자인 패턴입니다. MVC 모델의 핵심은 비즈니스 로직과 화면 구현을 분리하여 관리하는 것입니다. 각 요소는 다음과 같은 특징을 갖고 있습니다. 보다 자세한 사항은 MDN의 MVC 설명 문서를 참고해보시기 바랍니다. 모델(Model): 앱에서 처리할 데이터를 관리합니다. 데이터 상태가 변경되면 뷰 또는 컨트롤러에게 이를 전달합니다. 뷰(View): 레이아웃과 화면을 처리합니다. 컨트롤러: 명령을 모델과 뷰 사이에서 사용자 입력에 대한 응답을 처리하는 로직을 포함하고 있습니다. NestJS에서 MVC 구현하기 이제 NestJS에서 MVC 패턴을 구현해보도록 하겠습니다. 먼저, 새로운 프로젝..
자바스크립트 클래스 설명
클래스는 객체를 생성하는 템플릿입니다. 클래스를 설명하면서 붕어빵 이야기를 많이 하죠. 붕어빵을 만들려면 붕어빵을 찍어내는 틀이 있어야 합니다. 이 틀을 바로 클래스라고 하며, 클래스를 통해 찍어낸 실제 붕어빵을 객체의 인스턴스라고 합니다. 클래스 정의하기 자바스크립트에서는 두 가지 방식 1) 클래스 선언식과 2) 클래스 표현식으로 클래스를 정의할 수 있습니다. 클래스 선언식 (Class declarations) 클래스 선언식은 클래스를 정의하는 방법 중 하나이며, class 키워드와 함께 클래스 이름을 지정합니다. 이때 이름의 첫 문자는 대문자로 적어주는 것이 컨벤션입니다. class Rectangle { constructor(height, width) { this.height = height; thi..
NestJS 기초 (14) 이미지 파일 업로드하기
NestJS에서는 multer 미들웨어 패키지를 사용하여 이미지 파일을 업로드할 수 있습니다. multer는 multipart/form-data 형식을 통해 HTTP POST 요청으로 업로드 되는 파일을 처리할 수 있게 도와줍니다. multer 설치 및 기본 설정 다음 명령어를 통해 multer를 설치할 수 있습니다. $ npm i -D @types/multer multer를 설치했다면 컨트롤러 파일에 다음과 같이 이미지 업로드를 처리할 코드를 작성합니다. 이미지 업로드 직전에 인증 섹션에서 만들었던 가드를 추가해주도록 하겠습니다. 이렇게 하면 인증 토큰을 보유한 사용자만 이미지 업로드를 할 수 있습니다. //users.contoller.ts @ApiOperation( {summary: '이미지 업로드'..
자바스크립트 Jest로 유닛 테스트하는 방법
자바스크립트 Jest 라이브러리를 사용하면 작성한 자바스크립트 코드가 예상대로 작동하는 지 테스트해볼 수 있습니다. Jest 테스트 라이브러리 설치 $ npm i --save-dev jest 라이브러리 설치 후 package.json의 script 부분에서 "test": "jest"를 다음과 같이 수정해줍니다. { "scripts": { "test": "jest" }, "devDependencies": { "jest": "^29.2.2" } } Jest 유닛 테스트 방법 다음과 같이 더하기 함수 sum이 있다고 해보겠습니다. // sum.js function sum(a, b) { return a + b; } module.exports = sum; 이를 테스트하라면 sum.test.js 파일을 새롭게 생성..
NestJS 기초 (13) JWT를 사용한 인증 인가 처리와 데코레이터 구현
이번 포스팅에서는 JWT를 사용하여 사용자의 인증 및 인가를 처리하고 이를 데코레이터로 구현하여 가드로 활용하는 방법에 대해 알아보도록 하겠습니다. JWT 기본 개념 JWT는 Jason Web Token의 약자로 두 주체가 안전한 방식으로 클레임(claims)을 주고 받는 방법입니다. JWT에 포함된 클레임은 JSON 객체로 인코딩되는데요. 공식 웹사이트인 Jwt.io에서 JWT를 인코딩 또는 디코딩해볼 수 있습니다. JWT 구성 JWT를 구현하기 전에 JWT를 사용하기 위해 알아야 할 기본 구성에 대해 살펴보도록 하겠습니다. JWT는 크게 3가지 요소인 헤더, 페이로드, 서명으로 구성되는데요. 각 요소는 .으로 구분합니다. 헤더(header) 헤더에는 JWT 유형과 알고리즘이 담깁니다. { "typ":..
자바스크립트 Set 설명
자바스크립트의 Set() 은 고유한 값만을 가진 새로운 객체를 생성하는 데 사용합니다. 모든 유형의 값들을 저장할 수 있기 때문에, NaN과 undefined 또한 저장할 수 있습니다. 예시를 통해, 사용 방법을 살펴보도록 하겠습니다. 이번 예시에서는 set 메소드를 사옹하여 배열 내 중복 요소들을 제거해 보도록 하겠습니다. const numbers = [1, 1, 1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 9, 10, 10] [...new Set(numbers)]; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 추가적으로 Set()을 통해 배열 내 중복 요소들을 제거한 다음, 요소를 포함하고 있는지 확인해볼 수 있습니다. 다음과 같이 Set.prototype.has(value..
자바스크립트 Promise, async, await 정리
1. Promise Promise 생성자 함수는 비동기 요청을 처리하는 방법 중 하나인데요. 실행은 되었지만 결과를 아직 반환하지 않은 객체를 의미합니다. 비동기 처리를 수행할 콜백 함수를 인수로 받습니다. 콜백 함수는 resolve와 reject 함수를 인수로 받습니다. 성공 또는 실패 하나의 결과만 반환됩니다. const promise = new Promise((reslove, rejcet) => { if (/*비동기 처리 성공*/{ resolve('value'); } else { /*비동기 처리 실패*/ reject(new Error("...")); } }); 2. async/await async와 await는 프로미스를 보다 쉽게 구현하는 방법입니다. 프로미스의 then, catch, finall..
