Algoroot's space

안녕하세요. 오늘은 Google OAuth 인증을 팝업모드로 구현한 과정을 소개하고자 합니다. Background Google Ads 계정을 가져와야 하는 로직이 있었습니다. Process 1. 서버에서 Google 계정 연동을 위한 URL을 받습니다. 2. 받은 URL로 Google 계정 연동 버튼 클릭 시 팝업 창을 띄웁니다. 3. Google 연동 후 Callback URL에서 코드를 가져옵니다. 4. 가져온 코드로 User의 Google Account ID를 저장한 후 다음 단계로 넘어갑니다. 1번~3번의 과정은 클라이언트에서도 Google Client ID를 사용하면 code를 받을 수 있어 처음에는 @react-oauth/google이라는 라이브러리를 설치하여 구현하였습니다. 하지만 특정 이유..

Implement password types manually 안녕하세요 지난번 이슈를 해결하는 과정에서 이어져 수동으로 TextInput 비밀번호 타입을 구현했던 과정에 대해 포스팅해보려고 합니다. - 리액트 네이티브 패키지에서 네이티브 언어 바꾸었던 시도 [React-native] 앱 개발을 하며 마주한 IOS secureTextEntry 관련 이슈 톺아보기 - 1. 패키지 코드 변경하기 [React-native] 앱 개발을 하며 마주한 IOS secureTextEntry 관련 이슈 톺아보기 - 1. 패키지 코드 변경하기 안녕하세요. 오늘은 최근 React native로 앱 개발을 하며 마주했던 이슈를 파헤쳤던 과정을 회고와 함께 말씀드리고자 합니다. 사실 정확히 말하면 이슈라고 할 수 없는 'IOS에..

안녕하세요 오늘은 미들웨어를 통해 유저의 URL 직접 접근을 막는 법을 소개해보고자 합니다. next 12.1.6 기준이며 현재는 12.2 이전과 이후로 쓰는 방법이 다르기 때문에 같이 포스팅하겠습니다. URL 직접접근이란? (Direct access url) 유저가 페이지에 접근할 때 URL에 직접적으로 접근하는 경우를 말합니다. 클라이언트 단에서 이런 직접 접근을 제어하는 일은 꼭 필요한데요. 예를 들어 로그인을 해야만 접근할 수 있는 마이페이지와 같은 경우 로그인하지 않은 유저가 직접 URL로 접근을 시도하면 header에 토큰을 넣어야 하는 API요청인데 없는 상태로 넣게 되어 이슈가 있는 페이지로 보이거나, 혹은 아예 그 페이지로 접근이 되어버리는 현상이 발생할 수 있게 됩니다. 보통 이런 경우..

Magazine Site 📖 Firebase 로 CRUD를 구현하고 2차에서는 백엔드에서 만든 API 를 받아와 CRUD를 구현 하였습니다. 4.15-4.18 => Firebase CRUD 구현 : Magazine Site with Firebase > 4.19-4.25 => Backend API 연결 - AXIOS, REDUX TOOLKIT Introduction 🙌 firebase service를 통해 구현했던 매거진 사이트를 백엔드에서 받아온 API로 붙여보는 시간을 가졌습니다. 이번 시간에는 axios와 Redux toolkit을 공부하여 적용시켰습니다. SKill 🛠️ React, Redux Toolkit Promise based HTTP client : Axios Storage Service :..

나만의 개발용어 사전 만들기 📖 여기를 클릭해 살펴보세요. github link Introduction 🙌 모르거나 기억하고싶은 개발 용어를 기록하는 저만의 개발 용어 사전을 만들었습니다. SKill 🛠️ Vite React Redux database : Firebase Storage Service : AWS S3 bucket 구현 기능 💻 사전 만들기 CRUD 즐겨찾기, 즐겨찾기페이지 카드 색상 랜덤 배치 Figma Design 🖌 개발자 협업툴인 Figma로 디자인을 먼저 한 후 작업 하였습니다. What I've Learned 📖 Vite로 진행한 리액트 프로젝트 CRA 보다 Vite의 실행속도가 현저히 빠르다하여 강의는 CRA 기반 이었지만 Vite로 진행해보았습니다. 비교가 안되는 빠른 속도에 ..

React를 공부하면서 Hook이나 State, Redux가 헷갈려서 정리하고자 간략하게 쓴다. 공부한 코드 기반으로 정말 일부분만 후다닥 쓴 거라 아마 나만 알아볼 것 같다...! 1. React.useRef() React Hook 리액트에서 돔요소를 가져올 때 쓸 수 있다. ex) input 에서 text를 가져오고 싶을 때 리액트 요소에서 가져올 수 있다. const id_ref = React.useRef(null); 가져올 요소에 넣는다. 1. React.useState() React Hook 아래를 예시로 들면, count에는 state값이, setCount에는 count이라는 state값을 수정하는 함수가 된다. 괄호 안은 상태의 초기 값을 나타낸다. setCount()라는 함수를 호출하여 s..