전체 글
window의 location에 대해 알아보자
0. 들어가기 전 최근 회사에서 업무를 보면서 History에 대한 부분에 이슈가 있었다. 브라우저에서 이동을 하는 과정에서 기록을 남기지 않고 가야하는 이슈가 있었는 데, 이에 대해 window.location.href를 이용하여 이동하는 것이 아니라 window.location.replace를 이용하여 해결을 했지만 해당 객체에 대한 정리가 필요할 거 같아서 작성을 한다. 1. Location 객체 window.location은 Location 객체를 가르킨다. 우리는 Location 객체를 이용하여 현재 웹 페이지의 URL 정보를 얻거나, 변경할 수 있다. Location 객체에는 데이터에 대한 정보를 받아올 수 있는 인스턴스의 속성과 메서드로 구성되어있다. Location은 읽기 전용의 프로퍼티지..
Minikube에서 간단하게 배포하기.
Minikube 쿠버네티스는 본래 마스터 노드와 1개 이상의 워커 노드로 구성되어 있지만, 단순 테스트를 위하여 개인이 2개의 노드를 구성한 플랫폼을 만드는 것은 쉽지 않다. Minikube는 마스터 노드의 일부 기능과 개발 및 배포를 위한 단일 워커 노드를 제공하여 간단한 쿠버네티스 플랫폼 환경을 개인 PC에서도 만들 수 있게 도와준다. 오늘은 M2 맥북에서 Minikube를 사용하는 방법에 대해서 학습할 것이다. Minikube와 kubectl 설치 먼저 homebrew를 이용하여 minikube를 설치해준다. brew install minikube 설치를 마치고, 아래 명령어를 이용하여 설치가 잘 되었는 지 확인한다. minikube version 이제 Kubectl을 설치해보자. kubectl은 ..
React Native Spotify 음악 재생 구현
Spotify는 전세계에서 가장 많이 사용하는 음악 스트리밍 서비스다. 이번에 React Native로 Spotify 노래 재생을 구현하게 되였기에 해당 과정을 기록한다. 0. 들어가기 전 이번에는 React Native Cli를 기반으로한 React Native 프로젝트에서 해당 기능을 구현했으며, 사용한 버전은 아래와 같다. "react-native": "0.70.1" 1. 구현 방법 고려하기 Spotify에서는 개발을 위한 여러 개의 API와 SDK를 제공한다. 따라서 내 목표인 Spotify의 음악 스트리밍을 구현할 수 있는 방법이 여러개가 존재한다. 아래는 Spotify의 개발자 문서가 적힌 사이트인데, 들어가보면 Web API, SDK 등 여러가지를 지원하는 것을 확인할 수 있다. Home |..
Express + routing-controllers + typedi를 사용한 서버 구축하기(1) - Routing Controller
0. 들어가기 전에 NodeJS + Express를 이용하여 백엔드를 구축하면 일반적으로는 Func을 기반으로 라우터와 컨트롤러로 구성하는 계층 구조를 많이 볼 수 있다. 하지만 Express에서도 Spring boot나 NestJS와 같이 controller를 구성하여 controller-service-repository 계층 구조로 구성하고 싶은 개발자가 많을 거다. Class를 기반으로 Express를 Controller, Service, Repository로 계층을 구성하게 되면 비교적 Spring boot나 NestJS 개발자들도 쉽게 접근할 수도 있다는 장점이 있다. 이번에는 routing-controllers와 typedi를 이용하여 Express로 해당 계층을 구현할 예정이다. (1) Ro..
NestJS V10 마이그레이션 + SWC
NestJS V10에서는 SWC를 사용하여 컴파일을 공식 지원합니다. 그 이외에도 다양한 변화가 있지만 그 변화는 아래의 글에 정리했으니 참고 해주세요. Nestjs V10의 변화점 올해 NestJS에서 V10을 발표했다. 나는 좀 뒤늦게 알게 되었지만 처음 공부할 때가 V8에서 V9 막 넘어갈 때였는 데, 확실하게 업데이트가 빠른 프레임워크인 것 같다. NestJS V10에서 발표한 가장 큰 내 pinomaker.com 오늘은 NestJS를 V10으로 마이그레이션 한 후에 SWC를 적용하는 과정까지를 포스팅 합니다. 1. NestJS Project 생성하기. 먼저 Nest Cli를 이용하여 NestJS 프로젝트를 생성합니다. npx nest new [project name] Package Manager..
Nestjs V10의 변화점
올해 NestJS에서 V10을 발표했다. 나는 좀 뒤늦게 알게 되었지만 처음 공부할 때가 V8에서 V9 막 넘어갈 때였는 데, 확실하게 업데이트가 빠른 프레임워크인 것 같다. NestJS V10에서 발표한 가장 큰 내용은 SWC, Redis 와드카드 구독 CacheModule 분리, node 12 이하에서 지원 중지 등이 있다. 오늘은 간단하게 NestJS V10에 대한 특징을 간단하게 정리하고자한다. 1. SWC SWC, Speedy Web Compiler는 컴파일과 번들링 모두에 사용할 수 있는 확장 가능한 Rust 기반의 플랫폼이다. 기존의 Babel의 대체재라고 생각하면 이해하기 편하다. Nest Cli와 SWC를 같이 사용하게 되면 개발 프로세스 속도를 간단하게 대폭 상승 시킬 수 있다. SWC..
[Database] Transaction
1. Transaction이란? 트랜잭션은 데이터베이스의 상태를 변화시키는 하나의 논리적 기능을 수행하기 위한 작업의 단위로 한꺼번에 수행되어야할 일련의 연산을 의미한다. 트랜잭션은 작업의 안전성을 보장해주기에 논리적인 작업을 모두 처리하거나 혹은 처리하지 못 하는 경우에는 원상태로 복구해주는 기능을 제공하며, 사용자의 입장에서는 논리적 단위로 이해할 수 있고 시스템은 데이터를 접근하거나 변경하는 단위가 된다. 트랜잭션의 예시를 들어보자. A가 B에게 50,000원이라는 금액을 송금하는 Flow를 생각하면, A 통장에서는 50,000원이 빠져나가고, B 통장에서는 50,000원이 추가되어야한다. 하지만 작업 중에 A 통장에서 돈은 빠져나갔지만 B 통장에 50,000원을 추가하는 쿼리에서 에러가 발생하면 ..
Nestjs Swagger(1) - Swagger 설정
API Documentation & Design Tools for Teams | Swagger Loved by all • Big & Small Thousands of teams worldwide trust Swagger to deliver better products, faster. swagger.io Swagger는 API를 쉽게 문서화를 시킬 수 있는 라이브러리 입니다. Swagger를 사용하면 코드레벨에서 API 문서를 작성하고 동기화할 수 있어 어렵지 않게 API를 실시간으로 관리할 수 있다는 장점이 있으며, API를 사용해야하는 유저들은 Swagger에서 테스트를 할 수 있다는 장점이 있습니다. 오늘은 Nestjs에서 Swagger를 사용하는 방법에 대해 알아봅니다. 0. 의존성 모듈 설치 먼저..
Docker를 이용하여 MySQL Write(master), Read(slave)로 Replication 구현하기.
Replication이란? Replication이란 말 그대로 실시간으로 복제본 데이터 베이스 서버를 운영하는 것으로, 원본 서버를 마스터 서버, 이를 복사하여 사용하는 서버를 슬레이브 서버라고 칭한다. 서버에서 DB가 변하는 요청인 INSERT, UPDATE, DELETE 등은 마스터 서버로 요청을 보내고, SELECT와 같은 조회는 슬레이브 서버로 요청을 보내서 사용하는 것이 일반적이며, 마스터 서버는 받은 요청을 똑같이 슬레이브 서버로 실시간으로 보내 동일한 상태를 유지한다. Replication을 사용하는 이유는 디비 서버를 분리하여 디비 서버에 대한 부하를 줄이기 위함과 데이터의 안정성에 있다. 오늘은 Docker를 이용하여 Replication Mysql를 구성해보자. 0. 프로젝트 구성 ├─..
MSW로 Mocking(1) - Brower
이번 글은 MSW를 이용하여 백엔드 API를 Mocking 하는 방법에 대해 알아보자. 실제로 프로젝트에 들어가게된다면 내가 프론트 엔드 작업을 할 때 API가 있을 수도 있지만, 없는 경우도 많다. 보통 프로젝트를 할 때는 프론트엔드에서 UI를 구성하는 작업과 백엔드의 API를 개발하는 작업이 작업 순서상 동시에 진행되는 데 이러면 UI를 구성할 때 백엔드로부터 데이터를 받아올 수 없기 때문에 Fake 데이터인 더미 데이터를 만들어서 사용한다. 그렇게 만들어둔 더미 데이터는 API가 완성된다면 사용하지 않고 백엔드로부터 데이터를 받아오지만 단순하게 가짜 데이터인 더미 데이터를 사용하는 것이 아니라 실제로 호출할 수 있는 가짜 API를 사용하면 좀 더 안정적으로 UI를 구성할 수 있다. Mock Serv..