Bleeding edge

React Native와 웹뷰를 이용하여 어플리케이션을 만들다보니, 항상 QA를 많이 받는 것이 "앱처럼 만들어 주세요" 였다. 이번 주에는 앱처럼 "페이지가 없는 부분에서는 스크롤을 막아주세요" 라는 요청을 받았다. 해결 만일 x축 y축 모두 막고 싶다면 다음과 같이 사용하면 되지만, 나같은 경우에는 y만 막으면 ok이기 때문에 이 방법을 사용하였다. overscroll-behavior-y: none; 이 부분을 body와 해당하는 div에 추가적으로 적용하면 되지만, default가 되는 부분은 모두 막고 싶었기 때문에 *{ overscroll-behavior-y: none; } 모든 y에 대한 over scroll을 막아버렸다.

글을 쓴 이유 사실 이 코드를 작성하는 방법이 어렵다, 이런건 아니지만 보통 이 코드를 사용하는 순간은 너무나도 분노가 많을 때여서 붙여넣기 용으로 하나 작성한 코드이다. Object.keys(window).forEach(key => { if(/./.test(key)){ window.addEventListener(key.slice(2), event => { console.log(key, event) }) } }) 언제 사용하는게 좋은가 이전에 웹만 만들 때는 잘 몰랐었는데, React native로 웹뷰를 개발하면서 pc가 아닌 다른 기기에 대한 이벤트를 다루면서 어떤 이벤트가 어떤 순서 혹은 언제 발생하나를 보기 위해서 사용하게 되었다. (정확히는.. iOS에서 원하지 않는 순간에 alert가 발생했는..

문제점 이번에 React native와 Nextjs를 이용하여 앱을 만들고 있었다. 전역 상태로 window를 사용하는 함수가 있었고, SSR 에서 window 객체가 없는 순간에 에러가 나오기 때문에 빌드 에러가 발생한다. 에러 메세지 일반적인 window is not defined 해결 방법 처음부터 끝까지 내가 작성한 함수의 경우 window is not defined는 그 함수가 시작하는 지점 혹은, window 객체를 사용하는 지점에서 다음과 같이 return을 하면 문제가 없다. if(typeof window === 'undefined') return 하지만 이번에 문제를 일으킨 함수같은 경우 heic2any라는 라이브러리라서 import를 하는 순간 window is not defined가 ..

스마트폰이나 다른 여러 디바이스가 등장함에 따라서 다양한 aspect를 고려해야 했던 것 처럼, 새로운 모양의 device를 고려해야하는 케이스가 아이폰의 노치가 등장하면서 생겼다. 노치? 우선 아래의 사진을 보자. 처음에는 m.... 이런식으로 많이 표현되었던 모양이지만(개인적으로는 상단에 배터리나 다른 공간을 활용할 수 있기 때문에 꼭 나쁘다고 생각은 하지 않는다) 이건 디바이스인 생각이고, 프론트엔드로써나는 저 노치의 공간이 생겼을 때의 css를 고려할 수밖에 없었다.이전에 웹에서는 노치를 신경을 별로쓰지 않았던 것 같은데 주소창이 없는 웹뷰 react native에서는 이를 고려할 일들이 몇 번 생겼다. 1. 태그 설정 서론이 길었으니 우선 사전작업을 하는 방법을 이야기하면 우선 head태그 안에..

npx @react-native-community/cli doctor //react-native 빌드 에러시 원인을 쉽게 파악하기 좋게 만들어주는 cli //사용 방법 react-native doctor npm install -g ios-deploy //Required for installing your app on a physical device with the CLI 에러 해결 keytool -exportcert -alias androiddebugkey -keystore /android/app/src/main/AndroidManifest.xml -storepass android -keypass android | openssl sha1 -binary | openssl base64 //현재 레포 키 해시..

npx kill-port //port 제거 npx clear-npx-cache //npx 캐시 정리 npx get-ip //현재 ip 보기 npx create-convention // 프로젝트 초기 세팅 만들기 npx cleanup-local-branches// 주요 브랜치를 제외하고 일괄 정리 npx knip //프로젝트 의존성 관리 git config --global push.default simple git push --force-with-lease origin feature ssh-keygen -t ed25519 //ssh key gen

export PATH=/opt/homebrew/bin:$PATH export PATH=${PATH}:$JAVA_HOME/bin export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools eval "$(jenv init -)"

react-native에서 환경변수를 관리하는 라이브러리는 1. react-native-config 2. react-native 두 가지가 있습니다. react-native-config 같은 경우에는 초기 설정이 많이 있기 때문에, react-native-dotenv를 선택하였다. 1) install npm i react-native-config 혹은 yarn add react-native-config 2) babel config module.exports = { //... "presets": ["module:metro-react-native-babel-preset"], "plugins": [ ["module:react-native-dotenv", { "moduleName": "@env", "path":..

0) RN-Camera에 들어가기 전 고민... React Native로 카메라 앱을 만들기 위해서 크게 두 가지 View를 토이프로젝트에 넣기로 했다. 1. 카메라 앱 2. Image picker 기존에 사진을 가지고 있지 않은 경우 사진을 직접 촬용하기 위한 카메라뷰 사진을 가지고 있다면 이를 선택하기 위한 Image picker 뷰 React native에서는 카메라의 선택지가 react-native-camera(지금은 deprecate가 되어서 react-native-vision-camera)와 expork 가 있지만, react-native-camera의 오픈소스를 deprecate를 한 것을 보면 expo가 react-native보다 더 코드를 관리를 잘한다고 생각이 들어서 expo에 있는 카..