ALL 29

[Vue.js] Vue2에서 컴포넌트 교체 없이 중첩(연속) route 만들기(슬래쉬가 %2F 16진수로 나오는 에러 해결)

[사건의 발단] Git같은 서비스를 개발중이라 디렉토리 들어갈때마다 n개의 라우트 경로를 생성해야 될 일이 생겼다. 일반 string으로 'testdir1/testdir2/testdir3' 으로 넣으면 'testdir1%2Ftestdir2%2Ftestdir3' ㅇ..이래 ㅋ 구글링해도 %2F에 관해선 거~~~의 안나왔다. 그나마 route 공홈에서 언급을 했는데 이런말을 한다. 심지어 %2F 가 들어가면 Url 복붙해서 다른페이지로 열었을때 HTTP404 Bad Request 떠서 더 안됨 [삽질의 시작] route 공식에서는 중첩라우트 만드는 방법에 대해 이렇게 설명한다. https://router.vuejs-korea.org/ko/guide/essentials/route-matching-syntax...

Develop/Vue 2023.02.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