728x90 전체 글143 이클립스에서 Java Project를 Gradle Project로 변환하기 이클립스에서 Java Project를 Gradle Project로 변환하기 기존에 사용중인 Java Project를 Gradle을 통해 라이브러리를 다운로드 받고 관리하기 위해 Gradle Project로 변환해보자. Gralde Project를 생성하려면 우선 Gradle이 설치되어 있어야 한다. Eclipse Marketplace에서 Gradle 설치가 가능하다. 아래 이미지에서 기존에 생성된 Java Project를 확인할 수 있다. 'Ctrl + N' 또는 '프로젝트 우클릭 - New - Other' 을 선택하여 Select a wizard 창을 열고 프로젝트의 ROOT 디렉토리에 build.gradle 파일을 생성하자. build.gradle 샘플 build.gradle 파일 내용이다. 사용하고.. 2023. 1. 11. Vue.js에서 Vuex 사용하기(2) [state, actions, mutations] Vue.js에서 Vuex 사용하기(2) [state, actions, mutations] 지난 시간에는 간단하게 Vuex를 설치하고 세팅, 선언된 값의 간단한 사용방법에 대해 알아보았다. 이번 시간에는 서버에서 데이터를 가져오는 방법(actions)과 수정 및 가공하는 방법(mutations)과 추가적으로 사용할 수 있는 방법에 대해서 알아보자. 또한 mapState와 mapMutations을 활용하여 간단하게 축약하여 사용해보자. Axios 설치 vuex의 actions에서 ajax통신을 할 예정이므로 axios를 설치하자. > npm install axios 상태 (state) 상태(state)는 애플리케이션에서 관리되어야 할 구성요소이며 데이터이다. 이 값은 여러 컴포넌트에 의해 사용될 수 있다. .. 2023. 1. 3. Vue.js에서 Vuex 설치 및 기본 사용 방법(1) Vue.js에서 Vuex 설치 및 기본 사용 방법(1) 지금까지 Props, Slot, Custom Events, Mitt을 이용한 컴포넌트 간 데이터를 주고 받는 예제를 했다. 간단한 프로젝트의 경우에는 위 방법으로도 충분히 가능하지만 컴포넌트 및 데이터가 많은 프로젝트의 경우에는 Vuex를 사용하는 것이 좋다. 하위의 하위의 하위의 컴포넌트에 데이터를 전송하는데 Props만 세번 사용해서 전달하기에는 소스코드의 복잡도만 올라갈 뿐이다. 게다가 어느 컴포넌트에서 그 값을 변경해버렸을 때 어느 컴포넌트에서 이 값을 변경했는지 찾는데에도 많은 시간이 걸릴 것이다. Vuex는 상태(데이터)관리 라이브러리이며 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하고 예측 가능한 방식으로 상태(데이터)를 변경할 수.. 2022. 12. 30. [윈도우10] WMIC를 이용한 프로세스 및 실행 인자 값 확인 [윈도우10] WMIC를 이용한 프로세스 및 실행 인자 값 확인 리눅스에서는 ps 명령어를 통해 실행중인 프로세스와 윈도우에서 실행중인 프로세스와 실행 명령과 함께 올라간 인자 값을 조회할 수 있다. 윈도우에서는 리눅스와 출력 포맷이 다르지만 동일하게 조회가 가능하다. tasklist와 wmic 명령어를 이용하여 확인해보자. 리눅스에서 ps 명령어를 이용한 프로세스 조회 $ ps -ef | grep tomcat 윈도우에서 tasklist를 이용한 실행중인 프로세스 조회 > tasklist > tasklist | findstr javaw.exe 윈도우에서 WMIC를 이용한 실행중인 프로세스 인자 값 조회 > wmic process where name="javaw.exe" get Processid, Comm.. 2022. 12. 28. Vue.js에서 mitt을 이용한 멀리있는 컴포넌트간 데이터 전송 Vue.js에서 mitt을 이용한 멀리있는 컴포넌트간 데이터 전송 Props, Slot, Custom Events는 상위 컴포넌트와 하위 컴포넌트 간의 데이터 통신을 지원한다. 하지만 연결되어 있지 않은 컴포넌트간 데이터 통신 또는 상위의 상위 등 은 지원하지 않는데 이때는 mitt을 이용하면 된다. mitt은 모든 컴포넌트 간 데이터 통신을 지원한다. Vue2에서는 Event Bus라는 것을 이용해 멀리 있는 컴포넌트간 데이터를 전송했지만 Vue3부터는 지원하지 않아 mitt 외부 라이브러리를 따로 사용해야 한다. 샘플 프로젝트 생성 > vue create mitt-test 데이터 전송 App.vue는 하위 컴포넌트로 ManView.vue와 WomanView.vue를 가지고 있다. ManView.vue.. 2022. 12. 23. Vue.js에서 Props 대신 Slot! 하위 컴포넌트에게 데이터 전송 Vue.js에서 Props 대신 Slot! 하위 컴포넌트에게 데이터 전송 Props를 이용한 하위 컴포넌트에게 데이터를 전송하는 방식 말고도 슬롯(Slot)을 이용할 수도 있다. Slot은 컴포넌트의 재사용성을 높여주며 특정 컴포넌트에 등록된 하위 컴포넌트의 마크업을 확장하거나 재정의할 수 있다. Slot에는 몇가지 단점이 존재하는데 다량의 데이터를 Slot으로 전송하는 경우 Props보다 복잡할 수 있다. 또한 Slot으로는 하위 컴포넌트의 HTML태그의 attirbute에 값을 바인딩할 수 없고 오로지 HTML로서만 사용한 다는점이다. 허나 간단한 데이터나 HTML을 재정의하는 경우에는 Props문법보다 훨씬 간결하고 유용하게 사용할 수 있으므로 상황에 맞게 Slot과 Props를 선택하여 사용하면 .. 2022. 12. 20. Vue.js에서 Custom Events를 이용한 상위 컴포넌트의 데이터 변경 Vue.js에서 Custom Events를 이용한 상위 컴포넌트의 데이터 변경 하위 컴포넌트에서 상위 컴포넌트로 어떠한 데이터를 전송하거나 상위 컴포넌트의 데이터를 수정하고 싶을 때 Custom Events를 사용할 수 있다. 하위 컴포넌트는 상위 컴포넌트의 데이터에는 직접 접근하여 수정할 수 없으며 상위 컴포넌트로 요청을 하는 것이다. 이때 하위 컴포넌트에서는 상위 컴포넌트가 알 수 있도록 $emit('작명') 구문으로 전송하고 상위 컴포넌트에서는 메세지를 수신할 수 있도록 @작명="스크립트" 코드를 이용한다. 샘플 프로젝트 생성 > vue create custom-events-test 샘플 프로젝트를 생성하면 App.vue는 상위(부모) 컴포넌트로서 하위(자식) 컴포넌트인 HelloWorld를 쓰고 .. 2022. 12. 15. Vue.js에서 Props를 이용한 하위 컴포넌트에게 데이터 전송 Vue.js에서 Props를 이용한 하위 컴포넌트에게 데이터 전송 props는 properties 의 줄임말로 상위 컴포넌트가 하위 컴포넌트에게 데이터를 전달해줘야 할 때 props를 사용한다. 단방향 데이터 흐름을 가지며, 하위 컴포넌트는 상위 컴포넌트의 데이터를 수정할 수 없다. 번외로 상위 컴포넌트에게 데이터 전송이나 상위 컴포넌트의 데이터를 수정하려면 Custom Events라는 기능을 이용하여 요청할 수 있다. 이번시간에는 Props를 이용한 하위 컴포넌트에게 데이터 전송하는 사용방법에 대해 알아보자. 샘플 프로젝트 생성 > vue create props-test 샘플 프로젝트를 생성하면 App.vue는 상위(부모) 컴포넌트로서 하위(자식) 컴포넌트인 HelloWorld를 쓰고 있다. 샘플 프로.. 2022. 12. 9. Vue.js에서 Axios를 이용한 비동기 통신 Vue.js에서 Axios를 이용한 비동기 통신 Vue에서 권고하는 Promise 기반의 HTTP 라이브러리로서 웹 어플리케이션에서 서버와 HTTP 요청을 주고 받을 수 있다. 또 Promise를 사용하면 비동기식 처리 상에서 데이터가 넘어왔을 때만 해당 코드가 실행되도록 하는 콜백 처리를 해줄 수 있다. Axios 는 다음과 같은 기능을 제공한다. 브라우저를 위해 XMLHttpRequests 생성 node.js를 위해 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 변환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기위한 클라이언트 사이드 지원 샘플 프로젝트 생성 > vue create axios-test Axios 설치 > npm install axi.. 2022. 12. 6. [Spring Boot] Gradle을 이용한 Profile(개발/운영) 구분 설정 [Spring Boot] Gradle을 이용한 Profile(개발/운영) 구분 설정 개발환경 Eclipse IDE 2022-06 Spring Boot 3.0.0 Gradle 7.0 Lombok PostgreSQL 프로젝트 개발 시 실제 개발과 운영의 환경은 다를 가능성이 높다. 보다 안전한 개발을 위하여 실제 운영중인 DB로 개발을 진행하지 않고 개발 DB를 이용하곤 한다. 또한 개발환경 또는 운영환경에서 사용하는 정보가 다를 수 있으므로(예를 들어 메일 송/수신자 테스트 정보) 우리는 각각의 환경에 맞는 정보를 불러와야 할 것이다. 이번시간에는 Gradle을 통한 Profile을 설정함으로써 개발과 운영의 설정 정보를 분리해보자. Package Explorer 프로젝트 생성 시 기본 패키지이다. 여기에.. 2022. 12. 2. [Spring Boot] Jasypt를 이용한 암호화 [Spring Boot] Jasypt를 이용한 암호화 개발환경 Eclipse IDE 2022-06 Spring Boot 3.0.0 Gradle 7.0 Lombok PostgreSQL jasypt-spring-boot:3.0.4 Jasypt는 개발자가 암호화 작동 방식에 대한 깊은 지식이 없어도 최소한의 노력으로 프로젝트에 기본 암호화 기능을 추가할 수 있는 자바 라이브러리이다. 프로젝트를 구동하려면 중요 정보(DB 접속정보 등)를 설정하게 되는데 소스코드를 GitHub으로 관리한다던가 서버에 소스코드를 배포하면서 의도하지 않은 중요정보를 외부에 노출하는 상황이 발생하게 된다. Jasypt를 이용하여 중요정보를 암호화하여 소스코드를 관리해보자. Package Explorer build.gradle plug.. 2022. 11. 30. Vue.js에 Bootstrap 설치 및 사용하기 Vue.js에 Bootstrap 설치 및 사용하기 Bootstrap 이란 CSS에 대한 많은 지식 필요 없이도 미리 선언되어 있는 class를 찾아서 복붙하기만 해도 웹에서 사용하는 버튼, 메뉴 바, 카드, 리스트 등 예쁜 UI를 만들 수 있다. 반응형 웹 페이지를 지원하며 미리 정의된 HTML, CSS, JS를 이용하여 순식간에 웹 페이지를 꾸밀 수 있으며 현재 가장 인기있는 라이브러리이다. 우선 Bootstrap을 이용할 Vue 프로젝트를 생성하고 생성한 폴더를 열어보자. > vue create bootstrap-project 아래 링크에서 Bootstrap 홈페이지에서 다운로드할 수 있다. Bootstrap Powerful, extensible, and feature-packed frontend t.. 2022. 11. 25. Spring Boot & Vue.js - Vue Router History Mode 404 서버 설정 Spring Boot & Vue.js - Vue Router History Mode 404 서버 설정 Spring Boot와 Vue.js를 연동 후에는 Router를 통한 다른 페이지로 이동 시 한가지 문제점이 생긴다. Hash Mode를 설정하는 경우에는 URL 호출 시 서버를 거치지 않지만 URL에 #이 표기 되는 문제점과 SEO에서 나쁜영향을 끼치게 되므로 HTML5 Mode(History Mode)로 설정을 진행하였다. 이 경우에는 URL 호출 시 서버를 한번 거치게 된다. Vue Router 설정 시 페이지 내에서 router로 생성된 링크는 잘 접속이 되지만 url로 접근하거나 새로고침을 하는 경우에는 Spring Boot에서는 'Whitelabel Error Page' 페이지로 전환과 함께 .. 2022. 11. 10. vue-router redirect 404 NotFound 에러페이지 vue-router redirect 404 NotFound 에러페이지 이번시간에는 사용자가 의도하지 않는 URL로 접근 시 뷰 라우터에 404 오류 페이지로 리다이렉션을 설정해보고자 한다. 아직 vue-router 설정을 하지 않은 경우에는 아래 링크를 확인하여 vue-router를 추가하자. vue-router 설치 / vue -router 추가 및 라우터 예제 vue-router 설치 / vue-router 추가 및 라우터 예제 이번 시간에는 라우터에에 대해서 알아보고자 한다. 사용자가 '/list' 또는 '/detail' 등 서브페이지에 접근하려면 router를 통해 페이지를 연결할 수 있다 jiurinie.tistory.com Vue 프로젝트 구조 NotFound.vue 페이지를 찾을 수 없습니다.. 2022. 11. 10. vue-router 설치 / vue -router 추가 및 라우터 예제 vue-router 설치 / vue-router 추가 및 라우터 예제 이번 시간에는 라우터에에 대해서 알아보고자 한다. 사용자가 '/list' 또는 '/detail' 등 서브페이지에 접근하려면 router를 통해 페이지를 연결할 수 있다. 관리자가 티스토리 블로그에서 '블로그 관리'로 들어갈 때 https://jiurinie.tistory.com/manage의 '/manage' 경로와 같다. 물론 중간에 로그인 인증이 껴있긴 하지만 권한이 주어졌을때는 바로 관리 페이지로 이동한다. 이와 같이 페이지 이동을 위한 vue-router를 설치하고 vue에서 제공하는 기본 router를 추가하여 라우터가 어떻게 사용되는지에 대해서 알아보자. 기본 프로젝트 생성 > vue create vue-router-samp.. 2022. 11. 4. 이전 1 2 3 4 5 6 ··· 10 다음 728x90
