문제⛔ Front End(Nuxt.js)와 Back End(Spring boot)를 나누어 개발하다 보면 API 호출 시 CORS 정책에 따른 API 호출 불가 메세지가 발생합니다. 개발 환경에서 이를 우회하기 위한 설정을 알아보겠습니다. Node.js 서버(localhost:3000) Tomcat 서버(localhost:8080) CORS란❓ CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 발생하는 보안 상의 제약을 우회하기 위해 도입된 웹 브라우저의 정책입니다. 웹 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)를 따르며, 이 정책은 한 출처(origin)에서 로드된 문서나 스크립트가 다른 출처의 자원에 접근하는 것을 제한합니다. 출..
분류 전체보기
Nuxt.js를 사용하면 편한점이 많이 있는데 이번에는 components를 사용하는 법을 알아보겠습니다. 실습순서 components 폴더 생성 component 파일 생성 기본 component 호출 다른 호출 방법 components 폴더 생성 root 아래에 components 폴더를 생성합니다. Nuxt를 설치하게되면 기본 패키지 구성으로 폴더가 생성되어 있을겁니다.(~/components) component 파일 생성 테스트를 위해 components/dept1/dept2/component-test.vue 생성 ~/components/dept1/dept2/component-test.vue 컴포넌트 입니다. 기본 component 호출 pages에 파일을 생성한 후 component를 호출합니다..
문제❓ Nuxt.js를 이용한 Highchart 예시를 만들면서 메인화면을 구성하던 도중 pages의 폴더와 파일 등을 자동으로 파악해 동적으로 변화는 메인화면을 구현하기 위해 psges에 존재하는 모든 파일 정보를 가지고 오고 싶습니다. 하지만 Nuxt.js는 SSR프로젝트다 보니 client내에서 pages의 파일 정보를 가지고 올 수 없었습니다. 해결방법❗ async asyncData()를 이용해 SSR시 require.context('~/pages', true, /.vue$/);를 호출 해 .vue 확장자를 가진 모든 파일을 가지고 옵니다. async asyncData란❓ Nuxt.js 2에서 asyncData는 페이지 컴포넌트에서 사용할 수 있는 특별한 메서드입니다. 이 메서드는 Nuxt.js의..
Docker를 사용하면 어느 환경에서는 독립적인 환경으로 프로그램을 쉽게 설치할 수 있습니다. 이번에는 MariaDB를 설치 하고 데이터를 저장하는 방법까지 보도록 하겠습니다.😊 1. 원하는 MariaDB Image를 다운받는다. 2. 아래의 명령어를 입력한다. docker run --rm -d -p 3306:3306 -e MARIADB_ROOT_PASSWORD=root1234 -v /app/mariadb/mysql:/var/lib/mysql -v app/mariadb/mariadb.conf.c/:/etc/mysql/mariadb.conf.d/ -name mariadb mariadb 위의 명령어를 해석하자면 -e : 환경변수 설정(db root password를 root1234로 설정) --rm : co..
1번 2번으로 이중화 되어있는 서버에 도커로 웹 서비스를 띄어논 상황에서 2번 서버의 서비스가 작동하지 않아 문제부터 해결방법을 정리해 보았습니다. 문제 내부 포털 was 2번서버에 Docker로 띄어져 있는 서비스가 나오지 않는다. 방화벽 문제는 아님(curl -v 80 으로 접근 시 tcpdump로 확인이 가능하다.) docker 문제로 판단중 😑😑😑 로컬에서 자신을 호출했을때는 서비스에 접근이 가능하다. 다른서버에서 2번서버를 호출하면 docker 네트워크로 포워딩이 안된다. 해결방법 iptables 초기화 후 도커 재실행 sudo iptables -t filter -F sudo iptables -t filter -X systemctl restart docker 이 명령어는 Linux 시스템에서 i..
Java에서 엑셀 업로드 기능을 구현하려면 Apache POI 라이브러리를 사용할 수 있습니다. POI는 Microsoft Office 파일 형식 (예: XLSX, XLS)을 조작하기 위한 Java 라이브러리입니다. 다음은 POI를 사용하여 Java에서 엑셀 업로드 기능을 구현하는 방법입니다. 0. POI 라이브러리를 다운로드하고 프로젝트에 추가합니다. POI는 Maven 또는 Gradle과 같은 의존성 관리 도구를 사용하여 프로젝트에 추가할 수 있습니다. org.apache.poi poi 5.0.0 위 의존성은 POI 라이브러리의 메인 모듈인 poi를 추가하는 것입니다. 만약 필요한 경우, 추가적인 모듈도 의존성에 추가할 수 있습니다. 예를 들어, .xlsx 파일을 처리하기 위해서는 poi-ooxml ..
프로젝트를 하다보면 타사 서비스를 iframe으로 넣어달라는 요청이 있다. 타사 서비스에 iframe 옵션을 설정할 수 있는 방법이 있다면 그 방법을 따라 진행하면 되지만 없을 경우 최후의 수단으로 Nginx를 앞단에 놓고 X-Fraome-Option 헤더를 삭제해 강제로 iframe을 사용하게 할 수 있다. 아래의 그림처럼 타사 서비스를 호출하게 되면 X-frame-option에 따라 서비스 호출에 제한이 있다. 따라서 중간에 Nginx를 웹서버로 두어 X-frame-option Header을 비활성화 시켜준다. server{ location /{ proxy_hide_header X-Frame-Option; } } nginx 설정 및 사용 방법에 대해서는 추후 포스팅 할 예정이다.
다른 업체에서 서버에 배포해 주고 간 서비스의 default URL이 잡혀있지 않아 설정을 조금 변경해야 하는 일이 생겼다. 💢문제 아래처럼 기본 url로 접속을 하면 404에러가 뜨고 https:/derault-url.com 아래의 url로 접속을 해야 업체에서 배포한 서비스에 접속이 가능했다. https:/derault-url.com/app ❗목표 기본url(https:/derault-url.com)에 접속 시 custom error 페이지 노출하기 💯해결방법 사실 조금의 설정만 바꾸된 쉽게 될줄 알았다... 하지만 업체에서 설정을 바꿔놔 많은 삽질을 하게되었다... 이참에 Tomcat 구조와 동작원리, 파일 구도 등 여러가지를 자세하게 알아 볼 수 있는 계기가 되엇다. 기본적으로 tomcat의 파일..
