리고니

Vue.js 와 Spring 간 API를 통해 서버와 클라이언트 간 연결을 하던도중 위와 같은 에러가 발생했다. 여러 이유가 있겠지만 구글링을 통해 해결책을 확인하였다. 백엔드 단에서 클래스를 생성하여 클라이언트단에서 요청이 오는 모든 헤더와 메소드 및 포트번호를 허용한다 스프링을 사용하는 경우 컨트롤러에서 @CrossOrigin 를 설정한다

Spring Boot에서 JPA를 사용할 때 아래와 같은 에러가 발생하였다. Null value was assigned to a property [class com.example.teamproject.data.Menu.stock] of primitive type setter of com.example.teamproject.data.Menu.stock; nested exception is org.hibernate.PropertyAccessException: Null value was assigned to a property [class com.example.teamproject.data.Menu.stock] of primitive type setter of com.example.teamproject.dat..

이대로 시작하면 vue를 통해 클라이언트 쪽 페이지 구성이 바뀔때마다 build 해야하고 , 그 결과 또한 static 으로 이동하는 번거로움과 서버를 2개 켜야되므로 vue.js dev서버에 proxy 설정을 해야한다 ! 아래 두 명령어를 통해 설치하자

모든 설치가 완료되었으니 Spring 프로젝트 경로내 Vue 파일을 설치하자 ! 경로는 src 에 설치해주면된다 npm 을 통해서 설치해보자 정상적으로 설치가 되었다. src 경로에 설치가 되었는지 확인해보자

Backend 단에는 Spring Frontend 단에는 Vue.js 를 활용하여 웹사이트를 좀 더 생동감 있게 이쁘게 꾸미고 싶었다. 이클립스에서는 Vue 가 자동지원이 안되기 때문에 마켓을 통해 설치하자 1. Marketplace 를 통해 Vue 를 설치해주자 2. Node 또한 설치해줘야 하고 버전을 확인해보자 3. CMD 를 통해 Vue CLI 를 설치하면 된다 ! npm i -g @vue/cli 또는 npm install -g @vue/cli 를 입력한다 4. 마지막으로 환경변수를 작성해준다. 5. 버전 확인

Spring Security 를 통해 일반 사용자가 접근 또는 작성 가능한 페이지 , 관리자 만 접근 또는 작성 가능한 페이지 , 인증되지 않은 외부 HTTP 접속 차단 ( CSRF ) 등을 배웠다. 현재는 role 에서 user ( 일반 사용자 ) 라서 권한이나 제한을 두었다 ( 사용자 추가 등 ) role 에서 admin 인 계정을 이용해서 로그인하면 관리자 권한을 받아 사용자 추가 등이 가능하다. 현재는 결과 페이지만 설명드렸지만 , 다음시간에는 처음부터 하나씩 원리를 설명하도록 하겠습니다.

위 사진처럼 templates 에는 동적으로 동작하는 html static 은 정적이므로 이미지, CSS , JS 등이 들어와야 된다 !

전 시간에는 프래그먼트를 넘겼다면 이번에는 파라미터를 넘겨보자 1 ) fragement 를 부를 때 parameter를 넘겨보자 2 ) 다른 html 파일에 head(' ') 값을 입력해보자 3 ) 입력한 파라미터로 태그내에 받아왔다 !

Thymeleaf 의 문법 중 정말 좋은점은 중복되는 소스를 하나의 프래그먼트로 만들어 중복을 최소화할 수 있다. ex ) 중복되는 소스코드 , 홈페이지 전체적으로 사용되는 상단바 , 메뉴바 등 1 ) th:fragment 문법을 사용해 head 태그 전체 코드를 프래그먼트로 만든다. 2 ) 다른 html 내 head 태그에 프래그먼트를 받는다 3 ) head 태그에 자동적으로 입력받은 프래그먼트의 소스가 입력되었다 !

전 시간에는 간단한 SQL 문 사용을 위해 Annotation을 사용하였다면, 이번에는 복잡한 쿼리를 처리할 xml 을 사용해보자 ! 1) 마찬가지로 Mapper 패키지에 interface 를 추가한다 2) Resource 폴더에 폴더를 추가후 xml 을 추가하여 준다. 3) xml 작성 namespace => 해당 클래스 이름 경로 설정 select id => 해당 클래스 함수 작성 resultType => SQL문 결과를 작성 4) application.properties 파일 수정 5) service 패키지 추가후 설정 6) Controller 에서 사용해본다. 7) 확인