후니's Blog

React/2022-上

React Currying

2022.04.18

React Currying Currying(커링) 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법 인자가 n개인 함수를 n개로 분리하여 사용하게끔 만드는 기법 └ word와 name이라는 두 개의 인자를 받아서 출력해주는 단순한 형태의 함수 ┌ 위의 함수에 커링을 적용함 ├ n(2)개의 인자를 받던 함수가 n(2)개로 쪼개진 것을 볼 수 있음 ├ 또한, 첫 번째로 받던 인자인 word를 hello라는 값으로 고정하고 name만 변경하면서 사용 가능한 것 또한 볼 수 있음 ├ 즉, 커링 기법은 일부 인자에 같은 값을 반복적으로 사용할 때 └ 그 반복되는 인자를 고정함으로써 중복을 최소화 하기에 적합한 기법 └ 위는 인자가 4개나 되는 함수 ┌ 위 함수에 커링을 적용함 └ 커..

React/2022-上

React HOC vs HOF

2022.04.18

HOC vs HOF HOC (Higher Order Component) 특정 컴포넌트를 실행하기 전에 상위 컴포넌트를 먼저 실행시켜주는 방식 JavaScript의 클로저 함수를 이용함 HOC을 하나 만들어서 로그인이 필요한 컴포넌트 앞에 HOC만 붙여주면 간단하게 권한처리를 완료함 다른 컴포넌트와 함께 실행되는 고차 컴포넌트이므로 이름 앞에 with를 붙여줌 ex) withAuth, withApollo HOC 장점 event.target.id를 사용하지 않아 코드가 간략해짐 material-ui, ant-desing 등의 컴포넌트를 이용하면 id 값이 날라가는 현상을 막을 수 있음 id는 전체 태그에서 고유해야하기 때문에, id가 남용되면 대규모 서비스에서 문제가 야기될 수 있지만 이를 방지할 수 있음 ..

React/2022-上

JS Closure

2022.04.18

JS Closure 내부 함수에서 외부 함수의 지역변수에 접근하는 것을 의미 전역변수 해당 페이지 안이라면 어디서든 사용 가능 지역변수 함수 안에서 정의된 변수로써, 해당 함수 안에서만 사용 가능 JS Closure 예시 ┌ 스코프 체인에 의해 Func02() 함수 안의 apple은 함수 바깥에 있는 apple을 의미함 └ 따라서, 결과로 "사과", "바나나" 가 나옴 ┌ 마지막 줄의 Func01("사과")는 가장 윗줄에 있는 apple에 "사과"가 들어가게 되고, ├ 마지막 줄의 Func01(" ")("바나나")의 "바나나"는 Func02()의 banana에 들어가게 됨 └ 결과로 "안녕 ?", "사과", "바나나" 가 나옴

React/2022-上

권한 분기

2022.04.18

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

React/2022-上

Cookie, Session, Local Storage

2022.04.18

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에 정보를 저장함 메모리에 저장..

React/2022-上

Regular Expression (정규표현식)

2022.04.17

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

React/2022-上

React 상태관리 - Context api, redux, mobx, swr

2022.04.17

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

React/2022-上

Throttling & Debouncing

2022.04.11

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

전체 글

React Currying

React HOC vs HOF

JS Closure

권한 분기

Cookie, Session, Local Storage

Regular Expression (정규표현식)

React 상태관리 - Context api, redux, mobx, swr

Throttling & Debouncing

티스토리툴바