728x90 전체 글58 [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. [docker] 도커로 MariaDB 설치부터 접속까지 내 노트북이 이런저런 개발환경으로 도배가 되는 것을 원치 않아 도커에 MariaDB를 설치해보려고 한다. 먼저, 도커가 설치된 PC에서 명령어로 MariaDB 이미지를 다운로드한다. mariadb 뒤에 따로 버전 등을 입력하지 않으면 가장 최신의 버전을 다운로드 한다. docker pull mariadb 도커 이미지가 잘 다운로드 되었는지 확인한다. docker images 이어서 도커 실행 명령어를 입력한다. docker run -d -p 3308:3306 -e MYSQL_ROOT_PASSWORD=password -e TZ=Asia/Seoul --name mariadb mariadb --lower_case_table_names=1 -d 옵션은 백그라운드에서의 실행을 의미한다. -p 옵션은 아웃바운드와 .. 2021. 11. 30. 이전 1 ··· 10 11 12 13 14 15 다음 728x90
