Tech Blog of Pinomaker
article thumbnail
Minio에 파일 업로드하기(with aws-sdk)
F.E/React 2023. 11. 29. 00:41

MinIO | High Performance, Kubernetes Native Object Storage MinIO's High Performance Object Storage is Open Source, Amazon S3 compatible, Kubernetes Native and is designed for cloud native workloads like AI. min.io 0. 들어가기 전 Minio는 AWS S3와 호완되는 Object Storage인데 회사에서는 AWS S3 등의 스토리지를 사용했겠지만 개인 프로젝트의 경우에는 비용을 고려해야하기에 진행하고 있는 프로젝트에선 Minio를 채택하여 파일 서버로 구성하였다. 다른 파일 서버도 존재하지만 Minio를 선택한 이유는 총 3가지가 존재한..

article thumbnail
React에서 axios 응용하기.
F.E/React 2023. 11. 21. 02:03

Axios 브라우저와 node.js를 위한 Promise 기반 HTTP 클라이언트 라이브러리 Axios는 브라우저와 node.js를 위한 간단한 Promise 기반 HTTP 클라이언트입니다. Axios는 확장 가능한 인터페이스를 가진 작은 패키지로 axios-http.com 0. axios란? axios는 node.js와 브라우저를 위한 Promise 기반의 HTTP 클라이언트다. 즉 브라우저 뿐만 아니라 NodeJS 위에서도 동작한다는 것이며, 브라우저에서는 XMLHttpRequests를 사용하고 NodeJS에서는 http 모듈을 사용한다. axios는 Promise를 기반으로 JSON으로 데이터가 자동 변환된다는 점이 있어 기본으로 제공해주는 fetch에 비하여 편리한 점이 많아서 가장 많이 사용되는..

article thumbnail
window의 location에 대해 알아보자
F.E/JavaScript 2023. 11. 5. 15:30

0. 들어가기 전 최근 회사에서 업무를 보면서 History에 대한 부분에 이슈가 있었다. 브라우저에서 이동을 하는 과정에서 기록을 남기지 않고 가야하는 이슈가 있었는 데, 이에 대해 window.location.href를 이용하여 이동하는 것이 아니라 window.location.replace를 이용하여 해결을 했지만 해당 객체에 대한 정리가 필요할 거 같아서 작성을 한다. 1. Location 객체 window.location은 Location 객체를 가르킨다. 우리는 Location 객체를 이용하여 현재 웹 페이지의 URL 정보를 얻거나, 변경할 수 있다. Location 객체에는 데이터에 대한 정보를 받아올 수 있는 인스턴스의 속성과 메서드로 구성되어있다. Location은 읽기 전용의 프로퍼티지..

article thumbnail
Minikube에서 간단하게 배포하기.
DevOps/Kubernetes 2023. 10. 24. 01:15

Minikube 쿠버네티스는 본래 마스터 노드와 1개 이상의 워커 노드로 구성되어 있지만, 단순 테스트를 위하여 개인이 2개의 노드를 구성한 플랫폼을 만드는 것은 쉽지 않다. Minikube는 마스터 노드의 일부 기능과 개발 및 배포를 위한 단일 워커 노드를 제공하여 간단한 쿠버네티스 플랫폼 환경을 개인 PC에서도 만들 수 있게 도와준다. 오늘은 M2 맥북에서 Minikube를 사용하는 방법에 대해서 학습할 것이다. Minikube와 kubectl 설치 먼저 homebrew를 이용하여 minikube를 설치해준다. brew install minikube 설치를 마치고, 아래 명령어를 이용하여 설치가 잘 되었는 지 확인한다. minikube version 이제 Kubectl을 설치해보자. kubectl은 ..

article thumbnail
React Native Spotify 음악 재생 구현
F.E/React Native 2023. 10. 15. 14:35

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 |..

article thumbnail
Express + routing-controllers + typedi를 사용한 서버 구축하기(1) - Routing Controller
B.E/Node JS 2023. 10. 12. 00:16

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..

article thumbnail
NestJS V10 마이그레이션 + SWC
B.E/Nest JS 2023. 10. 11. 21:56

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..

article thumbnail
Nestjs V10의 변화점
B.E/Nest JS 2023. 10. 11. 21:20

올해 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
Database/Database 2023. 10. 9. 19:39

1. Transaction이란? 트랜잭션은 데이터베이스의 상태를 변화시키는 하나의 논리적 기능을 수행하기 위한 작업의 단위로 한꺼번에 수행되어야할 일련의 연산을 의미한다. 트랜잭션은 작업의 안전성을 보장해주기에 논리적인 작업을 모두 처리하거나 혹은 처리하지 못 하는 경우에는 원상태로 복구해주는 기능을 제공하며, 사용자의 입장에서는 논리적 단위로 이해할 수 있고 시스템은 데이터를 접근하거나 변경하는 단위가 된다. 트랜잭션의 예시를 들어보자. A가 B에게 50,000원이라는 금액을 송금하는 Flow를 생각하면, A 통장에서는 50,000원이 빠져나가고, B 통장에서는 50,000원이 추가되어야한다. 하지만 작업 중에 A 통장에서 돈은 빠져나갔지만 B 통장에 50,000원을 추가하는 쿼리에서 에러가 발생하면 ..

article thumbnail
Nestjs Swagger(1) - Swagger 설정
B.E/Nest JS 2023. 10. 9. 01:14

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. 의존성 모듈 설치 먼저..