본문 바로가기

WEB18

Token의 구조부터 Access, Refresh Token까지의 간략한 정리 Token 인증 HTTP는 모든 사용자의 요청마다 연결과 해제를 반복한다. 로그인도 예외는 아니기 때문에 사용자가 매 요청마다 로그인을 하지 않기 위해서는 추가적인 작업이 필요하다. 이 중 대표적인 방법이 사용자 인증 정보를 서버에 저장하는 세션, 그리고 클라이언트에 저장하는 토큰 방식이다. 인증 정보의 저장 장소로 클라이언트보다는 서버가 더 안전하기는 하지만 계속 연결 상태를 물고 있기 때문에 한번에 여러 접속자가 몰릴 경우 과부하에 걸릴 수 있다. 이를 예방하기 위해 하나의 서비스에 여러 서버를 두게 되는데, 문제는 HTTP의 비연결성, 비상태성으로 인해 요청마다 접속하는 서버가 달라질 수 있다는 점이다. 이를 해결하기 위한 몇 가지 방법이 있지만, 토큰 방식은 애초에 클라이언트에 인증 정보가 저장되.. 2023. 1. 13.
Next SEO SEO의 적용 회사 홈페이지를 리뉴얼하면서 검색어 최적화를 적용할 일이 생겼다. SEO를 위해 설정할 파일이나 태그 작업은 크게 4가지 인 듯하다. Robots.txt 설정 검색 엔진 로봇이 웹사이트를 크롤링할 때 URL의 어떤 부분을 허용하고 허용하지 않을지 등을 가이드하는 파일이다. 기본 설정은 모두 허용인데, 회사 홈페이지에 별도로 접근을 막아야 할 요소는 없었으므로 해당 파일은 추가하지 않았다. ( 자세한 내용 ) Sitemap 설정 회사 홈페이지가 500페이지 미만이고, 미디어 파일이 많지 않기 때문에 사이트맵이 꼭 필요하지는 않았다. 그러나 구글 서치 콘솔에 들어가보니 배포한 지 일주일이 넘었음에도 아직 읽어가지 못한 페이지들이 있어 검색 엔진 로봇이 더 쉽고 빠르게 페이지를 읽어가기를 바라는.. 2023. 1. 12.
IE11 크로스브라우징_Polyfill의 적용과 SVG의 스타일링 이슈 국내 브라우저 점유율 ( 2021 -2 ) 언제 이렇게 내려갔지? 이제 IE는 국내에서도 거의 바닥에 붙을 만큼 미미한 점유율을 보인다! 그러나 최근에 은행권에서 사용하는 어드민을 서비스하게 되었고, 사용자 대부분이 edge, IE11을 사용중이라 지원할 일이 생겼다. Polyfill ES문법은 브라우저마다 지원 범위가 다르다. 그 중 구형 브라우저인 IE11은 ES6 이상 최신 문법을 지원하지 않는다. Polyfill은 브라우저가 이해할 수 없는 코드를, 이해할 수 있게 코드 소스를 제공한다. 사실 선배가 폴리필 지원을 할 때, '트랜스파일러를 쓰는데 왜 별도의 폴리필이 필요할까?' 생각했다. 이유는, 트랜스파일러로 변환할 수 있는 경우와 없는 경우가 있기 때문이다. Javascript에서는 코드 실행.. 2023. 1. 3.
검색창에 https://www.google.com 입력 후 일어나는 일 (URL, DNS 중심) 1. 사용자가 검색창에 https://www.google.com을 입력한다. 택배를 보내고 받으려면, 그것을 받을 집 주소, 그리고 물건을 보내는 곳의 주소지가 필요하다. 네트워크 상에서 google.com은 구글의 주소지 역할을 한다. 구글은 정보들을 이곳에 저장해놓았다가 사용자들의 요청이 오면 응답해준다. 사용자가 입력한 https://www.google.com을 우리는 URL이라 부른다. 평소 'URL 공유 좀'이라고 했을 때 우리는 URL을 해당 사이트의 주소지처럼 인식하지만, 사실은 주소지를 '포함'한 개념인데, 아래 사진처럼 URL은 각 자리마다 의미가 있다. 하나씩 살펴보자. https://www.google.com https는 통신 규약이다. 브라우저가 google.com과 데이터를 주고받.. 2022. 12. 25.
[WEB] REST API REST ( Representational State Transtfer ) 자원(정보)에 이름을 지어 구분하고, 고유한 주소를 지정해 해당 자원의 상태/정보를 주고 받는 방법론이다. URL를 통해 자원을 정의하고, 메서드를 통해 할 일(CRUD)을 지정하며, JSON 같은 특정한 형태로 데이터를 주고 받는 것을 의미한다. 자원 : 이미지, 동영상, DB 고유한 주소 : URI Method : Post, Get, Put, Delete CRUD : Create, Read, Update, Delete API ( Application Programming Interface ) 제공하는 정보(ex. 날씨 정보)를 어떤 방식으로 요청해야 하는지, 그 요청으로 어떤 데이터를 제공 받을 수 있을지에 대해 정보 제공자(.. 2020. 8. 20.

티스토리툴바