Front/Vue

⚡ 개요개발 단계에서 발생한 session 이슈가 있어서 해당 내용을 정리 하려고 한다. 운영 단계에서는 발생할 가능성이 적은 내용이며 보안상의 이슈이기 때문에 간단하게만 정리하고 넘어가려고한다. 특정 데이터를 통신 과정에서 유지하기 위해서 session, cookie, token 등 여러가지 방법이 존재한다.Spring boot session 을 검색만 하더라도 어떻게 구현을 해야하는지도 나온다. 물론 개념적으로 더 알면 좋지만 검색을 하고 따라만 하더라도 개발자 도구에서 쿠키를 확인 해보면 session ID가 들어오고 유지되는 부분을 확인 할수가 있다.로그인 페이지를 구현하고 테스트 하는 과정에서 계속 session에 저장되지 않고 새로운 session이 생기는 이슈가 발생해서 내용을 정리하게 되었..

⚡ 개요spring boot + vue 프로젝트를 진행할 때, vue에서 router를 설정했지만, 새로고침을 하는 순간 404 에러 페이지가 로드되는 이슈에 대해서 내용 및 수정 방법에 대해서 정리를 하려고 한다. 일단 기본적으로 404가 나오는 이유에 대해서 설명하자면 새로고침을 하는 순간 spring에서 servelt에 맵핑된 주소를 찾는데 없기 때문에 404가 발생하는 것이다. 단순하게 컨트롤러에 전부 맵핑을 해준다면 해결되는 이슈이기도 하다. Vue는 SPA이고, index.html 페이지 내에서 모든 동작이 이뤄지도록 되어있다. 페이지 이동을 몇 번을 하던 결국은 index.html 페이지 하나에서 동작한다고 보면 된다. ⚡ History Modevue 공식 문서를 확인 해보면 History ..

⚡ 개요최근에 프로젝트를 하면서 신규로 적용했던 내용을 정리하려고 한다. 일단 공식 가이드 문서가 순차적으로 잘 되어있기 때문에 공식 가이드를 먼저 보는 걸 추천한다 (링크)  공식 가이드 문서가 잘 되어 있기때문에 설치에 대한 내용은 보고 따라 하는 게 편하다. vue cli를 통해서 라이브러리를 추가하는 방법도 존재하고, 이미 프로젝트가 존재하는 경우에도 추가하는 방법이 자세히 설명되어 있다. ⚡ 사용 이유공식 가이드에 따른 장점과 내가 적용을 하면서 느낀 사용 이유에 대해서 정리를 해놓으려고 한다.  📗 공식 가이드 문서 기준 사용 이유 (링크)1. 지원 범위가 넓다.React를 기준으로 가이드가 작성되어 있지만 다른 FrontEnd 프레임 워크를 지원 하고 있다. 2. HTTP 네트워크 통신아마..

⚡ 개요 vue 를 사용하는데 있어서 기본적인 사용 방법에 대해서 정리를 하려고 한다. 프론트쪽 개발도 간간히 같이 하고 있는데 jsp를 개발할때와는 다르게 내 기준으로는 작업을 하는데 이해가 안되는 부분도 많고 왜 이렇게 동작하는지 이해가 안가는 부분이 많아서 최근에 백엔드 공부와 별개로 정리 하면서 공부를 하고 있다. ⚡ 라이브러리 정리 📒 Vuex 애플리케이션의 상태를 효율적으로 관리하기 위한 중앙 집중식 저장소다. Vue Store는 일반적으로 Vuex라는 Vue.js 공식 상태 관리 라이브러리를 사용하여 구현된다. (vue3.x 에서는 공식 상태 관리 라이브러리가 pinia로 바뀌었다.) Vuex를 사용하면 애플리케이션의 모든 컴포넌트에서 전역으로 상태를 관리할 수 있으며, 상태의 변화를 추적하..

⚡ 개요 회사에서 프로젝트를 개발하면서 vue.js를 처음 사용하게 되었다. 처음에는 아무것도 모르고 사용을 했고 어느 정도 사용했을 때는 내가 잘 알고 사용하는 것이 맞는가? 이렇게 사용해도 되는 건가? 에 대한 의문이 들었고 vue에 대해서 기본적인 내용과 추가적으로 내가 개발하면서 느꼈던 내용들을 정리해놓으려고 한다. ⚡ vue란 무엇인가? 탄생 배경 및 기본적인 개념 Vue.js는 Evan You가 개인적으로 개발하면서 AngularJS와 React.js를 참고하여 만든 자바스크립트 프레임워크이다. Vue.js의 가장 큰 특징은 간결한 문법과 컴포넌트 기반 아키텍처, 그리고 반응형 UI를 제공한다는 것이다. Vue.js는 MVVM(Model-View-ViewModel) 아키텍처를 기반으로 한다. ..