WEB

🤬 문제 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..

개발환경 Nuxt.js 2 Vue.js 2 Spring Boot 3요청사항 ❓ API에 권한을 입히면서 특정 API 사용 시 alert를 노출시키고 페이지 이동은 원하지 않는다는 요청사항이 있어 이를 구현하였습니다.개발 내용 💭 Back End에서 권한을 체크하는 AOP를 하나 만들어 체크를 원하는 API에 Annotation을 넣어 Exception처리를 하도록 구현하였습니다. Front End에서 해당 Error를 보고 권한에 대한 Error일 경우 alert를 발생시켜야 합니다. 문제발생 ❗ 공통적으로 처리하기위해 axiox.onError({})로직에 처리를 하려다 보니 무조건 적으로 Error 페이지로 이동하는 현상 발생 이는 Nuxt 설정으로 헤더 정보를 보고 Error 발생 시 error.vu..

프로젝트 마무리 단계에서 웹 호환성 체크를 하다보니 그동안 모호하게 알고있던 지식에 대해 정리가 필요하다는 것을 알게되어 확실한 정리는 하려고 해보려고 합니다. Front End 개발환경 Nuxt.js 2 Vue.js 2 먼저 세 가지 개념인 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR), 그리고 번들링에 대해 자세히 알아보겠습니다. 서버 사이드 렌더링 (SSR) 서버 사이드 렌더링은 웹 애플리케이션의 초기 HTML을 서버에서 생성하고 클라이언트에 제공하는 방식입니다. 클라이언트는 이 HTML을 받아 브라우저에서 렌더링합니다. 이것은 검색 엔진 최적화(SEO)를 향상시킬 수 있으며, 초기 페이지 로딩 시간을 줄일 수 있습니다. 클라이언트 사이드 렌더링 (CSR) 클라이언트 사이드 렌더링..

Nuxt.js는 Vue.js 프레임워크를 기반으로 한 서버 사이드 렌더링(SSR)을 지원하는 웹 애플리케이션 프레임워크이다. 페이지 이동은 Vue Router를 사용하여 처리할 수 있다. 아래는 Nuxt.js에서 페이지 이동을 위한 몇 가지 기본적인 방법이다. 링크를 사용한 페이지 이동: Nuxt.js에서 페이지 간의 이동은 컴포넌트를 사용하여 처리할 수 있다. 이 컴포넌트를 사용하면 Vue Router가 내부적으로 처리하므로 페이지 전환 시 SSR을 유지할 수 있다. 사용자 페이지로 이동 위의 예제에서는 userId 변수를 사용하여 동적으로 URL을 생성하고 nuxt-link 컴포넌트를 통해 페이지 간 이동을 수행하고 있다. 또한 user 페이지에서 이 파라미터를 받아와 사용할 수 있다. 이때 user..