일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 |
- Promise
- 공변성
- 타입 좁히기
- 호이스팅
- dfs
- useAppDispatch
- 무한 스크롤
- 투포인터
- 이분 검색
- 리터럴 타입
- app router
- SSR
- tailwind
- map
- 반공변성
- TS
- 결정 알고리즘
- 인터섹션
- CORS
- autosize
- 태그된 유니온
- CI/CD
- RTK Query
- Cypress
- recoil
- async/await
- Jest
- ESlint
- webpack
- React
- Today
- Total
목록2024/02 (6)
짧은코딩
React Query에서 데이터를 불러오는 올 때 isLoading을 중앙화할 수 있다. Loading 컴포넌트를 만든다. App.tsx에 Loading 컴포넌트를 넣어준다. Loading import { Spinner } from '@chakra-ui/react'; import { useIsFetching, useIsMutating } from 'react-query'; interface Props { isLoading?: boolean; } export default function Loading({ isLoading }: Props) { // useIsFetching은 현재 가져오고 있는 쿼리 호출의 정수 값을 리턴한다. const isFetching = useIsFetching(); // for ..
UpLog의 로그인 이후의 방식 설계 로그인을 한다. 세션 스토리지에 userInfo가 암호화되어 저장된다. 제품(products) 목록을 가져온다. 제품이 있는 경우 제품 리스트의 맨 처음 제품 ReleaseNote 페이지로 이동한다. 제품이 없는 경우 메인 페이지로 이동한다. 로그인 이후의 방식 구현 로그인 후 세션 스토리지에 유저 정보 저장 -로그인 로직 const { mutate } = useMutation(loginAPI, { onSuccess: (data: GetUserInfo | FailResponse) => { if ('message' in data) { setMessageInfo({ type: 'error', content: '아이디 또는 비밀번호를 잘못 입력하셨습니다.' }); retu..
App Router app 폴더 하위에 모든 파일 추가 폴더명으로 경로를 정의하며, page.js 또는 route.js로 작성된 파일만 경로로 활용 가능 layout.tsx 이 파일은 최상위 레이아웃으로 모든 페이지에 공유됨 pages router의 _app.js를 대체한다. page.tsx 웹 애플리케이션의 시작점이자, 루트 / 경로 페이지 Server Component 무엇이 서버 컴포넌트인가? 컴포넌트가 서버에서 렌더링이 되고 클라이언트에 html로 전송되는 것 특징 리렌더링이 되지 않는다. 서버 리소스에 접근 가능하다(서버 시스템, db) js 번들에 포함되지 않는다.(제로 번들 사이즈) 자동 코드 스플릿팅 → lazy로 명시할 필요 x 유저 인터랙티비티(useState, useEffect 등) ..
JWT 관리 방식 이 프로젝트에서는 권한 문제가 많기 때문에 JWT 관리를 어떻게 할지 더 고민했다. https://hshine1226.medium.com/localstorage-vs-cookies-jwt-%ED%86%A0%ED%81%B0%EC%9D%84-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%B4-%EC%95%8C%EC%95%84%EC%95%BC%ED%95%A0-%EB%AA%A8%EB%93%A0%EA%B2%83-4fb7fb41327c LocalStorage vs. Cookies: JWT 토큰을 안전하게 저장하기 위해 알아야할 모든것 안녕하세요 백엔드 개발자 최준혁입니다. hshine..
Jest를 사용하지 않기로 한 이유 처음 프로젝트를 세팅할 땐 Jest, Cypress 모두 설정을 했다. https://jestjs.io/docs/getting-started#using-vite Getting Started · Jest Install Jest using your favorite package manager: jestjs.io 하지만 위 사진에서도 나오듯이 Jest는 Vite를 완벽하게 지원하지는 않는다. 그렇기에 Jest로 테스트 코드를 짠 부분이 좀 있지만 과감하게 다 날리기로 했다. Vite는 Vitest라는 것이 있지만, 자료가 부족하다고 들었다. 그렇기에 Cypress로만 테스트 코드를 진행하기로 했다. UpLog 프로젝트에는 Cypress로 테스트 코드를 작성하고, WAYC 프..
https://shortcoding.tistory.com/535 MSW1 사용 중 Warning: captured a request without a matching request handler MSW를 사용하여 개발하는데, 콘솔에 이런 경고 메시지가 엄청 많이 떴다. 콘솔 로그를 보면서 테스트를 진행해야 하는데 불편함이 생겨서 저 경고 메시지를 없애보려고 한다. 왜 저런 경고가 뜨 shortcoding.tistory.com WAYC 프로젝트에서도 같은 경고를 만난적이 있다. 하지만 WAYC는 MSW 버전 1이고, UpLog에서는 MSW 버전 2를 사용했다. 해결 방법이 달라서 기록으로 남긴다. 해결 방법은 생각보다 쉽지만 까먹지 않기 위해 남긴다..! MSW2에서 해결 방법(아님) 해결법은 정말 간단한..