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가지가 존재한..

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에 비하여 편리한 점이 많아서 가장 많이 사용되는..

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

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

이번 글은 MSW를 이용하여 백엔드 API를 Mocking 하는 방법에 대해 알아보자. 실제로 프로젝트에 들어가게된다면 내가 프론트 엔드 작업을 할 때 API가 있을 수도 있지만, 없는 경우도 많다. 보통 프로젝트를 할 때는 프론트엔드에서 UI를 구성하는 작업과 백엔드의 API를 개발하는 작업이 작업 순서상 동시에 진행되는 데 이러면 UI를 구성할 때 백엔드로부터 데이터를 받아올 수 없기 때문에 Fake 데이터인 더미 데이터를 만들어서 사용한다. 그렇게 만들어둔 더미 데이터는 API가 완성된다면 사용하지 않고 백엔드로부터 데이터를 받아오지만 단순하게 가짜 데이터인 더미 데이터를 사용하는 것이 아니라 실제로 호출할 수 있는 가짜 API를 사용하면 좀 더 안정적으로 UI를 구성할 수 있다. Mock Serv..

들어가기 전 나는 Flutter 학습을 위해서 Dart에 대해서 먼저 배우고 있는 데, Dart를 배우면 배울수록 너무 Javascript와 Java를 섞어 놓은 거 같이 생겨서 신기하면서도 배우기 쉬워서 만족하고 있다. Flutter의 함수도 Java와 Javascript를 합친 것과 같은 문법이다. 함수, Function Dart에서의 함수는 다른 언어와 마찬가지로, 하나의 로직을 재실행 할 수 있도록 하는 것으로, 코드의 재사용성을 높여주는 역할을 한다. 함수 선언 방법 Dart에서의 함수를 선언 하는 방법은 Java의 Method를 선언하는 것과 같이 해당 함수의 반환 타입을 명시해줘야하며, 반환하는 값이 없을 경우 void도 사용이 가능하다. void printName(Sring name){ p..

어던 언어를 배우든 해당 언어에 대한 자료형에 대한 지식이 있어야 응용이 잘 된다. 특히 서버를 구축하거나 서버와의 통신을 하는 경우가 더욱 그러는 것 같다. 이번 포스팅의 목적은 Dart의 자료형에 대한 이해를 하는 것이다. 1. 기본 자료형 Dart에는 기본적으로 문자열의 String, 숫자형의 num, 그를 상속 받는 int, double이 있으며, 참과 거짓을 의미하는 bool이 있다. String void main() { String name = "김인후"; var job = "developer" } Dart에서는 문자열을 사용하기 위해서는 위의 예시와 같이 키워드 String을 사용하거나, var로 선언하여 문자열을 할당하면 해당 변수는 문자열 변수가 된다. int, double, num vo..

1. 들어가기 전 2022년 하반기에 신용보증재단과 구로청년이룸에서 개최한 모두가 하드캐리 3기에 나는 서버 개발자로 참여하였고, Nest js를 이용하여 버들 시장 활성화 방안인, 스탬프 지도 서비스의 서버를 구축하였었고 그 때 배정된 멘토님이 Flutter 개발자셨고, 그 때 Flutter에 대한 관심이 생겼었다. 그리고 노마드코더와 같은 개발 유튜버들을 통하여 Flutter에 대해서 좀 더 알게되었고, 어플리케이션 개발을 React Native만 사용하던 나에게서 그와 자주 비교되는 Flutter는 학습을 하고 싶은 대상이였다. 이번에 졸업하는 학교 후배들을 대상으로 사이드 프로젝트를 기회주는 활동을 하면서 Flutter에 대한 학습을 하게 되어 학습을 시작한다. 2. Dart의 변수 Dart에서 ..

조건문 조건문은 특정한 조건에 따라 코드 진행을 달리하는 분기처리를 하는 문법으로, Javascript에서는 if문과 switch문을 많이 사용하며, 논리 연산자와 삼항 연산자로도 사용이 가능하다. 조건문 if문 if문은 소괄호 안의 조건식이 참이 될 때, 중괄호 안의 코드를 실행 시킨다. const age = 21 if(age >= 20){ console.log("성인 입니다.") } // 성인 입니다. 조건문 if else문 단순하게 나이가 20살 이상일 때뿐만 아니라 20살이 아닐 때라는 분기처리를 희망하면 else를 아래와 같이 사용한다. if문의 모든 조건들의 해당되지 않는 나머지 경우의 수일 때 else 중괄호 안의 식이 실행이 된다. const age = 18 if(age >= 20){ co..

반복문 Javascript에서 코드를 특정한 횟수를 반복하거나 리스트 형태의 데이터를 순회하고 싶을 때 반복문을 사용 합니다. 주로 많이 사용하는 반복문은 for을 이용한 횟수를 중요시하는 반복문들이 있습니다. for for each for in for of 반복문 for 반복문 for은 코드를 특정한 횟수를 반복할 때 사용합니다. for (let i = 0; i 조건식 -> 반복 코드 -> 후위식의 순서대로 진행 되며, 반복하다가 조건식이 false일 때 반복을 멈춥니..