Bleeding edge

문제점 이번에 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가 ..

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에 있는 카..

https://dpectrum.app/blog/114 https://flygoeun.tistory.com/15

https://reactnative.dev/docs/typescript

제목이 다른 사람에게도 이해가 될지 모르겠지만.. 1. 모바일 환경에서(chrome의 개발자도구에서는 안보인다.) 2. 주소창이 있다가 없어지는 경우(계속 보이는 경우나 계속 안보이는 경우에는 문제가 안생긴다.) 2번의 케이스는 touch event를 진행중일 때 발생한다. 이 viewport height에 변화가 생기는 이유는 모바일의 경우에 처음에는 주소창이 보이다가 스크롤을 움직이는 경우에는 주소창이 사라지면서 view port에 변화가 오기 때문이다. css에서는 이를 계산하는 dvh라는 것도 존재한다. 안드로이드에서는 사실 이 글을 쓰지 않아도 될 정도로 간단하게 해결되는데, 문제는 사파리에서는 dvh를 사용해도 이 문제가 생긴다. 이 문제가 발생하는 이유는 브라우저에서 스크롤 이벤트가 발생하는..

프론트와 백엔드가 원하는 것들이 완벽한 타이밍에 구현이 세팅된다면 이를 고민할 필요가 없겠지만, 개발은 항상 원하는 대로 진행되지 않는다. 지난번 프로젝트에서는 서버 dto가 변경되는 경우를 고려하지 않고 구현을 하여서, 서버 dto가 변경되는 경우에 많은 비용을 사용하였던 경험이 있었다. 이번에는 이 경험을 살려서 dto를 좀 더 flexible하게 코드를 짰기 때문에 dto 변경은 부드럽게 대응하였다. 하지만 특정 페이지의 정보를 서버에서 받아올 때 서버에서 구현이 안된 경우에 개발이 살짝 지연되었던 것이 아쉬웠었다. 아무래도 그 기간이 서버팀이 많이 바쁜기간이라 그랬던 것도 있었지만, 내가 api mocking을 쉽게 하였다면 좋았을 것 같다고 생각해서 axios로 간이 api mocking을 만드..

1. 사용할 배열을 선언한다. const promiseStringArray = ["string1", "string2", "string3"]; 2. 순차적으로 실행하기 위해서 reduce를 사용한다. 시작(initial Value)은 Promise.resolve()으로 시작한다 promiseStringArray.reduce(async(prev, current)=>{ }, Promise.resolve()); 3. accumulator에 체이닝 준비한다. const previousPromise = await prev.then(); 4. 비동기를 실행한다.(예시함수 이름을 func로 사용하였다) await func(current); 5. Promise로 체이닝을 건다. return Promise.resolve(..

분리가 필요했던 이유 package.json에 script와 process.env.NODE_ENV를 이용하여 production이나 development를 구분하는 방법도 있지만, vercel에서 배포를 하는 환경에서는 환경변수를 변경하여 사용하는 것이 편리하다고 생각하였고, 이번 프로젝트는 특히 서버에서 실행하는 알고리즘이 변경되는 일이 종종 있어서, production과 development는 그대로 유지하면서 local에서만 다른 알고리즘을 테스트 해보는 상황이 있었기 때문에 더욱 필요했다. Vercel 1. 수정하고 싶은 Project에 들어가서 Setting에 들어간다. 2. Environment Variables로 이동한다 3. process.env에서 사용할 Key와 Value를 입력한다. ..