하루에 한걸음씩 꾸준히

목차   vue routerSPA(Single Page Application) 방식에서는 페이지를 이동할 때마다 서버로부터 전체 HTML 파일을 다시 받아오는 대신,필요한 부분만 동적으로 렌더링하는 방식이 사용된다. 이번에는 이러한 SPA 구조를 완성하기 위해, Vue Router를 적용하여 서버 요청 없이 URL에 따라 화면을 전환하는 기능을 구현해보려고한다.npm install vue-router@4라우터를 사용하기 위해서 라이브러리를 설치한다. index.jsimport { createRouter, createWebHistory } from "vue-router";import Home from '../pages/index.vue';import TodoList from '../pages/todoLis..

목차로그인 기능 구현회원가입 기능구현소감지난 글에서 Vue와 Spring Boot 간 연동 및 기본 설정을 마쳤으니, 이번 포스팅부터는 실제 기능 구현을 시작해보고자한다.아직 미완성이지만, 살을 더 붙이면서 그에 대한 내용도 블로그에 추가하겠다. //Main.vue MainView 로그인 회원가입  index.js 에서 '/' 로 호출될 시 'Main.vue' 로 연결되게 임시로 설정router-link to : SPA에서 페이지를 새로고침 없이 URL만 바꾸고 해당 컴포넌트를 불러옴, 현재 페이지를 유지한 채 URL만 /login으로 바꾸고 해당 컴포넌트 불러옴(페이지간 이동이 빠르고 부드러움)  //LoginView.vue 로그인의 Form 을 컴포넌트 학습을 위..

목차vue 프로젝트 구조vue 설정유저의 기본적인 CRUD 기능을 마친 후, 일기장 기능을 본격적으로 구현하기 전에 먼저 화면 구성을 Vue로 어떻게 구현할지 정리해보고자 한다. 이번 글에서는 Spring Boot와 Vue 연동을 시작으로, 실제 Vue 컴포넌트를 작성하고 기능을 구현해 나가는 과정을 기록해보려 한다. vue 프로젝트 구조 서버와 vue 폴더를 분리하는 것이 관리측면에서 용이하기에 이와같이 설정하였다.components : 작고 재사용이 가능한 컴포넌트를 모아두는 폴더(버튼,폼),  views나 다른 컴포넌트에서 조립해 사용router : URL 경로에 따라 어떤 화면을 보여줄지 설정하는 곳views : 페이지 단위 컴포넌트를 모아두는 폴더, URL 하나당 보여줄 화면, router/in..

목차소개Jwt의 의미와 동작원리코드 적용테스트저번 포스팅에서는 JWT의 의미와 동작원리에 대해 알아보았다. 이번에는 이를 코드로 구현하는 방법을 기록해보고자한다. 필요한 파일 목록과 역할JWT 인증 기능을 구현하기 위해 아래와 같은 파일들이 필요하다. 각 파일의 역할은 다음과 같다.SecurityConfig.java: Spring Security 설정을 관리하는 구성 파일JwtAuthenticationFilter.java: 요청 헤더에 포함된 토큰을 검증하는 필터JwtTokenUtil.java: JWT 토큰 생성 및 검증 로직을 처리하는 유틸리티 클래스AuthController.java: 로그인 요청을 처리하고 토큰을 반환하는 컨트롤러AuthService.java: 사용자 인증과 토큰 발급을 담당하는 서..

목차소개Jwt의 의미와 동작원리코드 적용테스트웹 서비스를 사용하면서 사용자의 인증과 권한에 따른 접근은 매우 중요하다고 생각했다. 이를 프로젝트에 적용하여 공부해보려고한다. 이번 프로젝트에서는 먼저 사용자 정보에 따른 토큰 발급을 구현하고, 이후에는 역할(Role) 기반의 접근 제어를 추가적으로 구현할 예정이다. 이를 통해 Spring Security 와 JWT를 활용한 인증 시스템의 기본을 이해하고자한다. JWT(Json Web Token)JWT는 웹 어플리케이션에서 사용자의 인증과 권한 부여를 위해 사용되는 JSON 형식의 토큰이다. JWT는 서버와 클라이언트 간에 안전하게 정보를 전송할 수 있도록 도와준다. 인증 시스템에서 주로 사용되며 세션 기반 인증 방식의 대안으로 활용된다. 세션인증방식 VS ..

