꿈꾸는 개발자

보호되어 있는 글입니다.

목적 옵셔널 체이닝을 JS DeepDive를 접하면서 처음으로 알게 됐지만, 그 이후 크게 사용하는 경우가 개인적으로 없어서 잊고 지내고 있다가.....타입스크립트로 개발을 본격적으로 시작하면서 옵셔널 체이닝의 강력함을 깨닫고 잊었던 기억을 다시 되살리고자 옵셔널 체이닝에 대해 정리하고자 한다. 옵셔널 체이닝의 프로퍼티가 없는 중첩 객체를 접근할 때 보다 안전하게 접근을 할 수 있다. 예시 let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 보통 위와 같은 경우에선 타입 에러가 발생하게 된다. 이전에는 && 연산자를 주로 사용해서 위와 같은 상황을 ..

배경 지식(토큰 인증 방식) 토큰 인증 방식은 사용자의 인증 정보를 서버 측이 아닌 클라이언트 측에 저장하는 방식이다. (세션 인증 방식이 가지고 있던 한계를 극복할 수 있음- 서버에서 관리하던 인증 정보에 대한 부담 완화). 기본 흐름 JWT(Json Web Token) 토큰 기반 인증을 사용했을 때 대표적으로 사용하는 방식 중 하나가 JWT이다. JWT는 JSON 객체에 정보를 담아 이를 토큰으로 암호화하여 전송할 수 있는 기술을 의미한다. 클라이언트에선 서버에 요청을 보낼 때 JWT 토큰을 제공하면 서버에서 해당 토큰을 검증 후 유저 정보를 확인할 수 있다. 기본 구조(base64로 인코딩 된다) header: 토큰 자체를 설명하는 데이터를 담고 있다.(암호화하는 방식): base64방식으로 인코딩..

react-query는 아래와 같은 기능들을 보다 간편하게 할 수 있도록 도와준다(그 외에도 다양한 기능을 제공). 해당 기능들을 통해 클라이언트 상태와 서버 상태를 명확하게 구분을 해준다. 서버 상태 가져오기 캐싱 동기화 및 업데이트 사용하는 이유 우아한테크세미나(보다 자세한 내용은 관련 링크를 참고하세요) 우테크 세미나 내용을 참고해보면, 직관적인 API 호출, 서버 상태관리의 용이성, client side에 정제된 상태 관리 등 다양한 이유들이 나온다. 개인적인 이유: 아직 사용해보지 않았기 때문에 관련 내용들이 얼마나 강력한 편의성을 제공할지 알지 못하지만 개인적으로 팀 프로젝트를 진행하면서 redux-toolkit을 통해 비동기 데이터를 처리 시도를 할 때 이것을 관리하는 것이 상당히 애매하다는..

의의 useRef는 react의 상태 변환에 따른 rendering 중에 지속적으로 참조할 수 있도록 해주는 Hook이다. 즉 useRef는 렌더링의 영향을 받지 않는다고 볼 수 있다. 일단 무슨 말인가 싶을 거지만 밑에 추가적인 설명을 보면 이해를 할 수 있을 것이다. 사용법 import { useRef } from 'react'; function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... 공식문서에 따르면 위처럼 가장 최상단에 useRef를 선언해줄 것을 권장하고 있다. Parameters 초깃값(initialValue): Object current 프로퍼티가 담고 있었으면 하는 초기값을 지정..

의의 useCallback의 경우 함수를 메모제이션을 하기 위해 사용되는 hook으로 알려져 있다.공식문서에 따르면 re-render를 할 때 함수를 cache한다고 나와있다. 결국 위 두 말을 합쳐보면, 함수를 기억해 re-render 과정을 통해 동일한 함수를 사용하도록 최적화하는 기법이라고 보면 된다. const cachedFn = useCallback(fn, dependencies) 코드 구조는 위와 같다. parameter를 살펴보면 fn: cache 즉 기억/저장하고 싶은 함수를 의미한다. 공식문서에 따르면첫 render 때 fn은 호출되는 것이 아닌 반환이 되는 것이다. 그 다음 렌더링부터 만약 dependencies의 값이 변경되지 않는다면, react는 계속 같은 함수를 반환해줄 것이다...

redux-toolkit을 사용하다보면 가장 큰 단점이 새로고침을 했을 때 상태들이 초기화된 다는 것이다. plain JS에선 localstorage에 저장해서 상태를 유지할 수 있지만, redux에서 굳이 상태를 유지하기 위해 모든 상태를 일일이 다 localstorage 저장하는 것은 너무 힘들어 보인다....이런 문제를 간편하게 해결할 수 있는 것이 redux-persist이다 먼저 redux-persist를 사용하기 위해선 따로 redux-persist를 설치해줘야 한다 npm i redux-persist 사용법 redux-persist는 localstorage 뿐만 아니라, session storage, async storage 등 종류에 따른 storage를 제공한다. 하지만 본 글에서 주로 ..

정의/용법 nullish 병합 연산자는 JS에 있는 문법으로 타입을 중시하는 TS에서 많이 사용되는 문법 중 하나이다. a ?? b a가 null도 아니고 undefined도 아니면 a 그 외에는 b ??을 사용하지 않고 위와 동일한 코드를 작성하면 아래와 같다 x = (a !== null && a !== undefined) ? a : b; 추가 예시 let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛 위 코드에서 ?? 병합 연산자를 통해 간편하게 실제로 값이 들어있는..