로니의 개발 이야기

지난 포스팅에서는 로그인 인증 - 세션과 쿠키 인증 방식에 대해서 알아봤다. 이번엔 토큰 인증 방식에 대해서 알아보려고 한다. 그렇다면, 토큰을 이용한 인증 방식은 뭘까? 토큰 인증 방식은 인증받은 사용자들에게 토큰을 발급하고, 서버에 요청을 할 때 헤더에 토큰을 함께 보내도록 하여 유효성 검사를 한다. 세션 방식과 달리 상태를 유지하지 않으므로 stateless 한 구조를 갖는다. 이러한 토큰 인증 방식에서 대표적으로 사용되는 JWT 를 이용한 토큰 인증 방식에 대해서 알아보고자 한다. JWT(Jason Web Token)이 뭘까? JWT 는 정보를 JSON 객체 형태로 사용자에 대한 속성 정보(Claim)를 저장하는 암호화된 문자열(token)이다. JWT는 토큰 자체를 정보로 사용하는 Self-co..

로그인 인증 방식에는 대표적으로 JWT를 이용한 토큰 기반의 인증 방식과 세션/ 쿠키 인증 방식이 있다. 이 중에서 오늘은 세션과 쿠키를 이용한 인증 방식에 대해서 알아보려 한다. 세션(Session)은 뭘까? 세션이란 일정 시간 동안 같은 사용자로부터 들어오는 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이다. 여기서 일정 시간이란 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점부터 웹 브라우저를 종료함으로써 연결을 끝내는 시점을 말한다. 즉, 유저가 웹 서버에 접속해 있는 상태를 하나의 단위로 보고 세션(Session)이라고 말한다. 쿠키(Cookie)는 뭘까? 특정 웹 사이트를 방문했을 때 만들어지는 정보를 담는 파일을 지칭하는 것으로, 상태 정보를 유지하는 기술이다. 세션과 쿠..

커링(Currying) 이란? 커링은 인자를 여러개 받는 함수를 분리하여, 인자를 하나씩만 받는 함수의 체인으로 만드는 방법이다. 함수형 프로그래밍 기법 중 하나로 함수를 재사용하는데 유용하게 쓰일 수 있는 기법이다. 자바스크립트 내부에는 커링이 내장되어 있지 않지만 자바스크립트로도 구현이 가능하다. 예시 적용 전에 const testAction = (initialState, action) => produce(initialState, draft => { const { type } = action; switch (type) { case TEST_ACTION1: draft.test1 = 'test1'; break; case TEST_ACTION2: draft.test2 = 'test2'; break; def..

Puppeteer? Puppeteer는 Google Chrome 팀에서 공개한 Node.js 라이브러리로 Node.js를 이용해서 Headless Chrome 혹은 Chromium를 제어하도록 도와주는 라이브러리이다. Headless Browser CLI(Command Line Interface)에서 동작하는 브라우저이다. 일반적으로 사용자가 사용하는 GUI(Graphical User Interface)에서 동작하는 브라우저가 아니다. 백그라운드에서 동작하며, 실제로 브라우저 창을 띄우지 않고 백그라운드에서 가상으로 진행되며 특정 페이지에 접속하고 랜더링 한다. Features puppeteer는 아래와 같은 기능들을 제공한다. SPA 화면을 랜더링 할 수 있다. 랜더링 후 키보드, 마우스 입력을 제어할..

Visual Studio Code를 사용하면서 코드를 이쁘게 만들어주는 prettier 라는 확장 프로그램을 사용하게 된다. 설치 후 간단한 설정을 거쳐야만 적용이 가능하다. 환경 설정 들어가기 Windows : File → Preferences → Settings Mac : File → Preferences → Settings (command + ,) 설정해주기 FormatOnSave 를 검색해서 체크를 해준다. Default Formatter 를 검색해서 Prettier - Code formatter 를 설정해준다. prettier 설정이 완료되었다. 이제 코드 작성 후 저장을 하면 자동으로 코드가 이쁘게 정렬이 되는 것을 볼 수 있을 것이다.

useSelector에 대해서 알아보자 1. 왜 사용할까? Redux store로 부터 데이터를 추출하기 위해서 사용한다. 2. 무슨 특징이 있을까? 객체 뿐만 아니라 어떤 결과도 리턴할 수 있다. action이 dispatch되었을 때, useSelector() 는 이전의 결과와 현재의 결과를 비교하여 다를 경우에 다시 랜더링을 진행한다.

🅰 useState 1. 왜 사용할까? state를 사용하기 위해서 사용한다. 함수형 컴포넌트 안에서는 state를 사용할 수 없었다. 여기서 useState Hook을 이용하여 state를 사용할 수 있게 되었다. 2. 무엇을 호출할까? state 변수를 선언하고, 그 state를 호출할 때 사용한다. this.state가 제공하는 기능과 똑같다. 3. 인자로 무엇을 넘겨줄까? 인자로 넘겨주는 값은 state의 초기 값이다. 아래의 경우 초기 값으로 0을 넘겨주는 것이다. useState(0); 4. 무엇을 반환할까? state 변수와 해당 변수를 갱신할 수 있는 함수 두 가지 쌍을 반환한다. 예를 들어, 아래와 같이 선언이 되었다고 했을 때, count라는 이름의 state는 0의 초기 값을 갖고, ..

이번에는 React 공식 문서에서도 실험 단계? 인 Suspense와 react-router-dom에서 사용하는 내장 함수들을 사용해보았다. 각각의 특징들을 예시를 통해서 간단하게 정리해보았다. 사용 예시 import(`import할 PATH`))} /> Route : Route는 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링 해주는 역할을 한다. 여기에 사용된 lazy 함수는 동적 import를 사용해서 컴포넌트를 렌더링 하는 기능을 담당한다. lazy는 Suspense 하위 컴포넌트에서 렌더링 되어야 한다. 그렇다면 Suspense는 뭘까? Suspense : Suspense는 데이터를 불러오기 위해서 사용된다. 공식 문서에 따르면 선언적으로 데이터를 비롯한..

git-bash shell을 사용하다가 hyper 의 존재에 대해서 알게 되었다. hyper 는 shell script를 다루는 tool 중에 하나인데, windows에서 사용할 수 있는 유용한 툴이다. 0️⃣ hyper 설치하기 hyper는 간단하게 해당 링크에서 설치할 수 있다. https://hyper.is/ 1️⃣ hyper 실행 후 세팅하기 hyper를 실행해보면 초기 세팅은 cmd(명령 프롬프트)로 되어있는데 나의 목적은 bash shell을 사용하는 것이기 때문에 설정을 변경해주어야 한다. 좌측 상단의 Edit 에서 Preferences... 를 클릭하거나 Ctrl + , 를 누르면 .hyper.js 라는 파일이 실행된다. .hyper.js 파일은 사람마다 다를 수 있는데 나의 경우 C:\U..

Generator 함수와 일반 함수 일반 함수를 정의하고 return 값을 지정해줬을 때 아래와 같이 보통 하나의 return 값을 지정해주게 된다. function sayHi(){ return 'hi' } const result = sayHi() console.log(result); // hi를 출력 만약 여기서 return 값을 두개를 주었을 때는 어떻게 될까? hi 와 hello 두개의 값을 리턴해주면 좋겠지만 결과는 hi 만 출력된다. function sayHi(){ return 'hi' return 'hello' } const result = sayHi() console.log(result); // hi를 출력 이와 달리 generator 함수를 이용했을 때는 Object [Generator] ..