본문 바로가기

분류 전체보기

 (37)
[로그인 구현] Session 방식 로그인 서버가 session id를 기록하는 법세션id를 어떻게 알아 챘느냐? > 쿠키로 인해서..!쿠키란서버에서 보내주는 작은 데이터 조각으로, 서버에서 셋팅해주는 값서버에서 리스폰스 헤더에 담아서 전달해주면, 브라우저는 들고 있다가 같은 도메인으로 요청할 때 쿠키를 자동으로 담아서 전송한다.서버가 브라우저에 쿠키를 저장하는 방법문제점: 설정 등이 잘못되었을 경우 에러를 안내고 조용히 없어지기 때문에 찾는데 시간이 걸릴 수 있다.브라우저가 쿠키를 서버에 전송하는 방식쿠키는 클라이언트에서 건들면 안되는 것 쿠키 관련 정책 지정하기SameSite: None, Lax, Strict이 쿠키가 어떤 도메인에서 움직이게 할것이냐보안: None none은 아무 도메인에서나 가져가서 쓸 수 있음. (getCookie로 가져..
[로그인 구현] JWT 방식 로그인 1. 로그인 기능 연결로그인(POST)URL: urlbody: { username: string, password: string }response { access_token: string }**type LoginResult = 'success' | 'fail'export type LoginResultWithToken = { result: 'success' access_token: string} | { result: 'fail' access_token: null}export interface LoginRequest { username: string password: string}export const loginWithToken = async (args: LoginRequest): Promise ..
[로그인 구현] JWT vs Session 로그인이란 무엇인가?사용자가 시스템에 액세스하기 위해 식별자 정보를 입력하는 것으로, 컴퓨터 보안 절차의 필수적인 부분이다.해당 사용자는 시스템의 제한된 파일 및 프로그램 세트에만 액세스 할 수 있다.시스템 로그 파일에 자동으로 입력되는 데이터 형식의 감사 추적도 제공.👉🏽 사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차1. 로그인 구현을 위해 FE가 해야하는 일로그인 페이지로그인 인증관련 데이터 관리 (토큰, 세션..)로그인 상태에 따른 화면/기능 제어(권한이 없는 자원에 접근하지 않는 구조 만들기)url로 직접 접근해도 404리턴2. 로그인 동작유저가 유저네임, 패스워드 등을 서비스에 전달하면 서비스는 이걸 비식별화해서 가지고 있다가 인증매번 이 동작을 ..
브라우저 렌더링 최적화 🧑🏻‍🎨 성능 개선의 핵심 Repaint, Reflow브라우저 렌더링 단계에서 사이트 최적화는 html parser, css parser, layout, painting 에서 이루어지며, 브라우저 렌더링 성능을 결정하는 중요한 요소 중 하나는 메인 스레드 점유 여부이다.적용하는 CSS속성에 따라 렌더링 파이프라인에서 다시 진행해야 하는 시작점이 다르고, Reflow -> Repaint -> Composite 순으로 렌더링에 대한 비용이 낮다. (하지만 과도한 레이어 사용은 오히려 레이어 합성의 오버헤드로 인해 병목이 생길 수 있다.)👉🏻 때문에 reflow와 repaint는 사이트 최적화에서 가장 큰 핵심으로 최소화하는 것이 중요Reflow자바스크립트로 요소의 크기를 변화시킬 경우 레이아웃 계산..
브라우저와 브라우저의 렌더링 브라우저 점유율 (한국 데이터)🖥️ desktop📱 mobile & tablet브라우저 호환성1. 웹 브라우저 엔진의 주요 기능HTML 및 CSS 문서를 해석하여, 웹 페이지의 렌더링을 담당합니다.JavaScript 코드를 해석하여, 웹 페이지의 동작을 제어합니다.웹 페이지에서 사용자 입력 이벤트를 처리하여, 웹 페이지의 동작을 변경합니다.웹 페이지에서 네트워크 요청을 처리하여, 웹 페이지에 포함된 리소스를 가져옵니다.2. 엔진 설명👉🏻 대부분 웹킷이기 때문에 호환성이 좋아졌고, 호환성에 대한 큰 의미는 없어졌다.브라우저 렌더링가장 많은 점유율을 차지하고 있는 Blink엔진 기준으로 브라우저 렌더링 과정은 아래와 같다.HTML Parsing에서 시작하여 구성을 분석하는 Style, Layout,P..
리소스 우선순위 : preload, preconnect, prefetch 1. preload 웹페이지에서 사용할 소스를 미리 로딩하여 필요한 리소스를 빠르게 가져오게 한다.현재 페이지에서 3초 이내에 반드시 사용되는 리소스에만 사용남발하면 리퀘스트를 늘리기 때문에 오히려 악영향주의사항as 속성 사용as 속성을 사용하여 리소스의 유형을 브라우저에 알려줘야 한다. 올바른 유형이 설정되어 있지 않다면 브라우저는 해당 리소스를 사용하지 않음중복 리소스 참조preload는 브라우저가 반드시 리소스를 가져오게 만든다. 리소스를 중복 참조하면 중복된 개수만큼 리소스를 가져오기 때문에 리소스를 중복해서 참조하지 않도록 해야 한다.사례폰트시스템 폰트와 선언된 폰트의 충돌을 해결할 수 있다.웹폰트소스가 웹페이지가 로딩이 시작될때부터 불러와지기 때문에, 렌더링이 끝나고 나서 전체 폰트를 바꾸는 ..
Reset CSS, Normalize, tailwindCSS preflight! Reset CSSReset CSS의 목표는 기본 줄 높이, 여백, 제목 글꼴 크기 등과 같은 브라우저 불일치를 줄이는 것으로, 브라우저마다 기본 디폴트 스타일 값이 아니라 동일한 CSS스타일을 보여주기 위해 디폴트값을 초기화 한다. 크로스 브라우징(Cross Browsing)브라우저별 스타일은 개발자도구 스타일에서 user agent stylesheet에서 확인할 수 있다. 🖥️ 3대 브라우저별 UserAgent StyleChromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.cssGecko (Firefox): https://sear..
반응형 웹사이트에 유용한 미디어 쿼리, CSS Function 정리! 1. 반응형 웹사이트하나의 웹사이트로 접속하는 기기의 화면의 크기에 맞춰 자동으로 레이아웃 및 콘텐츠를 구성하는 개발방법스마트폰의 대중화로 인해 중요성 인식인터넷에 접속되는 기기가 다양해지면서 더 다양한 스크린에 대응해야 하는 이슈 (스마트폰, 랩탑, PC, 워치, 티비, 냉장고, 자동차, ...)2. 미디어 쿼리와 반응형 웹사이트의 범위📚 미디어 쿼리 기본@media all and (조건) and (조건) {}all: 미디어 설정, default: all, screen | print를 주로 사용only: 특정 미디어에만 적용하는 경우, screen | print를 지정하는 경우and: 미디어 쿼리의 조건은 모두 and 키워드로 연결조건반드시 괄호()안에 조건을 입력min: 최소값이 일치할 때, 입력한..

티스토리툴바