프로그래밍(Web)/Javascript(TS,Node)

[바미] 배열의 특정 요소만 맨 뒤 또는 맨 앞으로 옮기기

ex) 배열 값 중 1인 값만 앞으로 내보내기 var arr1 = [1,0,2,3,1,4,5,6,7]; 위와 같은 배열일 때 moveforward(arr) { return arr.filter((x) => x === 1).concat(arr.filter((x) => x !== 1)); } filter() 함수는 첫번째 인자에 어떤 조건식을 세우면 그 조건식에 해당하는 요소들로 새로운 배열을 만들어서 반환하게 됩니다. 즉 x라는 인자에 x !== 0 이라는 조건식을 세웠으므로 0이 아닌 요소들만 가져와서 새로운 배열을 만들어 return하게 되죠. 두번째 filter()로는 x 인자가 1이 아닌 요소들로만 배열을 만듭니다. 그리고 concat()함수로 두 배열을 합쳐서 return해줍니다. 그러면 1인 값은..

[바미] JavaScript JSON 데이터 GET 하기.

IP로 현재 지역을 조회 해야 하는 일이 생겨 찾아보게 되었습니다. var getJSON = function(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'json'; xhr.onload = function() { var status = xhr.status; if (status === 200) { callback(null, xhr.response); } else { callback(status, xhr.response); } }; xhr.send(); }; 이렇게 함수로 정의하고, 저 getJSON을 사용하는 방법은 getJSON('http://query.yahooapis.com..

[바미] JavaScript에 Highchart를 이용한 그래프 삽입

이번에는 https://www.highcharts.com/ 에서 제공하는 데모버전을 적용하는 방법을 알아보겠습니다. 먼저 여기로 들어갑니다. 왼쪽 상단에 있는 Demo를 들어갑니다. 맘에 드는 차트를 찾습니다. 원하는 Demo의 속성에 맞게 다운로드 해줍니다. 아까 마음에 들던 차트를 들어갑니다. Edit IN JSFIDDLE를 눌러줍니다. 왼쪽 상단에 등등을 넣어줍니다. DEMO를 보고 있는 사이트의 경로는 https:// ~ 로 되어있는데 꼭 자신에 맞게 경로를 다시 지정해주셔야 됩니다. 그리고 에 넣어 주시면 됩니다. jquery-1.12.3min.js로 돌아가는거 확인했습니다. jquery가 맞지 않으면 돌아가지 않을 수 있습니다. 또한 jquery위치를 가장 위에 올려주시면 되겠습니다. 아래에 ..

[바미] Typescript jwt_로그인 구현하기.

Web에서 로그인을 구현하는 방법에는 여러 가지가 있습니다. 일반적으로 Session과 Cookie를 통한 로그인 구현 방식을 떠올릴 수 있는데요. JWT는 앞의 두 가지와 약간 다른 것으로 최근에 많이 사용되는 인증(Authentication) 방법 중 하나 입니다. 특히 Web Application이나 Mobile Application에서 사용자 인증하기 편한 방법으로 많은 서비스에서 사용하고 있습니다. JWT가 무엇인지 아래에서 알아보겠습니다. JWT란 무엇입니까? JSON Web Token (JWT)은 JSON 객체로서 당사자간에 안전하게 정보를 전송할 수있는 작고 독립적 인 방법을 정의 하는 공개 표준 ( RFC 7519 )입니다. 이 정보는 디지털로 서명 되었기 때문에 검증되고 신뢰할 수 있습..

[바미] TypeScript를 사용하여 실시간 채팅 앱 작성

reference 참고 사이트 참고 사이트 Releasing v1.0.0 of a Socket.io-TypeScript Chat Project Some months ago I implemented a simple chat version using TypeScript language only. This project was presented in a local conference. luixaviles.com 위 사이트 들을 바탕으로 작성된 글입니다. TypeScript를 사용한 실시간 앱 : Web Sockets, Node & Angular 및 통합. 얼마 전에 TypeScript 언어 만 사용하여 간단한 채팅 응용 프로그램을 구현했습니다. 주요 목표는 클라이언트 측과 서버에서이 프로그래밍 언어를 사용하는..

[바미] Nestjs 및 TypeScript를 사용하여 AWS S3에 이미지 업로드

Nestjs 및 TypeScript를 사용하여 AWS S3에 이미지 업로드 최근 프로젝트에서 백엔드에 있는 Nestjs와 Typescript를 사용하여 AWS S3에 이미지를 업로드해야 했습니다. Typescript와 Nestjs를 사용하여 이 작업을 수행하는 간단한 단계를 공유합니다. 이 코드는 Nestjs 및 typescript용 코드이지만 Express를 사용하여 Nodej에 대한 이미지 업로드에 대해서도 참조하고 그에 따라 변경할 수 있습니다. 먼저 이미지 업로드를 위해 AWS S3 버킷을 설정해야 합니다. 만약 당신이 그것을 어떻게 하는지 모른다면 여기를 참고하시기 바랍니다. 이제 typescript를 사용하여 이미지 업로드에 대한 백엔드 코드를 설정해야 합니다. 이미지 업로드를 S3으로 설정하..

[바미] node.js에서 aws s3 스토리지에 이미지 저장하기

node.js에서 aws s3 스토리지에 이미지 저장하기 AWS에서 제공하는 S3 스토리지는 다양한 파일을 bucket에 보관할 수 있다. 자세한 내용은 생활코딩 강의 참고하면 좋다. 그럼 우선 aws sdk를 설치하여야 한다. npm i aws-sdk --save 그리고 AWS IAM에서 생성한 사용자가 있어야 한다. 사용자는 S3에 대한 권한을 가지고 있어야 한다. 사용자를 생성하고 권한을 부여하는 기능은 어렵지 않기때문에 검색해서 적용하면 된다. 그리고 해당 사용자를 생성하면 csv 파일로 secretkey를 받을 수 있다. 이를 AWS S3에 접근하여 사용하기 위해서 사용된다. 기본 정보가 담긴 config.json 생성 우선 부여 받은 사용자 accessKeyId와 secretAccessKey ..

[바미] Typescript와 AWS Lambda로 모니터링에 유용한 API 패턴 구성하기

람다를 크게 세 부분으로 나눕니다. 사용자로부터 받은 데이터를 검증해주는 컨트롤러 비즈니스로직을 구성하는 서비스 API나 데이터베이스와 연결되는 레파지토리 그럼 상품을 구매하는 Shop 예제를 통해 차근차근 보겠습니다. Shop예제 shop.ts const repo: ShopRepository = new ShopRepository(); const service: ShopService = new ShopService(repo); const controller: ShopController = new ShopController(service); export const purchaseItem = controller.purchaseItem 위 이미지처럼 컨트롤러는 생성자로 서비스를, 서비스는 생성자로 레파지토리를..

[바미] AWS Cloud9 개발 환경에서 TypeScript를 사용하기.

이 샘플은 AWS Cloud9 개발 환경에서 TypeScript를 사용하는 방법을 보여줍니다. 이 샘플을 생성하면 AWS 계정에 요금이 부과 될 수 있습니다. 여기에는 Amazon EC2 및 Amazon S3와 같은 서비스에 대한 가능한 요금이 포함됩니다. 자세한 내용은 Amazon EC2 요금을 참조하십시오. 및 Amazon S3 요금. 목차 전제 조건 1 단계 : 필요한 도구 설치 2 단계 : 코드 추가 3 단계 : 코드 실행 4 단계 : Node.js에서 AWS SDK for JavaScript 설치 및 구성 5 단계 : AWS SDK 코드 추가 6 단계 : AWS SDK 코드 실행 7 단계 : 정리 전제 조건 이 샘플을 사용하기 전에 다음 요구 사항을 충족해야합니다. 기존 AWS Cloud9 EC..