Algoroot's space

안녕하세요. 오늘은 React native로 공통/커스텀 헤더를 관리하기 위한 리팩토링 과정을 공유하고자 합니다. React Native Header App에서의 헤더는 빨간 테두리 영역입니다. (* 시간, 와이파이 배터리상태가 있는 최상단 부분 역시 헤더에 속하며, 이 부분을 StatusBar라고 합니다. ) Web에서 Router와 비슷한 역할을 하는 React-native Navigator/stack 에서는 screenOptions이라는 property를 제공하는데 이 property는 header를 커스텀할 수 있는 다양한 옵션들을 제공합니다. … headerBackImage : 헤더 왼쪽 부분을 그려주는 영역으로 뒤로 가기 액션이 포함되어 있습니다. headerRight: 헤더 우측에 해당하는 ..

안녕하세요. 오늘은 리엑트 네이티브에서 앱 디바이스 설정 창을 여는 방법에 대해 소개하겠습니다. 해당 기능은 유저가 어플리케이션의 알림 상태를 동의하지 않았을 경우 해당 애플리케이션 설정 창에서 알림을 허용하는 액션이 필요할 때와 같은 경우에 사용할 수 있습니다. 설정 후 다시 앱에 돌아왔을 때 동의 유무에 따른 분기처리 방법도 같이 말씀드리고자 합니다. 앱 설정 창 열기 앱 설정을 여는 것은 기본적으로 Linking에서 openSetting이라는 메서드를 제공합니다. import { Linking } from 'react-native'; Linking.openSettings(); 저 같은 경우는 유저가 알림설정을 했는지 안 했는지에 따라서 스크린 분기 처리가 필요했는데요. 설정을 한 후 다시 앱에 돌아..

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

안녕하세요 이번에는 React-date-picker을 타입스크립트 + SCSS로 완전히 새로운 UI를 구현해본 경험을 소개하고자 합니다. 거의 전체를 SCSS와 조합하여 스타일링을 새로 한 것으로 모든 영역에서 커스텀하는 것이 필요한 분들께 도움이 많이 될 것이라고 확신합니다. ** 구체적인 스타일링은 삭제하였습니다. 궁금하신게 있다면 댓글 달아주세요 :) 좌측은 React date picker에서 제공하는 기본 UI이고 우측은 제공하는 기능들을 통해 직접 커스텀한 date picker입니다. 라이브러리에서 제공하는 Demo 사이트를 통해서 필요한 옵션들을 끌어와 사용하였습니다. React-date-picker 라이브러리에서는 커스텀을 위한 여러 props를 제공합니다. 제공해주는 Props에 맞게 컴포..

안녕하세요 너무 오랜만에 블로그에 찾아왔습니다. 공부하던 시절 개발 현직자 분들이 현업에서 일하며 글쓰기 쉽지 않다는 말이 이제서야 공감이 가네요.. 좀 더 부지런해져야 겠습니다. 오늘은 프로젝트에서 구현했던 부분인 슬라이더 라이브러리 Swiper를 소개해볼까 합니다. 개인프로젝트와 직접 업무에 뛰어들면서의 차이는 디자인과 같게 구현해야한다는 점이죠. 이러한 면에서 어느정도 커스텀이 유용한 라이브러리를 찾는 것도 중요하다는 생각이 드는데요, 처음에는 Slick이라는 라이브러리를 설치해 구현했다가 디자인대로 커스텀하는 것에서 불편함이 느껴져서 다시 찾아보았고, npm trends에서도 최근 1년 사용성도 더 많고 업데이트도 빠르며 데모(Demo)가 잘 나와있는 Swiper라는 라이브러리르 사용하게 되었습니..

프로젝트에서 구현해야 하는 기능 중 유저들의 목록을 Excel 파일로 다운로드하게 하는 기능이 있었다. 과정은 아래와 같았다. 1. Button '등록자 목록 다운로드' 생성 2. Confirm Modal 생성 3. '확인' 클릭시 등록자 목록 파일 자동 다운로드 (API 요청 후 file data 받기) 3-1. API 요청 후 response로 file data 받기 3-2. DOM Element a tag 생성 후 href에 가공된 URL 넣어서 link()시키기 4. 성공시 모달 창 닫기 2. Confirm modal에서 '확인' 클릭시 React-Query의 mutate 함수를 실행시켜 POST 요청을 하면 response data로 파일 값이 들어온다. HTTP 요청 메서드가 POST인 이유는..

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로 진행해보았습니다. 비교가 안되는 빠른 속도에 ..