Age of Discovery

사이드 프로젝트를 진행하는 동안 인증기반을 JWT로 하기로 했고 refresh-token을 순환시키는 방법에 대해 알게 됐다. 그게 바로 refresh token rotation인데 무엇 때문에 생긴 기법이냐?를 알기 전에 refresh token에 대해서 알아보자 JWT를 사용하면 로그인 후 서버에서 access-token을 내려주고 클라이언트는 이 access-token을 웹 스토리지에 저장한 후 API요청할 때마다 http헤더에 같이 담아서 보내준다. 이 access-token의 만료기간을 길게 잡게 되면 해커의 공격으로 탈취될 경우 해커가 이 토큰으로 api요청을 보낼 수 있다. 그렇다고 만료기간을 짧게 잡으면 사용자가 그 만료기간이 지날 때마다 로그인을 자주 해줘야 하는 불편한 경험을 초래하게 ..

https://jurgen-94.tistory.com/96 Cookie / Session 프로그래밍을 시작하면서 지금까지 쿠키, 세션, 캐시, 토큰에 대한 개념이 정확히 안잡혀있어서 '언젠간 정확히 공부해봐야지' 라고 생각만했고 그 때 그 때 필요한 정보들만 받아들였다는 생각 jurgen-94.tistory.com 지난 글에 이어 토큰과 캐시까지 자세히 알아보자! 토큰 (Token) 토큰이란 인증을 위해 사용되는 암호화된 문자열이다. 사용자가 인증에 성공하면 서버는 토큰을 생성해서 클라이언트로 보낸다. 토큰도 세션과 마찬가지로 사용자가 보내는 요청에 포함된다. 세션 인증에 비해 서버 운영의 효율이 더 좋다. 세션과는 또 다른 로그인 유지 방식이다. 서버는 요청마다 함께 오는 세션 아이디를 바로바로 확인할..

이미 push한 커밋명을 변경하는 법에 대해 알아보자! 커밋컨벤션을 지켜야하기 때문에 불가피하게 push되어있는 커밋명을 변경하게 됐다. 혹시 모를 참사에 대비하여 개인 레포에서 2, 3번 테스트 해본 뒤 본 프로젝트에 적용하게 됐다. (테스트를 한 건 정말 탁월한 선택이었다..ㅋㅋㅋ) 커밋명을 변경하려는 브랜치에서 git rebase HEAD~1 -i 다음과 같은 명령어를 입력하면 터미널이 해당 브랜치의 가장 최근 커밋을 edit할 수 있게 자비를 베풀어준다. git rebase HEAD~2 는 가장 최근 커밋 바로 이전의 커밋이다. git log로 확인하자! 이게 edit창이고 좌측 상단의 커서를 보면 pick이라는 글자를 delete버튼으로 지우고 reword를 입력한다. 그 후 esc -> :wq..

프로그래밍을 시작하면서 지금까지 쿠키, 세션, 캐시, 토큰에 대한 개념이 정확히 안잡혀있어서 '언젠간 정확히 공부해봐야지' 라고 생각만했고 그 때 그 때 필요한 정보들만 받아들였다는 생각이 들었다. 오늘 공부를 한 후 나름대로 정리를 해보려고 한다. 클라이언트와 서버가 데이터를 주고받는 방식으로 HTTP프로토콜을 사용한다. HTTP프로토콜은 이렇게 데이터를 주고받을 수 있도록 상호간에 정의한 규칙을 의미한다. 클라이언트(브라우저)가 서버에 데이터를 요청하고 서버에서는 해당하는 데이터를 응답한다. HTTP프로토콜은 Connectionless(비연결지향)과 Stateless(상태정보비유지)의 특성을 가지고 있다. 비연결지향은 서버에 연결 후 응답을 받으면 연결을 끊어버리는 특성이고 상태정보비유지는 연결을 끊..

리액트와 Next.js에 대해 공부하면서 CSR과 SSR에 대해 자연스럽게 헷갈리게 됐고(?ㅋㅋ) 찾아보았다. 공부한 내용을 간략히 설명하자면 CSR과 SSR의 정의 CSR은 클라이언트 사이드 렌더링의 약어로 프론트엔드에서 렌더링을 해준다. SSR은 서버 사이드 렌더링으로 서버에서 렌더링을 한 파일을 내려준다. 이번 글에서는 SSR만 다루겠다. SSR 전통적인 방식의 웹사이트들은 대부분 SSR 형태로 서비스 해왔다. 페이지를 이동할 때마다 새 페이지를 요청하고 서버연산에 의해 렌더링 된 후 완성된 페이지형태로 응답한다. SSR 의 장점 1. SEO - 검색엔진 최적화 이미 DOM이 다 구성된 파일을 브라우저가 내려받기 때문에 검색 엔진들이 정보를 수집할 때 정확한 정보를 검색할 수 있어서 사용자들이 웹사..

