본문 바로가기

분류 전체보기

 (138)
인증, 인가, HTTP 인증과 인가 인증(Authentication) : 사용자가 누구인지 확인한다. 로그인 등. 인가(Authorization) : 작업의 권한이 있는지 확인한다. 로그인 후 마이페이지 접근 등. HTTP : 데이터를 주고받기 위한 프로토콜(약속)이다. 특성 - 비연결성 : 응답 완료 후 연결을 끊는다. - 무상태성 : 이전 데이터를 유지하지 않는다. 보완하기 위해 사용되는 방법 - 쿠키 : 클라이언트 측에서 상태 정보를 저장한다. - 세션 : 서버 측에서 클라이언트의 상태 정보를 저장한다. - 토큰: JWT라고 부른다. 복호화된 키는 서버에, 암호화된 키는 클라이언트쪽에 보관한다. Http의 header에 넣어서 사용한다. - 보통 하나만 쓰이지 않고 함께 쓰인다. - HttpOnly 옵션을 적용한 경우 j..
React query: paginated, lagged queries 페이지가 변화되면서 랜더링 되는 것은 일반적인 UI 패턴이다. 쿼리키에 페이지 정보를 포함하여 작동하기 때문이다. 작업하는데 많은 도구를(tool) 사용하므로 success와 loading 상태로 변화되는 것이 좋지는 않다. Painted/Lagged Queries는 이 과정을 다루는데 도움을 준다. useQuery 사용 후 keepPreviousData : true로 변환. 페이지를 변환할 때(A->B) A의 데이터를 그대로 둔 뒤 B가 도착하면 바뀐다. useQuery 사용 후 keepPreviousData : false로 변환. 페이지를 변환할 때(A->B) A의 데이터가 보이지 않고, 로딩중으로 변환 후, B가 도착하면 바뀐다. Paginated / Lagged Queries | TanStack ..
React query: Prefetching 페이지 이동 전에 미리 쿼리를 호출한다. 해당 페이지로 이동할 때 로딩 없이 바로 UI를 볼 수 있다. 마우스로 목록 위를 배회 -> prefetching -> 네트워크 요청 없이, 데이터의 딜레이 없이 진행 - prefetchQuery를 사용한다. - header에 적용 등. 최적화에 잘 사용하는 방법이다.
React query: Optimistic Update Optimistic Update - 서버 요청이 잘 이루어질 것이라고 가정하여 UI를 먼저 변경한다. - 실패하는 경우 UI를 원상복구한다. - 빠르다. - 인스타그램의 좋아요 기능 등. 코드에서 적용 useMutations으로 addTodo를 실행하였을 때 1. 예상 : 데이터를 입력 -> 입력된 데이터가 추가 -> UI에 보여짐. 2. Optimistic Update query 취소 -> 데이터를 받아 UI에 추가 -> addTodo 실행 => 실패하면 이전 데이터를 다시 setQueryData로 받아 로컬 데이터베이스에 넣는다. => 실패하든 성공하든 DB의 내용을 캐시 내용에 반영하기 위해 onSettled를 실행하여 invalidationQueries를 실행한다. => DB에 있는 내용을 다시 ..
Axios로 데이터 다루기 Axios는 데이터를 데이터베이스를 부르거나, 추가하거나, 수정하거나, 삭제하기 위해 사용된다. 서버의 통신과 관련된 것들은 시간이 필요하므로 비동기적으로 수행한다. 1. 데이터를 부를 때 (get) 2. 데이터를 추가할 때 (post) 3. 데이터를 수정할 때 (put: 해당 항목 전체 수정, patch: 해당 항목 일부 수정) 4. 데이터를 삭제할 때 (delete) - id는 자동으로 생성되므로 따로 입력하지 않아도 된다. - instance를 생성하여 주소를 다룰 때 발생하는 human error를 방지할 수 있다. 아래는 참고할 수 있는 http 상태 코드 내용이다. HTTP 상태 코드 - HTTP | MDN HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응..
React Query 쿼리(query) : DB에서 원하는 데이터를 조작하기 위한 언어의 집합. SQL에서 사용한다. 쿼리 캐시(querycache) : TanStack query의 저장 매커니즘이다. 데이터, 메타 정보, 쿼리 상태가 저장된다. 일반적으로 직접 상호작용하지 않고 대신 queryClient 특정 캐시에 사용된다. 서버 상태(server state) : 서버에 요청하고 응답받는 과정에 연결된 데이터 1. fetching : 서버에서 데이터를 받아온다. 2. cashing : 서버에서 받은 데이터를 받아 저장한다. 데이터를 다시 요청할 때 서버에 요청하지 않고 저장한 데이터를 사용한다. 3. synchronizing : 캐시 데이터를 서버와 동일하게 만든다. 4. updating : 서버 데이터의 변경이 용이하다..
React-Redux Redux는 데이터를 전역으로 관리할 수 있는 다른 방법이다. Context가 useState와 함수를 그대로 가져와 사용하는 방법이라면, Redux는 인자를 받아 조건에 따른 반응을 할 수 있게 한다. Redux의 데이터 흐름 (flux architecture : 단방향 상태변화) 1. 컴포넌트(뷰) : 사용자가 앱 상태를 조작한다. 2. 디스패치 : 변경을 요청한다. 3. 액션 : 액션과 페이로드가 포함된 객체다. 페이로드는 포함될 수도 포함되지 않을 수도 있다. 4. 리듀서(함수) : 액션을 받아 역할을 한다. 상태를 업데이트 하는 순수 함수로, 상태는 불변이므로 새 상태를 생성해 반환한다. 5. 스토어 : 상태가 반영되는 곳. 애플리케이션의 상태를 관리한다. 6. 트리거 : 상태가 바뀌었음을 알려..
React-Context Context로 데이터를 전역으로 관리할 수 있다. 전역으로 데이터를 관리하면 한 컴포넌트에서 업데이트 된 값을 다른 컴포넌트에서도 적용해 얻을 수 있다. props-drilling도 전역으로 데이터 관리를 할 수 있지만 컴포넌트 간의 위치가 아주 분명해야 하고, 넘겨야 하는 children이나 props가 많아질수록 구조를 알아차리기 힘들다. 따라서 유지보수가 힘들게 된다. Context는 props를 넘겨주지 않지만 props-drilling과 유사하므로 컴포넌트간 간격이 큰 값이면 Context로, 컴포넌트 사이가 가까우면 props를 사용하여 혼합해서 사용하면 더 유용하게 사용할 수 있었다. Context를 React에 적용하는 방법 1. context는 컴포넌트이므로 폴더 이름을 대문자로 시작하..
Firebase를 이용한 인증 프로젝트를 마무리 하면서 코드 회고를 할 필요성을 느꼈다. React와 Firebase를 통해 인증을 구현하였다. Firebase는 인증 API가 잘 만들어져 있어서 메일과 소셜로그인을 통한 인증을 쉽게 할 수 있다. 1. Firebase에서 프로젝트를 만든다. 2. 프로젝트 바로가기에 Authentication 항목을 추가한다. 3. VSCode 내부에 apiKey 등 인증에 필요한 요소를 적어 넣는다. 해당 정보는 프로젝트 개요 옆 설정창에서 프로젝트 설정을 클릭하면 내앱 항목에서 볼 수 있다. 4. Authentication의 Sign-in method를 선택하여 제공업체를 추가하고 사용 설정을 활성화한다. 1. 이메일/비밀번호는 별도의 절차가 필요하지 않다. 2. Google은 프로젝트의 공개용 ..
Github에서 코드 복사(Fork) 미니 프로젝트가 끝난 뒤 데이터를 백업 받아야 개인적으로 개선할 수 있다. Github에서는 관련된 기능을 제공하고 있다. 프로젝트가 있는 레포의 브랜치로 가서 오른쪽 위를 보면 다음과 같은 항목이 있다. Fork를 클릭하면 해당 코드를 복제한 새로운 레포가 생성된다. Fork는 clone과 다르게 fetch나 rebase의 과정을 통해 기능을 합칠 수 있다. Github의 새로운 기능을 알게 되어 시험해 보았다.

티스토리툴바