설계한 이 도메인이 정말 데이터베이스에 저장되는지 확인해보겠다. UserRepository Tests 코드@Test@Transactional@Rollback(false)void save() { //given User user = User.builder() .email("test1@gmail.com") .nickName("nickname") .password("1234") .diaries(null) .build(); userRepository.save(user); //when User savedUser = userRepository.findById(user.getId()).get()..

이전에 객체를 생성하는 방법으로 @Setter 방식을 사용했는데, 코드의 명확성과 불변성을 보장하기 위해 @Builder 패턴을 사용하도록 리펙토링 하였다. 코드로 확인해보자//User 엔티티_이전코드@Entity@Getter@Setter@Table(name = "users")public class User extends BaseEntity{}//사용코드User user = new (0L, "test@gmail.com", "1234", "nickname")user.setNickName("nickname2");문제점생성자 방식으로 객체를 생성하니 어떤 파라미터에 매칭되는지 명확하게 알수가 없다.Setter 사용 시 객체의 변경 가능성을 열어두어 어디서 할당 되었는지 판단 하기 어려워 변경 가능성을 최소화 ..

이 서비스의 도메인을 설계를 떠오르니 '사용자'와 '포스트' 도메인이 생겨나고 이 둘간의 연관관계가 있을듯하다.JPA 와 Entity의 주요한 개념들도 함께 기록해보고자 한다.JPA(Java Persistence API)JPA는 자바 진영에서 ORM(Object-Relational-Mapping) 기술 표준으로 사용되는 인터페이스의 모음집이다.JPA 인터페이스를 구현한 Hibernate가 실제로 데이터베이스와 연결되어 쿼리를 실행하거나 객체를 저장/조회 하는 동작들을 처리한다.  JPA 메서드persist(entity): 주어진 엔티티를 데이터베이스에 저장합니다.merge(entity): 주어진 엔티티를 데이터베이스에 저장하거나 업데이트합니다.find(entityClass, primaryKey): 주어진..

오늘의 감정이 어땠는지 기록하며 돌아볼수 있는 일기장을 만들어 보려고 한다. 기술스택은 다음과 같다.만들어 보며 공부하고, 조금씩 살을 붙여나갈 것이며 개발내용은 모두 블로그에 기록하고자한다.back : SpringBoot / SpringSecurity(JWT)front : Vue.js /  TypescriptORM : JPADB : Mariaspring initializr 에서 관련 의존성들은 다음과 같다.1. 기본적인 Spring Boot 설정Spring Boot DevTools → 개발 편의성 증가 (자동 리스타트)Lombok → Getter/Setter 자동 생성2. 웹 및 보안Spring Web → REST API 개발Spring Security → JWT 인증을 위해 필요3. 데이터베이스 및 ..

Lombok 에서 제공하는 어노테이션 중 자주 사용되는 어노테이션을 적어보려한다. ● @Getter, @Setter 일일이 get, set을 사용하지 않고 @Getter, @Setter 사용할 경우 필드값에 접근할 수 있다. ● @AllArgsConstructor public Dashboard(String title, String content, String writer) { this.title = title; this.content = content; this.writer = writer; } 어노테이션을 사용할 경우 '객체의 모든 필드'를 가지는 생성자를 자동으로 생성해준다. ( 위와같은 불필요한 코드를 줄일 수 있다.) ● @NoArgsConstructor 객체의 어떤 필드도 가지지 않는 기본 생성..