반응형

분류 전체보기 702

Function.bind(this, ...)가 필요한 경우

예를 들어, 다음과 같이 두 함수 foo, bar가 있다고 하자. const foo = (a: string, b: string, c: string) => { return `${a}-${b}-${c}` } const bar = (func: (a: string, b: string)=> string) => { return func('wow', 'amazing') } 이때, bar의 파라미터로 foo를 넘겨주고 싶은데, 파라미터 개수가 다르다. 따라서, foo의 첫 번째 파라미터는 'world'로 고정하여 bar에 넘겨주고 싶을 때, Function.bind(this, ...)를 사용할 수 있다. bar(foo.bind(this, 'world')) // wolrd-wow-amazing foo.bind(this,..

2022년 유용한 웹사이트 모음 (개인)

개요 너무 대중적인 웹사이트는 굳이 정리할 필요는 없다. 나중에 특정 기능이 필요해서 검색하면 나올법한 웹사이트는 정리할 필요 없다. 카테고리 위키 위키하우 일상생활에 밀접한 유용한 정보를 자세하게 제공 웹 도구 시간 Sleep Time 일어날 시간을 입력하면 가장 이상적인 자야할 시간을 알려줌 EpochConverter Epoch 및 유닉스 타임스탬프 변환 도구 이미지 편집 PIXLR 포토샵 작업을 할 수 있는 사이트 Photopea 플래쉬 없는 이미지 편집 사이트 MasterShot 웹 브라우저에서 간단한 동영상 편집 기능 제공 변환 ICO converter 이미지를 아이콘으로 변경해주는 사이트 PicAscii 이미지를 아스키 코드로 변경해주는 사이트 TinyPNG PNG 용량을 극한으로 줄여주는 사..

Status vs State 차이

Status 목표를 달성하기 위한 일련의 단계들이 존재할 때, 각 단계를 일컫는 상태 예시 시작/진행중/종료 출발/이동중/도착 전송준비/전송시작/전송중/전송완료 로딩중/로딩완료 State 목표가 없는 한 순간의 상태 예시 정상/경고/에러 활성화/비활성화 작동중/중지됨 인증됨/미인증됨 높음/낮음 보임/숨김 열림/닫힘 정상/비정상 포함/미포함 가능/불가능

쿼리 대신 TypeOrm으로 DB 통신하기 (샘플)

