hourPerOur

구글 소셜 로그인시 주의사항 이 탭에 로컬 호스트를 입력해 주어야한다. 리디렉선 URI를 supabase 의 Authenication - Users - Providers 의 해당 Auth Providers 탭의 google 로그인을 클릭하여 하단 Callback URL (for OAuth)의 있는 callback 주소를 전체 복사해서 꼭 붙여줘야한다. 유튜브나 타 레거시를 보면서 이거저거 시도하다 보니까 빼먹은 루트가 있었는데 꽤나 시간을 할애했다. 나는 Header component 내부에 로그인 탭을 심어주었다. Header 에는 로고 - 각 카테고리 탭 - 로그인 (in & out btn) 정보가 들어가게된다 Header의 들어가는 Login.tsx 코드 import React, { useState..

TILs 2023. 8. 18. 21:48

superbase 란? 오픈 소스 백엔드 서비스로, 데이터베이스 및 인증, 스토리지 등 다양한 기능을 제공하는 플랙폼으로 파이버베이스 보다 이용하기가 편하다고 알려져있다. 공식문서 https://supabase.com/docs/reference/javascript/auth-signup Create a new user | Supabase Sign upSign up with additional user metadataSign up with a redirect URL const { data, error } = await supabase.auth.signUp({ email: 'example@email.com', password: 'example-password', }) supabase.com 설치방법 yarn ..

TILs 2023. 8. 17. 22:26

redux Toolkit 기존의 Redux를 개량한 것으로 - 코드를 더 적게 더 편하게 쓰기 위한 기능들을 흡수하여 만든 것을 리덕스툴킷 줄여서 RTK createStore 보다는 configureStore 를 추천함. 이유는 이렇게 , // 일반 리듀서 사용 (API 두개를 사용) // const rootReducer = combineReducers({ // counter, // users, // }); // Redux Toolkit 사용 (API 하나만으로 충분) const store = configureStore({ reducer : { counter : counter, users : users, } }); + 타입핑이 너무 많다 / 불필요하다라는 의견을 적극 수용하여 한번에 만들 수 있는 API..

TILs 2023. 8. 17. 00:44

TILs 2023. 8. 7. 23:32

Redux는 JavaScript 애플리케이션에서 (전역 / 부분전역) 상태를 관리하는 오픈 소스 라이브러리 주로 React와 함께 사용되며, Angular, Vue 등 다른 프론트엔드 라이브러리와도 연동하여 상태 관리를 용이 상태 관리의 복잡성 해소 애플리케이션의 상태는 컴포넌트 **계층 구조를 통해 전달 (props!**되는데, 애플리케이션이 커지고 복잡해질수록 상태의 흐름을 파악하기 어려워지는데 Redux는 이러한 상태 관리의 복잡성을 해소하고, 애플리케이션 전역에서 상태를 통합적으로 관리함으로써 간결하고 예측 가능한 상태 관리를 제공 ❗ 예측이 가능하다? 어느 컴포넌트에서든지 접근(useSelector) / 제어(useDispatch)가 쉽고 용이하게 되어있으므로, 전역상태가 어떨지 특정 이벤트에서..

TILs 2023. 8. 6. 23:48

ECC Elastic Compute Cloud Billing AWS Billing은 AWS 계정 사용량과 비용을 모니터링하고, 요금 청구 정보를 제공하는 서비스 사용량 모니터링 / 비용분석 / 청구 정보 확인 / 예산 설정 등을 할 수 있다 클라우드 서비스의 종류 IaaS (Infrastructure as a Service) : 하드웨어 인프라를 인터넷을 통해 제공하는 서비스 IaaS는 가상화된 하드웨어, 스토리지, 네트워크, 운영체제 등을 제공하며, 사용자는 이를 이용해 자신의 애플리케이션을 실행할 수 있다. AWS EC2, Microsoft Azure, Google Compute Engine 등이 IaaS 서비스를 제공한다. PaaS (Platform as a Service) : 애플리케이션을 개발,..

TILs 2023. 8. 3. 20:24

* Route 5S, S3, CloudFont, ELB 등 프론트엔드 개발자가 알아야 하는 개념에 대해 설명할 수 있다 실무에서 백엔드 개발자 및 PM 등 프로젝트 관계자와 협업 시 소통의 수단 다음 내용은 중요도에 따라 좀 더 집중해서 학습하길 권장합니다. 중요도 ‘상’ : Route 53, S3, cloudfront 중요도 ‘중’ : IAM, EC2, RDS, ELB 등 AWS는 Amazon Web Services의 아마존닷컴이 제공하는 클라우드 컴퓨팅 플랫폼 AWS는 전 세계에 분산되어 있는 데이터 센터에서 고객에게 IT 인프라를 제공하며, 이를 사용하여 고객은 필요한 인프라를 빠르고 쉽게 설정하고 관리할 수 있다. 컴퓨팅: EC2 (Elastic Compute Cloud), Elastic Bean..

TILs 2023. 8. 2. 21:03

📦src ┣ 📂components ┃ ┣ 📜Form.tsx ┃ ┣ 📜Header.tsx ┃ ┣ 📜Todo.tsx ┃ ┗ 📜todos.ts ┣ 📂pages ┃ ┣ 📜Detail.tsx ┃ ┗ 📜Home.tsx ┣ 📂redux ┃ ┣ 📂config ┃ ┃ ┗ 📜configStore.ts ┃ ┗ 📂modules ┃ ┃ ┗ 📜todo.tsx ┣ 📂shared ┃ ┗ 📜Router.jsx ┣ 📂styles ┃ ┗ 📜GlobalStyle.tsx ┣ 📜App.css ┣ 📜App.tsx ┣ 📜DetailPage.tsx ┣ 📜index.css ┣ 📜index.tsx ┣ 📜react-app-env.d.ts ┣ 📜reportWebVitals.ts ┗ 📜setupTests.ts 사실 다 짜놓고 보면 jsx 타입과 크게 다를 ..

TILs 2023. 8. 1. 20:45