🛡️ CSRF (Cross-Site Request Forgery) 쉽게 이해하기CSRF는 해커가 '나인 척' 가장해서 웹사이트에 이상한 요청을 보내는 공격 방법입니다.쉽게 말해, 내가 로그인되어 있다는 점을 악용해 내가 원하지 않은 행동(비밀번호 변경, 결제, 글 작성 등)을 나도 모르게 하게 만드는 것입니다.🎡 1. 쉬운 비유: 놀이공원 자유이용권 사건이 상황을 '놀이공원'에 비유하면 아주 쉽게 이해할 수 있습니다.① 로그인 (자유이용권 발급)여러분이 놀이공원에서 손목에 '자유이용권 밴드'를 찼습니다.이 밴드만 보여주면 매점에서 밥을 외상으로 먹을 수 있습니다.(인터넷 상황): 웹사이트에 로그인해서 '쿠키/세션'을 받은 상태② 함정 (사기꾼의 등장)벤치에서 쉬고 있는데, 낯선 사람이 다가와 "이 상..

개요과제 할 때마다 프로젝트를 세로 세팅하는게 번거로워서 react 프로젝트를 스캐폴딩해주는 cli를 만들고 있었습니다.노드니까 모듈 시스템을 cjs를 사용해야한다고 생각하고 있었는데, 정말 그런가 의구심이 들어 조사를 하였습니다.결론적으로는 노드에서도 ESM을 사용할 수 있는데 어떤 차이점이 있는지 요약합니다.CommonJS와 ESM의 차이점트리쉐이킹요즘 현대에는 vite 등 번들러들이 기본적으로 트리쉐이킹을 지원하여 사용되지 않는 코드를 없애 번들 크기를 줄여줍니다.하지만 CommonJs는 모듈을 사용하고 있다는 것을 런타임이 되어서야 알 수 있어서 트리쉐이킹을 어렵게합니다.ESM 호환성CommonJs 모듈시스템 프로젝트에서는 외부 ESM 모듈 라이브러리를 사용할 수 없지만, ESM 모듈시스템 프로젝..

들어가며REST vs GraphQL이전 직장에서 REST API로 구축된 프로젝트를 GraphQL로 전환하는 과정을 경험했습니다. 이 경험을 통해 오랫동안 웹 API의 표준처럼 여겨져 온 REST의 자원(Resource) 중심 접근 방식과, 최신 애플리케이션의 복잡한 데이터 요구에 맞춰 등장한 GraphQL의 클라이언트 중심 접근 방식이 어떻게 다른지 체감할 수 있었습니다. 좀 더 명확한 차이점을 이해하기 위해 각 기술이 어떻게 탄생했고, 어떤 핵심 원칙을 가지고 있는지, 그리고 실제 어떤 상황에 사용하면 좋은지, 나아가 캐싱이나 보안 방식의 차이점까지 조사했습니다.REST란? — 웹을 위해 만들어진 아키텍처 스타일REST의 탄생등장 배경과 동기REST는 2000년 로이 필딩의 박사 논문에서 처음으로 소..

웹 어플리케이션에서 로그인을 구현하는 방법은 크게 쿠키, 세션을 이용하는 방법과 토큰을 이용하는 방법 2가지가 있습니다. 간단히 말하면 쿠키, 세션 방식은 서버에서 세션아이디를 기록하고 브라우저에서 쿠키를 저장하는 방법이고 토큰 방식은 토큰을 발행하여 토큰의 유효성을 검증하는 방법입니다. 쿠키, 세션 (cookie, session) 사용자(클라이언트)가 서버에 자원을 요청 시 서버에서 사용자를 특정할 수 있는 데이터를 기반으로 세션 아이디를 생성하고, 해당 아이디를 키값으로 하여 필요한 값들을 서버의 메모리에 저장하고, HTTP 프로토콜의 header의 setCookie를 통해서 브라우저의 쿠키에 세션 아이디를 기록하도록 합니다. 브라우저는 request 요청을 보낼 시 header에 cookie를 자동..

REST 정리 : REST란? 저번 글에서는 REST에 대해 정리를 해보았습니다 그럼 REST API는 무엇일까요?REST API는 REST 아키텍쳐 스타일을 따르는 API 하지만 오늘날 REST API라고 하는 API들의 대부분이 REST 아키텍쳐 스타일을 모두 따르지는 않습니다(2017년 기준)그럼 REST API는 제약조건들을 다 지켜야하는 것이 아니라 몇개 빠뜨려도 되는 걸까요?그에 대한 답은 모두 지켜한다고 Roy T.Fielding이 말을 했습니다하이퍼텍스트를 포함한 self-descriptive한 메시지의 uniform interface를 통해 리소스에 접근하는 API -Roy T.Fielding 그렇다면 원격 API가 꼭 REST API여야 하는가?시스템 전체를 통제할 수 있다고 생각하거나..

많이 듣고 많이 사용하는 개념이지만 알 것 같으면서도 모르겠는 REST에 대해 찾아 보던 중 정말 잘 설명한 영상이 있어 정리를 했습니다REST란 REpresentational State Transfer의 약자인데 해석해 보면 대표적인 상태 전송 방법인데... 약자를 보아도 무슨 의미인지 유추하기가 매우 힘듭니다 위키백과에서도 컴퓨터 간에 상호 운용성을 제공하는 것중에 하나라는 설명이 있지만 아직 이해하기에는 부족합니다그래서 접근 방법을 바꾸어 REST가 어디서 부터 나왔는지 알아보도록 하겠습니다. REST의 시작WEB(1991)Q : 어떻게 인터넷에서 정보를 공유할 것인가?A : 정보들을 하이퍼텍스트로 연결한다.표현 형식 : HTML식별자 : URI전송 방법 : HTTP HTTP/1.0 (1994-19..

쿠키, 세션과 토큰의 차이점에 대한 정리 2022.04.19 - [Study/Web] - 쿠키, 세션(cookie, session)과 토큰 (token, JWT)의 차이점 쿠키와 세션을 사용하는 이유 HTTP 프로토콜은 2가지의 특징을 가지고 있다 1. 비연결지향(Connectionless) 클라이언트가 request를 서버에 보내면, 서버는 요청에 맞는 response를 보내고 접속을 끊는다. (HTTP1.1 버전에서는 커넷견을 열어두고(연결을 유지하고) request에 재활용하는 기능이 추가되었다) 2. 상태정보유지안함(Stateless) 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는다 그렇기 때문에 HTTP는 사용자의 요청마다 연결과 해제를 하고 연결 상태를 유지하지..

VirtualDOM에 대해서 알아보기 전에 브라우저가 어떻게 작동하는지 먼저 알아 봅시다 쉽게 생각하면 html과 css를 합치고 화면에 나올 수 있게 배치한 후 출력한다 DOM Tree 생성 브라우저가 HTML을 전달 받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM노드로 이뤄진 트리를 만듭니다각 노드는 각 HTML 엘리먼트들과 연관되어있습니다 Render Tree 생성그 후 외부 css파일과 각 엘리먼트의 inline 스타일을 파싱합니다.스타일 정보를 사용하여 DOM트리에 따라 새로운 트리, 렌더트리를 만들어요 Render Tree 생성 -그 뒤에선 무슨일이 일어나고 있는가Webkit에서는 노드의 스타일을 처리하는 과정을 'attachment'라고 부릅니다.DOM트리의 모든 노드들은 'attach..