💻 프론트엔드 : Frontend/Javascript | Typescript5 헷갈리는 Lodash import 구문 : import * as _는 되고 import _는 안 되는 이유 저는 Typescript를 사용하면서 Lodash라는 라이브러리를 자주 사용했습니다.그런데 lodash를 import할 때 이런 두 가지 방식 중 어떤 건 되고, 어떤 건 안 되는 경험을 다들 해보셨나요?import * as _ from 'lodash'; // ✅ 잘 됨import _ from 'lodash'; // ❌ 에러 발생! 🧐 원인은? 모듈 시스템의 차이!이 문제는 CommonJS와 ES 모듈(ESM)이라는 모듈 시스템의 차이 때문에 발생합니다. 🌱 CommonJS (Node.js에서 주로 사용)lodash는 전통적으로 CommonJS 방식으로 배포되어 있습니다.CommonJS는 module.exports를 사용하며, default export 개념이 없습니다.모듈 전체를 하나의.. 2025. 6. 24. validation library 비교 (zod, class-validator, joi) data validation library 순위Zod (31k ⭐)Validator.js (22.7k ⭐)Yup (22.4k ⭐)Joi (20.7k ⭐)Ajv (13.5k ⭐)Superstruct (6.9k ⭐)Valibot (5.3k ⭐)v8n (4.2k ⭐)Typia (4.1k ⭐)Ow (3.8k ⭐)출처 : https://byby.dev/js-object-validators 1. zod 활용const schema = z.object({ name: z.string().min(2, '이름이 올바르지 않습니다'), age: z.number().min(18, '18세 이상만 가능합니다'), email: z.string().email('이메일이 올바르지 않습니다'), sex: z.boolean()});함수.. 2024. 10. 11. readExcelFile로 병합된 셀을 잘 받아오는 법 엑셀에서 병합된 셀을 불러오는 경우이런식으로 엑셀의 행 중에 병합된 요소가 존재할때 readExcelFile을 사용해 읽어오면제조사월사용량(kg)단위물질명Cas No함유량(%)관리대상물질개정일자비고기타 제조사50kg아르곤7440-37-11012024.9.29비고 수소1333-74-052 공업 제조사200g메탄올67-56-1532025.4.2이상없음이렇게 공통된 요소가 빈값으로 넘어오게 됩니다. 병합된 셀을 잘 받아오기 위해let content = data.slice(1).filter((items) => items?.length > 0); let currentProduct = null; // 앞에서부터 9개의 아이템 + 뒤에 2개의 아이템이 null이면 병합된 셀로 판단 // 물질명 .. 2024. 10. 4. zod : 원하는 message가 아닌 ‘expected ~ but got ~’ 라 alert가 뜨는 현상 // 에러가 발생한 코드const formValidation = z.object({ use_state: z .string({ required_error: "사용여부를 선택해주세요." }) .trim() .min(1, { message: "사용여부를 선택해주세요." }), use_purpose: z .string({ required_error: "사용용도를 입력해주세요." }) .trim() .min(1, { message: "사용용도를 입력해주세요." }), product_name: z .string({ required_error: "제품명을 입력해주세요." }) .trim() .min(1, { message.. 2024. 10. 4. 브라켓[]을 활용한 동적 라우팅 정적 라우팅과 동적 라우팅정적 라우팅: 경로가 고정되어 있어서 딱 정해진 URL만 처리합니다.예 ) /api/one/two/three동적 라우팅: 경로 일부가 변수로 동작합니다.예 ) /api/one/two/three/${id} → /api/one/two/three/84 → /api/one/two/three/123 🌟 동적 라우팅을 처리하기 위해 파일 및 폴더 이름에 브라켓([])을 사용할 수 있습니다. 파일 네이밍에서 브라켓([])의 역할브라켓을 사용한 파일명은 동적 라우팅을 처리하는 핵심예 ) three/[id].ts여기서 [id]는 동적 값, 즉 변수로 인식변수 이름이 반드시 id일 필요는 없습니다.[userId], [teamId]처럼 파일명에 원하는 변수명을 사용할 수 있습니다... 2024. 9. 6. 이전 1 다음
