Miracle Morning, LHWN

# 데이터의 흐름 (1) 상위(Root) → 하위 방향으로 데이터 넘기기 : props 를 사용하여 전달 (2) 하위 → 상위 방향으로 데이터 넘기기 : event 를 발생하거나, Vue 에서는 API 의 형식으로 전달 ​ # jQuery 사용해보기 → mounted 단계 이후에만 사용 가능하다. (DOM 에 접근이 가능해야 하기 때문) ... ... $('.h1-btn').on({ click: function() { alert('jQuery Click Event!') }, focusin: function() { console.log('jQuery focusin Event!'); }, mouseenter: function() { console.log('jQuery mouseenter Event!'); }..

MFA (Multi-Factor Authentication) 기본 인증 외에 추가적인 인증을 통해 보안을 강화하는 기능을 말하며, 사용자의 서비스 접근에 있어 높은 보안을 제공한다. 인증 요소 유형 (Type of Authentication Factors) Knowledge : 사용자가 알고 있는 것. e.g) username, password, PIN 등 Possession : 사용자가 가지고 있는 것. e.g) safety token Heritage : 사용자 그 자체의 것. e.g) fingerprint, retina verification, voice recognization Place : 사용자의 물리적인 위치 Time : 인증을 위한 시간 기반의 기능 제공 e.g) OTP 다요소 인증 유형 (..

UsernamePasswordAuthenticationFilter http/form-login 을 지원하는 즉 Form data 를 기반으로 인증을 지원하기 위해 제공되는 Filter 이다. 기본적으로 Http Security 에 formLogin() 을 설정함으로서 활성화되며, UserDetail 과 UserDetailsService 를 활용하여 인증한다. UsernamePasswordAuthentication Flow Spring Security 에서 제공하는 WebSecurityConfigureAdapter 에 다양한 설정을 통해 웹 화면에서 전송되는 Form data 의 username, password 를 데이터베이스에 저장된 사용자 정보와 비교하게 된다. 인증에서 이용자 정보 시스템에서 이용..

Batch '일괄 처리' 로서, 일정 기간으로 스케줄링하여 처리한다. 유저와 상호 작용 없이 동작하며, 대용량 데이터 처리하는데에 쓰인다. 이때 고려해야 할 사항에는 무엇이 있을까 단순화 메모리에 무리가 가지 않는 수준으로 대량 처리 데이터의 무결성 DB 쿼리 최적화 백업 Spring Batch Spring Source 가 Accenture 사와 협력하여 개발한 Batch Framework 이다. 엔터프라이즈 환경에서 강력한 Batch Application 을 개발할 수 있도록 설계되었다. Logging / Tracing, Transaction Management, Job Processing Statistics, Job Restart, Skip, Resource Management 등 대량의 레코드 처리..

DelegatingFilterProxy Spring 은 Servlet Container (예. 톰캣) 의 생애주기 (LifeCycle) 와 Spring ApplicationContext 사이에서 연결할 수 있는 DelegatingFilterProxy 라는 필터를 제공한다. 기본적으로 스프링 서블릿 컨테이너 (Servlet Container) 는 자체 표준으로 제시하는 필터 등록을 허용한다. 하지만, Spring Bean 으로 정의되어 있는 필터는 제외하고 있다. Spring Security 에서는 DelegatingFilterProxy 를 통해 표준 서블릿 컨테이너 메커니즘을 통해 등록하는 필터 뿐만 아니라, Spring Bean 으로 구현한 모든 필터를 등록하고 위임하는 형태로 여과 작업을 진행한다. ..

다른 User가 git에서 레파지토리를 복제하는 경우 'clone' git clone https://github.com/[Username]/xxx.git 이 User가 수정을 한 후 commit > push 까지 한 상태에서, 내가 변경 후 업로드하면 충돌이 난다! (에러!) 따라서, git에 올라가 있는 파일에 변경 사항이 있다면 그걸 다시 내려받아야된다. (.git이 들어있는 위치에서 pull 받아야함) git pull origin master # clone과 pull은 둘 다 원격저장소에서 → 로컬저장소로 가져오는 것이지만, git clone 은 로컬에 아무것도 없는 상태에서 원격저장소의 데이터를 가져오는 것을 의미하며 git pull 은 로컬에 이미 있는 상태에서 원격저장소의 수정상태를 반영하기 ..

JavaScript 네이밍 규칙 # 변수, 함수명은 camelCase를 사용한다. - 첫 글자는 소문자, 문자 단위로 첫 글자는 대문자를 사용한다. - 중간에 언더바(_) 사용을 금지한다. var pageName; # 상수는 영문 대문자 스네이크 표기법을 사용한다. var SYMBOLIC_NAME; # 생성자 함수는 대문자 camelCase 를 사용한다. - 생성자 함수는 동사로 시작하지 않고 첫 문자를 대문자로 시작한다. function Func() { } # 지역변수 혹은 private 변수는 언더바(_)로 시작한다. var _private; # 예약어를 사용하지 않는다. var if; // (X) var for; // (X) var this; // (X) # 전역변수를 사용하지 않는다. 모든 컴파일..

# Vue..js Project 초기 설정 과정 ​ 1. Project Folder를 생성한다. 2. Project Folder/index.html 파일을 생성한 후, vue.js 라이브러리를 CDN 형식으르 Loading 해주어야 하는데 안정적으로 구현하기 위해 아예 라이브러리로 저장해서 Loading 하자 3. Project Folder/vue/lib 경로에 vue.js 파일을 생성하여 위 js 파일을 저장해놓고, index.html 에서 Loading 해주면 된다. 이 라이브러리가 정상적으로 로딩되었다면 아래에서 소개하는 Vue.js devtools Plugin이 실행될 것이다. ​ # Vue.js 개발자 도구 (Chrome Plugin) "Vue.js devtools" Vue.js로 만든 웹 앱의..

# var 변수는 전역변수로 사용할 때에만 사용하고, 최대한 자제하는 것을 권장한다. ​ # 객체 생성 방식 (1) 리터럴 방식 var obj = new Object(); obj.name = 'lhwn'; (2) 생성자 방식 var obj = { name: 'lhwn' }; # Emmet 문법 항목 기호 Emmet HTML 자식(하위)요소 > div>ul>li 형제요소 + div>p+span 올라가기 (반복 횟수만큼 올라감) ^ div>ul>li>^p+a 반복하기 * div>ul>li*3 그룹화 () div>(header>ul>li*2)+footer 그룹화를 하지 않고 div>header>ul>li*2+footer 클래스 .class div.container =========================..

뷰와 제이쿼리를 같이 사용해도 될까? # jQuery : 자바스크립트 라이브러리 → 선호하는 이유 : 순수 자바 스크립트에 비해 화면 DOM 요소 조작과 ajax 같은 데이터 요청을 쉽게 할 수 있기 때문이다. Vue에서 jQuery는 필요없다. jQuery 처럼 Vue 에서도 화면의 요소에 쉽게 접근할 수 있는 ref 속성을 제공한다. 또, 화면의 요소 이벤트도 v-on Directive 로 처리할 수 있다. jQuery Vue.js // HTML 시작 ​ // Script $('#btn').click(function() { $('#pEl').text('jQuery'); }) // HTML 시작 ​ // Script methods: { clickBtn: function () { this.$refs.pE..