본문 바로가기

Programming

[intellij/spring] h2 (메모리영역에서 사용하는db)설정 방법 intellij spring boot 프로젝트 실행 /h2-console 뒷부분 jdbc로 시작하는 문자열 복사 http://localhost:8080/h2-console 이동 jdbc url 에 아까 복사 한 jdbc 값을 붙여넣기 이후 바로 connect 버튼 클릭 db 접속 완료 show databases ; 명령어를 실행해서 되는지 확인해 볼 것 더보기
[intellij] spring 프로젝트 생성 및 시작 사용언어 java + spring framework 툴 : intellij db : h2 빌드 : gradle 1. 프로그램 설치 (실습 용도로 사용) java : jdk 11 version intelliJ : community version 설치 2. 프로젝트 생성 3. build.gradle 설정 plugins { id 'org.springframework.boot' version '2.4.2' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id 'java' } group 'com.web.todo' version '1.0-SNAPSHOT' repositories { mavenCentral() } dependencies { // JPA i.. 더보기
[VUE] VUE 프로젝트 구조 Npm을 이용한 Vue 설치후 프로젝트 구조 잡기 npm을 이용하여 vue를 사용할때 3가지 파일로 나눠서 코딩한다. main.js는 Vue 인스턴스를 로딩하기 위해서 사용한다. .vue 파일들은 각각 vue에 대한 Component들이다. .html 파일은 컴포넌트가 삽입될 HTML 템플릿이다. Vue 컴포넌트 파일 구조 이해하기 .vue로 끝나는 파일은 컴포넌트를 만들기 위하여 사용되는 자바스크립트 코드이다. .vue파일은 크게 3가지 부분으로 나눠진다. template : 템플릿은 해당 Component를 구성하는 실제 컴포넌트에 대한 HTML 코드를 작성하는 부분이다. script : 실제 해당 컴포넌트에 대한 data와 실제 동작을 정의하는 JS 파일이다. style : template에 대한 .. 더보기
[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 인터페이스를 사용하여 필요한 자.. 더보기

티스토리툴바