anko와 함께하는 developer :D anko와 함께하는 developer :D

전체 글

• react-router-dom

  React/react 2023. 12. 5. 12:41

  react-router에서 자주 사용했던 함수들을 정리, useParams() path: '/videos/:keyword ' path 값의 페이지에서 param 값을 가져올 수 있다. import { useParams } from "react-router-dom"; const { keyword } = useParams(); useNavigate() onclick={() => navigate(`/videos/watch/${video.id}`)} window.location 과 vue의 router.push 로 생각해주면 되겠다. import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); useLocation() onClic..

  Read More
• 챌린지를 시작하다.

  프론트엔드 챌린지 2023. 12. 4. 12:12

  원티드 프리온보딩 프론트엔드 챌린지 비즈니스 로직 완전 정복 with React 프론트엔드 챌린지는 노션에 기록하려고 합니다 :D

  Read More
• Arrow Function 을 다시 알기

  JavaScript 2023. 11. 26. 12:58

  전달하는 인자값과 호출하는 것이 같으니까 그냥 함수의 참조값만 전달해줘도 된다. 그게 더 깔끔하다. 아래 코드에서 onFilterChange에 대한 부분을 보도록 하자! Before) const filters = ['all', 'active', 'completed']; function App() { const [filter, setFilter] = useState(filters[0]); return ( setFilter(filter)} /> ); } After) const filters = ['all', 'active', 'completed']; function App() { const [filter, setFilter] = useState(filters[0]); return ( ); }

  Read More
• useQuery(tanstack/react-query)

  React/react 2023. 7. 24. 13:00

  아래와 같이 나눠서 사용하려고 한다.상태관리: ZustandAPI 호출: React-query(tanstack/react-query) api 호출은 react-query를 사용하는게 편하고, 'tanstack/react-query' 를 사용하려고한다. queryKey은 필수 값 이다, 키 값을 입력해주고 Array에 넣어주기 때문에 여러 개의 키 값을 넣어줘도 된다.queryFn에는 data로 불러 올 promis 값을 넣어준다.const { isLoading, error, data: videos, } = useQuery({ queryKey: ["videos", keyword], queryFn: () => youtube.search(keyword), }); 상태관리를 하기 위한 Zust..

  Read More