웹 앱에서 MariaDB, MySQL 등의 RDB와 통신할 때 보통 쿼리와 파라미터를 넘기는데, 사용하는 DB, 테이블, 칼럼이 많아지면 쿼리도 많아지게 되면서 나중에는 프로젝트에 쿼리 문자열로 가득차게 된다. TypeOrm 패키지는 쿼리 대신 객체와 클래스를 이용해서 DB와 통신할 수 있는 방법을 제공한다. 타입스크립트에서 기본 예제를 소개한다. 우선 프로젝트에 mysql, reflect-metadata, typeorm을 설치한다. $ npm install --save typeorm $ npm install --save reflect-metadata $ npm install --save mysql tsconfig.json 파일에 다음의 속성을 추가한다. { "compilerOptions": { "exp..

심플 웹 서버 언어 별 성능 비교 (Go, Rust, Node.js)

테스트 환경 이름 설명 CPU AMD Ryzen 7 1700 Memory DDR4 32GB 테스트 툴 autocannon autocannon Fast HTTP benchmarking tool written in Node.js www.npmjs.com 옵션 동시요청 : 2500 요청시간 : 30초 파이프라이닝 : 4 > autocannon -c 2500 -d 30 -p 4 127.0.0.1:8081 테스트 대상 (Node.js) express (Node.js) hyper-express Go Rust 테스트 방법 각 웹서버는 '/' path 만 구현되어 있으며, 요청 수신 시 Hello를 응답한다. 각 웹 서버 별 30초 동안 요청 처리 개수를 측정한다. 결과 예상대로, express가 가장 낮은 성능을 보..

Node.js 버전 강제하기

설정 루트 디렉토리에 .npmrc 파일 추가하기 engine-strict=true package.json에 engines 속성 추가하기 { "engines": { "node": ">=14.16.0" } } 사용자 관점 리파지토리 클론 후 npm install 입력 (버전 옵션 조건을 만족하지 못한 경우) npm ERR! code EBADENGINE npm ERR! engine Unsupported engine npm ERR! engine Not compatible with your version of node/npm: js_test_01@1.0.0 npm ERR! notsup Not compatible with your version of node/npm: js_test_01@1.0.0 npm ERR! ..

esModule (ESM) 라이브러리를 CommonJS (CJS) 앱에서 사용하기

문제 현재 내가 사용하고 있는 Node.js는 14.18.3인데, 14 버전부터는 공식적으로 esModule (이하 ESM)을 사용할 수 있는데, ESM을 기반으로 하는 라이브러리 패키지를 개발하면, 기존의 CommonJS (이하 CJS) 기반의 앱이나 라이브러리에서는 해당 ESM 라이브러리 패키지를 의존성으로 사용할 수 없다. 이에 따라, ESM 기반의 라이브러리 패키지를 CJS 기반의 앱에서 사용하기 위한 방법을 찾아보았다. 특징 CJS는 동기, ESM은 비동기 방식 CJS는 한 번에 하나씩 디스크에서 파일을 읽어온 후에 즉시 실행한다. 반면, ESM은 형제 스크립트를 병렬적으로 다운로드하고, 실행은 나중에 한다. ESM은 import와 export하는 구문을 찾아서 오타를 감지하면 실행하기 전에 오..

Gear 360 사진 웹에 업로드하고 공유하기

소개 예전에 사둔 Gear 360 (기어 360) 카메라로 찍은 사진을 가공해서 플리커에 업로드하면 사용자가 바로 360도 사진을 볼 수 있는데, 이 방법이 너무 복잡해서 (저를 위해서라도) 정리하였습니다. 준비물 Gear 360 ActionDirector (구체 이미지를 파노라마 사진으로 변환) exiftool (변환한 사진에 파노라마 메타 속성을 부여) 플리커 계정 (파노라마 사진을 공유하는 웹사이트) Step 1. Gear 360 ActionDirector 문서 작성 당시 2.0.1619 버전을 사용하였다. ⚠️ 주의: 삼성전자는 사후지원을 잘 안해주기 때문에 추후를 위해 설치 파일을 따로 보관하는 것이 좋다. 이 프로그램을 사용하기 위해서는 인증을 받아야 하는데, 제품 구입 당시 등봉된 시리얼 번..

유틸리티 2022.01.15

JPG 용량 줄이는 웹사이트, TinyJPG

TinyJPG – Compress WebP, PNG and JPEG images intelligently 소개 카메라로 찍은 JPG 사진을 업로드하면, 손실을 최소화하면서 용량을 최적화해줍니다. 비교 파일 비교 원본 파일 최적화 파일 해상도 3000x4000 3000x4000 파일 크기 2.9MB 0.195MB 무려 15배나 용량이 줄어들었다! ⚠️ 주의 : 사진 특성 상 그라데이션이고, 사진 전체가 유사한 색상이기 때문에 더 극적인 최적화가 가능했던 것일 수 있습니다. 사진 마다 최적화 크기는 다를 수 있습니다. 결론 카메라로 찍은 사진의 용량이 너무 크다면, 이미지의 사이즈를 줄이는 방법을 고려해보고, 찍은 사진이 고해상도에서 봐야만 할 경우에는 TinyJPG를 사용하는 것도 추천합니다.

주요 HTTP 상태 코드 (feat. 맥도날드)

1XX : Information Response 상태코드가 1로 시작하는 경우는 서버가 클라이언트로부터 요청을 받았으며, 서버에 연결된 클라이언트는 작업을 계속 진행하라는 의미이다. 해당 코드는 HTTP 1.0 에서 지원되지 않는다. 식당에서 손님이 종업원에게 음식을 주문하는 상황을 생각할 수 있다. 손님이 음식을 주문한 후, 종업원이 1XX로 주문이 완료되었음을 응답해주는 상황을 생각하면 된다. 100 Continue 진행 중임을 의미하는 응답코드이다. 현재까지의 진행상태에 문제가 없으며, 클라이언트가 계속해서 요청을 하거나 이미 요청을 완료한 경우에는 무시해도 되는 것을 알려준다. 손님이 음식을 주문한 후에 오랫동안 음식이 나오지 않자, 종업원에게 "혹시 10번 테이블 음식 주문 들어갔나요?"라고 물..

반응형