권한분기 사용자 서버 안에서 로그인한 유저 / 로그인 안한 유저로 권한을 구분 권한을 구분하는 방법으로 useEffect에서 accessToken이 없으면 "/login" 화면으로 페이지를 이동시킴 └ 권한분기를 하려면 로그인 권한을 부여하려는 페이지에 모두 위의 로직을 입력해야하는 번거로움이 있음 └ 따라서, 이 문제를 해결하기 위해서 HOC를 사용함 !!

Cookie, Session, Local Storage Local Storage window.localStorage에 위치하고 있음 string, boolean, number, null, undefined 모두 저장 가능하지만, 문자열로 변환됨 object 생성자 형으로 저장되어 한번에 통째로 저장하려면 JSON.stringify() 해야하고, 받을 때는 JSON.parse() 해야 함 최대 5MB의 정보를 저장 할 수 있으며 지우기 전까지 영구적으로 저장되어있음 └ 자동 로그인 저장 Session Storage window.sessionStorage에 위치하고 있음 HTTP session id를 식별자로 구별해 데이터를 사용자의 브라우저에 쿠키형태가 아닌 접속한 서버 DB에 정보를 저장함 메모리에 저장..

Regular Expression (정규표현식) 정규 표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식 (형식 언어, formal language라고 함) 정규 표현식을 이용하면, 특정 패턴에 매칭되는 문자열을 쉽게 찾아낼 수 있음 정규표현식 사용법 정규표현식 형식 /패턴/플래그 ┌ 슬래시(/) "사이"에는 매칭시킬 "패턴"을 써줌 └ 슬래시(/) "다음"에는 옵션을 설정하는 "플래그"를 써줌 └ 플래그는 하나만 찾을지, 모두 다 찾을지 등을 설정하는 옵션 정규표현식 매칭 패턴(문자, 숫자, 기호 등) 아래 매칭 패턴을 사용하면, 훨씬 쉽게 문자/숫자/기호를 표현할 수 있음 패턴 의미 a-zA-Z 영어알파벳(-으로 범위 지정) ㄱ-ㅎ가-힣 한글 문자(-으로 범위 지정) 0-9 숫자(-으로 범위 지정..

Context api, Redux, Mobx, Swr React에서는 전역상태를 관리하는 라이브러리들이 상당히 존재함 제일 유명한 상태관리 라이브러리로는 redux가 있지만, redux를 포함한 여러가지의 상태관리 라이브러리가 존재함 상태관리 라이브러리를 소개하기 전 전역상태가 무엇인지부터 알아야 함 ! Global State Global State에 대한 정의 우리가 다루어야할 상태가 무엇이 있는지를 정의하고 이를 구분할 수 있어야 함 어떤 상태가 들어가야하는지 기획을 생각하고 파악해볼 필요가 있음 상태를 나눌 필요가 없다면 - 굳이 상태관련 라이브러리를 사용해야 하는가 ? Global State 관리란 ? 전역 상태관리를 사용하면 여러 구성 요소간에 데이터를 쉽게 전달/조작 할 수 있음 Context..

Throttling & Debouncing Throttling 쓰로틀링(Throttling)은 함수가 지정된 시간 동안 최대 한 번 호출되도록 하는 프로그래밍 방법 쓰로틀링은 함수를 호출 할 수 있는 최대 횟수를 조절함 Ex) 10초마다 함수를 최대 한 번 호출 Debounce 디바운싱(Debouncing)은 시간이 많이 걸리는 작업이 자주 실행되지 않도록 사용되는 프로그래밍 방법 디바운싱은 함수가 실행되기 전에 일정 시간을 대기하도록 함 즉, 함수가 호출되는 속도를 제한함 함수가 여러 번 호출되면, 일정 시간이 지난 후 마지막에 호출된 함수만 실행되고 이전의 호출된 함수는 무시됨 Ex) 함수 호출 후 10초 동안 함수를 호출하지 않았다면, 10초가 지난 후 제일 마지막에 호출된 함수만 실행

Object.keys, Object.values, Object.entries, Object.assign Object.keys 객체의 프로퍼티들 중에서 key값, 다른 말로 프로퍼티 네임들만 묶어서 배열로 반환하는 메서드 문법 └ Object.keys 메서드의 기본 문법은 그냥 메서드 그대로 Object 객체에 keys 메서드를 호출하고 파라미터로 Key 값을 알아내고자 하는 객체를 전달해주면 됨 └ 주의해야될 점은 Object.keys() 메서드는 객체가 가지고 있는 메서드를 사용하는 것이 아니라 Object라는 내장 객체의 메서드로 사용하고, 파라미터로 우리가 만든 객체를 집어넣어줘야 하기 때문에 myObject.keys()처럼 사용하지 않도록 주의해야 함 Object.values 특정 객체를 대상으로..