TIL (46) 썸네일형 리스트형 [TIL] React Query 리액트 쿼리의 장점으로는 너무 쉽다고한다. 이번 팀프로젝트를 시작하기 전에 쿼리를 써보기로 했다. Query 어떤 데이터에 대한 요청을 의미한다. axios의 경우 get 요청과 비슷하다. DB를 요청하는 ! 뭔가를 알려주는 GET 요청과 비슷하다. const response = await axios.get('http://localhost:3000/todos') Query Invalidation ( = 무효화 시킨다) 기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있어요. 그렇기 때문에 최신 상태가 아닐 수 있다. 그런 경우 기존의 쿼리를 무효화 시킨 후 최신화 시켜야하는데 이런 과정을 쿼리는 자동으로 해준다. 리액트 쿼리 설치하기 yarn add react-query im.. [TIL] 로그인 후 특정 페이지 Router.jsx에서 로그인 된 사람만 특정 페이지에 들어올 수 있게끔 하는걸 구현하고 싶어서 하는 중에 function Router() { return ( ); } export default Router; 원래 이렇게해서 React-router-dom v6에서 도입된 라우트 구조를 지정하는 데 사용되는 React 컴포넌트 Outlet을 사용하려고 하였으나 따로 파일을 만들지 않고 쉬웠던 방법이 있어 바꿔보았다. function Router() { const isLogin = useSelector((state) => state.AuthSlice.isLogin); return ( {isLogin ? ( ) : ( )} ); } export default Router; [TIL] JWT 인증 API 문서 서버 API_URL : https://moneyfulpublicpolicy.co.kr 회원가입 Request URL PATH → /register Method → POST JSON { "id": "유저 아이디", "password": "유저 비밀번호", "nickname": "유저 닉네임" } Response { "message": "회원가입 완료", "success": true } 로그인 아이디와 비밀번호가 DB에 있는 회원정보와 일치하면 accessToken, userId, avatar, nickname 총 4가지 유저정보를 응답 Request URL PATH → /login Method → POST JSON { "id":"유저 아이디", "password": "유저 비밀번호" } Res.. [TIL] Axios 설치/기본 - Axios란? http를 이용해서 서버와 통신하기 위해 사용하는 패키지 - Axios 설치 npm i axios yarn add axios (1) Axios GET get은 서버의 데이터를 조회할 때 사용 axios.get('https://api.example.com/data', { timeout: 5000 // 5초 후에 요청이 타임아웃됨 }) https://axios-http.com/kr/docs/req_config [공식문서] 요청 Config | Axios Docs 요청 Config 다음은 요청을 만드는 데 사용할 수 있는 config 옵션들 입니다. 오직 url만 필수입니다. method를 지정하지 않으면 GET방식이 기본값 입니다. { url: '/user', method: 'get', b.. [TIL] 프로젝트를 하다가 처음 들어보는 단어들이 많아서 찾아보다가 알게된 것들을 정리해놓아야 겠다는 생각이 들었다. import ReactDOM from "react-dom/client"; import { Provider } from "react-redux"; import { persistStore } from "redux-persist"; import { PersistGate } from "redux-persist/integration/react"; const persistor = persistStore(store); const root = ReactDOM.createRoot(document.getElementById("root")); root.render( // ... 생략 ... ); 웹에서 사용자의 행동.. [TIL] firestore 이용하기 이번 팀 프로젝트를 시행하면서 나는 댓글 부분을 맡았는데 제일 어려웠던 부분인 각각의 피드에 댓글을 달 수 있는 기능을 구현하는 것이었다. 이번 프로젝트에는 파이어베이스를 사용했는데 파이어베이스만의 데이터 코드가 따로 있는 부분이 있어서 혹시 그런 코드가 따로 있나 찾아보았다. 처음엔 "댓글 기능은 단순히 useParams로 id를 받아와서 그 아이디마다 컬렉션이나 필드를 나눠주면 되겠다고 단순히 생각만 하고있었는데, 이게 생각보다 오래걸릴지 몰랐다. 단순히 내가 생각만했던 부분을 코드로 실현하고자 했던 부분이라 사용자가 늘어나고 데이터가 커지면 좀 비효율적일수도 있겠다는 생각이 들었다. feed의 id를 가져오려고하니 파이어베이스에서는 Realtime Database와 firestore를 고민하다가 N.. [TIL] redux 문제 redux를 써서 todo-list 카드의 모음을 만드는데 제대로 만들지를 못해서 조금씩 써봤다. 파일 몇개는 생략하고 .. // Home.jsx const Home = () => { return ( ) } export default Home; 이렇게 true 와 false를 써놓고 이렇게 써서 보면 item 안에는 todos 와 users 둘 다 있으니 여기서 todos만 빼보면, 우리가 처음 initialState로 지정했던 객체가 나온다. 그러면 이제부턴 객체를 추가하거나 삭제할땐 객체로 추가하거나 삭제하면 되겠다. input 부분과 todo-list 부분을 분리하는 것에 대해서 나눠놨는데 우리가 이제는 데이터 어디서든지 접근하는것이 가능하기 때문에 굳이 props로 내려주지 않아도 된다. 우린 여.. [TIL] Tab 활성화 아티스트탭에서 아티스트를 클릭했을 때 어떤 탭이 활성화되었는지 styled-components의 조건부 스타일링을 적용해보자. 클릭한 탭이 활성화되었는지 알기위해 조건부 스타일링을 적용하는 부분이 어려워서 적어본다. export default function Tabs() { const [activeMember, setActiveMember] = useState("카리나") return ( 111 222 333 444 555 666 ) } 지금 클릭한 것이 어떤 상태인지 알기위해 props로 조건부 스타일링을 줘보자. camelCase를 쓰는 경우에는 맨 앞에 $ 표시를 해서 $activeMember 이런식으로 붙여줘야한다. 이걸 이제 어떻게 받을 수 있을까? const Tab = styled.li` ${.. [TIL] Context API 1. Context 생성 const LetterContext = createContext(); 2. Provider 제공 import { createContext } from 'react'; function Provider컴포넌트() { const userName = "Kim"; const age = 25; return { }; } 3. Consumer 사용 import React, { useContext } from "react"; function Consumer컴포넌트() { const data = useContext(LetterContext); return ( 내 이름은 {data.userName}입니다. 내 나이는 {data.age}입니다. ) } export default Consumer컴포넌트.. [TIL] Redux란? 리덕스는 전역 상태 관리 라이브러리이다. 애플리케이션의 상태를 효율적으로 관리할 수 있게 도와주는 도구이다. 쉽게 말해 모든 컴포넌트에서 바로 접속 가능한 저장소로 모든 컴포넌트들이 State를 쉽게 공유할 수 있게 해주는 방식이라 보면 된다. 만약 깊이가 A부터 F까지인 컴포넌트 트리 구조가 있다고 가정하면, A ▶ B ▶ C ▶ D ▶ E ▶ F 순서로 접근 이동시켜야하고, 다시 F ▶ E ▶ D ▶ C ▶ B ▶ A 루트를 통해 돌아와야하는데 이런 상황은 굉장히 귀찮고 번거로운 과정이다. 그런데 만약 리덕스를 사용해 하나의 Store라는 매체를 두면 컴포넌트가 어느 위치에 있던 간에 A ▶ Store ▶ F 로 바로 상태 값을 가지고 올 수 있다. Redux를 쓰는 이유 1. 모든 컴포넌트들이 pr.. 이전 1 2 3 4 5 다음
