알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

filepond vue js 파일 업로드 (추천) https://github.com/pqina/filepond A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. 위와 같은 라이브러리 인데 사용방법이 정말로 간단하다 . 일단 설치 법은 npm install filepond --savenpm install vue-filepond --savenpm install filepond-plugin-file-validate-type --save (플러그인 설치 옵션 사항이다) // ..

spring mvc 와 vue-auth with jwt 사용법 vue-auth 일단 기본 적인 설정은 셋업은 https://github.com/websanova/vue-auth/blob/master/docs/StepByStepGuide.md 해당 문서에 나와 있는 방법을 사용 하였습니다. 하지만 해당 문서 만보고 하면서 시행 착오가 많아 정리 합니다. 아래와 같이 코드에 셋업 했습니다. 저같은 경우에 개발 보드에서 프록시 모드를 사용하기 때문에vue.config.jsmodule.exports = { baseUrl: 'webfms/', devServer: { proxy: { '/W_Server': { target: 'http://127.0.0.1:8181/test/', changeOrigin: true, ..

spring jjwt 설명 및 예제 이 글은 OAuth와 JSON Web Token과 같은 토큰 기반의 인증을 처음 접하는 자바 개발자를 위한 가이드입니다.우선 JSON Web Token (줄여서 JWT라고 하고 “jot”이라고 읽습니다.)을 살펴 보겠습니다. JWT는 권한claim라고 하는 정보를 디지털 서명을 하고 나중에 비밀 서명 키로 검증하는 도구 입니다.토큰 인증이란?애플리케이션이 사용자가 누구인지 확인하는 과정을 인증authentication이라고 합니다. 전통적으로 애플리케이션은 세션 아이디를 기반으로하는 세션 쿠키를 통해서 서버측에 사용자의 식별자identity를 저장하고 값을 유지합니다. 이러한 구조에서는 개발자가 서버 고유의 방식으로 세션 저장소를 구성하거나 완전히 독립적인 세션 저장소..

Token 인증 개념 JWT (serverclient login) (Login 기능을 위한)(3) JWT 인증 과정 1. client->Server 에서 POST 로 ID,PW를 넘겨 준다. 2. server 에서 해당 데이터를 검증한다 - 여기서 중요한것은 토큰의 유효 기간을 반드시 정하는것이 좋다 그이유는 만료 기간이 없으면 해당 토큰을 유출 당하면 계속 해동 토큰으로 계속 아무곳이나 제어권을 획득 가능하게 된다. - client에서 임의로 Token 정보의 유효기간을 바꾸게 되면 5번 단계의 토큰 유요성 체크에 걸리게 되어 client 에서 정보를 바꾸더라도 해당 토큰을 사용이 불가능하게 된다. 3. 유효기간등이 설정된 토큰을 넘겨 준다. 4. client 에서 요청할때 헤더에 해당 정보를 항상 같..

Session 와 Token 인증 개념 (Login 기능을 위한)(2) Token 인증을 사용하기 위해서 표준이 있습니다. 그건 JWT 입니다. JSON Web Token 이 뭘까? 기본 정보 JSON Web Token (JWT) 은 웹표준 (RFC 7519) 으로서 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인 (self-contained) 방식으로 정보를 안전성 있게 전달해줍니다. 수많은 프로그래밍 언어에서 지원됩니다 JWT 는 C, Java, Python, C++, R, C#, PHP, JavaScript, Ruby, Go, Swift 등 대부분의 주류 프로그래밍 언어에서 지원됩니다. 자가 수용적 (self-contained) 입니다 JWT 는 필요한 모든 정보를 자체적으로 지니고 있습니..

Session 와 Token 인증 개념 (Login 기능을 위한) 서버 기반 인증(Session 기반) Session 은 서버에 저장 되는 정보 입니다. 기본 개념은 클라이언트와 서버 간의 상태를 유지하기 위한 일반적인 방법 입니다. 여기서 상태는 클라이언트의 로그인상태 또는 클라이언트의 다양한 상태를 저장하고 있습니다. 클라이언트에서 데이터를 전송할때 http 정보에 세션 정보를 덧붙혀서 주게 됩니다. 그리고 클라이언트에서 로그인을 할때 주는 ID PW 정보가 맞으면 서버의 세션 상태를 로그인 되었다라고 바꾸고 클라이언트에게 데이터를 보내 주기전에 세션의 로그인 상테 값을 체크하고 로그인한 클라이언트와 로그인하지 않은 클라이언트 에게 다른 정보를 주게 됩니다. 서버 기반 인증의 문제점세션유저가 인증을 ..

watch 에서 값 변경 할때 TypeError: Cannot set property 날때 watch:{ value:(val)=>{ this.dialog = val; }, dialog:(val)=>{ this.$emit('input',val) } } 위와 같은 식으로 람다 함수를 사용 하면 안됩니다. watch:{ value:function(val){ this.dialog = val; }, dialog:function(val){ this.$emit('input',val) } } 위와 같은 방식으로 사용 해 줘야 합니다.

vue component v-model 만드는법 vue 에서 v-model 을 custom component 에서 사용 하는 방법을 알아보겠습니다. 먼저 Month: {{date.month}} Year: {{date.year}} import DatePicker from './DatePicker.vue'; export default { components: { DatePicker }, data() { return { date: { month: 1, year: 2017 } } } }) 위의 코드에서 보면 커스텀 component 로 date-picker 를 볼수 있습니다. 저 date-picker 의 component 을 보겟습니다. Month: Year: export default { props: ['va..

cafe24 앱 Vue js load 하는법 cafe 24 의 개발자 센터에서 보고 실제 vue js component 를 설치 하려고 할때 시행 착오 가 있어서 정리겸 자료를 남깁니다. 간단히 web component js 상단에 vue.js 내용을 복사해서 집어 넣으면 된다.

아래가 공식 문서이다 https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html#Base-Example Packaging Vue Components for npmBase ExampleVue components by nature are meant to be re-used. This is easy when the component is only used within a single application. But how can you write a component once and use it in multiple sites/applications? Perhaps the easiest solution is via npm.By packaging your componen..