Vue

Vue3 Axios 사용 시 CORS + 504(Gateway Time-out)

개요 vue를 통해 front-end측 로직 처리 중 이상한 오류가 발생하여 공유한다. api 호출 시 특정 상황에서 CORS 오류가 발생하는데, CORS 오류와 함께 504 에러가 발생하는 것이다. 서버측 CORS 설정은 한참전에 완료되었기 때문에 다른 문제라고 바로 생각이 들어서, CORS + 504 에러가 발생하는 경우로 검색해봤다. 아래의 블로그가 나와 비슷한 현상이 발생하는것 같아서 적용해보니 해결할 수 있었다. 504 (Gateway Timeout) 에러 해결 (AWS EB, Node.js) 또한 CORS와 함께 504 에러가 발생하는 이유는 아래의 글에서 확인할 수 있었다. https://github.com/kubernetes/ingress-nginx/issues/2134 정리 문제의 원인은..

vue3+typescript+vite 환경에서 jquery 사용

개요 SSAFY 2학기 특화 프로젝트에서 front-end를 담당하며 생긴 trouble shooting 로그를 남겨본다. 책을 넘기는 듯한 ui를 구현하기 위해 turn.js 라이브러리를 활용했으나, 환경적인 문제로 인하여 jquery 적용에 어려움을 느꼈다. 이를 해결한 방법을 정리해보자. 환경 vue ^3.3.0 vuetify ^3.0.0 typescript vite JQuery 적용하기 먼저 JQuery 적용 및 turn.js 사용을 위해 js 파일을 다운로드 한 후 index.html 파일에 추가해줬다. 여기까지 설정 후 바로 npm run dev 명령어를 통해 실행 시 정상적으로 표시되지만 빌드하여 서버에 업로드 시 아래의 오류 발생하며, turn.js 라이브러리가 정상 적용되지 않은것처럼 표..

VResponsive.sass net::ERR_ABORTED 404 (Not Found)

개요 vue project 개발 중 로컬에서 앱 시작 시 오류 발생하며, 처음 페이지 로딩 시 콘솔에 아래의 로그가 표시됨. GET net::ERR_ABORTED 404 (Not Found) chunk-GGIT7KZK.js:46 GET net::ERR_ABORTED 404 (Not Found) chunk-GGIT7KZK.js:49 GET net::ERR_ABORTED 404 (Not Found) 오류 환경 OS : Windows 10 Enterprise Vue 3.3.0 + Vuetify 3.0 + typescript npm run dev 실행 오류 내용 분석 로그를 읽어보면 vuetify의 sass 파일을 찾지 못해 페이지를 보여주지 못하는 것으로 보인다. 관련 내용으로 구글링 해보자. 오류 확인 관련..

vuetify3에서 v-window-item 하위 컴포넌트에 props 전달이 되지 않을때

개요 프로젝트 진행 중 vuetify의 VWindowItem 컴포넌트를 사용했었는데, 첫번째 VWindowItem을 로딩할 때 props 전달이 정상적으로 이뤄지지 않는 경우가 있었고, 이를 어떻게 해결했는지 공유하고자 글을 작성합니다 문제점 확인 소스코드의 경우, v-window-item 컴포넌트의 value가 변경되면 표시할 하위 컴포넌트가 변경되는 방식인데 v-window-item의 value에 해당하는 컴포넌트가 최초 1회 실행시에는 데이터를 표시하지 못하는 현상이었습니다. 컨벤션이 조금 다른부분은 양해해주길 바랍니다.. 아래의 화면을 보면 문제점이 쉽게 이해가 될 것이다. 최초로 마커를 클릭했을 때 단지 정보를 표시하지 못하고, 이후부터는 정상적으로 동작하는 것을 볼 수 있다. 소스 코드 분석 ..