JavaScript & TypeScript
-
sharp image rotate 문제JavaScript & TypeScript 2023. 3. 12. 18:00
문제 이미지 업로드 시 버킷에 업로드된 이미지의 너비와 높이가 데이터베이스에 저장한 이미지 객체의 너비와 높이와 일치하지 않음. /** 기존 구조 1. `sharpInstance` 생성 2. `sharpInstance.rotate()` 3. 버킷에 이미지 업로드 4. `metadata.width`, `metadata.height` 를 `DB` 에 저장 */ const sharpInstance = sharp(buffer); sharpInstance.rotate(); const metadata = await sharpInstance.metadata(); const image = { // ... width: metadata.width, height: metadata.height, } bucket.upload(..
-
JS RegExp perfomanceJavaScript & TypeScript 2022. 9. 24. 20:58
JS RegExp perfomance JavaScript 에서 /\s+/g 와 같이 리터럴 신택스로 작성한 RegExp이 존재할 때 const reg1 = /\s+/g 와 같이 다른 변수에 저장해두고 사용할 지, 아니면 바로 리터럴을 사용할 지에 대한 조사 내용은 아래 링크해둔 stackoverflow 의 첫 번째 답변을 보면 자세히 설명해주고 있다. ES5 이전에는 리터럴 신택스로 작성된 정규 표현식의 경우 자체적으로 한 번 컴파일하고 캐싱하고 사용하여 리터럴 신택스를 그대로 사용하여도 문제가 없었으나 ES5 부터 리터럴도 새 객체를 생성하는 것으로 변경되었고 그에 따라 JS 엔진들도 수정되었으므로 의존할 수 없다. 결론: 여러 번 사용되는 정규표현식의 경우 리터럴 신택스로 작성하여 따로 저장 후 사용..
-
fastify-multipart handle multiple file streams and fields in TypeScriptJavaScript & TypeScript 2022. 9. 22. 18:48
Property 'file' does not exist on type 'Multipart'. Property 'file' does not exist on type 'MultipartValue'. @fastify/fastify-multipart 버전이 7.1.2 → 7.2.0 으로 바뀌면서 에러가 발생했다. 릴리즈 히스토리를 보니 Multipart type 이 바뀌게 되어서 발생하는듯 했고 아래와 같이 수정하여 해결했다. 1. Using type predicates const isMultipartFile = (multipart: Multipart): multipart is MultipartFile => { return ( (multipart as MultipartFile).file !== undefined..
-
브라우저, JS 흐름 정리 메모JavaScript & TypeScript 2022. 5. 22. 22:52
도마뱀 보면서 헷갈리는 거 찾다가 전체 흐름 정리해서 적어두고 싶은데 적기엔 양이 많아 전체틀만 메모해둔다. 근데 내가 정리한 글 보는 건 날 위해서고 다른 사람이 공부하기엔 잘 정리된 글들 보는 게 더 좋아 보여서 밑에 적어 놓겠다. 일단 대충 봤으니 정리는 미래의 수빈이가 쪼개서 천천히 하는 걸로... 브라우저: Chrome 기준 아래 시리즈 https://d2.naver.com/helloworld/2922312 JS Engine: V8 기준 https://ui.toast.com/weekly-pick/ko_20200228 https://dev.to/deepu105/demystifying-memory-management-in-modern-programming-languages-ddd https://ui..
-
Udemy 클린코드 JS 강의 정리JavaScript & TypeScript 2022. 1. 6. 22:48
※ 출처: https://www.udemy.com/course/clean-code-js/ 총 섹션 13으로 이루어져 있고 22년 01월 기준 섹션 8까지 올라와 있음. 나머지 강의 아직 안 올라와서 나중에 듣고 업데이트 하기. 앞에 부분은 이전에 들어서 제목만 적음. 01-01 :: ~5장, 26강 early return 01-02 :: ~ 8장, 57강 화살표 함수 01-06 :: ~ 8장, 60강 Closure 이곳저곳에서 다 듣거나 본 내용이라 어렵진 않아 2배속으로 봤는데 막상 적용 시키지 않는 것도 좀 있는듯.. 계속 의식하고 적용시키려고 해야할 듯. 2장: 변수 다루기 var 지양하기 function scope & block scope 전역 공간 사용 최소화 임시변수 제거하기 호이스팅 주의하기..
-
Next export 시 Image Optimization 설정 문제JavaScript & TypeScript 2022. 1. 3. 18:44
문제점 Next.js project 에서 정적 배포를 하기 위해 next export 시도함. 에러 발생 Error: Image Optimization using Next.js' default loader is not compatible with next export. Possible solutions: Use next start to run a server, which includes the Image Optimization API. Use any provider which supports Image Optimization (like Vercel). Configure a third-party loader in next.config.js. Use the loader prop for next/image. ..
-
TypeORM synchronize true 시 이전 table 까지 생성 문제JavaScript & TypeScript 2021. 12. 26. 18:46
문제점 synchronize true 설정시 현재 설정해둔 entity 만 table 로 생성하길 기대했으나 이전에 만들었던 다른 table 들까지 같이 생기는 문제가 발생함. 원치않은 테이블들을 그냥 지워도 되지만 이유를 몰랐고 나중에 커질 수 있어 해결함. 해결과정 metadata table 도 지워봤으나 실패함. typeorm config 에서 log 레벨에 query, error, schema, warn, info, log 전부 주고 다시 실행해봄. INFO 로그레벨에서 아래와 같은 로깅 출력 All classes found using provided glob pattern "......./entity.{js,ts}": .... 이전의 생성했던 entity 들이 dist 폴더에 있었고 이걸 기반으..
-
axiosJavaScript & TypeScript 2020. 12. 13. 16:25
axios (액시오스) Promise based HTTP client for the browser and node.js - jQuery 를 사용할 때 AJAX 라고 보면 됨 설치 npm install axios GET 요청 axios 를 사용해 GET 요청 하는 방법 const axios = require('axios'); // ID로 사용자 요청 axios.get('/user?ID=12345') // 응답(성공) .then(function (response) { console.log(response); }) // 응답(실패) .catch(function (error) { console.log(error); }) // 응답(항상 실행) .then(function () { // ... }); axios.g..