'프로그램'에 해당되는 글 70건
vue + jpa project (5) - Vue 레이아웃 정의
이제 Vue 프로젝트에서 레이아웃 화면을 구성한다. 실제 업무용 레이아웃을 구성하기에는 어려움이 있어서 일단 상위에서 차례로 헤더, 메뉴, 홈, 푸터로 구성하기로 한다. 기본 관련된 콤포넌트 파일은 compnents/common 폴더에 넣는 것으로 한다. 홈 화면은 기존 것을 사용한다. 1. 콤포넌트 추가 [ 헤더 ] components/common/MainHeader.vue 로그인 [ 메뉴바 ] components/common/MenuBar.vue Home | 게시판 [ 푸터] components/common/Footer.vue © 2019 ALL RIGHT RESERVED 2. 최상단의 App.vue 에 레이아웃을 구성한다. 모두 처리가 되었다면 그냥 화면을 다시 (열어)보자. 이렇게 뜨면 반영이 잘..
프로그램/Vue.js | 2023. 10. 24. 14:38
vue + jpa project (4) - Vue 프로젝트 초기 생성 및 홈화면 기능
이제 Vue 프로젝트를 기본생성하고 홈화면 기능을 추가 한다. 1. Vue 프로젝트 초기 생성 우선 탐색기에서 본인이 프로젝트를 관리하기 위한 큰 폴더 하나를 만들자. 나는 vuejs3-project라고 만들었다. 그리고 cmd 창이나 파워쉘 창에서 해당 폴더 위치로 이동한 뒤에 "vuejpaproject" 라는 이름으로 프로젝트를 생성한다. cd C:\본인경로\vuejs3-project vue create vuejpaproject 이미지처럼 뜨면 디폴트로 Vue3 버전이 선택되어 있는데 그대로 엔터를 누르면 설치가 진행된다. 설치가 끝나면 친절하게도 cd vuejpaproject, npm run serve 를 보여주어 어떻게 실행하는지를 알려준다. 그리고 실제로 따라 해보면 실행이 되고 주소를 알려준다..
프로그램/Vue.js | 2023. 10. 24. 12:17
vue + jpa project (3) - 프론트 개발환경 구성
Vue 프로젝트를 생성하고 관리하기 위해서 node와 vscode 를 설치한다. 1. Visual Studio Code 설치 다운로드 사이트 https://code.visualstudio.com 에 접속하여 개인 환경에 맞는 프로그램을 다운받아서 설치하면 된다. 설치를 한뒤에 Vue 개발을 위해서 추가로 플러그인을 설치한다. 좌측 아이콘에서 Extensions 메뉴를 선택하고 아래 이미지에 대한 것을 추가로 설치한다. 첫번째 것은 한글패치를 위한 것이고 두,세번째는 Vue를 위한 플러그인이다. 두번째는 검색 입력창에 "volar"라고 입력한 뒤 검색하면 나오는데 (Volar) 인 것만 찾아서 설치하면 된다. (* 주의: Volar는 Vue2용 이전공식 VSCode 확장인 Vetur 를 포함하는데 만약 V..
프로그램/Vue.js | 2023. 10. 24. 10:25
vue + jpa project (2) - JPA Project 초기 기본 생성
우선 백엔드 프로젝트를 먼저 생성하겠다. 순서 상으로 본다면 프론트를 먼저 만들어야 겠지만 백엔드 프로젝트가 있어야 프론트에서 호출이 가능하므로 이렇게 진행하겠다. 향후에는 프론트와 백엔드를 왔다갔다 하면서 진행하게 된다. 백엔드는 STS 를 이용하기로 했다. DB는 로컬 마리아DB를 사용하기로 했다. 1. 우선 JPA 프로젝트를 아래의 이미지처럼 생성한다. java 버전은 최신인 17을 사용하고, Boot 버전은 3점 대를 사용하기로 한다. 필요한 것을 체크하고 생성을 시킨다. JPA 이기 때문에 Lombok, JPA 는 필수이다. Thymeleaf는 꼭 필요하지 않지만 Vue와 무관하게 자체 테스트를 위해서 추가하겠다. (Spring Security는 나중에 추가하겠다) 2. 프로젝트 생성 후, ap..
프로그램/Vue.js | 2023. 10. 23. 12:08
RECENT COMMENT