안녕하세요. 루루개발자 입니다. 이번 글에서는 react 의 hook에 대해 한번 알아보도록 하겠습니다. 리액트 훅 (react hook) 이란? [ 정리해보기 ] 리액트의 훅은 16.8 버전부터 새로 추가된 기능이라고 합니다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수라고 합니다. Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해주는 것이라고 합니다. [ 생각해보기 ] 즉, 기존 클래스의 생명주기 메서드를 함수형 방식에서 함수로 사용할 수 있도록 한 것이 훅인 것 같습니다. 상태 값을 초기화 하거나, 변경이 발생했을 때 등의 상황에서 리액..

안녕하세요. 이번에는 스프링부트의 Interceptor 를 실제로 구현해보도록 하겠습니다. 지난번에 Filter 실습을 했었던 프로젝트에 이어서 진행해보겠습니다. 먼저 다음과 같이 3개 파일을 새로 생성해 줍니다. interceptors/TestInterceptor1.java package com.example.springbootsampleproject.interceptors; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.web.servlet.HandlerInterceptor; import org.springframework.web.servlet.ModelAndView; import javax.ser..

안녕하세요. 이번에는 스프링부트의 Filter 를 직접 구현해보는 시간을 가져보고자 합니다. 스프링부트에서 Filter 는 여러개가 등록될 수 있다고 합니다. 여러개가 등록될 수 있다면 Filter 의 순서도 컨트롤 할 수 있어야 할 것 같은데, 알아보니 setOrder 메서드를 이용해 필터의 순서를 지정해줄 수 있다고 합니다. 그럼 실습용 Filter 를 3개 정도 만들어서 로그를 찍어봄으로써 정말 순서대로 호출이 되는지, 한번 알아보겠습니다. 우선 다음과 같이 3개의 패키지 및 클래스를 생성합니다. 필터에 해당하는 코드는 다음과 같습니다. filters/TestFilter1.java (첫번째 필터) package com.example.springbootsampleproject.filters; impo..

안녕하세요. 이번에는 스프링부트로 Request 가 들어왔을 때 어떤 과정을 거치게 되는지에 대해 한번 알아보도록 하겠습니다. 스프링부트로 요청이 들어온 경우 다음과 같은 단계를 거치게 됩니다. 1. Filter 2. DispatcherServlet 3. Interceptor 4. Controller 그렇다면 각 단계에서는 어떤 일을 처리하게 되는지 알아봅시다. 1. Filter * 웹 어플리케이션에서 관리되는 영역 * 요청/응답에 대해 최초/최종 단계에 위치 * 요청/응답의 정보를 변경하거나 가공할 때 Filter 를 사용함 * 유일하게 ServletRequest, ServletResponse의 객체를 변환할 수 있음 * Spring Context 에 진입하기 전 상태인 Web Context 에서 동작..

안녕하세요. 오늘은 OAuth 2.0 에 대하여 알아보겠습니다. ▣ OAuth 2.0 이해를 위한 용어 정리 1. 인증 (Authentication) - 신원을 확인하는 것 자신이 A 라고 주장하는 고객이 정말로 A 본인이 맞는 것인지 확인하는 것을 뜻합니다. 예를 들어 앱을 통해 계좌를 개설할 때 주민등록증 사진, 이름, 생년월일, 휴대폰인증 등이 요구되는데 이러한 부분이 인증에 해당합니다. 2. 승인 (Authorization) - 권한을 부여하는 것 통제된 자원에 대해 자원의 주인이 클라이언트 접근에 대해 행하는 승낙이나 동의를 뜻합니다. ▣ OAuth 2.0 의 등장 배경 일반적인 인증 방식으로는 아이디와 비밀번호로 로그인 하는 방식이 많이 사용되어 왔습니다. 서버는 클라이언트로부터 아이디와 비밀..

안녕하세요. 이번에는 Javascript 의 TDZ(Temporal Dead Zone) 에 대해 알아보겠습니다. ▣ TDZ 가 뭐야? TDZ 란 Temporal Dead Zone 의 약자로 우리 말로 번역하면 일시적 사각지대라는 의미이며, 스코프 시작 ~ 초기화 시작 사이의 구간을 의미합니다. 다른 말로 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간이라고 말할 수 있겠습니다. 그림으로 표현하면 다음과 같이 표현 할 수 있을 것 같습니다. TDZ 에서는 선언 되기 전이거나 초기화 되기 전인 상태의 변수를 사용하는 것을 허용하지 않습니다. 그래서 TDZ 구간 때 선언되지 않거나 초기화 전인 변수를 참조하게 되면 에러가 발생하게 됩니다. ▣ 변수 생성 단계 TDZ 를 이해하기 위해서는 Javascr..

안녕하세요. 이번에는 Javascript 에서의 호이스팅 이란 개념에 대해 알아보겠습니다. ▣ 호이스팅이 뭐야? Javascript 에서 호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 말합니다. 다른 말로 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것으로 말하기도 합니다. ▣ 호이스팅 예시 (var, function) var aa; console.log('aa', aa); console.log('aa', aa); var aa; => aa 가 호이스팅 되어, 선언과 동시에 undefined 로 초기화가 되어, console.log 에서 undefined 가 표시됨 function aa() { console.log('aa 함수 호출됨!'); } ..

안녕하세요. 이번에는 OSI 7계층에 대해 알아보려고 합니다. ▣ OSI 7계층이 뭐야? OSI 7계층은 국제표준화기구(ISO, International Organization for Standardization)에서 개발한 모델로 네트워크 통신 과정을 7계층으로 나눠 설명한 것입니다. ▣ 왜 7계층으로 나눈거지? 계층을 나눔으로 인해 각 계층은 독립적인 역할을 할 수 있습니다. 네트워크 통신에 문제가 발생했을 경우 어떤 계층에서 문제가 발생했는지 파악할 수 있고 이상이 생긴 계층만 고칠 수 있습니다. ▣ 7계층 종류는? OSI 7계층은 다음과 같이 7계층으로 나뉘어 집니다. Layer 7. 응용 계층 (Application Layer) 최상위 계층으로 애플리케이션(프로그램)이 네트워크에 접근할 수 있게..