해야할것
- react carousel library
- [React🌌] 리액트 슬라이드 ⏩ / 캐로셀 (Carousel) - React Hot Toast
- React Query와 함께하는 API 에러 처리 설계하기
- React Hooks — What’s the Difference Between Returning an Array and an Object?
- [HTML] 시맨틱 태그 (Semantic Tag)란? 🧐
- 이번에야말로 CSS Grid를 익혀보자
- Remix nextjs와 비교하면서 살펴보기
TilwindCSS Text Overflow
valid validate validation
valid 유효한, 타당한
validate 입증하다, 유효하게 만들다
validation 유효성, 유효성 검증, 실증
'intrinsicattributes' 형식에 속성이 없습니다.
종종 실수하는 타입스크립트 에러 부분,,
'IntrinsicAttributes & ((value: ChallengeTag) => void)' 형식에 'handleChageTagList' 속성이 없습니다.
모든 경우가 이 문제인진 모르겠는데 내가 3번 이상 실수한 이유는 컴포넌트를 분리할 때 매우 작은? 규모라 그냥 한 파일에 작성할 땐 보통 vscode 자동완성 extension으로 rfc 이런 식으로 템플릿 없이 작성하다 보니 컴포넌트에서 받아오는 props가 객체인데 그냥 함수에서 파라미터 전달하듯이 작성해서 발생했다.
// 내가 작성한
function TagButton(onClick: () => void, tag: Tag) {
return (...);
}
// 이렇게
function TagButton({ onClick, tag } : { onClick: () => void, tag: Tag }) {
return (...);
}react query usequery option type
이번에 useQuery를 커스텀훅으로 정리하려는데, 챌린지리스트 부분을 작성하면서 options 인자를 받을 때 타입을 어떻게 지정해줘야 하는지 몰라서 찾아봤는데..
vscode에서 type을 확인해보면
useQuery는
(alias) function useQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>): UseQueryResult<TData, TError> (+2 overloads) import useQuery
useQueryOptions
(alias) interface UseQueryOptions<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey> import UseQueryOptions
- TQueryFnData : useQuery로 실행하는 query function의 return 값을 정하는 제네릭 타입
- TError : query function의 error 형식
- TData : data에 담기는 실질적 type
- TQeuryKey : useQuery의 첫 번째 인자로 주는 queryKey의 타입을 명시적으로 지정
내가 궁금한 건?
useQuery의 세 번째 인자로 전달할 options의 타입인데 options엔 staleTime, onSuccess 등이 있는데 왜 옵션 인자에 저 타입을 지정해 주는지 모르겟다,,? 아직 이해하지 못해서 그런 걸까ㅜ
일단 이렇게 작성함
// hooks/queries/challenge.ts
...
export const useGetChallengeList = (
params: GetChallengeListParams,
options?: UseQueryOptions<
ChallengeList,
{ message: string },
ChallengeList,
[string, GetChallengeListParams]
>
) => {
return useQuery(['ChallengeList', params], () => getChallengeList(params), {
retry: 2,
...options,
});
};useQuery<...> 여기에 적는 거랑 똑같은 것 같은데 뭔가 정보가 많지 않아서 흑
React Query Data Transformations < 이 블로그에서 발견했는데, 커스텀 훅에서 return 하는 부분에 data를 가공해서 내보내는 거 유용할 것 같다. 그러고 보니 UseQueryOptions 세 번째 인자?에 작성하는 게 이 부분이 아닐까 싶음
const fetchTodos = async (): Promise<Todos> => {
const response = await axios.get('todos')
return response.data
}
export const useTodosQuery = () => {
const queryInfo = useQuery(['todos'], fetchTodos)
return {
...queryInfo,
data: queryInfo.data?.map((todo) => todo.name.toUpperCase()),
}
}그리고 select option은 data가 존재하는 경우에만 호출돼서 undefined에 신경쓰지 않고 데이터를 변환에 사용할 수 있음. 변환 연산의 비용이 비싸다면, useCallback을 쓰거나 stable function reference를 추출해서 메모라이즈할 수 있음
참고
react-query에 typescript 적용하기 - 리액트 쿼리, 타입스크립트
React-Query - useQuery 적용하기
Store에서 비동기 통신 분리하기 (feat. React Query)
My구독의 React Query 전환기
react-query queryClient defaultOption type
매번 useQuery 부분에 사용자가 브라우저 창을 나갔다 들어올 때 refetch 하지 못하게 해주는 옵션인 refetchOnWindowFocus:false 나 retry 등 옵션을 작성하는 게 귀찮고 지저분해서 이번에 도메인에 맡게 하나씩 커스텀훅으로 쿼리를 분리하려다 queryClient에 defaultOption을 설정할 수 있는 글을 본 게 기억이 나서 찾아보고 작성함
staleTime이나 refetchOnMount 같이 유용한 옵션들도 많은데 아직 제대로 모르기도 하고 데이터를 받아오는 곳마다 조금씩 상이할 것 같아서 나중에 고민해 봐야겠다
// main.tsx
...
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
const queryClient = new QueryClient({
defaultOptions: {
queries: {
// staleTime: Infinity,
refetchOnWindowFocus: false, // window 가 다시 포커스 될 때
// refetchOnMount // 쿼리의 새 인스턴스가 마운트 될 때
// refetchOnReconnect // 네트워크가 끊어졌다가 다시 연결될 때
},
},
});
ReactDOM.render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools />
...
);클로저
(Javascript) 자바스크립트 심화 (3) 클로저
클로저는 내부 함수에서 외부 함수에 접근할 수 있는 개념. 클로저의 개념에서 내부 함수는 외부 함수가 종료되고 난 뒤에 그 내부에 있는 변수가 소멸되고 난 뒤에도 접근이 가능함
function outer() {
const text = 'hello';
return function() {
alert(text);
}
}
const inner = outer();
inner();
outer 함수가 종료됐지만 내부 함수 inner는 text에 접근해 그 내용을 출력함
조금 더 심화된 예제
function factoryMsg(text) {
return {
getMsg: function() { return text; },
setMsg: function(_text) { text = _text }
}
}
const hi = factoryMsg('hi');
const bye = factoryMsg('bye');
alert(hi.getMsg()); // hi
alert(bye.getMsg()); // bye
hi.setMsg('hello');
alert(hi.getMsg()); // hello이런 클로저의 개념은 외부 함수 내부에 있는 내부 함수일 때만 가능함
HTTP, HTTPS, 쿠키, 세션, 캐시, 로컬스토리지
이건 맨날 까먹는다 ㅎ 생각날 때마다 여러 블로그 읽으면서 외우든 해야지
HTTP/HTTPS
HTTP란?
HTTP(HyperText Transfer Protocol)는 간단히 말해 인터넷을 작동시키는 역할을 하며, 웹 서버 및 웹 브라우저 상호 간의 데이터 전송을 위한 응용 계층 프로토콜임
HTTPS란?
- HTTP에 데이터 암호화가 추가된 프로토콜.
- SSL(Secure Socket Layer) 인증서를 사용하는 HTTP.
네트워크 상에서 중간에 제3자가 정보를 볼 수 없도록 공개키 암호화를 지원하고 있음.
유일한 차이점은 HTTPS를 사용한 웹 페이지를 통해 전송되는 모든 데이터는 추가적인 보안 계층이 있음. 이를 TLS(Transport Layer Security - 전송 계층 보안) 프로토콜이라 하며 모든 유형의 데이터는 변경되거나 손상될 수 없는 HTTPS 사이트를 통해 전달되며 제3자로부터 보호됨
HTTPS는 기관으로부터 검증된 사이트만 사용이 허가되므로 내가 접속한 사이트가 상대적으로 안전한 주솔르 가졌음을 증명하는 것이기도 함
Cache
웹 캐시 또는 HTTP 캐시는 서버 부하를 방지하기 위해 웹 문서, 이미지 등의 자원을 임시 사용자 웹 브라우저에 저장하는 기술로, HTTP 통신 시 임시 저장된 캐시가 있다면 불필요한 데이터 전송을 줄이고 서버에 불필요한 요청을 줄여줘 빠른 통신이 가능해진다.
쿠키와 세션
참고
localStorage, sessionStorage, Cookie, Cache
쿠키, 세션, 캐시, 로컬스토리지의 차이?
HTTP HTTPS 차이: 당신의 웹 사이트는 안전한가요?
Pretendard 웹폰트 적용
// index.css
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css');
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic',
sans-serif;
...
}