injae

세션 기반 인증과 토큰 기반 인증을 비교해서 설명해 주세요. 세션 기반 인증방식  그냥 세션 id만 주면 되고, 세션에 대한 모든 정보는 세션 DB에 저장되어 있다. 페이지를 요청하면 서버는 세션 ID를 DB에서 찾으면 된다. 세션마다 별도의 ID가 있어서 해당 세션 ID는 쿠키를 통해 브라우저로 돌아오고 저장된다. 따라서 같은 웹사이트의 다른 페이지로 이동하면, 브라우저는 세션 ID를 갖고 있는 쿠키를 자동으로 서버에게 보내게 된다.  서버는 로그인 된 유저의 모든 정보를 세션 DB에 저장하기 때문에 이 정보들을 이용하여 새로운 기능 추가 가능원하지 않는 디바이스에서 가제 로그아웃을 할 수 있도록 하기OTT 서비스에서 계정 공유 숫자 제한 (현재 로그인 인원을 파악하기 쉬움)일일이 DB에 유저 정보들을..

CORS 에러에 대해 설명과 해결 방법CORS (Cross-Origin Resource Sharing)란? CORS의 문장을 직역하면 "교차(엇갈린) 출처 리소스 공유 정책" 이라고 해석할 수 있습니다. 웹 애플리케이션이 다른 Origin(출처)에서 리소스를 요청할 때 발생하는 보안 메커니즘입니다. 기본적으로 브라우저는 보안을 위해 한 Origin(출처)에서 실행되는 웹 애플리케이션이 다른 Origin(출처)에서 호스팅되는 리소스에 접근하지 못하도록 차단합니다. 그러나 CORS 정책을 통해 특정 도메인에 대한 접근을 허용할 수 있습니다. 출처(Origin) : Protocol (http, https) + Host (사이트 도메인)  + Port (포트번호)   CORS 에러가 발생하는 이유CORS 에러는..

리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.Framework vs LibraryReact는 라이브러리이고, Next는 React의 프레임워크이기 때문에우선 프레임워크와 라이브러리의 차이점을 짚고 넘어가자면,프레임워크개발자가 소프트웨어 기능 구현에 개발할 수 있도록 코드를 구현해 개발 시간을 줄이고,  코드의 재사용성을  증가 시키기 위한 일련의 뼈대, 틀을 라이브러리 형태로 제공되는 것라이브러리특정 기능을 모아둔 코드 혹은 함수들의 집합이며 코드 작성 시 활용 가능한 도구들큰 차이점은 "애플리케이션의 흐름을 누가 쥐고 있느냐"프레임워크는 그 스스로 제어 흐름의 주도성을 갖는 반면, 라이브러리는 개발자가 가지고 있다.프레임워크는 집이고, 라이브러리는 그 집 안의 가구 ..

타입스크립트에서 기본적으로 제공하는 제네릭 타입 중에서 알아두면 유용한 것들을 소개해 드릴게요. JavaScript 기능들querySelector() 함수기본적으로 어떤 DOM 노드가 리턴될지 모르기 때문에 HTMLElement라는 일반적인 타입으로 정의됩니다. 하지만 타입을 확신할 수 있는 경우에는 아래 코드처럼 직접 제네릭 타입을 정의해 주면 됩니다.const elem = document.querySelector('input.username'); Map키와 밸류를 갖는 자료구조입니다. 타입 파라미터로 키와 밸류의 타입을 정의하고 사용할 수 있습니다.const productMap = new Map();productMap.set(product1.id, product1);productMap.set(prod..

렌더링이란? 웹 페이지에 접속하는 과정에서 링크를 클릭해 원하는 곳으로 이동할 때 HTML,CSS,JS등 개발자가 작성한 문서를 서버에 응답받아 실시간으로 브라우저에 그려지는 과정을 렌더링 과정이라고 말할수 있을 것 같다. 웹 페이지 렌더링 방식으로는 크게 CSR, SSR, SSG 로 나눌수 있다. 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 정리해보려한다. 클라이언트사이드 렌더링(Client-side Rendering) — 웹 브라우저에서 자바스크립트로 HTML을 만드는 것 리액트로 할 수 있는 가장 기본적인 방식의 렌더링이다. 리액트로 작성한 코드는 자바스크립트로 변환 (트랜스파일링)이 가능한데, 클라이언트사이드 렌더링은 자바스크립트로 변환된 리액트 코드를 웹 브라우저에서 실행해서 HTML을..

페이지네이션이란?사이트에서 렌더링을 할때 만약 수많은 모든 데이터를 한 번에 받아온다면 접속할 때 시간이 어마어마하게 걸릴 것이다. 그러한 부분을 해결하기 위해 렌더링할때 필요한 데이터만 가져온 후 그 다음부터는 스크롤, 더보기, 페이지 버튼 등을 이용해 데이터를 추가적으로 받아오도록 데이터를 조금씩 나눠 가져 오는 걸 페이지네이션(pagination)이라고 한다. 책 페이지처럼 데이터를 나눠서 제공하는 방식이기에 붙여진 이름이며 많은 양의 데이터를 가져올 때 적합한 방식이다. 코드잇 강의에서는 페이지네이션의 오프셋(지금까지 받아온 개수) 방식을 배울수 있었다. 아래처럼 offset값과 limit값을 요청(Request)하면 서버는 리스폰스로 데이터를 보내주는데,  받아온 데이터의 개수를 기준으로 추가적..

Virtual DOMVirtual은 말 그대로 가상이라는 뜻, DOM은 Document Object Model의 약자로 문서 객체 모델을 의미합니다. 즉 문서 객체한 HTML, head, body와 같은 태그들을 Javascript가 이용할 수 있는 객체를 의미합니다.개발을 하면서 자주보게 되는 div, input, a 등이 DOM에 해당하며, 실제 돔은 아닌 복사본으로 실제 돔과 같은 내용을 담고JS객체 형태로 메모리안에 저장되어 있습니다.  기존의 DOM은 HTML을 직접적으로 업데이트하며 새로운 element가 업데이트된 경우 새로운 DOM을 생성하기에 업데이트 속도가 느리고 메모리 낭비가 심한 반면, Virtual DOM은 HTML을 직접적으로 업데이트 하지않고 새로운 element가 업데이트 된..