Develop 22

[Vue.js] Vue2 axios proxy 설정하기

8081에서 spring boot로 띄운 8080서버로 api를 요청해야한다 이때 cors 에러가난다 해결방법은 vue.config.js... devServer: { // historyApiFallback: true, proxy: { '/user*': { target: process.env.VUE_APP_API_URL, changeOrigin: true, }, '/repo*': { target: process.env.VUE_APP_API_URL, changeOrigin: true, }, },user로시작하는 모든 요청에 env파일에 요청한 url 로 들어가게해놓고 응답올때도 마찬가지로 cors를 뚫기 위해 changeOrigin true로 해줬다 api 설정 파일에서function repositories..

Develop/Vue 2023.02.14

[SpringBoot] RestTemplate을 이용하여 http 요청보내기

1. 의존성 추가 org.apache.httpcomponents httpcore 4.4.15 org.apache.httpcomponents httpclient 4.5.12 2. GetMapping : 헤더에 토큰을 받아 전달하는 경우 @GetMapping("repositories/sources") public ResponseEntity sources(@RequestHeader(value="Authorization") String acc_tk) throws Exception { HttpHeaders httpHeaders = new HttpHeaders(); httpHeaders.setContentType(new MediaType("application", "json", Charset.forName("UTF..

Develop/Spring 2023.02.12

[SpringBoot] jar파일 생성 및 실행

jar를 실행하는 환경에는 maven, nodejs, jdk 등 본인이 필요로 하는 환경이 사전에 구성되어있어야 한다. 1. jar 파일 생성 명령어 pom.xml이 있는 경로에서 mvn package 명령어 입력 mvn package target폴더 밑에 [프로젝트명].0.0.1.jar 이런식으로 생성됨 오류나는 경우 더보기 ⬇️ 더보기 오류나는 경우 오류 문구에 test 관련 오류가 있다면 mvn package -DskipTests 2. jar 실행 명령어 java -jar 파일명.jar 또는 java -jar 경로/파일명.jar java -jar target/test.0.0.1.jar 3. 또 오류가 난다면 mvn package를 입력했던 경로에서 mvn clean -> mvn package 후 다..

Develop/Spring 2023.01.12

[Vue.js] 자바스크립트 Assignment to property of function parameter 'res'.

함수의 매개변수에 재선언을 하지 말라는 의미 함수의 매개변수가 참조형인경우 같은 주소값을 가지고 있기때문에 참조형의 프로퍼티를 수정하면 원본이 변하게 됨 이는 개발자가 의도치 않은 side Effect를 만들 가능성을 높힘 바꾼 코드 const sdata = res.data; sdata.created_date = sdata.created_date.replace('T', ' '); sdata.created_date = sdata.created_date.replace(-1, -4); this.data = sdata; console.log(sdata); [참고] https://velog.io/@dregonc/%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98%EB%A1%9C-%EB%B0%9B%E..

Develop/Vue 2023.01.10

[Vue.js] 빠르고 쉽게 axios 로 가져온 데이터 v-for를 사용해 Table에 넣기

table 구조 No 아이디 사용자 주소 이메일 권한 가입일자 강제탈퇴 {{idx+1}} {{ row.id }} {{ row.name }} {{ row.address }} {{ row.email }} {{ row.role }} {{ row.created_date }} 탈퇴 - 중요한 포인트 - (row, idx) in [불러온데이터] - key는 필수 - 여기서 row는 행이고 지정된 값이니 임의로 바꾸지 말 것 - idx는 데이터 외의 테이블의 인덱스값이다. {{idx+1}} 부분을 보면 어떤 느낌인지 알거임 script 부분 export default { name: 'AdminView', components: { }, computed() { }, mounted() { this.getUsers(); }..

Develop/Vue 2023.01.10

fetch 함수로 API 호출 간단 구현하기

한 개의 html 파일에서 script를 넣어 fetch함수를 이용한 api 호출을 해보았다. test용으로 호출할 수 있는 api 사이트 중 지브리스튜디오 api 사이트가 있어 사용해보았다. https://ghibliapi.herokuapp.com/#section/Use-Case Studio Ghibli API ghibliapi.herokuapp.com html 파일 생성하고 아래 코드를 입력 후 실행시켜보자 클릭 [실행 결과] 클릭 버튼을 누르면 위의 결과 화면처럼 표시된다. F12(개발자 도구)를 눌러 콘솔창에서 응답온 api 형식도 볼 수 있다. [코드 설명] - script에 getGhibli 함수를 생성하였다. - config를 정의하여 URL 요청시 필요한 설정을 할 수 있다. 주로 head..

Develop/JavaScript 2022.11.17

[VSCode] vscode에서 Spring Boot Maven 프로젝트 생성하기(환경구성)

1 프로젝트 생성하기에 앞서 필요한 확장팩 세개를 설치해준다. 단축키 Ctrl + Shift + X를 눌러 마켓플레이스를 연다. Java Extension Pack (Microsoft) : vscode에서 Java 응용 프로그램을 작성, 테스트 및 디버그하는 데 도움되는 확장팩 Spring Boot Extenstion Pack (Pivotal) : Spring Boot 애플리케이션 개발 및 배포를 위한 확장팩 Lombok Annotations Support for VS Code (Gabriel Basilito Brito) : Java 라이브러리로, 반복되는 getter, setter, toString 등 반복 메서드 작성 코드를 줄여줌 확장팩 설치를 완료했다면 이어서 프로젝트를 바로 생성해보도록 한다. ..

Develop/Spring 2022.11.16

[SpringBoot] Thymeleaf 문법 정리

[기본 사용법] 사용시 html 태그에 를 삽입한다. tag 사이와 tag 안에서의 문법이 다르다. 아래 예시를 참고하자. [[${data}]] tag는 반드시 닫아야 한다. HTML 태그 중에서 th 태그를 이용해서 데이터를 표현한다. ⭐ th 기본 문법 - 표현식 변수 표현식 : ${ } 선택 변수 표현식 : *{ } 메세지 표현식 : #{ } 링크 URL 표현식 : @{ } 조각 표현식 : ~{ } - 문자연산 문자 합치기 : + 리터럴 대체 : | hello ${data} | - 불린연산 Binary operators : and, or Boolean negation : !, not - 조건연산 if-then : (if) ? (then) if-then-else : (if) ? (then) : (el..

Develop/Spring 2022.11.15