치춘짱베리굿나이스

JWT JWT란? https://jwt.io/introduction JSON Web Token JSON 형식의 데이터가 저장되어 있는 토큰으로, 보통 JSON 형태 그대로 사용하지 않고 base64로 인코딩하거나 암호화하여 해시 문자열과 비슷한 형태를 띈다 JSON 객체를 주고받는 하나의 방법이라 할 수 있으며, 토큰 기반 인증은 대부분 JWT로 구현한다 구성 요소 JWT는 헤더, 페이로드, 서명의 세 부분으로 나뉘어져 있다 헤더 { "alg": "HS256", // HS256 알고리즘을 사용하였다 "typ": "JWT" // JWT 토큰 이라는 뜻 이 토큰의 종류와 암호화에 사용된 알고리즘 정보를 담고 있다 JWT 그 자체를 암호화한 것이 아닌, 후술할 서명 부분을 암호화하는 데에 사용된 알고리즘이다 ..

로그인, 인증, 인가 로그인 대부분의 회원제 사이트에서 회원 각각이 자신의 계정을 이용하며, 모든 사람이 같은 데이터를 공유하여 접근하지 않고, 개인별로 할당된 리소스만 접근할 수 있는 방법이다 사용자들은 로그인을 통해 ID랑 비밀번호 (또는 OAuth같은 경우 서드파티 계정 정보 등…) 를 서버에 전달하여 내가 누군지 인증 절차를 거치고, 서버에서는 유저 검증 후 그에 맞는 유저 정보, 또는 권한을 인가한다 웹 사이트를 만들면서 로그인을 구현할 때는, 고려해야 할 점이 두 가지가 있다 보안 문제 아이디와 비밀번호를 탈취당한다면 다른 사람이 내 정보에 접근할 수 있다는 치명적인 문제가 존재한다 완벽하게 해킹을 막는 방법은 거의 존재하지 않고, 최선의 방법으로 예방 정도만 할 수 있다 Refresh Tok..

쿠키, 세션 쿠키, 세션, 로그인, JWT를 한 포스팅에 욱여넣다가 분량조절 실패로 열심히.. 나누고 있다 (ㅋㅋ) 쿠키와 세션 도입 배경 https://blog.chichoon.com/693 예전에 HTTP에 관한 글을 적은 적이 있었다 여기서 HTTP가 ‘상태를 저장하지 않지만, 세션은 존재한다' 라고 적었는데, HTTP의 특성 중 Connectionless (비연결성), Stateless(무상태) 가 있다 비연결성은 요청 - 응답을 교환 (통신 성공) 한 뒤 연결을 계속 유지하지 않고 끊어버리는 특성으로, 서버 상에서의 자원을 효율적으로 관리할 수 있고 수많은 클라이언트들의 연결 요청에도 리소스 낭비 없이 바로 대응할 수 있다 무상태는 서버에서 클라이언트의 이전 상태를 가지고 있지 않는다는 특성으로..

4ㅗㅗㅠ333334563ㅠ33ㅠ3ㅠ33ㅎ34623ㄹ45724ㅗㅠ4ㅠ3ㅕ4ㅠ33ㅇ3ㅗ3ㅗㅗㅅ326ㅠ533ㅜㅜㅜ34ㅠ24ㅗㅓㅓㅜ4ㅛ2ㅠ4ㅗ4ㄹ오3ㅗ34ㅗㅠ333ㅎ4ㅅ4속336ㅠ634ㅠ336ㅛㅎ45ㄷ3ㅎ423ㅎ호3ㅠ343ㅠ634ㅠ6ㅎ47ㅎ2ㅗ652ㅗ2ㅠ3ㅗ33우3432ㅗ2ㅁ3ㅜㅗ2ㅎ3ㅈ2ㅠㄴ46ㅗ33334333ㅠㅎ534632ㅎㅎ효ㅗ3ㅗ25ㅗ3소4ㄴ3ㅗ32ㅠ242ㅓ435ㅡㅓ63ㅗㅛㅑ48ㅠㅗㅠ54ㅠ4444ㅡ422ㅎㅇ24344656635362ㅡ3ㅛㅅㅅ3ㅎ443333ㅎ2ㅗ3ㅗㅠ42ㅇ4ㅗㅇ2ㅗ3343ㅗ23ㅠ3ㅎ23ㅇㅎ434436스235ㅅ6ㅎ3335흣3ㅅ3532363즈33ㅛ342542ㅐ33ㅅ44ㅎㅎ33ㅎ41ㅗ34ㅗ24ㅎ3ㅗ44ㅗㅜㅜㅗㅈ44ㅇ274262362ㅛ7366344ㅠㅗ43ㅡ33644ㅡ4ㅡ43ㅡ53ㅡ352ㅅ23ㅡㅛㅡ..

