허의 개발 일지

저번 포스팅에서 만든 조회하는 API로 화면에 표현하는 것 까지 했는데, 이번 포스팅에서는 조회한 데이터를 테이블로 표현해보겠다. 참고 블로그 https://dreamcoding.tistory.com/41 스프링 (Spring Vue) 게시판 만들기 #9. FrontEnd 데이터 테이블로 표현하기 이번에는 저번에 화면에 보여진 데이터(JSON)들을 테이블 형태로 표현하도록 하겠습니다. 프론트 라이브러리로는 Element-ui를 사용하도록 할겁니다. https://element.eleme.io/#/en-US Element - The world's most po dreamcoding.tistory.com Element Plus, moment 설치 프론트 라이브러르로 Element Plus를 설치한다. 참고한..

vue 공부하는데 파일마다 맨위에 Parsing error가 생겨서 찾아보니 VSCode에서 프로젝트의 ESLint 설정 파일을 인식하는 부분에서 에러가 난 것이라고 한다. Parsing error: No Babel config file detected for D:\study\Vue-study\vue-test-front\src\components\HelloWorld.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. .eslintrc.js 파일 생성하는 방법, settings.json파일 수정하는 방법 2가지 방법이 있는데 나는..

게시물을 조회하는 간단한 API를 작성하고, 화면에 뿌리는 것 까지 해볼 것이다. 1. API 작성 클래스 생성 (1) BoardRepository import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; import com.vue.test.common.entity.Board; @Repository public interface BoardRepository extends JpaRepository { } (2) BoardService package com.vue.test.board.service; import java.util.List; import org.spri..

1. Spring Boot 프로젝트 생성 STS프로그램을 사용하고, 빌드도구는 Gradle과 Maven중 Gradle로 진행했다. 프로젝트 생성 Spring Starter project로 프로젝트를 하나 생성한다. dependency는 대충 Lombok, SpringBootDevTools, SpringWeb, MariaDB Driver 정도 체크하고 Finish를 눌러준다. 나중에 build.gradle 파일에서 추가할 수 있다. application.yml server: port: 8081 spring: datasource: driver-class-name: org.mariadb.jdbc.Driver url: jdbc:mariadb://localhost:3306/vue_test_db?characterE..

서버는 Spring Boot로 하고 프론트는 vue를 사용해서 게시판을 만들어 보겠다. vue는 처음이지만 일단 만들어보기 https://dreamcoding.tistory.com/29 여기 블로그 코드를 참고해서 만들었다. 이 블로그는 spring, mybatis를 사용하지만 나는 spring boot, jpa를 사용할 것이다. MySQL Client를 실행해서 다음 코드를 실행해 데이터베이스를 만들어준다. 데이터베이스명 : vue_test_db mysql> show databases; mysql> create database vue_test_db; mysql> create user 'vue_test'@'%' identified by '1234'; mysql> grant all privileges on..