Tech Diary Tech Diary

프로젝트 기본 세팅 6. [프론트엔드] 회원 가입, 로그인 구현 (vuex, localStorage) 회원 가입 화면 및 기능, resister 객체, vuex 생성 vuex 생성 store/index.js import Vue from "vue" import Vuex from "vuex" import axios from "axios" Vue.use(Vuex) export default new Vuex.Store({ state: { userInfo: null, isLogin: false }, mutations: { loginSuccess(state, payload) { state.isLogin = true state.userInfo = payload }, logout(state) { state.isLogi..

프로젝트 기본 세팅 5. [프론트엔드] 레이아웃 & 메뉴 적용 및 라우터 생성" 레이아웃 적용 & 라우터 생성 레이아웃 & 메뉴 적용 레이아웃은 vuetify에서 제공해 주는 Pre Made Layouts 중 하나를 사용한다. 미리 만들어진 레이아웃 중 Baseline 레이아웃을 사용한다. Baseline의 코드 팬에 있는 html과 js 코드를 App.vue 파일로 옮겨준다. Baseline code pen 링크 mdi-home Home 위와 같은 방식으로 v-list 하단에 메뉴들도 추가해 준다. 현재는 홈, 로그인, 로그아웃, 프로필 메뉴를 만들었다. 인증 확인 기능을 vuex로 구현할 것이므로 미리 추가해 준다. 적용된 화면 app-bar와 footer에 원하는 타이틀 및 설명을 적어주고 indi..

프로젝트 기본 세팅 4. [백엔드] Account 관련 DTO, Controller, Service 생성 후 Test 계정 관련 DTO 생성 회원가입, 로그인, 회원 정보 전달, 비밀번호 변경과 관련된 DTO 들을 미리 만들어준다. 클라이언트에게 입력받는 값은 validation 조건을 어노테이션으로 걸어준다. 테스트 코드 및 여러 다른 상황에서 사용하기 위해 @Builder도 선언해 주었다. SignUpRequest.java package com.portfolio.backend.account.dto; // ... import 생략 @Getter @NoArgsConstructor @AllArgsConstructor @Builder public class SignUpRequest { @NotBlank @E..

프로젝트 기본 세팅 3. [백엔드] Account 관련 객체, 인증 관련 객체 생성 Account 관련 객체 & UserDetails 관련 객체 생성 인증된 사용자의 정보를 담을 Entity 객체인 Account와 Account와 관련된 쿼리메소드를 사용할 AccountRepository를 만들어주었다. Account.java package com.portfolio.backend.account; // ... import 생략 @AllArgsConstructor @NoArgsConstructor @Builder @Getter @Entity public class Account extends BaseTimeEntity { @Id @GeneratedValue(strategy = GenerationType.ID..

프로젝트 기본 세팅 2. [백엔드] Swagger, Response Model, 예외 처리 세팅 Swagger Setting 백엔드 초기 세팅 때 build.gradle에 설정했던 Swagger를 세팅했다. Swagger에 대한 기본 세팅을 해주는 SwaggerConfig.java를 만들고, Security에서도 web.ignoring() 설정을 해주었다. SwaggerConfig.java package com.portfolio.backend.config.swagger; // import 생략 @Configuration @EnableSwagger2 public class SwaggerConfig { @Bean public Docket swaggerApi() { return new Docket(Docume..

프로젝트 기본 세팅 1. 기본 환경 세팅 Portfolio-For-Developers 프로젝트 백엔드&프론트 기본 환경 세팅을 포스팅 한다. front는 vuetify를 이용한 vue.js, api는 스프링 부트를 이용하여 만든다. 우선 로그인 구현을 먼저 하고 그 이후 포트폴리오를 만들어주는 기능을 구현, 그 뒤에 개발에 대한 정보를 올릴 수 있는 게시판을 만들려고 한다. 백엔드 초기 세팅 spring initializr를 이용하여 다음과 같이 프로젝트를 만들어준다. JPA, Spring Security, Spring Web, Lombok, Devtools, MySql을 추가해 주었다. build.gradle implementation 'io.springfox:springfox-swagger2:2.6...