리액트 공부와 함께 하는 일상/5주차4 [TIL] 5. 구조분해할당(=비구조화할당) / Refresh문제점 / ApolloState 직접 수정 Today Goals 아하 이제 const{}, const[] 원리를 알겠어! - Destructuring 객체에서 데이터를 삭제해보자 - Rest- parameter HOC는 원래 클래스용임 - custom-hooks ⇒ 함수형 용 (hoc는 클래용이든 함수용이든 사용 가능.. ) refresh 쉽지만 별로예요 - writeQuery / readOnly 오늘의 정리 비구조화할당 Destructuring 비구조화할당은 ES6에 추가된 JS 표현식으로 배열이나 객체에서 특정 데이터를 변수로 추출해 사용 할 수 있게 해줍니다! useState(), useQuery() 또한 이런 형식으로 이루어져있다. 중요한 포인트가 있었어요, 객체 구조분해할당의 경우 객체 내의 key 이름이 중요해 같은 이름으로 사용해야 .. 2022. 2. 20. [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. 이전 1 다음
