목록프로젝트/Vue.js, Spring 게시판 (8)
윤개발
에러처리 구현 이번 포스팅에서는 이전에 완료하지 못했던 에러처리에 대해 설명합니다. 에러처리에는 여러 방법이 있으나 이번 게시판에서는 네이버에서 사용하는 에러처리방법을 사용해보겠습니다. 네이버의 에러처리 { "errorMessage": "Authentication failed (인증에 실패하였습니다.)", "errorCode": "024" } 네이버는 에러코드와 함께 에러 메시지를 리턴하는 형식을 가지고있습니다. 에러처리 구현 이에 맞게 exception 폴더에 ErrorResponse 객체를 생성하겠습니다. 생성 전에 JSON으로 에러를 리턴하기위해 JSON-simple 이라는 의존성을 가져오도록 하겠습니다. pom.xml에 아래 의존성을 추가한 후 메이븐을 새로고침해줍니다. com.googlecode..
이번 포스팅에서는 User의 Controller, Service, Repository 를 생성하고 회원가입 API를 만들어보겠습니다. 먼저 JpaRepository를 상속받는 UserRepository를 생성합니다. JPARepository를 상속받으면 기본적인 CRUD는 자동생성되며 메소드 이름으로 쿼리를 만들 수 있습니다. package com.board.My.Board.repository; import com.board.My.Board.domain.User; import org.springframework.data.jpa.repository.JpaRepository; public interface UserRepository extends JpaRepository { } 이처럼 껍데기만 만들어도 기본..
이제 본격적으로 백엔드 API의 Domain을 생성하겠습니다. 먼저 클래스들의 분리를 위해 아래와 같이 패키지 폴더들을 만들어주시면 됩니다. config 폴더는 프로젝트의 설정파일들이 위치할 장소입니다. 나머지 폴더는 이전 포스트에서 설명한 클래스들이 위치할 장소입니다. DB 스키마 생성을 위해 domain 폴더 밑에 Board와 User 클래스를 생성하겠습니다. 간단한 게시판이므로 테이블의 관계는 위 사진과 같습니다. 아래는 User 클래스의 내용입니다. import lombok.Getter; import javax.persistence.*; @Entity @Getter public class User { @Id @GeneratedValue(strategy = GenerationType.AUTO) @C..
이번 포스트에서는 백엔드 API의 구조를 알아보도록 하겠습니다. 간단한 게시판 만들기이지만 실제 사용하는 백엔드 API 구조를 설계하였습니다. 먼저 객체 정보를 알아보겠습니다. 각각은 모두 클래스 들이며 아래와 같이 사용할 예정입니다. 번호 이름 설명 1 Json 프론트와 백엔드 api는 JSON 형식으로 통신합니다. 2 Spring Security JWT 인증을 적용하여 인증 & 권한을 확인합니다. 3 DTO(Data Transfer Object) JSON으로 입력된 데이터를 JAVA 객체로 변경하고 유효성 체크를 합니다. 4 Controller 요청이 들어온 API 에서 어떤 동작을 할지 결정하고 리턴합니다. 5 Service 컨트롤러에서 받은 요청을 처리합니다. (비지니스 로직) 6 Domain J..
이번 포스팅에서는 프로젝트시 사용할 Intelij 설정을 적용해보겠습니다. 1. 플러그인 설치 Intelij 메뉴에서 File > Setting > Plugins로 들어가면 아래와 같은 화면이 나오게됩니다. 상단에 Marketplace에서 플러그인을 검색하고 설치할 수 있습니다. Vue.js, Prettier, Lombok 3개를 검색하고 설치해줍니다. 이상으로 3개의 플러그인을 설치하였습니다. 2. webpack.config 파일 생성 & 적용 다음으로는 webpack.config.js 파일을 만들고 적용시켜보도록 하겠습니다. 프로젝트 root > front 위치에 webpack.config.js 파일을 생성합니다. 생성 후 아래 코드를 복사 & 붙여넣기 합니다. const path = require(..
이번 포스팅에는 Front Vue 를 생성해보겠습니다. 프론트 생성을 위해 터미널을 열어 프로젝트의 루트 폴더(pom.xml이 위치한 폴더)로 이동해주세요. 다음 vue 프로젝트 생성을 위해 아래 명령어를 입력해주세요. vue create front 그러면 다음과 같은 창이 나오게되는데 Manually select feature(사용할 기능을 직접 선택)를 선택해주세요. 그리고 다음과 같은 항목을 선택해주세요. Babel : ES6를 ES5로 변환해줍니다. (낮은 버전의 브라우저에서 Javascript를 지원할 수 있도록 도와줍니다.) Router : vue 에서 지원하는 라우팅입니다. url 분기를 위해 선택해줍니다.. Vuex : token 등 전역 정보를 저장하기위해 선택합니다. Linter / F..
이번 포스팅에는 Backend 프로젝트를 생성해보겠습니다. Intellij Ultimate에서 기본적으로 제공하는 Spring Initializer를 사용해도 되지만 Community 버전을 고려하여 spring io에서 생성해보겠습니다. 아래 링크를 눌러주세요 https://start.spring.io/ 링크를 누르면 아래와 같은 화면이 나오게 됩니다. Project 항목은 Maven과 Gradle을 선택할 수가 있습니다. (Maven과 Gradle은 프로젝트의 의존성을 관리해줍니다.) 저는 Maven으로 선택하고 언어는 Java, Boot 버전은 2.2.9를 사용하겠습니다. 또한 그룹명등은 임의로 해주시면 되며 java 8을 사용하겠습니다. 이제 오른쪽에 보시면 Dependencies가 있습니다. 프..
최근 회사에서 Vue.js + Spring boot + MySQL + JPA 를 사용하여 3번의 프로젝트를 진행하였습니다. 프로젝트를 진행하며 사용한 방법들과 환경셋팅, 간단한 코드를 통해 게시판을 만드려고 합니다. 첫 포스팅에는 개발환경을 셋팅해보도록 하겠습니다. 저는 Intellij 좋아하여 Front와 Backend 모두 Intellij Ultimate를 사용하여 개발하였습니다. 처음으로 Intelij를 설치해주세요. https://www.jetbrains.com/ko-kr/idea/download 다운로드 IntelliJ IDEA: JetBrains가 만든 전문 개발자용 Java IDE 최신 버전 다운로드: IntelliJ IDEA (Windows, macOS, Linux) www.jetbrain..