기록용으로 올리는 react-query, recoil, typescript를 사용한 custom hook유저 정보 불러오기 custom hookaccess 토큰 갱신 custom hook

기록 & 참고용 login with react-query, useMutation 간단 예시

state에 input value를 저장하는 handleInputFunction 이라는 함수를 useRef를 이용해 생성한다. (함수가 실행되더라도 리렌더링 되지 않는다.)그리고 input value가 변경되더라도 loginInfo 라는 state의 값을 기억하기 위해

에러 팝업을 띄우기 위한 에러 처리 로직 (로그인시)default 로 Error를 던져 예상하지 못한 에러는 error boundary에서 처리되도록 함react-query를 사용해서 refactoring 예정

로그인 시 axios response interceptors 사용 sample

이런 식으로 작성한다.em - em은 해당 엘리먼트의 글자 크기(font-size)에 비례한다.예를 들어 어떠한 div 태그의 font-size가 10px 일 경우 div의 width 값을 2em으로 설정하게 되면 해당 div의 width 값은 20px이 된다.해당 d

자바스크립트에서 참조 타입은 객체(object), 배열(array), 함수(function) 이고원시 타입은 숫자(number), 문자(string), 논리형(boolean), null, undefined 이다.원시 타입은 변수에 해당하는 값이 그대로 저장된다.원시 타

앱 서비스를 웹으로 접속하는 경우 앱을 설치하도록 유도하는 팝업을 띄우는 경우가 있는데 이러한 경우 팝업을 끄고 나서도 계속 팝업이 노출되면 사용자의 경험에 안좋은 영향을 끼칠 수 있다.그래서 팝업을 끌 경우 다음날까지 보이지 않도록 설정하기로 했다.방법은 매우 간단하

a라는 배열이 존재할때 그 안에 있는 c 라는 항목을 삭제하고 싶은 경우 방법을 기록한다.우선 c의 index 값을 확인한다.c 의 인덱스 값을 확인해보면 2라는 값을 확인할 수 있다.인덱스 값을 확인했다면 splice 함수를 이용해서 c를 추출해낸다.splice 함수

http://tingo.test/searchlist/?q=짱구 라는 url을 이용해서 검색결과를 바로 보여주고 검색어를 상단에 노출시키려고 하는데그냥 검색어 텍스트를 변경없이 가져오게 되면 검색은 정상적으로 되지만 짱구라는 텍스트가 %EC%A7%B1%EA%B5

STATUS code(이하 상태 코드)란 클라이언트가 웹 서버에게 요청을 보냈을 때, 웹 서버가 요청이 어떻게 처리 되었는지 알려주는 역할 을 한다.요청에 대해 성공했는지 실패했는지 알려주는 것을 넘어서 이 요청이 클라이언트 측의 문제인지, 웹 서버에서 처리할 수 없는

입력값을 반올림한 수와 가장 가까운 정수 값을 반환한다.특정 엘리먼트의 위치 값을 반환한다.

기존 자바스크립트 문법에서는 변수 선언에 var 라는 키워드를 사용했으나 ES6 문법에서는 값을 수정할 수 있는 가변 변수를 위한 let 키워드와 값을 수정할 수 없는 불변 변수를 위한 const 키워드를 사용한다.1\. letES6에서 가변 변수는 let 이라는 키워

ES6에서 전개 연산자(spread operator)는 독특하면서도 매우 유용한 문법이다. 전개연산자는 나열형 자료를 추출하거나 연결할 때 사용한다. 사용 방법은 배열이나 객체, 변수명 앞에 마침표 세개(...)를 입력한다. 하지만 배열, 객체, 함수 인자 표현식 (

템플릿 문자열(template string)은 기존에 사용되던 병합연산자를 개선하기 위해 ES6에서 새롭게 출시된 기능이다.기존 자바스크립트에서는 문자열과 문자열 또는 문자열과 변수를 연결하려면 병합연산자(+)를 사용해야했다.기존 자바스크립트에서의 문자열 사용 방법문자

filter 함수는 조건을 설정하여 해당 조건에 부합하는 요소들을 묶어서 새로운 배열을 생성한다.includes 함수는 배열 또는 스트링에서 어떠한 값을 포함하고 있는지 확인하여 그 값을 boolean 형태로 return 한다.이 두가지 함수를 함께 사용하여 두개의 배

flex-start : 요소들을 컨테이너 왼쪽으로 정렬flex-end : 요소들을 컨테이너

1.주제 스웨덴의 가구 및 생활 소품을 판매하는 다국적 기업인 이케아(IKEA) 코리아 웹사이트 클론 제작 프로젝트 위코드에서 진행한 2번째 팀 프로젝트 개발 기간 (2주, 2020.7.6 ~ 2020.7.17) 개발 인원 (6명, front-end 3명, back

영국의 욕실, 바디 위주의 화장품 제작, 판매 브랜드인 러쉬(LUSH) 코리아 웹사이트 클론 프로젝트위코드에서 git, react, django 를 활용한 첫 그룹 프로젝트개발 기간 (2주, 2020.6.22 ~ 2020.7.3)개발 인원 (6명, front-end 3

1차 프로젝트에 앞서 프로젝트에 필요한 react 초기 세팅을 진행하고자 한다.1\. CRA (Create-React-App) 설치CRA는 문자 뜻 그대로 React 앱을 만들어주는 도구이다.React 프로젝트 개발환경 구축을 처음부터 설정하는 것은 React를 처음