호박너구리 블로그

앱 개발에 있어서 가장 많이 사용되는 디자인 요소 중 하나가 바로 백드롭 (Backdrop), 바텀시트(Bottom Sheet) 입니다. 스크린 이동을 시키지 않고, 바로 뜨는 화면에서 쉽게 동작을 이끌어내거나 주의를 끌 수 있기 때문인데요. 오늘은 이러한 기능을 구현하기 위한 방법에 대해 알아보겠습니다. 들어가며: 백드롭(Backdrop)이란? 백드롭이란 (아래 그림과 같이) 기존의 스크린 위에 새로운 화면이 뜨는 방식의 UI를 뜻합니다. 인스타그램의 프로필 스크린에서 프로필 이름을 누르거나, 옵션을 누를 때 아래에서 올라오는 스크린을 말하는 것이죠. 아래에서 올라오는 화면이라는 의미로 바텀 시트라고 부르기도 합니다. 방법1: 라이브러리 활용하기 새로운 기능을 써야할 때 가장 편리한 방법은 라이브러리를..

개발 2022. 2. 5. 18:30

보통 앱 서비스를 사용할 때, 뒤로가기를 누르면 이전 페이지로 이동합니다. 처음 react native로 앱을 개발할 때, 디폴트로 제공하는 기능인 줄 알기도 했는데요. 사실 직접 설정해주셔야 합니다! 오늘은 한 번 리액트 네이티브에서 뒤로가기를 어떻게 처리할 수 있는지에 대해 다루어 보겠습니다. 기능: BackHandler 사용하기 사실 뒤로가기 기능 자체는 간단합니다. react-native에 내장되어 있는 BackHandler를 사용하면 되는데요. 뒤로가기를 구현하고 싶다면 스크린 컴포넌트에서 다음과 같이 작성하면 끝입니다! import { BackHandler } from 'react-native'; const handlePressBack = () => { if (navigation?.canGoB..

개발 2022. 2. 4. 18:30

웹 개발이나 React 개발만 하시던 분들이 앱을 개발하기 위해 React Native를 시작하는 경우가 많습니다. React와 문법이 비슷해서 쉽게 시작할 수 있지만, 또 가끔가다 웹 개발과 전혀 다른 부분을 마주치면 당황하기도 하는데요. 오늘은 당황 포인트 중에 하나인 그림자 스타일에 대해서 살펴보겠습니다. 들어가며: React Native의 자체 그림자 스타일 리액트 네이티브에서 그림자를 아예 설정하지 못하는 것은 아닙니다. 문제는 안드로이드와 iOS에서 적용하는 방법이 제각각이라는 것인데요. 그나마 iOS는 웹과 비슷하게 설정할 수 있는데, 안드로이드는 그러지 못합니다. import React from 'react' import { Platform, StyleSheet, View } from 'r..

개발 2022. 2. 3. 18:30

웹사이트 개발을 할 때 가장 많이 쓰이는 css position은 아마 absolute와 (absolute를 위한) relative 정도일 것입니다. 그리고 헤더 등의 고정 컴포넌트를 위해서 fixed position도 종종 사용되곤 하죠. 그런데 자주 안 쓰이는 position 값 중에서 sticky라는 것도 있습니다. sticky 포지션은 자주 쓰이지는 않지만, 필요할 때 매우 유용한 속성 중 하나입니다! 하지만 sticky 속성에 대해 잘 모르고 무작정 사용했다가는 sticky가 제대로 작동하지 않는 예상치 못한 이슈가 발생할 수도 있는데요. 과연 어떤 이유로 이러한 이슈가 발생하는 것일까요? 들어가며: sticky position 이란? sticky position은 컴포넌트가 최소한 특정 위치에..

개발 2022. 2. 2. 18:30

프론트엔드 개발을 하시는 분이라면 한 번쯤은 position: fixed를 사용해보셨을 것입니다. 헤더와 같이 고정적으로 따라다녀야 하는 화면을 개발할 때에 fixed가 매우 유용하게 쓰이곤 합니다. 그러나 fixed를 쓸 때 고려해야 하는 요소에 대해서는 많은 분들이 모르고 계신데요. 오늘은 fixed 속성이 깨지는 버그가 발생하는 원인과 해결책에 대해 다루어보겠습니다. 들어가며: position fixed 란? position: fixed는 스크롤에 관계 없이 브라우저의 특정 위치에 요소를 고정하기 위해 사용되는 속성입니다. 보통 헤더에서 많이 사용되며, 확인해보니 현재 이 티스토리 블로그의 헤더도 fixed로 되어있네요. 이슈: position fixed 를 설정했는데 적용되지 않는 버그 그런데 가..

개발 2022. 2. 1. 14:06

react query는 api 요청과 상태 관리 라이브러리로 최근 많이 선택받고 있습니다. graphql 진영에 apollo client가 있다면, rest 진영에 react-query 가 있는 느낌일까요? 여하튼 기본적으로 api 요청에 많이 사용되던 axios나 fetch와 달리 react-query는 강력한 캐싱 기능을 제공하고 있습니다. 이런 캐싱 기능 덕분에 클라이언트는 매번 동일한 api를 호출하지 않고도 빠른 응답을 받을 수 있게 되었죠. 이슈: 수정한 데이터가 반영이 안되었다? 그러나 axios나 fetch만 사용하셨던 분들은 react-query의 캐싱 기능에 대해서 당황해하실 수도 있습니다. 왜냐하면 캐싱 기능으로 인해 데이터가 업데이트되지 않는 상황이 생기기 때문인데요. 구체적으로 묘..

개발 2022. 1. 31. 18:00

앱 서비스에서 많이 사용되는 기능 중 하나는 바로 이미지 업로드입니다. 우리가 매일 사용하는 SNS나 메신저 서비스에서도 필수적인 기능 중 하나이죠. 오늘은 리액트 네이티브 (그 중에서 Expo)에서 이미지 업로드 기능을 사용하기 위한 방법에 대해 알아보겠습니다! 1. image picker 패키지 설치하기 이미지 업로드라고 하면, 핸드폰의 자체 기능을 사용하는 것이기에 어려울 것 같다는 느낌이 먼저 듭니다. 그러나 많이 사용하는 기능인 만큼, 패키지화가 잘 되어있었는데요. expo를 사용하시는 분들이라면 expo-image-picker를 설치하면 쉽게 사용하실 수 있습니다. npm install expo-image-picker 그리고 클릭에 사용될 빈 함수를 만들어 두겠습니다. import React ..

개발 2022. 1. 30. 21:31

보통 초심자가 백엔드 개발을 하는 과정을 보면, 두 부분에서 가장 어려움을 겪는 것 같습니다. 바로 회원가입/로그인, 그리고 이미지 업로드 기능인데요. 오늘은 AWS s3를 이용해서 이미지를 업로드하는 방법에 대해 살펴보겠습니다. 1. AWS S3 버킷 생성하기 서비스를 만들 때 얼마나 많은 이미지가 업로드 될 지 모릅니다. 그래서 우리는 보통 클라우드 서비스를 사용하는데요, 아마 개발자 분들이 가장 많이 사용하는 클라우드 서비스는 AWS일 것입니다. 그 중에서 S3는 비디오, 이미지 등의 파일을 저장해두는 기능을 제공하는 서비스이죠. (참고자료. 클라우드와 AWS의 기본 개념) AWS 계정을 생성하고 S3를 검색하면, 버킷이라는 페이지를 볼 수 있을 것입니다. 그곳에서 '버킷 만들기'를 눌러서 버킷을..

개발 2022. 1. 30. 20:28