목록분류 전체보기 (22)
JUNGKIMHOON
MSA (Microservice Architecture)란?
Monolithic Architecture (기존) 서비스의 아키텍처를 구성할 때 모든 서비스를 구성하는 비즈니스 로직, DB, UI를 하나의 패키지에 담아 빌드하고 배포하는 방법 장점 빠르고 단순하게 설계 가능하다. 단점 서비스 부하에 개별로 대응하기 쉽지않다. 문제 발생시 부분의 문제가 전체 서비스 장애를 부를 수 있다. 하나의 framework에 종속적이다. (Spring을 사용한다면 node.js의 모듈을 사용할 수 없음) MSA (Microservice Archtecture) ? MSA란 마이크로 서비스 아키텍처(Micro Service Architecture)의 약자로 단일 프로그램을 각 컴포넌트 별로 나누어 작은 서비스의 조합으로 구축하는 API기반의 서비스 지향적 아키텍처 스타일 MSA는 ..
[Vue.js] SPA(Single Page Application)
기존 웹페이지 방식 페이지를 서버에 요청하고 받아 렌더링하는 형식 -> 서버사이드 렌더링 (jsp, php, asp ...) 페이지를 바꿀때 마다 로딩되므로 시간이 많이 걸린다. SPA (Single Page Application) 최신 웹 프론트엔드 프레임워크의 방식 (Vue, React, Angular...) 최초 접속시 모든 css, javascript를 가져와 페이지를 구성하고 필요시 서버의 rest API 데이터를 비동기 요청하여 받아와 렌더링한다. 화면 구성에 필요한 소스들은 클라이언트가 갖고 있으므로 기존 웹페이지 방식보다 SPA방식이 속도가 빠르다. SPA 장점 필요한 부분의 데이터만 서버에 받아서 렌더링하기 때문에 처리가 효율적이다. 화면 각각을 렌더링할 필요가 없어 화면 이동이 빠르다...
[Vue.js] Animation on Scroll 적용 (AOS)
AOS Animation on Scroll 스크롤을 돌릴때 적용된 컨텐츠가 애니메이션 형태로 쇼잉된다. 설치 npm install --save aos@next 적용 (main.js) import AOS from 'aos'; import "aos/dist/aos.css"; new Vue({ created() { AOS.init(); }, el: '#app', router, render: h => h(App) }) 적용이 완료되었다. 사용 웹 개발자 김정훈입니다. /* */ 애니메이션의 여러가지 옵션이 있다. div태그 말고도 다른 태그들도 적용 가능. michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library..
[Vue.js] vue-typer 텍스트 타이핑 애니메이션
위 이미지와 같이 타이핑 애니메이션을 사용할 수 있는 NPM 모듈 vue-typer 설치 npm install --save vue-typer 적용 (main.js) // ES6 import VueTyperPlugin from 'vue-typer' // CommonJS var VueTyperPlugin = require('vue-typer').default // Global var VueTyperPlugin = window.VueTyper.default Vue.use(VueTyperPlugin) 사용 프로퍼티는 cngu.github.io/vue-typer/ 참고 SCSS가 유난 부릴 때 참고 npm uninstall --save-dev sass-loader npm install --save-dev sass..
[Vue.js] Vue CLI Temlplate 종류
Vue CLI Template 종류 vue init webpack 고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등 지원 vue init webpack-simple 웹팩 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용 vue init browserify 고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등 지원 vue init browserify-simple 브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용 vue init simple 최소 뷰 기능만 들어간 HTML 파일 1개 생성 vue init pwa 웹팩 기반의 프로그레시브 웹 앱 기능을 지원
[Spring] JWT를 활용한 인증 (feat. vue)
기존 Spring을 활용한 MVC 프로젝트에서는 한 서버안에서 작업을 처리하면서 session으로 로그인을 유지시켜주면 만사가 편했다. Vue.js와 Spring boot 프로젝트를 진행하면서 로그인 처리에 JWT를 활용하는 방법을 많이 사용하는 것을 알 수 있었다. JWT Procedure 프론트 측에서 로그인을 시도하여 서버로 데이터 넘김 서버에서 데이터 검증 및 JWT 생성 JWT 프론트로 전달 서버에 데이터요청 (JWT헤더 + 요청값) JWT 유효성 검증 요청 데이터 전송 JWT Structure 헤더 : 토큰 타입, 해싱 알고리즘 페이로드 : 토큰에 담을 정보 (클레임) 시그니처 : 비밀키 해싱값 JWT 구현 POM.xml io.jsonwebtoken jjwt 0.9.1 javax.xml.bin..