airbnb_clone_coding_frontend
1.[풀스택] 에어비앤비 클론코딩 Front-end 01 - <Outlet />
"이번 강의는 확장자 명 ts 와 tsx 의 차이점을 정확히는 모르겠지만. 다른 파일에 명시된 component 를 가져와서 사용할 수 있으려면 파일확장자가 .tsx 이어야만 하는 것 같다. 정확하진 않고. 내 생각이다. Link to -> chakra-ui homep
2.[풀스택] 에어비앤비 클론코딩 Front-end 02 - 404 Page, VStack & HStack
강의링크golden_keyword is 'errorElement:' 💖💖💖errorElement: 는 기본적으로 제공해주는 기능이므로 단순히 사용만 하면 된다. 위 그림과 같이 특정 component 위에 마우스를 올려두면 해당 컴포넌트에 대한 설명이 적혀 있는
3.[풀스택] 에어비앤비 클론코딩 Front-end 03 - react-icons
소개 강의링크 바로가기 배운내용 정리 Toast > "위 코드를 실행하면 아래 캡처사진과 같이 된다." "Link to @chakra UI Doc - about Toast component" react-icons react-icons install [Link
4.[풀스택] 에어비앤비 클론코딩 Front-end 04 - Modal
강의링크 바로가기Link to Chakra ModalModal 은 children component, isOpen={isOpen}, onClose={onClose} 등을 필요로 합니다. 또한 useDisclosure() 사용법을 반드시 알아야 합니다.
5.[풀스택] 에어비앤비 클론코딩 Front-end 05 - useColorMode, useColorModeValue
강의링크 바로가기chakra 'dark-mode'를 사용하려면 theme 를 설정해야 한다. 왜냐하면 기본값을 dark 모드로 할지 아니면 white 모드로 할지 정해야 하기 때문이다. 이상 위의 2가지만 적용해도 사실 다크모드로 바로 적용이 된다. 이후에는 컬러모드를
6.[풀스택] 에어비앤비 클론코딩 Front-end 06
소개 강의링크 바로가기 배운내용 정리 Grid by chakra [Link to Grid by chakra] 반드시 공식문서를 방문해보자. 매우 다양한 화면구성 방법을 쉽게 배울 수 있다. 💖😋 Stack vs HStack vs VStack Grab a Ke
7.[풀스택] 에어비앤비 클론코딩 Front-end 07 - 반응형 디자인
강의링크 바로가기Link to Responsive Styles chakra Doc
8.[풀스택] 에어비앤비 클론코딩 Front-end 08 - Skeleton
강의링크 바로가기Link to Skeleton Doc(https://chakra-ui.com/docs/components/skeleton/usage
9.[풀스택] 에어비앤비 클론코딩 Front-end 09 - CORS errors
강의링크 바로가기이하에서는 위 과정을 실제로 구현하는 방법과 구체적인 코드를 정리하겠습니다. 다른 사이트에서 내가 만든 API를 fetch() 하려고 시도하면 CORS error 가 발생한다. (이것은 기본값이다.)👉 즉 CORS error 가 발생하는 것이 당연
10.[풀스택] 에어비앤비 클론코딩 Front-end 10 - Tanstack Query
강의링크 바로가기Link to Doc Tanstack QueryTanstack Query 는 본래 이름이 React Query 였는데. 어떤 이유에서인지 이름이 Tanstack Query 로 바뀌었다. 저작권 문제인가? 첫번째 장점은 아래와 같이 긴 코드를 1줄로 축약
11.[풀스택] 에어비앤비 클론코딩 Front-end 11 - axios
강의링크 바로가기
12.[풀스택] 에어비앤비 클론코딩 Front-end 12 - Tanstack Query Devtools
강의링크 바로가기Link to Tanstack Query Devtools
13.[풀스택] 에어비앤비 클론코딩 Front-end 13 - 20.1 Credentials
강의링크 바로가기20.1 Credentials20.2 RecapReact 서버에서 로그인 여부를 감지하고 이를 브라우저에 나타내는 기능구현api.ts 파일에 withCredentials: true 추가api.ts 파일에 getMe 함수 정의 - getMe 함수는 백엔드