제로베이스

Access 토큰은 갖고 있는 유저에게 특정 권한을 주기 위한 목적으로 사용한다. 사실 아무런 안전장치 없이 단독으로 사용하면 안정성 문제가 생길 수도 있다. 특히 토큰의 만료 기간을 길게 잡으면 토큰을 누군가 가로챘을 때 더 오랫동안 특정 권한을 갖는 유저 행세를 할 수 있다. 그렇다고 해서 만료 기간을 짧게 잡으면 이메일과 비밀번호로 인증을 너무 자주 해야 돼서 귀찮고 위험할 수 있다. 이 문제를 어느 정도 해소하기 위해서 때때로 refresh 토큰이란걸 같이 사용한다. refresh 토큰은 access 토큰이 만료됐을 때, 이메일 비밀번호를 사용하지 않고 access 토큰을 새롭게 발급받는 데 사용되는 토큰이다. 먼저 유저가 로그인을 하기 위해서 리퀘스트로 서버에 이메일과 비밀번호를 보내고, 서버가..

쿠키는 유저 인증뿐만 아니라, 브라우저 이용자에 대한 개인화된 기능과 데이터 제공 수단으로 사용할수 있다. 로그인을 하지 않아도 검색 기록이 저장되거나, 쇼핑 카트를 사용할 수 있다거나, 한번 설정한 라이트와 다크 테마도 유지 되는 경우가 있는데 이런걸 쿠키를 통해 할 수 있다. 하지만 브라우저 사용자가 아닌 다른 사람이 쿠키를 가로채거나 여러 방법들로 악용한다면, 보안 문제가 생길 수 있다. 특히 인증 관련 쿠키가 악용된다면 큰 문제로 이어질 수 있다. 보안 문제를 줄일 수 있는 설정들에 대해서 알아보자. 📍 Secure 첫 번째는 Secure 설정이다. 서버에서 리스폰스를 보낼 때 이 설정을 추가해 주면 HTTP보다 보안에 상한 HTTPS를 사용할 때만 클라이언트에서 서버로 쿠키가 보내진다. HTTP..

자바스크립트에서의 쓰로틀링은 짧은 시간 내에 과도한 이벤트 실행으로 인해 발생하는 성능 저하를 막기 위해 일정한 time slice를 주기로 이벤트가 한 번만 실행되도록 제한한다. 예를 들어, 1초에 100번의 업데이트가 일어나는 DOM 요소에 이벤트 핸들러를 추가한다면, 이벤트는 1초에 100번이나 실행되므로 성능에 무리를 줄 수 있다. 쓰로틀링을 적용하게 되면 불필요한 이벤트 실행 횟수를 줄일 수 있어 성능을 항샹시킬 수 있다. 쓰로틀링을 적용하면 좋은 예시로는 scroll, resize, drag, mouse 이벤트, 애니메이션 등이 있다. 예를 들어, 스크롤 이벤트의 경우, 크롬 기준 2px 단위로 이벤트가 발생하게 된다. 사용자가 1초에 1000px의 스크롤을 하게되는 경우에는 약 500번의 이..

