Front End Develop Front End Develop

인터셉터란? 인터셉터는 간단히 말해서 특정 URI로 요청시 Controller로 가는 요청을 가로채는 역할을 합니다.이전에 포스팅한 ExpirationDate도 이러한 인터셉터로 사용합니다. URI로 가는 요청을 가로채어 Date를 체크해주는 역할인 것입니다. JSP Filter는 아래에서 다룰텐데요.둘 다 Controller로 들어가는 요청을 가로채어 특정 작업을 하기 위한 용도로 사용됩니다. 차이점은 영역 범위가 다르다는 것입니다. Filter는 같은 웹 어플리케이션 내에서만 접근이 가능합니다. 하지만 인터셉트의 경우에는 스프링에서 관리되는 부분이기 때문에 스프링 내에 모든 객체로 접근이 허용됩니다. 또한, Filter의 경우는 주로 한글처리에 이용하며 Interceptor는 로그인 처리에 이용이 됩..

Git Conflict Git conflict가 나면 당황부터 하게 됩니다. ㅎㅎ 간단한 방법이 있어서 공유해봐요. git fetch --all git reset --hard origin/master git pull origin master 제가 수정한 파일이 conflict되면 fetch로 파일들을 remote 저장소에서 이전 fetch들을 받은 다음 local에서 다시 reset hard를 사용하여 제 상태를 컨플릭트 나기전인 수정하기 전으로 되돌립니다. 이후 pull 하면 remote에서 loacal로 정상적으로 다운받아집니다. 여기서 pull과 fetch의 차이점이 궁금하실 수 있겠습니다. PULL Pull로 Git 명령어를 사용할 시에는 현재 작업하고있는 로컬에 커밋을 병합합니다. Pull 은 ..

GULP 설치하기자동화 툴 중에 하나인 GULP를 설치해보려고 합니다.아래 출처 상의 회복맨님의 블로그에 자세히 나와있지만 저도 한번 복기할 겸 해서 작성해보려고 합니다. 1. 우선 NODE를 설치합니다. https://nodejs.org/ko/ Node 버전은 TLS로 사용하는 것을 추천해드립니다. Beta 버전으로 사용 했을 시에 가끔 오류가 생기더군요. http://hochulshin.com/node-install-osx/ Mac은 또 다른 방법으로 설치해야 합니다. 2. 커맨드라인 입력1npm install -g gulpcs 여기서 -g 는 global 옵션입니다. NPM(Node Package Module)으로 설치하는 것입니다. 3. package.js를 만들기gulp setting만 전문적으..

CSS Image Sprite CSS IMAGE Sprites?HTTP 요청 횟수와 트래픽을 절약하는 기법으로 실제로 적용하기도 매우 쉬워서 많이들 사용하는 것 같습니다.웹 애플리케이션을 최적화하는 것은 유저들을 위한 필수 요소이며, 포털사이트 같은 부분에서는 현재 널리 쓰이고 있습니다. 마젠타 배경(투명, 마스킹)에 여러 아이콘들을 넣어서 하나의 이미지로 쓰는 것이 일반적입니다.여러 이미지를 HTTP 요청 한번으로 로드한 뒤에 'background-position' 속성을 사용하여 더 빠른 웹 브라우징을 가능하게 해줍니다. 스프라이트라는 용어는 비디오 게임에서 가장 자주 사용되는 컴퓨터 그래픽 기술에서 유래했다고 합니다. 컴퓨터가 그래픽을 메모리로 불러 와서 한 번에 그 이미지의 일부만 표시할 수 있다..

user-sacale=no && shrink-to-fit?오늘은 Shirink-to-fit 속성에 대해서 알아보려고 합니다.보통 Meta Tag 중 viewport 속성은 다양하게 있습니다.과거에 필자가 주로 사용하던 user-scalable=no 또한 어느새 사라져있어 깜짝 놀랐습니다.심지어 https://validator.w3.org/ 해당 웹표준 validator에서 검색하면 어느새인가 오류로 표시되고 있었습니다. 왜 사라졌는가?필자도 시력이 그렇게 좋지 않아 그 당시에 iphone4 를 사용하고 있었는데 320px 배율의 작은 크기의 디바이스에서열심히 작은 텍스트를 읽기 힘들어 휴대폰을 확대하려 시도한 적이 있습니다.그렇게 생각하니 시각장애인들은 또 얼마나 힘들까? 하는 생각이 들었습니다.여러분이..

VS CODE와 함께하는 Spring Boot VS CODE 확장 설치1. Spring Boot Support2. Spring Initializr : dependencies를 찾고 설치하는 것을 도와줍니다. 위 두개의 확장을 설치합니다. 간단히 스프링 부트를 체크하기 위해서 vscode 내장된 git clone을 통하여 프로젝트를 복제해서 오겠습니다.Command Palette(Crtl + Shfit + P)를 실행하여 Git:Clone을 선택합니다.입력하라고 하는 URL에 https://github.com/spring-guides/gs-spring-boot.git 를 입력하여 테스트를 하기 위한 프로젝트를 받아옵니다. git이 아직 설치되어있지 않으시다면 https://git-scm.com 해당 링크에..

CSSOM CSS Object Model은 자바 스크립트에서 CSS를 조작 할 수있게 해주는 API 세트입니다. CSS의 경우 DOM과 HTML API의 펜던트이며, 이를 통해 CSS양식을 동적으로 읽고 수정할 수 있습니다. 웹 브라우저가 렌더링 하기 위해서는 이 구조를 거치게 됩니다.DOM과 마찬가지로 트리형태의 구조로 이루어져 있습니다. 웹 브라우저가 렌더링 하는 순서는 다음과 같습니다. The web browser examines your HTML and builds the DOM (Document Object Model). The web browser examines your CSS and builds the CSSOM (CSS Object Model).The web browser combines..

큐(Queue)란 무엇인가?큐는 먼저 들어간 데이터가 먼저 나오는 FIFO(First In First Out)구조이다.우선순위에 따라서 요소 순서가 정해지며, 요소는 중복 될 수 있다는 것이 특징이다.Queue는 줄(line)이라는 의미를 가지고 있다. 가장 오래된 먼저 입력된 데이터를 front라고 하고 가장 최근에 입력된 마지막에 있는 데이터를 rear라고 한다. 데이터 삽입은 rear에서 이루어지고 삭제는 front에서 이루어진다. front와 rear를 관리하는 배열을 이용해서 front 노드와 rear 노드를 관리하는 연결 리스트를 이용할 수 있다. 큐는 insert(삽입), remove(삭제), 읽기(peek)으로 사용할 수 있다. 배열을 통한 Queue 123456789101112131415..