profile
프론트 앤드 개발자를 꿈꿉니다.

토큰 갱신, 유저 정보 불러오기 custom hook

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

2021년 11월 12일
·
0개의 댓글

login with react-query, useMutation

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

2021년 11월 9일
·
0개의 댓글

useMemo, useRef 를 이용한 input handling

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

2021년 11월 9일
·
0개의 댓글

error handling

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

2021년 11월 6일
·
0개의 댓글

axios response interceptors

로그인 시 axios response interceptors 사용 sample

2021년 10월 5일
·
0개의 댓글

있을때만 올리는 추후 확인용 자질구레한 팁

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

2021년 8월 5일
·
0개의 댓글

원시 타입과 참조 타입

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

2021년 6월 4일
·
0개의 댓글

팝업 하루 동안 보이지 않도록 설정하기

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

2021년 5월 31일
·
0개의 댓글

배열에서 특정 항목 제거하는 방법

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

2021년 5월 11일
·
0개의 댓글

파라미터로 받은 url의 한글 깨짐 현상 방지

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

2021년 5월 6일
·
0개의 댓글

상태 코드 정리

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

2020년 12월 4일
·
0개의 댓글

메소드 정리 1

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

2020년 12월 4일
·
0개의 댓글

TIL #19 가변 변수와 불변 변수

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

2020년 10월 16일
·
0개의 댓글

TIL# 18 전개 연산자

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

2020년 10월 15일
·
0개의 댓글

TIL #17 템플릿 문자열

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

2020년 10월 15일
·
0개의 댓글

TIL# 16 filter, includes 함수

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

2020년 8월 28일
·
0개의 댓글

TIL #15 CSS flex 성질과 함께 사용하는 코드 정리

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

2020년 8월 27일
·
0개의 댓글

TIL #14 2차 프로젝트 후기

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

2020년 8월 26일
·
0개의 댓글
post-thumbnail

TIL #13 1차 프로젝트 후기

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

2020년 7월 5일
·
0개의 댓글
post-thumbnail

TIL #12 1차 프로젝트 react 초기 세팅

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

2020년 6월 21일
·
0개의 댓글