본문 바로가기

분류 전체보기18

[Spring] Swagger 설정 중 Failed to start bean 'documentationPluginsBootstrapper’ 오류 발생 개요 Swagger 설정 중 Failed to start bean 'documentationPluginsBootstrapper’ 오류가 발생했습니다. 사용하는 Swagger 버전은 2.9.2 버전입니다. 현재 스프링 버전 2.7.2를 사용하고 있는데 2.6버전부터 matching strategy의 기본값이 PathPatternParser로 변경되었다고 합니다. PathPattern Based Path Matching Strategy for Spring MVC The default strategy for matching request paths against registered Spring MVC handler mappings has changed from AntPathMatcher to PathP.. 2022. 8. 13.
[Nuxt] Nuxt3 TypeError: Cannot read properties of null (reading 'parentNode') 문제 해결하기 개요 Nuxt3로 프론트엔드를 개발하던 중 다음과 같은 에러가 발생했습니다. TypeError: Cannot read properties of null (reading 'parentNode') 루트 페이지가 아닌 다른 페이지에서 새로고침을 한 다음에 vue-router를 사용(to 이용)할 때 해당 오류가 발생했습니다. 오류에 대한 자세한 내용은 nuxt3 issue에 있습니다. Nuxt3를 정적 웹 페이지 생성기로 사용하고 있습니다. SSR을 사용할 때는 아직 해당 이슈가 해결되지 않은 것으로 보입니다. 해결 방법 Nuxt3에는 정적 호스팅을 하는 2가지 방법이 있습니다. Prerendering client-side only rendering client-side only renderin.. 2022. 8. 11.
[Nuxt] Nuxt3 + Vuetify 환경에서 vee-validate + yup으로 입력값 검증하기 개요 프론트에서도 입력값에 대한 검증을 하기 위해 vee-validate와 yup을 사용했습니다. vee-validate는 vue.js에서 form validation을 편하게 해주는 도구입니다. yup은 유효성 검사를 위한 스키마 빌더입니다. vuetify가 기본으로 제공하는 rules로도 유효성 검사를 할 수 있지만 일일히 rules를 만들기 복잡하고 관리하기 어렵기 때문에 vee-validate와 yup을 통해 유효성 검사를 간편하게 해보겠습니다. 기본적인 사용법과 vuetify랑 같이 사용하는 방법을 알아보겠습니다. 환경 "devDependencies": { "nuxt": "^3.0.0-rc.6" }, "dependencies": { "@mdi/font": "^6.9.96", "axios": "^.. 2022. 8. 10.
[Nginx] CORS 설정 개요 CORS 설정을 하지 않아서 배포한 웹 사이트에서 백엔드 API로 접근을 못하는 문제가 발생했습니다. 프론트 개발시에는 Vite를 이용하여 프록시를 설정하였고, 모든 요청이 프록시를 경유하도록 설정하였습니다. 서버와 서버 사이의 요청에는 CORS가 걸리지 않습니다. 프론트는 Cloudflare Pages를 사용하여 정적 웹 페이지 형태로 배포를 했고 Cloudflare Pages에서 _redirects 파일을 통한 프록시를 아직 지원하지 않기에 서버쪽에서 설정을 하였습니다. 현재 백엔드는 Nginx에 리버스 프록시를 설정해두었기 때문에 Nginx에 CORS 관련 내용을 설정하였습니다. 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS) 추가 HTTP 헤더를 사용.. 2022. 8. 9.
[Nginx] SSL, 리버스 프록시 설정하기 개요 현재 프론트엔드 애플리케이션의 경우 Cloudflare Pages를 이용하여 배포해 사용중입니다. 프론트엔드에서 리버스 프록시 서버를 통해 백엔드 API에 접근할 수 있도록 하려고 합니다. 리버스프록시 서버에는 SSL을 적용하고 하위서버들은 SSL을 적용하지 않은 상태로 통신할 수 있습니다. 환경 Azure VM Ubuntu 20.04.4 LTS nginx/1.18.0 (Ubuntu) Cloudflare에 설정된 도메인 Nginx 설치 sudo apt update sudo apt-get install nginx /etc/nginx/경로에 nginx 관련 파일들이 설치됩니다. nginx -v 명령어를 사용해 버전을 확인할 수 있습니다. Certbot 이용하여 인증서 발급 certbot 홈페이지에 들어.. 2022. 8. 8.
[Linux] Swap 메모리 설정 개요 토이 프로젝트를 할 때 AWS나 Azure 같은 클라우드 서비스를 사용할 때가 많습니다. 무료로 제공하는 인스턴스의 경우 메모리 용량도 작고, 그렇다고 사양을 올리려고 하면 가격이 부담되는 경우가 많습니다. 이 때 느리긴 하지만 부족한 메모리를 Swap 메모리 설정을 통해 RAM이 부족한 상황을 해결할 수 있습니다. Swap 메모리 하드디스크 공간의 일부분을 메모리로 사용하는 방법입니다. 하드디스크를 사용하는 만큼 기존 메모리보다 속도가 현저히 떨어집니다. 환경 Azure VM Ubuntu 20.04.4 LTS Swap 메모리 설정 보통 Swap 파일의 용량은 기존 메모리의 1.5~2배 정도의 용량을 권장하고 있습니다. fallocate나 dd 명령어를 이용하여 스왑 파일을 생성할 수 있습니다. #.. 2022. 8. 8.