하루에 한걸음씩 꾸준히

목차   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..

목차watch vs computedwatch 로 구현소감기존 검색창을 computed로 구현을 했었더니 2page에 있는 데이터는 조회가 안되었다. watch 와 computed 모두 반응형처리이지만 사용의 목적이 다르니 차이점을 확인하고 watch로 구현해보고자한다. watch vs computed 항목computedwatch언제 실행?의존값이 변경될 때 자동계산의존값이 변경될 때 콜백 실행목적?값을 계산해 리턴값이 바뀔때 어떤 동작을 실행(API호출)결과저장?반환된 값 사용결과 직접 저장 or 외부에 반영 필요캐싱있음(의존값이 같으면 다시 계산x)없음, 무조건 실행예시filterdList 같은 UI 필터링실시간 검색 API 호출 //computedconst keyword = ref('')const f..

목차로그인 기능 구현회원가입 기능구현소감지난 글에서 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..

구간 합의 핵심 이론구간 합 알고리즘을 활용하려면 먼저 합 배열을 구해야한다. S[i] = A[0] + A[1] + A[2] + A[i - 1];S[i] = S[i - 1] + A[i]; 이후 i 에서 j 까지 구간 합을 구하는 공식은 다음과 같다.S[j] - S[i - 1];public static void main(String[] args) throws IOException { BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(System.in)); StringTokenizer stringTokenizer = new StringTokenizer(bufferedReader.readLine()); ..

목차소개컴포넌트생성emitprops, computed이번 포스팅에서는 App.vue에 복잡하게 얽혀 있는 코드를 자식 컴포넌트로 분리하여 보다 간결하고 유지보수가 쉬운 구조로 개선해보겠다. 코드 분리를 통해 가독성을 높이고, 재사용성을 강화하는 방법을 함께 알아보자.컴포넌트 생성 one more step To-Do List Add This field cannot be empty Empty todoList {{ index + 1 }}, {{ item.subject }} ..

목차소개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 ..

이번 포스팅에서는 강의를 보며 직접 구현한 To-do List 프로젝트를 정리해보려 한다. 강의에서 배운 개념과 실제 구현 과정을 하나씩 따라가며 기록해보겠다. one more step To-Do List Add {{ index + 1 }}, {{ item }} HTML 특성상 submit을 할경우 리프래쉬되는데, 이를 방지하고자 submit.prevent를 사용하였다. methods 코드에서 e.preventDefault를 사용할 수 도있지만 간결한 코드를 지원한다.데이터 양방향 바인딩을 위해 inputBox에 v-model을 연결 시켰다. 입력한 데이터가 하단에 추가되게끔 할 예..

이번 포스트는 컴포넌트에 관해 기록해 보도록 하겠다. 이론적인 내용들은 추후에 추가하기로 하고, 작성한 코드들이 어떻게 페이지에 랜더링 되는지 진행해보겠다.Components one more step {{ name }}Vue 컴포넌트내엔 template(html), script(javascript), style(css) 이 들어가게된다.이번에는 Option API가 아닌 Compositon API를 사용한다.export 내 setup 함수를 만들고 return 값에 변수 'name'를 적어준다.html에 바인딩하기 위해선 중괄호를 사용한다.Fragment one more step {{ name }}Vue 2버전에서는 표현하고자하는 태그에 div 로 감싸줘야했는데, 3버전에서는 이 부분은 넘어가도된..