본문 바로가기

FE58

인증 ( 세션, 쿠키, 로컬 ) 세션 기반 인증 세션은 로그인에 성공한 유저가 서비스를 사용하는 동안 저장하고 있는 유저 정보입니다. 서버는 세션을 생성하고 나서 세션을 데이터베이스에 저장하고, 이후 사용자의 요청에 포함된 세션 정보가 세션 DB에 저장되어 있는 지 확인합니다. 브라우저에는 데이터를 저장할 수 있는 공간이 있습니다. - 현재 열려있는 브라우저을 닫거나 새로운 탭 또는 창을 열면 데이터가 삭제되는 세션 저장소 - 창이 닫히더라도 데이터가 남아 있는 로컬 저장소, - 간단한 데이터를 저장할 수 있는 쿠키가 있습니다. 세션방식의 단점은 악의적인 공격자가 브라우저에 저장된 데이터를 탈취할 수 있다는 것입니다. 비록 세션을 알 수 없는 문자열로 만들었다고해도, http는 보안에 취약하기 때문에 중간에 전달되는 데이터 역시 가로챌.. 2022. 7. 1.
Recoil Atom 공식문서에서의 atom에 대한 설명은 다음과 같습니다. atom 은 기존의 redux에서 쓰이는 store 와 유사한 개념으로, 상태의 단위입니다. atom이 업데이트 되면, 해당 atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더 됩니다. unique 한 id인 key로 구분되는 각 atom은, 여러 컴포넌트에서 atom을 구독하고 있다면 그 컴포넌트들도 똑같은 상태를 공유합니다(상태가 바뀌면 바뀐 값으로 해당 컴포넌트들이 re-render 됩니다) state.js export const cookieState = atom({ key: 'cookieState', default: [] }); atom은 다음과 같이 작성해볼 수 있습니다. 정말 간단하죠? 설명과 같이 key.. 2022. 6. 23.
react-query (2) react-query option 라이브러리 및 공식 문서 뜯어 버리기 Queries ( 쿼리 ) Mutations ( 변이 ) function App() { const mutation = useMutation(newTodo => axios.post('/todos', newTodo)) return ( {mutation.isLoading ? ( 'Adding todo...' ) : ( {mutation.isError ? ( An error occurred: {mutation.error.message} ) : null} {mutation.isSuccess ? Todo added! : null} { mutation.mutate({ id: new Date(), title: 'Do Laundry' }) }} > .. 2022. 6. 22.
즉시 실행 함수 useQuery 뒤지다가 나온 코드인데 어려워서 찾아본다. function myFun(a,b){ console.log(a,b) return a + b } const bb = (0,myFun)(1,2) console.log(bb) 제일 왼쪽 함수를 바로 실해하기 위함이다. 참고 https://stackoverflow.com/questions/40967162/what-is-the-meaning-of-this-code-0-function-in-javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator https://stackoverflow.com/questions/6577812/calli.. 2022. 6. 21.