728x90 개발39 [Vue] Vue.js 게시판 만들기 4 - 게시판 목록 화면 구성 게시판 컴포넌트 생성 게시판 목록을 표시할 컴포넌트를 추가하겠습니다. views 아래에 board 디렉토리와 그 안에 BoardList.vue 파일을 생성합니다. 등록 No 제목 작성자 등록일시 {{ row.idx }} {{ row.title }} {{ row.author }} {{ row.created_at }} >> 게시판을 클릭하면 목록이 나타나도록 vue-router에 연결해야합니다. router/index.js 파일을 열고 BoardList.vue를 추가합니다. import { createRouter, createWebHistory } from 'vue-router' import PageHome from '@/views/PageHome.vue' impor.. 2022. 2. 28. [Vue] Vue.js 게시판 만들기 3 - 레이아웃 분할 Frontboard 레이아웃 분할 프로젝트 레이아웃을 header / contents / footer로 분할하고 header에 페이지를 이동할 수 있는 버튼을 추가하겠습니다. 먼저 App.vue 파일을 열어 프로젝트 레이아웃을 분할하고 헤더와 푸터로 사용할 컴포넌트등을 추가합니다. src/components/아래에 PageHeader.vue 와 PageFooter.vue 파일을 생성합니다. Home | About | 게시판 여기는 footer 자리입니다. 서버를 부팅하고 화면을 확인합니다. npm run serve 페이지 이동 구현 (Vue-router) 페이지 이동을 지원하는 vue-router를 설치합니다. npm i --save vue-router src/router 폴더를 생성하고 index.js.. 2022. 2. 21. [Vue] Vue.js 게시판 만들기 2 - Backend 프로젝트 생성 이전 포스팅에 이어서 이번에는 Backend 프로젝트를 생성합니다. Backend 프로젝트 생성 개발Tool은 인텔리제이 커뮤니티 버전을 사용합니다. spring.io에서 프로젝트를 생성합니다. Add Dependencies를 눌러 Lombok과 Spring Web을 선택하고 Generate를 눌러 프로젝트를 다운로드 받습니다. 다운로드 받은 프로젝트를 작업 폴더에 압축 해제합니다. 인텔리제이에서 해당 폴더를 Open합니다. build.gradle을 열어 dependencies의 내용을 아래 소스로 변경하고 Gradle Refresh를 진행합니다. dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' im.. 2022. 2. 21. [Vue] Vue.js 게시판 만들기 1 - Frontend 프로젝트 생성 요즘 Frontend에서 핫한 React와 Vue.js 중 Vue.js로 게시판을 만들어봅시다. Front와 Back은 별도의 프로젝트로 구분하여 작업을 진행합니다. Node, Npm, Vue Cli 설치 자기의 OS에 맞게 Node.js을 설치하고 버전을 확인합니다. node -v npm의 버전도 같이 확인합니다. npm -v 이어서 Vue Cli를 설치합니다. npm install -g @vue/cli 설치가 완료되었다면 버전을 확인합니다. vue --version 22년 2월 21일 기준으로 node 16.13.2, npm 8.4.1, vue/cli 5.0.1 버전으로 시작합니다. Frontend 프로젝트 생성 개발환경 설치가 완료되었다면 아래 명령어로 vue 프로젝트를 생성합니다. (vue-fro.. 2022. 2. 19. 이전 1 ··· 6 7 8 9 10 다음 728x90
