분류 전체보기

[React.js] useEffect와 async/await 함께 사용하기

❗ useEffect와 async/await 함께 사용하기 React 초기에 useEffect hook 내에서 async / await를 당연하게 함수와 변수에 사용하는것 처럼 하려는데 안되어서 useEffect에는 아직 async / await 사용이 불가능한가? 싶어서 검색을 이래저래 한 기억이 있어 내 블로그에서 포스팅하려한다. 물론 글은 짧다 ❌ useEffect(async () => { const data = await getdata(); setUser(data); }, []); 사용할 수 없는 이유는 다음과 같다. useEffect는 콜백 함수가 아무것도 반환하지 않거나 cleanup function을 반환 해야할것으로 정의되어있는데 콜백 함수 내에서 async/await 구문을 직접 사용하면..

[ReactQuery] StaleTime과 CacheTime에 대해서 알아보자

❗ StaleTime, CacheTime React에서 cacheTime과 staleTime은 React Query라는 라이브러리에서 사용되는 옵션이다. 이 옵션들은 데이터의 캐싱 및 유효성 검사에 관련된 기능을 제어하는 데 사용된다. ❗ StaleTime ? staleTime은 데이터가 "stale" 상태로 간주되는 기간을 지정 데이터가 "stale" 상태란, 이전 쿼리 결과가 캐시되어 있지만, 그 결과가 일정 시간 동안 업데이트되지 않은 상태 staleTime은 밀리초 단위로 설정되며, 기본값은 0 staleTime이 0보다 큰 값으로 설정되면, staleTime 이후에도 이전 캐시 결과를 사용할 수 있다. 이렇게 하면 네트워크 요청을 최소화하고, 사용자 경험을 개선할 수 있다. staleTime이 ..

[React.js] axios interceptor로 refresh token 발급하기

❗ 서론 이번 글은 타프로젝트를 하다가 refresh token까지 쓸 일이 있어서 해당 기능을 구현 후 쓰는 글이다 ! https://growing-jiwoo.tistory.com/85 해당 글에서 추가적으로 refresh token을 발급받는 방법에 대해서 알아보려한다. 그러기에 이번 글은 코드와 간단한 설명만으로 짧게 다룰것이다. [React.js] axios interceptor로 axios header에 토큰 삽입하기 ❓ axios interceptor axios interceptor는 애플리케이션에서 처리하기 전에 Axios 라이브러리에서 수행한 HTTP 요청 또는 응답을 가로채고 수정하는 데 사용할 수 있는 기능이다. 요청에 인증 헤더 추가, 오 growing-jiwoo.tistory.com..

[JAVASCRIPT] 백준 4358번 문제 풀이

❗ 풀이 const input = require('fs').readFileSync('4358.txt').toString().trim().split(/\r?\n/); let countObject = {}; input.forEach(element => { countObject[element] == null ? countObject[element] = 1 : countObject[element] += 1 }); console.log(Object.keys(countObject).sort().map(key => `${key} ${(countObject[key] / input.length * 100).toFixed(4)}`).join('\n')); 1. 각 입력값을 받아올 객체 정의 2. 입력값을 반복하며 객체에 ..

[JAVASCRIPT] 백준 1254번 문제 풀이

❗ 풀이 const input = require('fs').readFileSync('dev/stdin').toString().trim(); let reverseInput = input.split("").reverse().join(""); if (reverseInput == input) { console.log(reverseInput.length); return; } for (let i = 1; i < input.length; i++) { let arr = input.split("").slice(i).join(""); const reverseArray = input.split("").slice(i).reverse().join(""); if (arr === reverseArray) { console.log(..

[JAVASCRIPT] 백준 4659번 문제 풀이

❗ 풀이 const input = require('fs').readFileSync('dev/stdin').toString().trim().split(/\r?\n/); const gather = ['a', 'e', 'i', 'o', 'u']; const allowedStr = ['ee', 'oo']; for (let i = 0; i word.includes(element))) { console.log(` is not acceptable.`); co..

[프로젝트 회고록] 사용자 위치 기반 부산 모범 음식점 추천 사이트

❗ 서론 서론... 나는 최근 Numble에서 진행한 딥다이브를 마무리 지었다. 그리고 딥다이브를 마무리 지으며 회고록을 썼는데 쓰면서 리액트를 사용해서 이전에 진행했던 프로젝트건들에 대해서도 회고록을 쓰면 어떨까라는 생각으로 해당 카테고리를 만들게 되었고 지금 이 글도 쓰고있다. 앞으로도 개인 프로젝트건 넘블이건 어디서 진행하는 프로젝트건 상관없이 모두 회고록을 작성할 예정이다. 목차는 거의 고정적으로 가지않을까싶다. 내가 진행하는 회고록의 목차는 다음과 같을 것이다. (언제든지 수정 가능성 다분) 1. 시작하게된 배경 2. 프로젝트를 진행하며 느낀 점 (힘들었던 것, 배운 것 등등) 3. 차후 계획 이렇게. 그럼 본격적으로 회고록 작성을 시작하겠다. ✨ 시작하게된 배경 난 항상 프로젝트를 시작할 땐 ..

[NUMBLE 회고록] 클론코딩의 정석_TypeScript + React 로 소개팅 앱 만들어보기

✨넘블러 회고록✨ 기본적으로 제공되는 회고록 템플릿을 사용하여 작성된 회고록입니다. 😎 딥다이브를 시작하게된 배경 (Based) 처음 여자친구가 넘블 추천을 해주어서 넘블을 접하게 되었다. 처음엔 이런 사이트가 있는지도 몰랐는데 궁금증을 가지고 넘블을 검색해보니 넘블 딥다이브를 참가하여 열심히만 한다면 분명 양질의 포트폴리오를 만들 수 있겠다고 생각하였다. 그리고 여자친구가 넘블과 비슷한 종류의 사이트인 데이콘에 종종 참여를 하는데 참여를 하고 결과물을 만들어내는 과정에서 기술적으로 눈에 보일 정도로 성장하고 도움이 되었다고 적극 추천하며 말해줘서 넘블에 더욱 관심을 깊게 가지기 시작했고 때마침 프론트엔드 딥다이브를 모집중이였다. 나는 리액트에 대해서 공부를 시작한지 얼마 안 됐고 리액트를 메인으로 하는..