이번 글에서는 프론트엔드에서 업로드된 Excel 파일을 Spring 백엔드에서 받아서 Apache POI로 처리하는 방법을 알아보겠습니다. 업로드된 파일을 어떻게 서버에서 다룰 수 있는지 Spring MVC와 Apache POI를 활용하여 구현합니다.전체 구현 개요프론트엔드Nuxt.js를 통해 파일을 업로드.서버로 HTTP POST 요청을 보냄.백엔드Spring Controller에서 파일을 받음.MultipartFile 객체로 업로드된 파일 처리.Apache POI로 Excel 데이터를 읽고 출력 또는 가공.처리된 데이터데이터베이스 저장 또는 JSON 응답 반환.1. 프론트엔드: Nuxt.js로 파일 업로드 구현Nuxt.js는 Vue.js 기반으로 작동하기 때문에 파일 업로드는 Vue의 기본 이벤트 처..
WEB
💻 Vue에서 여러 컨테이너 다루기: v-show, v-if, :is, keep-alive 사용법과 차이점Vue로 개발하다 보면, 여러 컨테이너(컴포넌트)를 조건에 따라 보이거나 숨기거나, 동적으로 전환하는 상황이 자주 발생합니다. 이를 효과적으로 처리하기 위한 주요 도구로는 v-show, v-if, :is, 그리고 keep-alive가 있습니다. 이번 포스팅에서는 이들을 사용하는 방법과 각 방법의 차이, 동적 컴포넌트 전환 시 서로 다른 props 전달 방법과 동적으로 이벤트 메서드를 처리하는 방법을 포함해 자세히 알아보겠습니다.💻 1. v-if: 조건에 따라 컴포넌트를 추가/제거v-if는 조건이 true일 때 컴포넌트를 DOM에 추가하고, 조건이 false일 때 컴포넌트를 DOM에서 완전히 제거합..
💻 Nuxt 2 설치 및 실행 가이드Nuxt.js는 Vue.js를 기반으로 한 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성, 그리고 훨씬 더 많은 기능들을 제공합니다. 이번 포스트에서는 Nuxt 2를 설치하고 실행하는 과정을 단계별로 알아보겠습니다.🌟 1. 프로젝트 생성먼저, 새로운 Nuxt.js 프로젝트를 생성합니다. 이를 위해 터미널을 열고 아래 명령어를 실행하세요:npx create-nuxt-app 명령어를 입력하면 몇 가지 설정을 선택해야 합니다. 예시로 진행해볼게요:Project name: my-nuxt-appProgramming language: JavaScriptPackage manager: NpmUI framework: NoneNuxt.js modules: AxiosL..
🤬 문제 Spring boot를 이용해 jsp를 호출함에 있어 Itellij IDE에서 아래의 오류 발생 페이지를 찾을 수 없음 404 ERROR 😅 원인 해당 프로젝트 실행 설정 중 Working Directory이 부모 폴더의 경로로 설정이 되어있었다. EX) portal/parents ☺ 해결방법 실행 configurations 변경 필요 오른쪽 상단 콤보박스 > 실행 Application 확인 > Configuration Edit > Modify Options > Working directory > portal/parent/myDitectory 수정
VueJS는 인터랙티브 웹 인터페이스를 구축하기 위한 라이브러리로 간단하고 유연하게 사용 가능한 데이터-반응성 컴포넌트 API를 제공합니다. 다수의 개발자들이 VueJS를 사용하는 이유는 가볍고, 쉽기 때문입니다. 쉽다고는 하지만 컴포넌트 간 통신을 위해 부모/자식 컴포넌트 간 props를 전달하거나, 변경해야하는 문제가 발생합니다. 종종 props를 사용하지 않고 this.$parent.data와 같은 접근 방식을 사용할 수 있습니다. 자식 컴포넌트는 부모 컴포넌트에 $emit()을 사용하여 이벤트를 발신하는 방법으로 통신합니다. 이러한 방법이 부모 컴포넌트의 데이터를 변경하는 간단한 방법일지 모르지만, 프로젝트 규모가 커지고 컴포넌트가 많아짐에 따라 받는 스트레스 또한 가중됩니다. 예를 들어 30개의..
🚫Console Log 한글 깨짐 현상 VM options에 -Dfile.encoding=UTF-8을 추가한다
1. 소스 받기 git clone [url] 2. 소스 내 Project, Modules 설정 SDK 설정 File -> Project Structure -> Modules clone받은 소스에서 Maven 프로젝트 디렉토리를 Module로 설정 한다. File -> Project Structure -> Modules 해당 소스는 2개의 Maven 프로젝트(LTE-R_COMMON_SERVER, LTE-R_JEOLLA_UI)를 포함하고 있어 두개 모두 Maven Module로 설정을 해준다. Apply 후 OK Maven 목록에서 두개의 버튼을 클릭하여 새로고침 후 Maven Update를 해준다. 3. Tomcat 설정 Run -> Edit Configration Tomcat Server -> Local..
Nuxt.js를 이용해 페이지 이동 시 변수를 넘기는 방법은 2가지(qnery,params) 가 있습니다. 아래와 같이 데이터를 넘길 수 있습니다. this.$router.push({ name: 'board-list', //URL 노출 query: { boardType: "test1" }, //URL 비노출 param" { boardType: "test2" } }) 넘어온 데이터는 아래와 같이 확인 할 수 있습니다. //query 데이터 확인 console.log(this.$route.query.boardType) //board 데이터 확인 console.log(this.$route.params.boardType) query를 사용하면 데이터가 노출되지만 새로고침 시에도 데이터를 유지 시킬 수 있다. p..
