치춘짱베리굿나이스

OAuth 우리의 42 마지막 과제인 ft_transcendence 로그인 페이지의 일부분이다 42 네트워크의 OAuth를 통해 로그인이 가능하도록 만들어진 것을 볼 수 있다 그렇긴 한데,, OAuth는 어떻게 동작하는 것일까? 나는 그걸 알고 만든거긴 할까? 라는 의문이 들어서 이제와서 (…) 정리해보려고 한다 ft_transcendence (42 과제) 기준으로 작성된 포스팅이라 42 향이 진하게 묻어있을 수 있다 정의 OAuth 2.0 웹사이트에서의 설명 https://oauth.net 웹, 모바일, 데스크톱 애플리케이션에서 사용되는, 간단하고 표준적인 방법으로 안전하게 인가를 받을 수 있는 개방형 프로토콜 OAuth 2.0 is the industry-standard protocol for aut..

웹소켓 (WebSocket) Socket.io 설명이랑 묶을까 하다가 웹소켓 부분이 너무 길어져서 분리했다 설명 우리가 아는 HTTP 프로토콜은 클라이언트와 서버가 한 번 데이터를 주고받으면 대부분 연결을 끊어버리는 (비연결성) 특징을 가지고 있었다 따라서 한번 데이터를 주고받았다? 연결 유지가 끊겨버리는 것이다 하지만 채팅, 실시간 게임, 주…식과 같은 몇몇 서비스에서는 실시간으로 데이터가 이동하는 것을 보장하기 위해 서버 - 클라이언트 간 끊기지 않는 연결을 필요로 하고, 이때 사용할 수 있는 것이 WebSocket 프로토콜이다 웹소켓은 RFC6455 명세에 처음으로 정의되었으며, 서버와 브라우저 간 연결이 끊어지지 않고 유지되므로 지속적으로 데이터를 전달할 수 있다 다르게 말하면 연결 이후 별도로 ..

'localhost:9000' 출처로부터 발생한 'locahost:8080/graph' 를 향한 fetch 접근은 CORS 정책에 의해 차단되었습니다: Preflight 요청에 대한 응답이 접근 제어 체크를 통과하지 못하였습니다: 'Access-Control-Allow-Origin' 헤더가 요청한 리소스에 존재하지 않습니다. 불투명한 응답이 필요한 경우, 요청 모드를 no-cors로 설정하여 CORS가 비활성화된 리소스를 fetch하세요. 많은 프로젝트들을 좌절케 하는 그 녀석이다 나도 프론트엔드 처음 공부할 때 이 녀석 때문에 프로젝트 하나가 터진 적이 있었다 (크흠,,,) 그 때의 과오를 잊지 않기 위해 정리하기… 사전 지식 도메인, 스킴, 포트 CORS를 보기 전에 도메인, 스킴, 포트가 무엇인지 ..

DOM과 웹 렌더링 개요 Next.js 의 첫 챕터에 DOM과 바닐라 자바스크립트, 리액트 관련 내용이 있길래 정리하다가 아예 DOM, 브라우저 렌더링 관련 내용을 분리하는 게 나을 것 같아서 쓰는 포스팅 https://blog.chichoon.com/418 여기에 대강 DOM에 관해 정리해놓긴 했지만 뭔가 크진 않다 사전 지식 DOM Document Object Model HTML (또는 XML) 요소들을 객체로 표현한 모델이다 DOM은 트리와 같은 구조를 띄고, HTML (또는 XML) 에서의 각 요소들이 노드로 표현되며 서로 부모 - 자식 간의 관계로 연결되어 있다 프로그래밍 언어 (JavaScript 등의 스크립팅 언어) 와 유저 인터페이스 (UI ⇒ 웹 페이지) 간의 연결다리 역할을 하며, DO..

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(무상태) 가 있다 비연결성은 요청 - 응답을 교환 (통신 성공) 한 뒤 연결을 계속 유지하지 않고 끊어버리는 특성으로, 서버 상에서의 자원을 효율적으로 관리할 수 있고 수많은 클라이언트들의 연결 요청에도 리소스 낭비 없이 바로 대응할 수 있다 무상태는 서버에서 클라이언트의 이전 상태를 가지고 있지 않는다는 특성으로..

HTTP 기본 HTTP 소개 Hypertext Transfer Protocol 응용 계층 (Application Layer) 에서 사용되는 프로토콜로, 1989년에 팀 버너스 리에 의해 고안되었다 참고로 www랑 URL 개념도 이분이 고안하셨다 역시 CERN인가? 대박천재시다 처음에는 웹 브라우저 - 웹 서버 간 하이퍼미디어 문서 (이름에도 나와있듯, 말그대로 Hypertext 문서) 를 주고받기 위해 만들어진 프로토콜이지만, 지금은 일반 텍스트나 JSON 객체, 이미지 등 미디어 파일들도 주고받을 수 있게 확장되었으며, 어플리케이션이나 IoT 등 웹과 관계없는 분야에서도 이 프로토콜을 이용하여 데이터를 주고받는다 HTTP는 www (월드 와이드 웹) 에 내재되어 있으며, 일반적인 웹 브라우저에는 htt..