Javascript & TypeScript
-
[Typescript] swagger로 httpClient code를 자동 생성해주는 도구 swagger-typescript-api 소개Javascript & TypeScript 2023. 1. 29. 11:53
Swagger? 스웨거(Swagger)는 개발자가 REST 웹 서비스를 설계, 빌드, 문서화, 소비하는 일을 도와주는 대형 도구 생태계의 지원을 받는 오픈 소스 소프트웨어 프레임워크이다. 대부분의 사용자들은 스웨거 UI 도구를 통해 스웨거를 식별하며 스웨거 툴셋에는 자동화된 문서화, 코드 생성, 테스트 케이스 생성 지원이 포함된다. 스웨거 (소프트웨어) - 위키백과, 우리 모두의 백과사전 (wikipedia.org) swagger-typescript-api swagger-typescript-api는 별다른 추가 설정 없이 현재 구현중인 typescript 프로젝트 내 적절한 위치에 추가시킬 수 있는 CLI 명령어 도구이다. acacode/swagger-typescript-api: TypeScript AP..
-
[Vite] 로컬 개발환경에서 https 도메인 설정하기Javascript & TypeScript 2022. 12. 24. 22:40
React, Vue, Svelte와 같은 프론트엔드 기반 웹 서비스에서 실제 운영중이거나 개발 된 주 도메인의 쿠키(Cookie)값을 확인하기위해, 로컬 환경이지만 마치 실제 운영중인 사이트의 서브 도메인(sub domain)처럼 사용해야 하는 경우가 있다. 이를 해결하려면 아래와 같은 준비가 필요하다. 1. @vitejs/plugin-basic-ssl 설치 @vitejs/plugin-basic-ssl 모듈 설치 및 적용을 통해 https 통신이 가능하도록 해야 한다. 2022.12 Vite4 설명상에선 자체 서명된 인증서도 사용할 수 있다고 하나 정상동작하지 않는다. vite.config.js import { sveltekit } from '@sveltejs/kit/vite'; import basicS..
-
[Svelte] 스벨트에서의 event capture와 bubblingJavascript & TypeScript 2022. 12. 17. 13:26
아래코드는 버튼 click 시 stopPropagation에 의해 button 이벤트만 실행된다. handleClick('div')}> handleClick('button')}> Click me 버튼을 눌렀을 때, 버튼 event 가 아닌, div의 click 이벤트가 동작하게 처리하려면 아래와 같이 수정해야 한다. handleClick('div')}> handleClick('button')}> Click me 링크 Events / Event modifiers • Svelte Tutorial developer.mozilla.org / 이벤트 버블링과 캡쳐
-
[React] ffmpeg.wasm 메모리 누수 문제 해결Javascript & TypeScript 2021. 5. 8. 16:11
몇칠 전 ffmpeg.wasm 패키지를 소개했던 적이 있다. (ddochea.tistory.com/147) 웹 클라이언트만으로 미디어 파일에 대한 인코딩/디코딩 기술을 사용할 수 있다는 장점과 함께, memory leak이 발생하고 있는 이슈가 있어, 실제 서비스 개발에 도입하기엔 무리가 있을 것 같다고 했었다. 그리고 나서 오늘 좀 더 확인해보는 시간을 가졌는데, thread 관련 문제가 있는건 맞지만, 메모리 부분은 내가 코딩을 잘못해서 생긴 것을 깨닫게 되었다. 이 문제는 내가 만든 예제 뿐만 아니라, 공식사이트에 소개하고 있는 React 예제도 같은 문제가 있다. 아래 코드 공식사이트 예제 코드이다. import React, { useState } from 'react'; import { crea..
-
[Javascript] 브라우저에서 사용하는 인코딩 및 디코딩 패키지 ffmpeg.wasm 소개Javascript & TypeScript 2021. 5. 5. 18:10
미디어파일을 인코딩/디코딩 하는 작업을 구현하는 프로그래머라면 ffmpeg란 오픈소스 툴을 들어본적이 있을 것이다. 카카오 팟플레이어 곰플레이어 등, 상당수의 미디어 플레이어나 인코딩 프로그램에 직/간접적으로 사용되는만큼 파급력이 높다. CLI 명령어 기반이라 이를 편히 사용할 수 있는 UI 기반 툴도 많이 나와있다. 그러나 특성상 웹에서 사용은 어려웠다. 물론 호스팅을 통해 미디어파일을 인코딩/디코딩 서비스를 제공하는 웹사이트도 심심찮게 볼 수 있었겠지만, 어디까지나 내 미디어파일이 웹서버에 업로드되어 처리한 후, 결과를 내려받는 형식이기 때문에 함부로 이용하면 소중한 지적재산권(?)을 내 손으로 넘겨주는 꼴이 될 수 있다. 이와 같은 불상사를 방지할 수 있는 패키지. ffmpeg.wasm를 소개한다...
-
[Javascript Event] Drop 이벤트에 preventDefault, stopPropagation를 적용해도 동작하지 않는 현상 해결Javascript & TypeScript 2021. 4. 27. 23:12
React 프로젝트에서 파일을 Drag & Drop 하기 위한 기능을 구현하고 있었다. React를 대상으로한 Drag & Drop 컴포넌트가 오픈소스상에 많이 존재하긴 하지만, 간단한 기능 구현마저 라이브러리로 도배해야할까 싶어 직접 구현하고 있다. (결국 진행이 간단치 않게 되었다. 🤣) 소스코드는 아래와 같다. import React, { useState, useRef, useEffect, useCallback } from "react"; import { Container, createStyles, Grid, makeStyles, Paper, Theme, } from "@material-ui/core"; const useGridStyles = makeStyles((theme: Theme) => cr..
-
[React] React Router를 적용해도 첫 메인페이지("/") 위치만 표시되는 현상 해결법Javascript & TypeScript 2021. 4. 26. 21:32
Router가 필요한 React 프론트엔드 구현 중 Router를 이동해도 계속 "/" 위치의 컴포넌트만 표시되는 현상이 발생했다. 소스코드는 아래와 같다. route("/")}>Cover route("/Test")}>Test setPrefersDarkMode(!prefersDarkMode)}> 이유를 찾을 수 없어 상당히 헤맸다. 해결법은 를 가장 하단으로 내리면 된다. route("/")}>Cover route("/Test")}>Test setPrefersDarkMode(!prefersDarkMode)}>
-
[gRPC] nodeJS 에선 google.protobuf.Any 가 지원되지 않는다.Javascript & TypeScript 2021. 3. 1. 23:11
node 기반 gRPC를 예제 리스트 소스를 작성 중 뻘짓한 게 있어 기록하고자 쓰는 포스트. google.protobuf.Any 타입은 node에선 지원하지 않는다. stackoverflow.com/questions/42150608/how-to-unpack-an-google-protobuf-any-type-in-grpc-nodejs-client How to unpack an google.protobuf.Any type in gRPC nodejs client? My protobuf file is like this: syntax = "proto3"; import "google/protobuf/any.proto"; service RoomService { getTestAny (Hotelid) returns (..