본문 바로가기

전체 글66

[TS error] '[FormInstance<any>]' 형식에 'register' 속성이 없습니다.ts(2339) | 개체 리터럴은 알려진 속성만 지정할 수 있으며 'FormInstance<any>' 형식에 'mode'이(가) 없습니다.ts(2345) 문제상황 react-hook-form 을 적용해서 로그인페이지를 만드는데 container와 presenter로 나누는 과정에서 타입스크립트 에러가 났다. 로그인 첫시작인 컨테이너인데 어디서 props를 받아와서 타입 지정해줘야 하는 건가 싶었다. const register: any '[FormInstance]' 형식에 'register' 속성이 없습니다.ts(2339) '{ mode: string; resolver: (values: UnpackNestedValue, context: TContext | undefined, options: ResolverOptions) => Promise; }' 형식의 인수는 'FormInstance' 형식의 매개 변수에 할당될 수 없습니다. 개체 리터럴은 알려진 속성만 .. 2022. 2. 16.
[TIL] 4. 쿼리방식들 / 폼 라이브러리 / 검증 라이브러리 / 공통컴포넌트 Today Goals useQuery를 axios처럼 사용할 수 있대 - useApolloCient 헉! 폼을 자동으로 만들어준다고?! - React-Hook-Form Validation 라이브러리도 있대! - Yup 엽? 재사용 위한 공통컴포넌트 만들자! - Common-Component 여러가지 쿼리방식 useLazyQuery useLazyQuery = useQuery + 원하는 시점에 실행 useLazyQuery는 useQuery 와 같되 원하는 시점에서 실행을 해줄 수 있습니다. (따라서 {data} 를 받아와서 리렌더링이 일어난다.) (useQuery는 페이지가 시작될 때. 컴포넌트가 열리면 자동으로 실행된다.) useApolloClient useApolloClient는 axios처럼 원하는 위.. 2022. 2. 16.
[TIL] 3. 권한분기와 관리자 / 클로저 / HOC & HOF Today I Learned Next.js 렌더링에 이런 원리가 있다니! - Diffing/Hydration 잠깐! 이거 먼저 실행해줘! - Closure / HOC / HOF 새로고침해도 로그인한걸 어떻게 유지시킬까요? 지난 번 로그인의 역사 게시글에서 토큰을 발급하여 로그인 정보를 디비 접근 없이 redius를 활용하여 백엔드에서 바로 조회 가능한 방법이 있다고 했습니다. 이방식은 브라우저에 accessToken을 저장하기 때문에 브라우저를 새로고침하거나 페이지를 이동했을 경우 로그인 정보가 날아가게 됩니다. (화면이 새로 그려지며 초기화 되기 때문입니다.) 이를 해결하려면 브라우저 저장소를 이용하면 됩니다. (오늘 알아볼 것은 로그인 관련 내용을 임시로 저장하는 방식입니다.) 브라우저 저장소 브라우.. 2022. 2. 15.
[TIL] 1. 로그인의 역사 로그인의 필요성 브라우저, 프런트, 백엔드, 디비가 있습니다. (각각 포트가 필요해서 서버라고 부릅니다.) 브라우저 주소창에 주소를 입력하고 엔터를 누르면 프런트에서 html, css, js 같이 하드 코딩한 정적 데이터들을 받아 옵니다. 그 후에 필요한 데이터를 useQuery를 통해 디비에서 꺼내옵니다. (api로 요청하면 게시물을 받아오는 식입니다.) 이때 api 요청들 중에 로그인이 필요한 요청들이 있습니다. createPayment updateProfile 처럼 결제를 하거나 프로필 수정을 하는 부분에서는 백엔드에서 누구 것을 업데이트 하겠다는 건지 알아야 합니다. 백엔드와 브라우저 사이에 뭔가를 알고 있어야 하는 부분. 로그인의 필요성이 여기서 나오게 되었습니다. 로그인 옛날 방식 Sessio.. 2022. 2. 14.