일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 프로그래머스
- 자바스크립트
- 한글 공부 사이트
- 파이썬 enumerate
- 타입스크립트 리액트
- typeScript
- 타입스크립트 props
- Next 팀 프로젝트
- REACT
- 그리드 정렬
- useState
- 파이썬 list
- 내일배움캠프 최종 프로젝트
- 파이썬 slice
- 리액트 훅
- 내배캠 프로젝트
- 파이썬 반복문
- React Hooks
- 파이썬 for
- 파이썬 for in
- 리액트 프로젝트
- 리액트
- 내일배움캠프
- 코딩테스트
- JavaScript
- 리액트 팀 프로젝트
- 리액트 페이지 이동
- 타입스크립트
- js
- 내일배움캠프 프로젝트
- Today
- Total
목록React (55)
aotoyae
패키지 설치 npm i @supabase/supabase-js .env 에 키 넣기 VITE_SUPABASE_URL= URL VITE_SUPABASE_KEY = KEY config.ts process.env 가 아니라 import.meta.env 로 호출 import { SupabaseClient, createClient } from '@supabase/supabase-js'; const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string; const supabaseKey = import.meta.env.VITE_SUPABASE_KEY as string; export const supabase: SupabaseClient = createClient(su..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Lbj09/btsFA9QthQX/jkFwzmRmcLklU0kPtPG9YK/img.png)
💡 검색 키워드로 데이터 가져오기 쿼리로 keyword=검색어 요런식으로 주소를 바꿔 검색을 했을 때 http://localhost:3000/courses?keyword=react 😲 useSearchParams 로 검색어만 빼올 수 있다! import { useSearchParams } from 'react-router-dom'; function CourseListPage() { const [searchParams, setSearchParams] = useSearchParams(); console.log(searchParams.get('keyword')); // 주소에서 keyword 만 빼옴 const [keyword, setKeyword] = useState(''); // input state co..
💡 잘못된 경로로 접근할 때 페이지를 돌려보자! 로그인이 풀렸다던가, 데이터가 없다던가 할 때 페이지가 돌아가도록 해보자. (페이지를 바꿔주자) import { Navigate, useParams } from 'react-router-dom'; function CoursePage() { const { courseSlug } = useParams(); const course = getCourseBySlug(courseSlug); const courseColor = getCourseColor(course?.code); if (!course) { // 추가한 부분 return ; } const headerStyle = { borderTopColor: courseColor, }; 코스 리스트 페이지에서 나열된 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bcYA3c/btsFzcUwcNI/H6nIPVHKBgDeg994HlRvp0/img.png)
💡 페이지에 잘못된 주소가 들어왔을 때 = Route 로 설정해 두지 않은 주소가 입력됐을 때를 ! 위해 NotFoundPage 를 설정해두자. * 와일드 카드는 모든걸 포함한다는 뜻 차례대로 Route path 를 비교하다가 일치하는게 없으면 마지막에 있는 * path 의 NotFoundPage 를 렌더링한다! NotFoundPage.jsx 홈으로 돌아갈 수 있도록 버튼에 링크를 걸어뒀다. function NotFoundPage() { return ( 홈으로 가기 ); } http://localhost:3000/hi 잘못된 주소를 입력해보면 ~ 설정해 둔 페이지가 잘 나온다!
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/u89Wv/btsFygQDrj8/IwJhdzwHeUb9nmVckIGls1/img.png)
💡 Route 를 그룹별로 묶어보자. courses 패스들을 정리해보자. / Route 태그를 하나 더 만들어서 묶어줬다. 이제 courses 만 바꾸면 하위 주소도 알아서 바뀐다! ✳️ Route 로 감싸면서 특정 path 안에서 공통된 디자인을 보여주고 싶다면? Main.jsx App.jsx 를 살펴보면, children 을 가져와 공통 레이아웃을 렌더링하고 있다. function App({ children }) { return ( {children} ); } App 컴포넌트를 path="/" 안쪽에 둔다면 어떻게 될까? Main.jsx 🥹 이럴 때 Outlet 을 활용해야 한다! Main.jsx App.jsx import { Outlet } from 'react-router-dom'; functio..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/3RVxM/btsFCzHrKPE/dTlM9v80luoy8UBtShjnk1/img.png)
💡 NavLink 태그에 대해 알아보자. Link 를 NavLink 로 바꾸면 인라인 스타일을 적용할 수 있게 된다. 카탈로그 커뮤니티 선택한 메뉴에 밑줄이 그어지게 만들어주기..! function getLinkStyle({ isActive }) { return { textDecoration: isActive ? 'underline' : undefined, }; }
💡 데이터를 바로 불러오는게 아니라 조건적으로 가져오기! 이벤트나 ~ 가져오는 순서나 ~ useQuery("key", getData, {option}) 유즈쿼리의 세번째 인자로 옵션을 설정할 수 있다! const { data, refetch } = useQuery(['todos'], getTodos, { enable: true }); enable 은 기본값이 true 여서 적지 않아도 true ! true 면 바로 실행해 데이터를 가져온다는 뜻이다. 그런데 자동으로 바로 데이터를 불러오는게 아니라 😲 사용자가 버튼을 눌렀거나 할 때 데이터를 가져오고싶다면? Disabling/Pausing Queries const { data, refetch } = useQuery(['todos'], getTodos, {..
💡 각각 언제 쓰면 좋을지 알아보자. 🌐 Link 클릭해서 페이지를 이동하도록 할 때! 텍스트나, 버튼, 이미지 등에 사용한다. 홈으로 가기 🌐 Navigate 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때! 회원 전용 페이지에 로그인 없이 들어와서 로그인 페이지로 리다이렉트 하는 경우 상품 상세 페이지에서 상품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우 if (!course) return ; 🌐 useNavigate 특정 코드의 실행이 끝나고나서 페이지를 이동시키고 싶을 때! 장바구니 담기를 눌렀을 때 리퀘스트를 보내고, 장바구니 페이지로 이동시키는 경우 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후, 페이지를 이동시키는 경우 리다이렉트된 로그인 페이지에서 로그인을 완..