Never give up

대부분의 다국어 지원 서비스를 개발할 때, 비개발자랑 같이 진행하게 되는데 json만 던져주고 알아서 수정하라기에는 난이도가 있다보니 google spread sheet를 공유하면서 작업하는게 더 생산성이 높다 생각합니다 그래서 간단하게 예제를 만들어봤는데(오랜만에 localization 작업하다가 정리 안해놨더니 다시 작업할 때 삽질 포인트를 반복해서 적는건 안비밀) 먼저 필자가 원하는 저장경로는 대략 /[lang code]/common.json으로 경로가 다르다면 구현할 때 해당 부분을 조금 신경써주시면 될거 같습니다const Papa = require("papaparse");const fs = require("fs/promises");async function fetchTranslations() {..

최근 여러개의 카메라를 제어할 일이 생겼는데 한번에 모든 카메라를 보여주는 형태는 아니고 원하는 시점에 카메라를 스위칭 후 화면에 보여주고 해당 화면을 원하는 형태로 편집 후 녹화해 주는 기능이 필요했습니다처음에 고민했던 부분은 카메라를 껏다 켯다 해보는거 였는데 media recorder n개를 사용해서 각각 녹화 후 timeline에 맞게 ffmpeg으로 붙여주는 번거로운 작업이 예상 되었고 지연이랑 플리커링 부분 그리고 만약 카메라가 원하는 시점에 안켜지면 서비스 품질이 떨어질거라 예상해 다른 방법을 선택했습니다 1. streaming은 계속 진행2. canvas를 이용해서 카메라 보여주기3. 시간 혹은 특정 이벤트에 따른 video 스위칭4. canvas를 media recorder로 녹화 그럼 ..

클라이언트쪽은 코드가 상대적으로 많을예정인데 일단 영상 플레이어 자체가 이런저런 기능이 들어가다보니 상대적으로 많아진것도 있습니다 먼저 api 구현부분부터 보면 services/api.tsexport default class Api { private instance: AxiosInstance; constructor( baseURL = "/", timeout = 60000 ) { this.instance = axios.create({ baseURL, timeout, }); this.instance.interceptors.request.use( (config) => { return config; }, (error: Ax..

Three.js를 찍먹만 해보다가 회사에서 우연히 3D circuit viewer를 개발할 기회가 생겼었습니다 근데 어디서 이상한(?) 오픈소스 긁어온거 유지보수 하다보니 문제가 많아서 이렇게 해보면 어떨까 하고 만들어 봤습니다 링크: https://devmemory.github.io/gerber-3d-viewer/ 먼저 Gerber 파일은 PCB 제조할 때 필수적인 파일로 copper layers, solder mask, SilkScreen, Dril files등 pcb의 납땜되는 부분, 홀, 텍스트 등을 표현한 파일입니다 예제 데이터를 하나 보면 G04 Layer: BottomPasteMaskLayer*G04 EasyEDA v6.5.44, 2024-08-30 12:30:28*G04 77815516a5..

압축 파일을 다룰일이 생겨서 간단하게 예제를 만들어봤습니다 먼저 클라이언트에서 압축파일을 사용하게 됐을 때의 장점으로는1. 클라이언트가 여러개의 파일을 다운로드 받지 않아도 된다2. 서버가 파일 리스트를 조회 한 후 넘겨주지 않아도 된다3. 네트워크 리소스를 적게 사용한다4. 별도의 서버작업 없이 파일 압축이 가능하다 정도 될거 같습니다 zipUtil.tsimport { saveAs } from "file-saver";import JSZip, { JSZipObject } from "jszip";export const zipUtil = { /** - extract file list from file url */ async extractFile(url: string) { const res = awa..

어드민 작업을 할 때, excel import, export기능이 필요한 경우가 많습니다 예를들어, 일괄등록, 엑셀로 추출해서 보기 등등 엣날에 서버쪽에서 작업하는 예제를 올렸었는데, 이번에는 클라이언트에서 구현 및 유틸로 만들어봤습니다 클라이언트에서 했을때 장점으로는1. 서버쪽에 굳이 excel 라이브러리를 설치 안해도 된다2. 서버쪽 리소스를 조금이나마 덜 쓸 수 있다3. 파일업로드 방식이 아닌, json으로 데이터 교환 하기 편하다정도 있을 수 있을거 같습니다 excelUtil.tsimport * as XLSX from "xlsx";export const excelUtil = { /** - generate json from excel file */ excelFiletoJson(file: File..

최근에 회사에서 다음과 같은 에러가 나타난다 라는 이야기를 들었는데 어떻게 해봐도 재연이 안됐었습니다(이유는 후술..) 먼저 발생한 에러를 보면index.js가 안불러와진다 라는 이야기인데, dynamic import를 보고 혹시 suspense가 빠져있었나? 하고 봤더니 그걸 빼먹으면 애초에 dev모드에서 에러를 마주쳤을것이고, 다음과 같은 에러를 봤었겠지요그래서 추측을 조금 해봤는데 보통 배포 이후에 발생하는것을 알게됐고 index-hash.js중 저 hash부분을 봤더니, 필자는 업데이트 대비를 하나도 안하고 있었다는것을 알게됐습니다.. 보통 배포하고 새로 url을 쳐서 들어가면 문제가 없지만 새로 번들되었을 때 index.html이 바라보던 index-hash.js가 다른것으로 변경되면서 발생한것..

마지막으로 코드에디터가 그냥 textarea에 밋밋한 text를 그대로 사용할 수는 없으니 higlighting을 어떻게 처리하는지 확인해볼텐데 일단 옵션이 여러가지가 있는거 같았습니다 필자가 사용한 Prism.jshttps://www.npmjs.com/package/prismjs 그리고 Highlight.jshttps://www.npmjs.com/package/highlight.js 기타 등등... 뭐 사용방법은 크게 다르지 않으나 필자는 Prism.js를 사용했는데 이유는 조금더 작은 번들 크기, 더 많은 다운로드수, 기타 등등인데 어떤것을 사용하셔도 무방합니다 이번 예제는 조금 tricky한 작업이 있다보니 자료찾는데 고생을 조금했습니다 먼저 참고한 자료를 공유해드리자면 https://css-tri..