클라이언트에서 crypto 모듈 동작 안 할때 해결책 crypto 가 않되요,,, crypto 모듈을 써서 항상 암호화를 진행해 왔는데, 클라이언트 (브라우저) 환경에서는 crypto 모듈을 찾지 못하더라 package.json을 수정해서 crypto를 억지로 끌어올 수는 있지만, 그렇게 되면 이번에는 createHash 함수가 작동을 안 한다 (못 찾는다고 나온다 🫠) 이유 https://nodejs.org/api/crypto.html crypto 모듈은 node.js 빌트인 모듈이라 그렇다 당연히 브라우저 환경에서 돌아가는 클라이언트 단은 node.js를 쓰지 않기 때문에 crypto 모듈이 존재하지 않으므로 오류가 발생한다 해결법 1. SubtleCrypto 사용 https://developer.m..

HTML과 XML 비교하기 익숙한 HTML과 조금 생소한 (사실 안드로이드 할 때 조금 했었던…) XML을 비교하며 각각의 특성을 알아볼라구 한다 HTML 하이? 이것은 테스트이다 작은 프론트엔드 개발자들아 Hyper Text Markup Language 가장 최신 버전은 HTML5이다 데이터의 표현에 주 목적을 두고 있다 웹 페이지 및 웹 응용 프로그램의 구조를 손쉽게 정의하기 위한 마크업 언어이다 어느 데이터가 어느 위치에 들어갈지를 정의했다고 생각하면 쉽다 페이지를 표현하기 위해 사전 정의된 태그 세트가 있고, 각 태그별로 의미도 이미 정의되어 있다 (정적) 따라서 이미 정의된 태그 내에서만 사용해야 한다 브라우저들은 이 태그들을 읽어 해독하고, 이에 맞춰서 페이지를 표현한다 간단한 작성 오류 (태..

XML 파서와 XPath XML 문서를 접근하고 조작하여 읽어들이려면 XML 파서가 필요하다 XML 파서는 인자로 받아온 XML 문서가 제대로 된 XML 문서인지 (문법오류는 없는지, XML 형식이 맞는지 등) 검사하고, 해석한 결과를 반환한다 Parsing? Parser? 주어진 문자열이나 파일을 분석하거나, 정해진 문법 간 관계를 해석하는 것 문서를 읽어들일 때 필수 과정으로, 프로그램에 최적화된 형식으로 파싱하여 간편하게 해당 데이터를 사용할 수 있다 필요한 데이터의 빠른 처리가 가능하고, 설렁 XML 파일이 수정되었다고 해도 같은 파서를 사용하면 수정된 데이터를 같은 방식으로 잘라 가져올 수 있기 때문에 사용이 편리하다 XML 파서를 만드는 이유? XML 파일 (또는 HTML 파일) 을 파싱하여 ..

React를 클론코딩 #1 React를 사용해서 클론코딩은 이제 흔하다 React를 클론코딩해보자 물론 정말 심도있는 .. 마치 리액트의 심연같은 .. 그런 기능까진 놓칠 수 있지만 대략적이고 큼직큼직한 내용을 한번 클론코딩해서 익혀보려 한다 https://github.com/chichoon/Raect GitHub - chichoon/Raect: 리액트 및 자바스크립트 객체들 짝퉁 만들어보기 리액트 및 자바스크립트 객체들 짝퉁 만들어보기. Contribute to chichoon/Raect development by creating an account on GitHub. github.com 참고로 레포지토리 이름은 리액트 짝퉁이라 Raect이다 (래익트 ㅋㅋ) 가상 DOM https://blog.chic..