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하는 구문을 찾아서 오타를 감지하면 실행하기 전에 오..

• format_list_bulleted 컴퓨터 공학/JavaScript
• · 2022. 1. 19.
• textsms

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

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

• format_list_bulleted 유틸리티
• · 2022. 1. 15.
• textsms

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

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

• format_list_bulleted 생활 유용 정보
• · 2022. 1. 15.
• textsms

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

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

• format_list_bulleted 컴퓨터 공학/Web
• · 2022. 1. 14.
• textsms

HOL (Head Of Line) 블로킹 문제

개요 기존의 HTTP의 요청은 큐 처리와 동일하다. 먼저 들어온 요청을 반드시 먼저 응답해주어야 하는 방식으로 동작하는데, 만약, 먼저 들어온 작업 요청에서 지연이 발생하면 이후 들어온 요청들은 먼저 들어온 작업이 끝날 때 까지 함께 대기해야 한다. 이 문제를 HTTP/2에서 어떻게 해결했는지 간단하게 정리한다. HTTP/1.1 HTTP는 TCP 연결을 기반으로 동작하는 프로토콜이다. HTTP는 비연결성 프로토콜이기 때문에 한 번 연결로 한 번의 요청과 응답을 하고 응답이 끝나면 연결을 끊어버린다. 그런데 한 번 연결을 수립할 때 마다 오버헤드가 발생한다. 예를 들어, 전체 작업량을 10이라고 한다면, 연결을 수립하는데만 4의 작업량이 필요하다고 가정하면 한번의 요청과 응답만 하고 연결을 끊기에는 너무 ..

• format_list_bulleted 컴퓨터 공학/Web
• · 2022. 1. 14.
• textsms

전체에서 조각을 뜻하는 영단어들

piece slice fragment shard sector segment 순간적으로 조각을 나타내는 용어에 어떤 단어를 사용해야 할지 혼란스러움을 느꼈다. 쉽게 외우기 위해 개인적으로 생각하는 각 영단어의 차이를 정리해보았다. 부정확할 수 있으니 유의바람! Piece 케이크와 같이 큰 덩어리에서 잘라낸 부채꼴 모양의 조각은 piece라고 한다 (사전에 조각의 개수를 고려해야만 함). Slice 식빵과 같이 큰 덩어리에서 종이 수준의 면으로 잘라낸 조각은 slice라고 한다 (사전에 조각의 개수를 고려할 필요가 없음). Fragment 유리창을 깨뜨렸을 때와 같이 불규칙적인 모양의 조각을 fragment라고 한다 (의도하지 않은 상황). Shard fragment 중에서 도자기 유물과 같이 과거의 정보를..

• format_list_bulleted 생활 유용 정보
• · 2022. 1. 14.
• textsms