Programming 썸네일형 리스트형 [VUE] 프로젝트 생성 후 <router-view> 에러 나는 현상 Vue프로젝트 설치할 때 선택한 Eslint 관련해서 에러인것 처럼 잡는 것입니다. 실제로는 에러가 아니지만요. Vue 2.0 버전에서는 template 태그 안에 반드시 루트 태그(div 같은)가 있어야 에러가 아니였습니다. 에러메시지 : The template root requires exactly one element vue/no-multiple-template-root 그런데 Vue 3.0 부터는 루트 태그가 없어서 에러가 아닙니다. Eslint가 아직 Vue 3.0에 바뀐 내용을 모두 적용하고 있지 않아서 에러인것처럼 빨간색 줄이 가는 현상입니다. 빨간줄을 없애고 싶다면, template 태그 안에 작성된 html 코드 최상위에 div 같은 루트 태그를 사용하시면 됩니다. 더보기 [VUE] VUE 설치 과정에서 에러 발생 시 재설치 - vue-cli 삭제 npm uninstall vue-cli -g - vue-cli 설치 npm install -g @vue/cli - vue-cli 업데이트 npm update -g @vue/cli - vue 버전확인 vue --version 더보기 [VUE] ui 개발을 위한 Vuetify plugin 설치 빠른 설치환경을 위해 Vue CLI 를 사용하고 프론트 디자인은 전문 영역이 아니기때문에 Vuetify 를 사용한다. - vue 3.x 버전 프로젝트에서는 설치가 되지 않을 수 있다. Brower 지원 확인 vuetifyjs.com/en/getting-started/browser-support/ Browser support Vuetify is a progressive framework that supports all evergreen browsers and IE11 / Safari with polyfill. vuetifyjs.com 설치 / 삭제 설치를 위해서 필요한 것 Vue CLI 1. 설치 - 아래 두 명령어중 하나로 설치 npm install -g @vue/cli yarn global add @v.. 더보기 [VUE] CLI V3 프로젝트 개발 시 유용한 vscode 확장프로그램 목록 1. Vetur - Pine Wu Vue.js 코드 문법강조, 자동완성, 디버깅, Lint 등 지원 2. Vue 3 Snippets - hollowtree Vue.js 컴포넌트 속성 지원 및 자동완성 지원 Previous imageNext image 3. Vue Peek - Dario Fuzinato 컴포넌트 추적 4. ESLint - Dirk Baeumer, Prettier - Prettier ESLint : 잘못된 코드 스타일로 인해 에러가 나지 않도록 코드 문법을 잡아주는 문법 검사기 Prettier : 코드 스타일을 정리해주는 도구 5. DotENV env 환경 파일 syntax 6. Debugger for Chrome - Microsoft VSCode 안에서 디버깅을 도와주는 .. 더보기 [VUE] cli 3프로젝트 8080 포트 변경 Vue.js 를 시작하면 8080 포트로 서비스가 시작 됩니다. 8080 말고 다른 포트를 변경하고 싶을때는 package.json 파일을 아래와 같이 수정합니다. --port 8504 : 포트를 8504로 변경했습니다. npm run serve 명령어를 실행하여 포트 변경 확인 더보기 [VUE] VUE CLI 프로젝트 생성 시 권한이 없다는 에러 해결 윈도우 환경에서 VUE 프로젝트를 생성시 혹은 VUE 버전을 확인 할 때 권한이 없다면서 명령어가 실행되지 않는 경우를 볼 수 있다. 그럴때는 window power shell 을 관리자권한으로 실행해서 Set-ExecutionPolicy -ExecutionPolicy Unrestricted 구문을 실행해주면 된다. 사진 참조 더보기 [JSP] 간단한 회원 등록 예제-2(DAO, DTO) - 지난 시간 작업 내용 https://skillazit.tistory.com/39 [JSP] 톰캣 + mariadb 간단한 회원 등록 예제 오늘은 jsp 의 기초 동작 원리를 파악하기 위해 샘플 페이지를 만들었다. ui는 신경쓰지 않았고 maria db 를 통한 crud 기초 기능을 구현하였다. - 사용환경 - 이클립스 최신버전설치 - create project - web skillazit.tistory.com - 첫번째 시간에 JSP 페이지를 만들었을때 서버연결 소스코드를 각페이지마다 적고 DB에 전송할 파라미터가 하나로 정리되지 않은 현상을 겪었을 것이다. DAO, DTO 를 사용해 기존 코드를 수정하였다. DAO : DB에 접근하는 객체 여러 사용자가 하나의 DAO 인터페이스를 사용하여 필요한 자.. 더보기 [JSP] 톰캣 + mariadb 간단한 회원 등록 예제 오늘은 jsp 의 기초 동작 원리를 파악하기 위해 샘플 페이지를 만들었다. ui는 신경쓰지 않았고 maria db 를 통한 crud 기초 기능을 구현하였다. - 사용환경 - 이클립스 최신버전설치 - create project - web dynamic project 생성 - maria db, jdbc 설치하여 import 해야함 (maria db , jdbc 다운로드는 공식홈페이지에서가능) - 프로젝트 구조 - 조회 페이지 - 추가 후 페이지 레코드 insert 성공 - 수정 버튼 클릭 시 페이지 - 삭제 페이지 (기능 학습에 초점을 둬서 ui는 신경쓰지 않았다. 원래는 입력칸 disable처리도 해주어야한다) - 삭제 또는 수정 완료 후 페이지 ( 자바스크립트라면 페이지넘기기 전에 경고문구를 호출해도 되.. 더보기 [MSSQL] 데이터 좌우 대칭하여 표현하기 - PIVOT 테이블 예제 이번시간에는 MSSQL에서 날짜별로 컬럼을 배치할때 자주쓰이는 PIVOT에 대한 개념을 학습하였다. -- 문법 SELECT * FROM ( 피벗할 쿼리문 ) AS result PIVOT ( 그룹합수(집계컬럼) FOR 피벗대상컬럼 IN ([피벗컬럼값] ... ) AS pivot_result -- 예제 샘플 -- -- create 문 USE [DB이름으로 수정] GO /****** Object: Table [dbo].[EMP] Script Date: 2021-08-19 오전 10:01:08 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[EMP]( [SEQ] [int] IDENTITY(1,1) NOT NULL, [EMP.. 더보기 [JAVA]camel 케이스 문자열을 snake 케이스 문자열로 변환 protected static String camelToSnake(String str) { // Empty String String result = ""; // Append first character(in lower case) // to result string char c = str.charAt(0); result = result + Character.toLowerCase(c); // Tarverse the string from // ist index to last index for (int i = 1; i < str.length(); i++) { char ch = str.charAt(i); // Check if the character is upper case // then append '_' an.. 더보기 이전 1 2 3 4 5 6 7 8 다음
