X-Forwarded-For(XFF) 란?

XFF는 HTTP Header 중 하나로 HTTP Server에 요청한 Client의 IP를 식별하기 위한 표준이다. (XFF 헤더는 HTTP 프록시나 로드 밸런서를 통해 웹 서버에 접속하는 클라이언트의 원 IP 주소를 식별하는 사실상의 표준 헤더이다.) 웹 서버나 WAS 앞에 L4 같은 Load balancers 나 Proxy server, caching server 등의 장비가 있을 경우 웹서버는 Proxy server 나 장비IP에서 접속한 것으로 인식한다. 그렇기 때문에 웹서버는 실제 클라이언트 IP가 아닌 앞단에 있는 Proxy서버 IP를 요청한 IP로 인식하고, Proxy장비 IP 로 웹로그를 남기게 된다. 즉, 클라이언트 IP ⟶ Proxy 서버 및 장비 ⟶ 웹 서버 이 때 웹프로그램에서는 ..
분류없음 2019.08.14 14:45

[Vue.js] Event Handling

1. v-on 디렉티브를 사용하여 DOM 이벤트를 실행할 때 사용 한다. Add 1 v-on 을 대체해서 @을 사용할 수 있다. Add 1 2. 이벤트 전파 이벤트 전파로 원하는 이벤트 외에 다른 이벤트까지 발생하는 상황 발생할 경우 이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일이고, event.preventDefault() : 기본 이벤트의 자동 실행을 중지시킴 event.stopPropagation() : 이벤트의 전파를 막음 Vue 에서는 다음과 같이 이용되고 있다. Add 1 prevent 외에 다른 수식어는 다음과 같다. @click.stop : 이벤트 전파 중단시킴 @click.capture :..
분류없음 2019.07.11 17:57

[GIT] commit 취소 : git reset

방금 local stage 에서 commit 을 했는데 취소하고 싶다면 reset 을 하면 된다. 특히, reset 중 다음과 같이 네종류가 있는데 commit 하기전 상태는 유지하면서 commit 명령어를 친 것만 취소하고 싶다면 soft나 mixed 를 사용하면된다. soft 는 해당 파일들은 staged 상태로 워킹 디렉토리에 보존하고 (즉, 해당 파일들은 unstaged 상태로 워킹 디렉터리에 보존), mixed 는 해당 파일들은 unstaged 상태로 워킹 디렉터리에 보존한다 (즉, 해당 파일들은 unstaged 상태로 워킹 디렉터리에 보존). 또한, hard 는 commit 뿐만 아니라 해당 파일들 모두 삭제. 즉, 모두 취소(reset)을 해버린다. 참고 사이트 : https://gmlwjd..
Helloworld!/GIT 2019.07.03 18:59

[GIT] revert/reset 취소하기 : git reflog

git reflog 위 명령어를 치면 다음과 같이 그동안 내가 git에서 해왔던 명령어들이 나열된다. bcbb527ba (HEAD -> hotfix/test, origin/master, master) HEAD@{0}: reset: moving to bcbb527bafee735f1f0724aa5688dd4808428e27 8133014db HEAD@{1}: commit: 테스트 bcbb527ba (HEAD -> hotfix/YAPCtest, origin/master, master) HEAD@{2}: reset: moving to bcbb527bafee735f1f0724aa5688dd4808428e27 fbe20a4f8 HEAD@{3}: reset: moving to fbe20a4f8c3782ba714368..
Helloworld!/GIT 2019.07.03 18:53

[CSS] deep selector

부모 컴퍼넌트에 있는 엘리먼트 뿐만 아니라 자식 컴퍼넌트에도 동일한 클래스명이 있다면 전부 적용 CSS 에서 사용 하는 방법 .parent-class >>> .child-class { /* ... */ } // 1번째 사용 방법 .parent-class[data-v-f3f3eg9] .child-class { /* ... */ } // 2번째 사용 방법 SCSS 에서 사용하는 방법 .parent-class { // 1번째 사용 방법 : 이 방법은 deprecated 될 예정이라 2번째 사용 방법으로 사용하자 & /deep/ .child-class { background-color: #000; } } .parent-class { // 2번째 사용 방법 &::v-deep .child-class { backgr..
Helloworld!/CSS 2019.06.27 14:05

[CSS] Flex Div 안에 이미지 사용시 IE Bug

IE 에서 flex div 안에 이미지를 넣고 flex 크기에 따라 이미지 크기도 가변되도록 넣어놓았을 시 resizing 이 안되는 버그가 있다. 예를들어 이미지 원본 사이즈가 500px * 500px 인 이미지가 300px * 300px 인 이미지로 resizing 되면서 다음 그림 처럼 위아래 여백이 발생을 한다. 위와 같은 현상이 일어났을 때 방면으로 이미지를 감싸고 있는 flex div 에 다음과 같이 css 로 min-height 값을 넣어주면 해결된다. min-height: 1px; 참고 사이트 : https://github.com/philipwalton/flexbugs/issues/75
Helloworld!/CSS 2019.06.27 13:44

[Javascript] 교집합, 차집합, 배타적논리합

다음과 같이 두개의 배열이 있었을 때 let arr1 = [1, 2, 3]; let arr2 = [2, 3, 4, 5]; 두 배열의 값들을 비교하여 합, 교, 차의 값을 구하고 싶다면 다음과 같다. 1. 차집합 let difference = arr1.filter(x => !arr2.includes(x)); // 결과 1 2. 교집합 let difference = arr1.filter(x => arr2.includes(x)); // 결과 2, 3 3. 배타적논리합 let difference = arr1 .filter(x => !arr2.includes(x)) .concat(arr2.filter(x => !arr1.includes(x))); // 결과 1, 4, 5 참고 사이트 : https://stacko..
Helloworld!/Javascript & jQuery 2019.06.27 13:23

Upsource IntelliJ에 연동하는 방법

우산, Upsource는 Jetbrains 에서 개발한 Code Review Tool 이다.Jetbrains 계일인 IntelliJ 에 호환도 잘돼서 Code Review 할때 굉장히 편하다. 1. [Prefereneces] - Plugins 로 들어간다음 Upsource 로 검색 해서 다음 툴을 설치한다. 2. 설치 완료 후 IntelliJ 를 재시작한다. 3. 다시 IntelliJ 가 켜지면 다시 [Prefereneces] 에서 Tools - Upsource - Connection 에 들어가서 Server URL 에 미리 세팅되있는 Upsource URL 을 입력한다. 4. Test Connection 을 눌른 후 연동에 성공하면 Apply 로 환경설정을 종료한다. 다음은 Test Connection..
Helloworld! 2019.01.09 18:19