본문 바로가기

전체 글368

[typeorm]에러 해결

에러 (node:53648) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use `node --trace-warnings ...` to show where the warning was created) /Users/lt04/Project/clone-raddit/server/src/server.ts:37 import exrpess from "express"; ^^^^^^ SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:352:18) at wrapSafe (no.. 2022. 12. 26.

[Vue advance Cropper] 올린 이미지에 따라서 크로퍼 크기가 맞춰짐

문제 긴 이미지를 크로퍼에 넣으면, 크로퍼가 이미지 크기만큼 되버림.. 길면, 아래 버튼들이 잘림. 수정한 코드 // ... 결과 2022. 12. 19.

[Javascript] canvas

개요 업로드한 이미지가 너무 큼. 3024*3000 사이즈임. 그러면, 브라우저에 아래처럼 보임. 사용자가 이걸 보면, 분노할 듯 업로드한 파일 원본 사이즈를 수정하는 방법 const image = new Image(); image.src = dataURL; // 결과 // dataURL에는 뭐가 들어가야 하나? - img태그에 src에 들어갈 수 있는 url임. 브라우저 url or aws s3 url URL.createObjectURL()에 파라미터로 blob도 된다. URL.createObjectURL(blob도 되고, event.target.file) HTMLCanvasElement.toDataURL() - 이미지 표현을 포함하는 data URL을 반환한다 HTMLCanvasElement.get.. 2022. 12. 19.

정규식 예시 모음

한국 가격 표기법 검증 정규식 숫자와 ,만 들어가 있는지 검증 ex) 100 (o) ex) 1,000 (o) /^[0-9,]*$/g.test(this.value) 초성(자음)이 포함되어 있는지 확인 // 초성이 있는지 검사 getConsonantRegex() { return /[ㄱ-ㅎ]/g; }, 키보드에서 입력가능한 특수문자 포함 및 한글 영어 숫자이 외의 문자와 매칭되는 정규식 // 기타 사유 입력할 때, 허용 특수문자 ` ~ ! @ # $ % ^ & * ( ) - _ = + [ { ] } \ | ; : ' " , / ? function getTextRegex() { return /[^가-힣a-zA-Z0-9~!@#$%^&*()-_=+[\].?,;:"\\/'{}|\s]+$/; } 이모지 매칭.. 2022. 12. 15.

[Vuejs] Vuex store 메서드 스타일 액세스

getters에 메서드에 파라미터를 주는 방법 getters: { // ... getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } } 컴포넌트에서의 사용 store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false } 다만, 메서드를 통해 액세스되는 게터는 호출할 때마다 실행되며 결과는 캐시되지 않는다고 한다. 참고: https://vuex.vuejs.org/guide/getters.html#property-style-access 2022. 12. 13.

[Javascript] 정규식 []와 () 차이점

다음 코드가 있다. 이건, 업로드한 파일 이름에서 확장자를 확인 | or a|b [] 검색 기준 필터 괄호 안에 문자들 중 하나 [다-바] : 다 or 라 or 마 or 바 return /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z|A-Z|0-9|(|)|!||?|,|:|+|"|'|\s]+$/; () 정규식 그룹 패턴 그룹화 및 캡쳐 const reg = /\.(doc|docx|xls|xlsx|ppt|pptx|pdf|txt|hwp|jpeg|png|jpg)$/; if (!reg.test(name)) return false; 2022. 12. 13.

[Nuxt] 정리

디렉토리 구조 assets 이미지, 글꼴 같은 컴파일되지 않는 자산들 static 서버 루트에 직접 매핑되며 이름을 유지해야 하거나 변경되지 않는 파일들 예) robots.txt, favicon 등.. nuxt.config.js nuxt의 단일 구성 지점. 모듈 적용 및 기본 설정 재정의 프로젝트 구조에 대한 추가 정보 layout nuxt 앱의 모양과 느낌을 변경할 때 좋다. 사이드바를 포함하고 싶거나 모바일과 데스크톱에 대한 고유한 레이아웃을 갖고 싶은지 여부. content Markdown, csv, yaml, json 파일을 두는 곳 콘텐츠 모듈은 마크다운 파일을 변경할 때 웹팩을 거치지 않아도 되므로 개발 시 핫 리로딩이 매우 빠르다. 2022. 12. 11.

[Vue]tiptap에서 마크다운 문법 금지시키는 법

2022. 12. 7.

[Tiptap] Vue로 에디터 라이브러리 tiptap 사용하면서 버그 해결

개요 초록부분 커서가 안 됨;; 해결방법 다음 css 삭제 2022. 11. 29.

[Vue]test-utils $route 목킹 제대로 하는 방법

에러 console.error [vue-test-utils]: could not overwrite property $route, this is usually caused by a plugin that has added the property as a read-only value 사용 코드 컴포넌트이름.test.js import { shallowMount, createLocalVue } from "@vue/test-utils"; import VueRouter from "vue-router"; const localVue = createLocalVue(); const router = new VueRouter(); if (!process || process.env.NODE_ENV !== "test") { loc.. 2022. 11. 27.

티스토리툴바