FRONT (22) 썸네일형 리스트형 [Vue.js] Vue3 : Vuetify Form-validation 유효성 검사 vuetify는 기본적으로 form input에서 validation을 제공한다. :rule 을 활용하면 validate를 적용할 수있다. vuetify Form 에는 input 값들을 validation 하는 기능을 기본적으로 제공한다. 보통은 v-text-field의 rule을 사용하는데, 다음처럼 넣으면 validate처리가 쉽게 된다. 이 방식은 구글링 하면 다 나와서 예시만. 아래는 내가 사용하는 방식이다. components const state = reactive({ sample : { name: "", desc: "" }, rules: { name: [ { required: true, message: "이름을 입력하세요.", trigger: "blur", }, { min: 0, messag.. [Chrome devtools] 크롬 개발자 도구 디버깅 할 파일 열기(찾기) ex) 크롬 개발툴로 디버깅을 하다가 에러가 발생하지 않는 페이지의 디버깅을 찍어보고 싶었다. 소스 툴에는 에러 나는 페이지만 나오는데 어떻게 하지? 1. 크롬 개발자 도구에서 소스 탭 클릭. 2. 페이지 카테고리에서 찾고 싶은 파일이 있는 폴더 우클릭. 3. 폴더 검색 4. 해당 폴더에서 파일 찾는다. 아니면 Search 에서 직접적으로 파일 경로 검색해도 된다. * vue 는 그럴 필요 없이 vue 탭 누르면 된다. [Vue.js] Invaild prop: type check failed for prop "". Expected Object, got String with value "". 에러 Invaild prop: type check failed for prop "". Expected Object, got String with value "". 선언 한 데이터 타입과 대입 한 데이터 타입이 달라서 발생한 에러. ex) 1. Invaild prop: type check failed for prop "value". Expected Array, got Object. 배열로 선언 해놓고 객체로 전달 할 때. 2. Invalid prop: type check failed for prop "date". Expected Number, got String. props: { date: { type: Number, coerce: str => Math.trunc(Date.parse(str) / 1000) },.. [Vue.js] Node.js , Vue.js 설치하기 - Windows 10 npm 으로 한 번에 설치 하는 것도 가능하지만, 나는 npm run 실행 시 해당 경로를 못 찾아서 삭제 후 개별 설치함. 나 같은 사람들에게 도움이 되고자 글을 쓴다. 1. Node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Vue를 생성하기 위해선 Node.js 와 npm 을 먼저 설치해줘야 한다. 안정적인 버전을 받는 걸 추천한다. 설치 완료 후 (윈도우 + R) cmd 를 열어 설치가 됐는지 확인 한다. node -v 2. Vue.js 설치 npm을 통해 설치한다. node.js 를 설치하면 npm도 같이 설치 된다. 명령어.. [Node.js] 릴리즈 이전 버전 설치하기 릴리즈 이전 버전 설치하는 방법. https://nodejs.org/ko/download/releases/ 이전 릴리스 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 1. 원하는 버전 다운로드 버튼 클릭 2. 파일 다운로드 windows 유저는 node-v18.12.1-win-x64 혹은 node-v18.12.1-x64.msi (실행 파일) mac 유저는 node-v18.12.1.pkg 파일을 다운로드 하면 된다. [Vue.js] 'vue-cli-service'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 해결 방법 'vue-cli-service'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 해당 에러가 발생 할 경우 1. Node.js 와 Vue.js 설치 확인 // 1. node 확인 node -v //2. vue 확인 vue -v 혹은 vue --version Node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org vue.js 설치 npm install vue vue-cli 도 함께 설치한다. npm install -g @vue/cli 해당 프로젝트 폴더 경로에 node_modules 폴더가 존재하면 된.. [Vue.js] Vue3 Composition API - life cycle Composition API란? Vue3가 나오고 Composition API 를 제공하고 있다. Vue2와 유사하게 작동하지만, 해당 API를 사용할 경우 라이프 사이클 훅(Life cycle hook)에 대한 엑세스가 변경된다. Vue3에서는 beforeCreate , created 를 setup()이 대체하고 수행한다. setup() 안에 life cycle methods에 on을 추가해 Call back hook 을 만들 수 있다. beforeDestroy, destryoed 는 beforeUnmount, unmounted 로 변경 됐다. Vue3 New Methods ● onRenderTracked reactive dependency 가 렌더 함수에서 처음 접근 되었을 때 호출 된다. 추적 중인.. [Vue.js] Life cycle -인스턴스 생명주기 생명주기란? 인스턴스의 상태에 따라서 호출 할 수 있는 속성들. 라이프 사이클 훅(Life cycle hook)이란? 라이프 사이클마다 개발자가 추가한 커스텀 로직. Creation 컴포넌트 초기화 단계 Creation 단계에서 실행되는 훅(hook)들이 라이프 사이클 중 가장 먼저 실행된다. 컴포넌트가 DOM에 추가되기 전이며 서버 렌더링에서도 지원되는 훅이다. 클라이언트, 서버 모두에서 처리해야 할 작업이 있다면 해당 단계에 적용. ● beforeCreate 가장 먼저 실행되는 훅 데이터나 이벤트가 세팅되지 않은 시점이므로 화면 요소 접근 불가능. ● created 데이터, 이벤트가 활성화되어 접근이 가능함 템플릿과 virtual DOM은 마운트 및 렌더링 되지 않은 상태. Mounting DOM 삽.. [Chrome] Chrome devTool - DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND 숨기기 Chrome 개발자 툴 열면 항상 나온다. DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND 실행 할 때 딱히 상관은 없지만 거슬린다. F12 > 환경설정 > Sources - "Enable JavaScript source maps"를 체크 해제 후 새로고침 해결. [Error] javaScript Console - Uncaught SyntaxError: missing ) after argument list - 오타 에러 .jsp 수정 후 서버 실행하니 chrome - console error 발생. Uncaught SyntaxError: missing ) after argument list 특정 라인에 ) 를 감싸지 않아서 발생한 것임. 내 경우 function 마무리 ); 를 하지 않아서 발생. 마지막에 제대로 닫아줘야 함. ex) function test() { alert("괄호 감싸줘야 함"); }); + 다른 이유로는 따옴표 시작 부분과 끝나는 부분에서 \ 붙여주면 따움표로 인식하여 정상 작동 함. 시작부분은 \' 끝나는 부분은 '\ 으로 처리! 이전 1 2 3 다음
