항해99/실전 WIL | TIL25 [TIL-023] 쿠키 / 세션 / JWT토큰 Today목표 : 05/04일 React Lv4 과제(5) - 쿠키 / 세션 / JWT토큰 클라이언트에서 JWT 토큰 생성하기 ✅ 문제상황 오늘 과제에서는 토큰을 생성해 클라이언트에서 JSON서버를 이용하여 모든 로그인 과정을 처리하는 과제였다. 토큰 생성은 보통 서버측에서 이루어진다. 각 언어에 따라 라이브러리가 존재하여 어렵지 않게 토큰을 생성할 수 있다. ❗하지만 클라이언트에서 토큰을 생성하는 라이브러리는 사실상 찾기 힘들기 때문에 토큰 생성을 클라이언트에서 하기는 쉽지 않다. 토큰은 보통 서버측에서 발급해 주고 클라이언트에서는 발급된 토큰을 받아 로그인 처리나 사용자 정보를 요청하기 때문이다. 하지만 불가능한 것은 아니었다. 시도한점 Node.js에서 사용되는 jsonwebtoken 라이브러리를 .. 2023. 5. 5. [TIL-022] React Lv4 과제(4) - useMemo를 사용해 유효성 검사하기 Today목표 : 05/03일 React Lv4 과제(4) - useMemo 사용해보기 / 주의할점 JSON서버 사용시 문제점 ✅ ❗API 데이터 통신 시 id값을 비교하여 데이터를 가져올 때, 타입비교에 따른 에러 발생 문제상황 JSON 서버 DB에 저장된 id값이 문자열일경우 데이터를 찾아오지 못해 undefined가 발생했다. ===로 타입까지 비교하였을 때 발생한 문제였다. id값을 숫자타입으로 변경해 주면 문제가 없었다. 서버에서 같은 id를 가져와 비교하는데 왜 문제인지 이해가 안됐다. const getPostAxios = async (id) => { try { const { data } = await Axios.get("/posts"); const post = data.find((post) .. 2023. 5. 4. [TIL-021] React Lv4 과제(3) - useQuery 사용해보기 / 에러핸들링 Today목표 : 05/02일 React Lv4 과제(3) - useQuery 사용해보기 / 에러핸들링 상세 페이지에서 직접 url을 변경했을 때 발생하는 문제 ✅ ❗상세 페이지에서 posts 전역상태로 부터 props을 받아와 보여주지 않고, 직접 페이지 id값으로 데이터 통신하여 post 정보를 가져오는 이유 , 에러처리를 해야 하는 이유 문제상황 1. url 조작 시 전역 상태에서 데이터를 가져올 때 문제점 + id에 맞는 데이터가 있을 경우 상세 페이지에서 url 직접 경로로 이동 시 해당 경로에 맞는 페이지가 있더라도, 페이지가 새로고침 되어 전역 상태값이 초기화 된어 데이터가 유실되므로 에러가 발생한다. 2. url 조작 시 id에 맞는 데이터가 없을 경우의 문제점 해당 id에 맞는 데이터 값.. 2023. 5. 3. [TIL-020] Redux를 사용하여 상태 관리를 해야 하는 이유 Today목표 : 05/01일 React Lv4 과제(2)-Redux를 사용하여 상태관리를 해야 하는 이유 Redux를 사용하여 상태관리를 해야 하는 이유 ✅ 오늘 튜터님과의 면담이 있었다. Lv4 과제를 진행하기 위해 현재 컴포넌트 구조와 디자인은 다 마쳐 놓았지만, 아직 기능 구현은 못하고 있었다. 그 이유는 1. JSON서버와 리덕스를 사용하면서 어디까지 상태를 Redux에서 관리해 주어야 하는지, 2. JSON서버와 리덕스 상태를 동시에 계속해서 변경해 주어야 하는 번거로움을 해결할 수 있는 방법이 없는지에 대해 감이 안잡히고 있었기 때문이었다. 일단 JSON서버, Redux-toolkit, React-query를 사용하겠다는 것이 분명해졌으니 먼저 기능 구현을 위해 내가 모르고 있는 점들을 정리.. 2023. 5. 2. [TIL-019] React Lv4 과제(1) - 중복되는 컴포넌트를 App이 아닌 Router 컴포넌트에서 렌더링하는 이유 Today목표 : 4/30일 React Lv4 과제(1) 중복되는 컴포넌트를 App이 아닌 Router 컴포넌트에서 렌더링하는 이유✅ ❗중복되는 Layout, header, footer 등의 컴포넌트를 왜 App 컴포넌트에서 렌더링하지 않고, 하위의 Router 컴포넌트에서 렌더링 할까? function App() { return ( // 새 페이지 마다 렌더링 const Router = () => { return ( ); App 컴포넌트에서 모든 라우트를 처리하면, 모든 페이지에서 공통으로 사용되는 Header와 Footer를 중복으로 렌더링해야 합니다. 반면에 Router를 사용하면, 각각의 라우트마다 별도의 컴포넌트를 렌더링하며, 공통으로 사용되는 Header와 Footer를 중복으로 렌더링하지 않.. 2023. 5. 1. [TIL-018] redux-toolkit, axios - instance와 interceptor, custom Hook Today목표 : 4/29일 redux-toolkit , axios - instance와 interceptor 유용한 사이트, tools✅ 1. 가변성, 불변성 함수 확인 가능한 사이트 => no mutates 불변성 유지 Does it mutate? The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.Array.prototype.lastIndexOf ( searchElement [ , fromIndex ] ) doesitmutate.. 2023. 4. 29. 이전 1 2 3 4 5 다음
