호박너구리 블로그

웹 개발이나 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

* 아래 글은 뉴스레터 위클리 호박너구리에서 먼저 다루었습니다. 매주 유익한 경영/기업/산업 분석에 대한 글을 받아보고 싶다면 뉴스레터를 구독해 보세요:) 국내 이커머스 산업은 빠르게 변화하고 있습니다. 특히 2014년부터 로켓배송을 도입한 쿠팡은 변화를 주도하며 꾸준히 점유율을 늘려가고 있죠. 그러나 변화와 혁신의 쿠팡도 뚜렷한 성과를 내지 못하고 있는 분야가 있습니다. 바로 의류 카테고리인데요. 과연 패션 분야에서는 어떤 기업이 선전하고 있을까요? 오늘은 여러 패션 플랫폼 기업들과, 온라인 패션 산업의 대표적인 세 가지 흐름에 대해 알아보겠습니다. # 온라인 패션 플랫폼 현황 현재 모든 패션 업계의 전망이 밝은 것은 아닙니다. 코로나 바이러스는 오프라인 매장 중심의 기성 패션 분야에 많은 타격을 주었..

산업 분석 2022. 1. 14. 18:30

개발을 하다보면 가장 어려운 것 중에 하나가 바로 네이밍입니다. 어쩔 때에는 변수와 함수 이름을 고민하는 것이 개발 시간의 상당 부분을 차지하기도 하는데요. 이러한 네이밍에 대한 고민은 단순히 함수와 변수 이름에만 그치지 않습니다. API를 만들다 보면 한 부분에서 네이밍에 대한 고민을 추가적으로 하게 되는데요. 바로 api url 주소 구성/네이밍에 대한 고민입니다. REST 방식으로 api를 만들면 url 주소에 대해 고민하고, graphql 방식으로 만들면 쿼리나 뮤테이션 이름에 대해 결정해야 하는데요. 오늘은 REST API의 URL 컨벤션에 대해 다루어보겠습니다. 사실 네이밍에 정답은 없습니다. 그러나 고민하시는 분들의 결정에 도움이 될 수 있도록 스택오버플로우 질의응답, 개발 블로그, 유명한 ..

개발 2022. 1. 13. 23:13