Bleeding edge

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를 사용해도 이 문제가 생긴다. 이 문제가 발생하는 이유는 브라우저에서 스크롤 이벤트가 발생하는..

https://hongik-prsn.tistory.com/38 개발자 경력기술서 쓰는 방법 및 샘플 추천 REFERENCE 개발자 이력서 작성 방법 - 99콘 이력서 후기 | 아웃풋 트레이닝 개발자 이력서는 어떻게 써야 간결하고 일목요연하고 나의 부족함을 드러내지 않으며 서류통과 될 수 있을까요? 이상한 hongik-prsn.tistory.com

벌써 메셔에 들어온지 5달이 지났다. 첫 프로젝트를 마쳤을 때는 굳이 프로젝트에 대한 후기나 회고를 쓸 필요가 없는 것 같아서 노션에만 간단히 메모를 남겼었다. 하지만 두 번째 프로젝트가 끝났을 때 첫 번째 프로젝트가 끝났을 때 내가 부족했던 것과, 어떤 것을 더 개선할지를 메모하고 이전 프로젝트와는 다르게 잘한 것에 대해 메모할 필요가 있다고 생각했다. 첫 번째 프로젝트 Swalo 1. 개인적으로는 Nextjs가 익숙하지 않아서, Nextjs에서 지원하는 메서드들을 제대로 사용하지 못했었다고 생각한다. 2. 피그마대로 컴포넌트를 설계하다가 폴더관리에 실패했다. 3. DTO 변경이 생겼을 때 수정하는데 시간이 너무 오래 걸렸다. 2번은 리팩토링을 통하여 개선을 하였고 1번 같은 경우에는 처음는 부족했었지..

프론트와 백엔드가 원하는 것들이 완벽한 타이밍에 구현이 세팅된다면 이를 고민할 필요가 없겠지만, 개발은 항상 원하는 대로 진행되지 않는다. 지난번 프로젝트에서는 서버 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를 입력한다. ..