개인프로젝트10 [개인블로그] 14.SpringBoot 테스트 컨트롤러로 vue.js 통신하기 1.TestController.java test/1 post방식으로 controller를 작성해서 vue axios로 통신을 해보았다. CORS 오류 발생 . ※ CORS란 : 다른출처의 자원을 공유할 수 있도록 설정하는 권한 체제를 말한다. CORS를 설정해주지 않거나, 제대로 설정해주지 않으면 공유 불가. CORS 에러 해결방법 @CrossOrigin("*") => 모든 요청에 접근 허용 (보안에 취약) 2. WebConfig에 CORS 설정해주기 (특정 도메인으로 오는 요청에 모두 CORS를 적용하고 싶다! 할때 해당 설정을 해주면 된다.) WebConfig.java 파일을 만들어준다음에 위와같이 세팅을 해준다. -> 이렇게 세팅을 하면 따로 @CrossOrigin 어노테이션을 붙이지 않아도 된다... 2021. 7. 20. [개인블로그] 12.SpringBoot 환경 설정 하기 프론트 단은 Vue.js 백엔드 단은 Spring-Boot 를 이용하려고 한다. 회사에서는 Intellij를 사용하는데 개인으로 쓰려면 유료인것도 있고 그냥 이클립스(STS)를 사용해서 Spring Boot 프로젝트를 생성해보자. 1.STS 설치 https://spring.io/tools/ Spring Tools 4 is the next generation of Spring tooling Largely rebuilt from scratch, Spring Tools 4 provides world-class support for developing Spring-based enterprise applications, whether you prefer Eclipse, Visual Studio Code, or T.. 2021. 7. 20. [개인블로그] 10.Vue router 설정 현재까지 완성한 헤더, 풋터입니다. 이제 Vue 라우터 설정을 하고 메뉴 클릭시 화면 전환까지 진행해보겠습니다. - 준맛 - 찐맛 - 유튜브 메뉴별 src/views 밑에 각 디렉토리들을 만들어줬고, 그 밑에 index.vue 를 만들어줬습니다. 그리고 router/index.js 에서 3개의 화면들을 라우터에 등록해줬습니다. 라우터에 해당 화면들의 path를 선언해주면, 실제로 해당 경로 url을 호출하면 화면이 뜨는 것을 아래와 같이 확인할 수 있습니다. 메뉴클릭 시 화면전환 1. 헤더 메뉴 a태그에 href로 전환될 화면 경로를 선언해준다. 2. 메뉴 클릭해보면 정상적으로 화면이동이 됨을 확인할 수 있다. 2021. 7. 19. [개인블로그] 8.배민 폰트 다운로드 받아 Vue.js 적용하기 우아한형제들에서 폰트 다운로드 https://www.woowahan.com/ 우아한형제들 좋은 음식을 먹고 싶은 곳에서~! 우아한 사람들이 모여 우와하게 일하는 '우아한형제들'입니다. www.woowahan.com 다운로드하면 ttf 파일로 저장이 되는데, 해당 파일들을 프로젝트 특정경로에 위치 시킨다. style에서 @font-face를 설정해주고 실제 폰트 적용할 클래스에 font-family: 'font-face에서 적용한 font-family'를 적용해준다. 배민에서 다운로드 받은 도현체 가 적용됨을 확인할 수 있다! 2021. 7. 18. 이전 1 2 3 다음