JWT는 JSON Web Token의 약어로 쿠키와 세션을 통한 로그인과는 다른 방식의 로그인 기능으로 인증에 필요한 정보들을 암호화시키는 방식을 의미한다. 이론은 워낙 다뤄야될 내용들도 방대하고 쉽게 검색해볼 수 있으니 필자가 미니프로젝트를 하면서 사용했던 코드위주로 설명하겠다. flask 프레임워크를 이용했으며 JWT와 토큰의 지속기간을 결정할 datetime 그리고 DB에 저장될 password를 암호화하기 위한 hashlib을 import해온다. 그리고 secret_key를 지정해준다. 여기서 시크릿 키는 글 포스팅을 위해 아무거나 작성한 것이고 실제로는 더 복잡하고 강력한 암호키를 사용해야한다. 이렇게 했을 때 username과 nickname그리고 password 데이터를 회원가입으로 받고 D..

. 브라우저 렌더링 과정에 이어 CS 두번째 시간이다. 브라우저가 렌더링 되는 과정을 다시한번 간략히 설명하면 요청 응답 HTML파싱ㅡDOM생성ㅡCSS파싱ㅡCSSOM생성 자바스크립트 파싱 레이아웃(리플로우) 페인팅 다음과 같은 순서를 거친다. 우리가 주소창에 https://www.google.com/ 을 입력하면 우리가 이용하는 크롬이나 사파리,파이어폭스와 같은 브라우저들은 DNS서버에 해당 도메인에 매칭되는 IP주소를 요청하고 여기서 응답받은 IP주소를 손에 쥔 채 google 서버와 통신망을 구축해 HTML,CSS,JS 파일 등을 요구한다. 그리고 받아온 파일들을 HTML부터 순서대로 파싱하는데 이 파싱이라는 것은 브라우저가 이해할 수 있는 '형태'로 바꾸는 작업이다. 그 결과물이 DOM이고 CSS도..

우리가 주소창에 www.naver.com을 입력하면 무슨일이 일어날까? 네이버 메인화면이 뜬다. 끝 여기서 포스팅을 마치겠다. 가 아니라 그 흑막을 살펴보면 꽤 복잡하다. 주소창에 URL을 입력하고 사용자에게 그 화면이 보여지는 과정을 렌더링이라고 하는데 이런 렌더링과정은 개발자 뿐 아니라 컴퓨터를 사용하는 모든 이들이 한번쯤은 관심 가져봤을법한 내용이다. 렌더링이란? 개발자가 작성한 HTML, CSS, JS 문서를 브라우저에서 출력하는 과정이다. 렌더링 순서 요청 응답 HTML파싱ㅡDOM생성ㅡCSS파싱ㅡCSSOM생성 자바스크립트 파싱 레이아웃(리플로우) 페인팅 크게 이러한 순서로 나눠볼 수 있을 것 같다. 자세한 과정을 살펴보기 전에 프로그래밍을 아예 공부해본적이 없는 사람들을 위해 HTML과 CSS에..

축구선수 쇼핑몰 프로젝트를 진행하다 JSON파일에 대해 알아둬야할 필요성을 느껴 포스팅한다. JSON이란? 1) Java Script Object Notation 의 약자이다. 2) json은 단순한 데이터 포멧이다. 데이터를 표시하는 방법일 뿐이다. 3) json을 쓰는 이유 : json파일이 가지고 있는 데이터를 받아서 객체나 변수에 할당해서 사용하기 위함이다 4) json의 구조 1. Object (객체) 2. Array (배열) 경험상 직접 보는게 훨씬 이해가 쉽다. 이런 모양이다. VS코드 내에서 파일을 생성하고 객체나 배열의 양식을 갖춘 뒤 .HTML .JS 등 확장자를 지정해주는 것 처럼 data1.JSON 이렇게 확장자를 JSON으로 지정해주면 끝 그럼 어디에 쓰느냐? 서버와 통신할 때 주..