1. IntelliJ 커뮤니티 버전 다운로드 인텔리제이 커뮤니티 버전을 Back-end 개발 툴로 사용한다. https://www.jetbrains.com/ko-kr/idea/download/#section=windows IntelliJ IDEA 다운로드: 우수성과 인체 공학이 담긴 JetBrains Java IDE www.jetbrains.com 아래의 다운로드 버튼을 클릭하여, 설치파일을 다운로드하고 실한다. 2. Spring 프로젝트 생성 https://start.spring.io/ 에서 프로젝트를 생성한다. Add Dependencies를 눌러 Lombok과 Spring Web을 선택하고 Generate를 눌러 프로젝트를 다운로드 받는다. 다운로드 받은 프로젝트를 작업 폴더에 압축해제 한다. 인텔..

CRUD가 가능한 게시판을 만들려고 한다. Front-end는 Vue.js 로 구현하고, Back-end는 Spring Boot로 구현했다. DB는 MySQL을 사용했다. 1. 프로젝트 폴더 생성 프로젝트를 진행하고자 하는 디렉토리에 폴더를 만든다. 본인은 폴더 명을 "board"로 만들었다. 2. Visual Studio Code로 해당 디렉토리 열기 VS Code(Visual Studio Code)를 열어서 상단 메뉴에서 File >> Open Folder를 클릭해서 위에서 만든 "board" 폴더를 연다. 3. Vue CLI 설치 상단 메뉴에서 Terminal >> New Terminal을 클릭 후 터미널을 연다. cmd가 아닐 경우 + 표시 옆 아래 화살표를 클릭해서 다른 터미널을 열 수 있다. ..

1. 새로운 View (Test Page) 만들기 vue-element-admin\src\views 안의 폴더 중 Dashboard 폴더를 복사한다. 이유는 Line Chart와 Grid 가 있기 때문에 연습하기 좋기 때문이다. 복사한 폴더를 붙여넣기 한 후 폴더 이름을 test로 바꾸고 구조를 아래와 같이 변경한다. 기존 admin 폴더에 있던 component 폴더를 test 폴더 하위에 위치시키고 admin 폴더와 editor 폴더는 삭제한다. 2. Router에 Test Page 반영 vue-element-admin\src\router\index.js 에서 constantRoutes 배열에 아래 객체를 추가한다. (배열의 가장 앞) { path: '/test', component: Layout, ..

Github에서 인기있는 Vue 프로젝트 중 하나인 Vue Element Admin을 로컬 환경에 구성해본다. 1. 디렉토리 만들기 프로젝트를 진행할 디렉토리를 만들고 해당 디렉토리에서 cmd 창을 연다. 윈도우의 경우 파일 탐색기에서 Shift+마우스 오른쪽 버튼 클릭 시 나타나는 "여기에 PowerShell 창 열기" 를 클릭 하면 쉽게 열 수 있다. 2. GitHub 프로젝트 클론(Clone) 하기 Cmd 혹은 PowerShell 창에서 git clone https://github.com/PanJiaChen/vue-element-admin.git 을 입력해 GitHub에서 프로젝트를 클론한다. 그리고 아래 명령어를 입력해 프로젝트 디렉토리로 이동한다. cd vue-element-admin 아래 명령..