Front37 IntelliJ에 SpringBoot + Vue.js 설치 및 연동 - 2 상황 저번 포스팅에서는 vue.js를 IntelliJ에 설치를 했다면,이번에는 backend 서버와 frontend서버를 연결하여 데이터 주고 받기를 해볼 차례다. 설치 포스팅 👇 2023.04.19 - [Programming/Vue] - IntelliJ에 SpringBoot + Vue.js 설치 및 연동 - 1 적용 ✔️. backend 서버와 frontend 서버를 연결하여 데이터 주고 받기 Spring Boot와 Vue.js 설치를 했으니, 이제 연동을 시켜보자. 📌 Proxy서버를 활용하여 연동할 수 있다. Spring Boot(백엔드 서버)와 Vue.js(프론트엔드 서버)를 연결하기 위해 중계인인 Proxy가 필요하다. 나같은 경우에는 백엔드는 8081 (application.properties.. 2023. 4. 19. IntelliJ에 SpringBoot + Vue.js 설치 및 연동 - 1 상황 이제 Back API는 마무리 되었고, Front 개발 차례이다. 내부회의에서 Vue와 React 중 어떤 것을 고를지 결정하기 전에 프로젝트 내부에 각각 세팅을 해보고, 비교해서 결정하기로 했다. 적용 이 프로젝트 세팅은 아래 사항들을 이미 완료했다고 가정하고 시작한다. 1. JAVA(v11) 설치 2. Node.js 설치 3. Git 설치 4. Spring Boot 세팅 완료 ✔️1. terminal Shell path 변경 사진과 같이 터미널의 shell path를 Git파일에 들어가 bin에 위치한 sh.exe 파일을 선택해주고, -login -i 를 입력한다. IntelliJ 툴을 껐다 켜면 Git bash 터미널 적용이 완료된다. Shell path: C:\Program Files\Git.. 2023. 4. 19. [Thymeleaf] 타임리프 삼항 연산자 삼항 연산자 타임리프에서 제공하는 삼항연산자는 우리가 익히 알고있는 일반적인 삼항연산자 뿐만 아니라, Elvis 연산자, No-Operation 도 사용할 수 있다. back단에서 넘겨 받은 데이터에 따라 적절히 사용하면 된다. 적용 ✔️1. 삼항 연산자 📌 일반적으로 널리 사용되는 삼항 연산자이다. 형태를 살펴보자. -> 넘겨 받은 data가 true면 data 출력, false면 '데이터가 없음'을 출력한다. ✔️2. Elvis 연산자 📌 Elvis 연산자는 data가true면해당 값을 출력하고 false면 뒤에 있는 값을 치환하여 출력한다. ✔️3. No-Operation : _ 사용 📌 문자 그대로 작동하지 않는 것이다. 마치 타임리프가 실행되지 않는 것 처럼 말이다. data가 true면 dat.. 2023. 3. 3. [Vue, Spring Boot]Proxy error: Could not proxy request ~ 상황 그동안 내가 맡았던 프로젝트는 front와 back이 뚜렷한 경계없이 Spring boot, JavaScript를 사용하여 한 프로젝트 내에서 풀스택으로 개발을 진행했다. 올해부터는 회사에서 내부 프로젝트를 진행하면서, front-end와 back-end의 구분을 나누게 되었다. back과 front를 분리하여 개발을 진행하는 것이 처음이다보니, 생각지도 못한 곳에서 에러가 발견되곤 했다. (글에 본격적으로 들어가기에 앞서, 나는 Vue2에 대한 전반적인 내용만 겉핥기식으로 이해하고 있는 상황이라서 잘못된 내용이 있을 수도 있다. 문제 있을 경우 살포시 알려주시면 더 공부해보겠다.) 환경 front : vue 2 (8080 포트사용) back : Spring Boot (8081 포트사용) IDE :.. 2023. 2. 28. [jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기 jQuery Validation form 입력 데이터의 유효성을 검증하는 것은 아주 중요한 일이다. jQuery에서 제공하는 validate 플러그인은 유효성 검증을 더욱 쉽게 해주도록 도와준다. 사용자 입장에서 form에 데이터를 입력하고 submit을 했을 때, 개발자가 일일히 걸어놓은 유효성 검증을 거쳐 통과못한 경우에 계속해서 alert창이 뜬다면 번거로울 것이다. validate플러그인을 이용하면 사용자가 빠르게 체크할 수 있도록 시각화해주고 onkeyup, onfocusout을 이용하여 실시간 유효성 검사 가능도 가능하다. 이 외에도 다양한 기능을 제공하니 공식문서를 확인하여 참고해야겠다. https://jqueryvalidation.org/ jQuery Validation Plugin | F.. 2023. 2. 28. jQuery를 바닐라 JS(Vanilla JS)로 변환하기 Pure Javascript 상황 프로젝트를 진행하면서 스크립트를 짤 때, 나는 대부분 jQuery를 이용했다. 가독성이 좋고, 편하다는 이유로 순수 자바스크립트로 코드를 작성하는 것을 미루고 있었다. 순수 자바스크립트로 작성하는 비중을 늘리기 위해, jQuery를 바닐라 JS(Pure JS)로 변환해보려고 한다. 적용 ✔️1. 선택자( Selector ) 1) 단순 선택자 DOM 요소를 선택하는 것은 가장 기본적인 요소 중 하나이다. $(selector) -> querySelector() 또는 querySelectorAll() // jQuery(.className모두 선택) $(".className"); //.className의 첫번째 인스턴스 선택 document.querySelector(".className"); //.clas.. 2023. 2. 16. 이전 1 2 3 4 5 ··· 7 다음
