리다이렉트 URI 카카오 소셜로그인 구현을 하다 보면 redirect uri를 입력해줘야 한다. 프론트에서는 KAKAP API server에 인가 코드를 요청하고, redirect uri로 인가코드를 받는다. 그리고 이 받은 코드를 백으로 전달해서 JWT를 받게 된다. 그런데 URL도 아니고, URI란 무엇일까? URI vs URL vs URN URI → 로케이터(locator), 이름(name) 또는 둘 모두를 사용할 수 있다. URI(Uniform Resource Identifier) Uniform: 리소스를 식별하는 통일된 방식 Resource: 자원. URI로 식별할 수 있는 모든 것 Identifier: 다른 항목과 구분하는데 필요한 정보 URL(Uniform Resource Locator) L..
프로토콜이란? 두 개체 사이의 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구 ⏩️ 개체 사이의 통신 시 교환되는 데이터의 형식을 정의하는 규칙의 집합 *개체: 라우터, 서버, 모뎀 처럼 데이터 통신이 가능한 주체 프로토콜의 주요 요소 무엇을, 어떻게, 언제 통신할 것인가를 규정 구문(Syntax) 무엇을 데이터의 형식, 부호화(Unicode, ASCII), 신호크기(0과 1의 전압 세기와, 어떻게 표현할지) 를 정함 의미(Semantics) 어떻게 데이터의 각 항목이 무엇을 뜻하는지를 어떻게 해석할 것인가? 오류 관리를 위한 제어 정보 등 Timing 언제 전송속도, 메시지의 순서를 정함 프로토콜의 종류 계층 프로토콜 이름 Application layer HTTP, HTTPS, FTP, DNS..
1. 가상 돔(Virtual DOM) 이란? 웹페이지가 표시해야 할 DOM을 일단 메모리에 저장하고, 리액트가 실제 변경에 대한 준비가 완료됐을 때 실제 브라우저의 DOM에 적용 이러한 가상 돔은, 파이버(Fiber)라는 아키텍처로 구성되어 있다. 2. 리액트 파이버(React Fiber) 하나의 element에 파이버 하나가 생성되는 1:1 관계 파이버가 하는 일 작업을 작은 단위로 분할한 다음, 우선순위를 매긴다. 이러한 작업을 일시 중지하고 나중에 다시 시작할 수 있다. 이전에 했던 작업을 다시 재사용하거나 필요하지 않은 경우에는 폐기할 수 있다. ⏩️ 이러한 작업들이 모두 비동기로 일어난다. 파이버 구현체의 주요 속성 tag: element 1:1 매칭 정보 (리액트 컴포넌트, DOM노드, .....
리액트 라이프 사이클이란? 리액트 컴포넌트의 탄생, 변화, 죽음 클래스형 컴포넌트의 라이프 사이클 1. Mount 컴포넌트가 화면에 추가될 때 Render phase constructor() getDerivedStateFromProps() render Commit phase 리액트가 DOM 업데이트 componentDidMount() 2. Update 컴포넌트가 새로운 prop, 상태를 받을 때 Render phase New props, setState(), forceUpdate() shouldComponentUpdate() 에서 true 반환하는 경우 + forceUpdate() render Pre-Commit Phase getSnapShotBeforeUpdate() Commit phase 리액트가 D..
이미지 최적화의 필요성 이미지는 웹에서 많은 용량을 차지하고 있다! 그만큼 웹 최적화에 많은 영향을 끼치기 때문에 중요하다. 적절한 이미지 포맷 선택하기 PNG JPEG WebP 👍 비손실 압축 👍 색상이 다양한 이미지에 적합 👍 PNG보다 용량이 비교적 작다 👍 용량이 PNG, JPEG보다 작다 👎 색상이 다양한 이미지에 부적합 👎 손실 압축 👎 투명도 지원 X 👎 구형 브라우저 지원 X 👎 이미지 변환 작업 필요 ⏩️ WebP 가 95%의 커버리지를 가지고 있다고 하니 웬만하면 WebP 쓰자! 반응형 이미지 제공하기 의 속성 이용! src 반응형 X fallback으로 이용 srcset 제공할 이미지들을 적는다. "이미지이름 크기w, 이미지이름 크기w, ..." 형식으로 적어주면 된다. sizes 이..
용어 알기 ✅ 하이드레이션(hydration) 1. JS 코드가 실행되어 2. JS로직과 HTML이 연결 후 3. 유저 상호작용이 가능하도록 하는 것 ✅ 요청 페이지 요청을 의미 ✅ TTFB(Time To First Byte) ⏩️ 데이터가 브라우저에 도달 ✅ FCP(First Contentful Paint) ⏩️ 유저가 컨텐츠를 볼 수 있음 ✅ LCP(Largest Contentful Paint) ⏩️ 유저가 주요 컨텐츠를 볼 수 있음 ✅ TTI(Time To Interactive) ⏩️ 유저와 상호작용 가능 CSR (Client Side Rendering) 데이터 페칭 이후에 렌더링. 1. User Request 2. CDN이 JS로 접근할 수 있는 링크와 HTML 파일을 서빙 3. 브라우저는 HTM..
클로저(Closure)란? 정의 1 “A closure is the combination of a function and the lexical environment within which that function was declared” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. [240130] 렉시컬 환경, 렉시컬 스코프 렉시컬 환경(렉시컬 환경 객체) 이란? 코드블록({...}), function, script를 실행하기 앞서 생성되는 특별한 객체 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체 렉시컬 환경 hamo0.tistory.com 함수 makeCounter()를 호출하면 내부 함수 function() { re..
CDN(Content Delivery Network)이란 컨텐츠 전송 네트워크(CDN)는 지리적으로 분산된 서버들을 연결한 네트워크이다. 사용자가 웹 사이트를 방문할 때 해당 웹 사이트 서버의 데이터는 사용자의 컴퓨터에 도달하기 위해 인터넷을 통해 이동해야 함 사용자가 해당 서버에서 멀리 떨어져 있는 경우 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 데 시간이 오래 걸림 웹 사이트 컨텐츠는 지리적으로 사용자와 가까운 CDN 서버에 저장되며 컴퓨터에 훨씬 빨리 도달 가능 CDN의 장점 페이지 로드 시간 단축 대역폭 비용 절감 캐싱 및 기타 최적화를 통해 CDN은 서버가 제공해야 하는 데이터의 양을 줄임 컨텐츠 가용성 ⬆️ 더 많은 웹 트래픽을 처리하고 웹서버의 로드를 줄일 수 있음 하나 이..
