dev_H dev_H

라이트 하우스 검사 결과를 보다보니 생긴 이 항목...! preconnect나 dns-prefetch를 하라고 한다 항목을 보니 배경 이미지를 https://www.transparenttextures.com/ 여기서 url로 받아 사용하고 있었는데 이를 원 출처에 preconnect나 dns-prefetch 요구를 해서 좀 더 빨리 받아오라는 뜻인 거 같다 태영님과 스터디를 할 때 preconnect 인가 이거 본 거 같은데 잘 기억이 안 난다; 다행히 라이트 하우스는 아주 친절하게 어떻게 하면 해결할 수 있는지도 알려준다 learn how to ~를 누르면 아래의 url로 이동한다 https://developer.chrome.com/docs/lighthouse/performance/uses-rel-pr..

OAuth, JWT OAuth(Open Authorization)란? 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는 접근 위임을 위한 개방형 표준 사용자들이 타사 애플리케이션이나 웹사이트의 계정에 관한 정보를 공유할 수 있게 허용 OAuth가 나오기 전까지 기본 인증이 아닐 경우는 각 애플리케이션들이 각자의 개발한 회사의 방법대로 사용자를 확인하였으나 OAuth가 나오면서 이렇게 제각각인 인증방식을 표준화함 OAuth를 이용하면 이 인증을 공유하는 애플리케이션끼리는 별도의 인증이 필요 없음. 따라서 여러 애플리케이션을 통합하여 사용하는 것이 가능하게 됨 OAuth의 구성 요소 Resou..

REST API REST(Representational State Transfer)란? 웹 상의 자원을 HTTP URI를 통해 특정하고 HTTP Method를 통해 해당 자원에 대한 작업을 수행하는 방식을 말함 REST는 웹의 기존 기술과 HTTP 프로토콜을 그대로 사용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일임 REST의 구성요소 자원(Resource): URI를 통해 자원의 이름을 나타내고 웹 상에서 해당 자원을 찾을 수 있는 위치를 제공 ex: 'https://www.example.com/products' 행위(Verb) HTTP 메소드(GET, POST, PATCH, DELETE 등) 표현(Representations) 클라이언트와 서버가 데이터를 주고 받는 형태 JSON, ..

토큰 기반 인증 토큰을 기반으로 한 인증에 대해서 알기 전에 기존에 쓰이던 세션 기반 인증에 대해서도 같이 정리해보겠음 세션(Session)이란? 사용자가 웹 브라우저를 통해 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료하여 연결을 끝내는 시점까지 같은 사용자로부터 오는 일련의 요청을 하나의 상태로 보고 그 상태를 일정하게 유지하는 기술 즉, 클라이언트 별로 각각의 상태 정보를 서버에 저장하는 기술임 서버에서 클라이언트를 구분하기 위해 각 클라이언트 별로 세션ID를 부여하고, 웹 브라우저가 서버에 접속해 브라우저를 종료할 때까지 세션을 유지함 접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정가능 사용자가 많아질 수록 서버 메모리를 많이 차지하게 됨 -> 서버에 부하가 생길 ..

cookie, web storage, session 쿠키, 웹스토리지(로컬 스토리지, 세션 스토리지), 세션 쿠키와 웹스토리지가 생긴 이유 HTTP 프로토콜은 무상태(stateless)라는 특성을 가짐 때문에 서버는 클라이언트에서 보내는 요청만으로는 클라이언트가 누구인지 구별할 수 없음 따라서 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요할 때마다 이를 사용해 사용자를 식별하거나 사용자가 이전에 수행한 작업 등을 기억하는 데 사용하기 위해서 생김 무상태 요청과 응답을 주고 받는 사이클이 끝나고 나면 서버와의 연결이 끊어져 상태 정보를 유지하지 않는 특성 Cookie 쿠키 하나당 최대 4KB까지 사용가능. 사이트 하나 당 약 20여개를 허용함(브라우저마다 다름). 쿠키 생성 단위는 브라우저(..

브라우저에 www.naver.com을 입력하면 어떤 일들이 일어날까? 유저가 브라우저에 url을 입력함 url(Universal Resource Locator)이란? 서버에 자원을 요청하기 위해 입력하는 영문주소 DNS(domain name system) 조회 DNS는 브라우저가 리소스를 로드할 수 있도록 도메인 이름을 IP주소로 변환함 우선 브라우저는 로컬에 DNS 캐시가 있는지 살펴보고 없으면 ISP(ex: SK 브로드밴드, KT 등)의 DNS 서버에 해당 도메인 이름에 해당하는 IP 주소를 요청함 그러면 DNS 서버는 도메인 이름에 해당하는 IP 주소를 찾아 반환함 브라우저는 이렇게 얻은 IP주소를 사용해 서버와 통신하기 위해 TCP 연결을 함. 이 과정에서 3-way-handshake가 이루어짐(..

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 서로 다른 출처(origin) 간의 리소스를 공유할 수 있게 해주는 것 출처(origin)란? origin은 protocol + host + port를 의미함 (참고로 포트는 https는 443, http는 80번이며, 생략가능함) SOP(same origin policy, 동일 출처 정책)이란? SOP은 브라우저에서 보안을 위해 동일한 출처끼리만 리소스를 공유할 수 있게하는 정책을 뜻함 예전에는 프론트와 백엔드를 따로 구성하지 않고 한 번에 구성해서 모든 처리가 같은 도메인에서 가능했음 하지만 시간이 흐르고 웹이 커지면서 클라이언트에서 api를 직접 호출하게 됨 -> 그런데 클라이언트와 api가 다른 도메인인 경우..