자바스크립트에서의 디바운싱은 마지막으로 발생한 이벤트를 기준으로 특정 time이 지난 후 하나의 이벤트만 실행되도록 한다. 디바운싱을 적용하면 좋은 예시로는 검색 기능의 키 이벤트(input)가 있다. 검색 버튼을 누르지 않아도 사용자가 입력한 값이 변경될 때마다 자동으로 검색 요청을 보내는 기능을 만든다고 한다면, 사용자가 검색어를 다 입력하지 않았을 때에도 요청이 보내지게 되므로 비효율적이다. 이러한 경우에 디바운싱을 적용하면 사용자의 입력이 끝나고 일정 시간이 지난 후에 검색 요청이 1번만 보내지므로 성능을 향상시킬 수 있다. const inputEl = document.querySelector('#inputName'); let timeout; function handleAlert() { const..

자바스크립트에서 콜백은 어떤 함수의 파라미터로 전달되는 모든 함수를 의미하는 개념이다. 그러니까 어떤 함수의 파라미터로 전달되기만 한다면 해당 함수는 그 함수의 콜백이 되는것이다. 이런 콜백은 2가지로 나뉜다. 1. 동기 실행되는 콜백 2. 비동기 실행되는 콜백 📍 동기 실행되는 콜백 동기 실행되는 콜백에는 어떤 것들이 있을까? 예를 들어, 자바스크립트 배열의 베소드 중에서 filter라는 메소드를 생각해보자. 이 메소드는 배열의 여러 요소들 중에서 특정 조건을 만족하는 요소들만을 추려서 그 요소들로만 이루어진 새로운 배열을 리턴하는 메소드이다. const arr = [1, 2, 3, 4, 5, 6]; const newArr = arr.filter(function isOdd(num) { return (n..

async 함수는 그 안에서 리턴하는 값에 따라 그에 맞는 Promise 객체를 리턴한다. 📍 어떤 값을 리턴하는 경우 1. Promise 객체를 리턴하는 경우 async 함수 안에서 Promise 객체를 리턴하는 경우에는 해당 Promise 객체와 동일한 상태와 작업 성공 결과(또는 작업 실패 정보)를 가진 Promise 객체를 리턴한다. async function fetchAndPrint() { return new Promise((resolve, reject)=> { setTimeout(() => { resolve('abc'); }, 4000); }); } fetchAndPrint(); 이렇게 pending 상태의 Promise 객체를 리턴하기도 한다. (리턴된 Promise rorcpsms 약 4초..

fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .catch((error) => { console.log(error); }) .then((result) => { console.log(result); }); 어떻게 fetch 함수에서 발생한 에러가 catch 메소드 안의 콜백에까지 전달 될 수 있는 걸까? 코드를 아래와 같이 수정해보자. fetch('https://jsonplaceholder.typicode.com/users') // Promise-A .then((response) => response.text()) // Promise-B .then(undefined, (error) => { co..

Promise 객체를 공부할 때 then 메소드에 대해서 확실히 알고 넘어가야 한다. const successCallback = function () { }; const errorCallback = function () { }; fetch('https://jsonplaceholder.typicode.com/users') // Promise-A .then(successCallback, errorCallback); // Promise-B 1. fetch 함수에서 리턴하는 Promise 객체를 Promise-A 객체라고 하고, 2. then 메소드가 리턴하는 Promise 객체를 Promise-B 객체하고 해본다. 그리고 fetch 함수의 작업이 성공하는 경우와 실패하는 경우 나누어서 생각해보자. 1. fet..

자바스크립트에는 fetch 함수 말고도, 비동기 실행되는 함수들이 존재한다. 1. setTimeout 함수 setTimeout 함수는 특정 함수의 실행을 원하는 시간 만큼 뒤로 미루기 위해 사용되는 함수이다. console.log('a'); setTimeout(() => { console.log('b'); }, 2000); console.log('c'); 예를 들어 이런 코드가 있을 때, 지금 가운데에 있는 setTimeout 함수는 첫 번째 파라미터에 있는 ( ) => { console.log('b' }, 이 콜백의 실행을 두 번째 파라미터에 적힌 2000밀리세컨즈(=2초) 뒤로 미룬다. 그래서 이 코드를 실행하면 이렇게 a 와 c 가 먼저 출력되고, 약 2초가 지난 후에 b가 출력된다. fetch 함..

console.log('Start!'); fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 위에 코드에는 2개의 콜백이 있다. 1. (response) => response.text() 2. (result) => {console.log(result)} fetch 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되면 그때서야 이 콜백들이 순서대로 실행된다. 전체 코드의 실행 순서를 다시 정리하자면 1. console.log('Start!') 2. fetch 함수(리퀘스트 보내기 및 콜백 등록) 3. console.lo..