지선생 코딩딩 지선생 코딩딩

퇴사 후 참여해서 쭉 만들고 있던 소개팅 앱이 어느새 런칭 한 달차에 접어들었다 5월 초부터 서비스를 운영하며 예상보다 훨씬 좋은 반응을 얻고 있다.가입자 대비 결제 전환율이 60%에 달할 정도로, 초기 유저들의 반응이 매우 긍정적이었다.숫자가 잘나와서 좋은것도 있지만, 유저가 많으니 로그를 수집하고, 에러를 모니터링하고, QA에서도 못 잡은 버그를 찾아내며 앱을 정제해 나가는 과정이 재미있었다모니터링 도구에 내가 수정한 코드가 실제로 유저 행동에 영향을 준다는 게 느껴지니까 내가 만든다는 느낌이 확 왔다 이번에 런칭하면서 생각보다 재밌는 경험들을 꽤 많이 해봤다. 제일 귀하고 힘들었던 경험은 앱스토어 심사 과정 인거 같은데소개팅 앱이라는 특성 때문인지 심사 기준이 상당히 빡빡했다.총 13번의 리젝이 ..

Microsoft의 App Center 종료 공지와 함께 CodePush도 서비스를 종료했다React Native로 빌드된 프로젝트를 운영 중이던 나에게는 꽤 난감한 상황이었는데코드푸시가 없으면 모든 앱 업데이트를 스토어에게 심사를 받아야 하고, 간단한 업데이트도 스토어에 다시 들어가 업데이트 버튼을 눌러야 하기 때문에 반드시 필요했다 대안탐색대안을 찾아보면서 자연스럽게 CodePush 구조와 OTA 업데이트 방식에 대해 더 공부하게 되었다CodePush처럼 네트워크(와이파이, 셀룰러 데이터)를 통해 사용자의 기기에 직접 업데이트를 배포하는 방식은 OTA(Over-The-Air) 업데이트라고 불린다고 한다 아무튼보통 많이 쓰는 대안은 두 가지였는데 첫 번째는 오픈소스로 풀린 CodePush-Standal..

대단한 기능은 아니지만 새로운 기능과 JS 메서드, Safari 이슈를 알게 되어 공유겸 메모겸 블로그 글로 작성하게 되었다.요구사항 시나리오1. 유저가 우리 서비스에 동영상을 업로드 한다2. 업로드한 동영상을 s3 서버에 저장한다3. 업로드한 동영상에서 썸네일을 추출하여 이미지로 렌더링한다4. 유저는 본인이 올린 영상의 썸네일을 보게된다 과정먼저 검색을 통해 썸네일을 어떻게 추출할지 조사했다.가장 도움이 된 글은 이것이다 자바스크립트 Canvas를 활용해 동영상에서 이미지 추출해서 저장하기라인은 동영상 url과 프리뷰 url을 같이 전송해야합니다. 그런데, 세일즈포스에서는 동영상 저장시 프리뷰 이미지를 제공해주지 않습니다. 고로 동영상에서 이미지 썸네일을 추출해서 저장해줘claver-pickle.tis..

최근 웹뷰 개발을 하며 페이지 이동 시에 답답하다는 느낌을 받았다이는 브라우저 로딩 시간과 네트워크 지연 때문인데, 이 문제를 해결하기 위한 고민과 실행 과정을 공유하고자 한다 웹뷰 구조상 브라우저 로딩자체를 단축하는것은 기술적으로 어렵고간단하게 기다리는 시간을 지루하지 않게 하면 된다는 결론에 도달했다그리고 스켈레톤 UI를 도입하는 방법을 검토하기 시작했다 처음엔 가볍게 isLoading이나 Suspense에 스켈레톤을 넣으면 간단하겠군. 하는 생각으로 시작 사전 조사1. 스켈레톤의 과다한 노출은 ❌매번 스켈레톤 이미지가 노출되는것은 오히려 덜그럭 거리는 느낌을 준다화면을 키고 100ms~200ms 사이에는 노출하지 않는다는 분석 결과를 찾아냈다 2. Layout shift를 조심해라1번에서 스켈레톤을..

디자이너분들과 오랫동안 겪었던 이슈인데 이번에 해결했고 공유하면 좋을 거 같아 적어본다 문제우리 회사에서는 지속적으로 있었던 문제가 있었다.A : "B 님 피그마랑 웹이랑 마진이 안맞아요"B : "수치상으로는 정확히 맞는데 보기에는 안맞나요?"A : "피그마 미러로 캡처해서 보면 1~2px씩 어긋나 있어요"위 대화가 반복되었다. 분명 문제가 있다는 걸 알고 있었지만, 개발해야 할 부분은 여전히 많고, 데드라인은 점점 다가오고 있었다.그렇다고 당장 해결할 수도 없었고, 결국 알면서도 문제를 안고 가야 하는 상황이 괴로웠다.일단 수치를 믿지 말고 그냥 눈으로 보기에 똑같이 맞추어야 되나? 생각까지 해봤다 그러다 회사의 큰 프로젝트가 어느 정도 마무리된 후, 본격적으로 이슈를 제기했다. 다행히 디자이너분도 같..

들어가며 백엔드와 협업을 할 때 API 명세를 보며 해당 API의 주소, Method ,Request, Response 등의 타입을 정의하는 것과 API 스펙이 변경되었을 때 다시 문서를 확인하고 위의 행동을 반복하는 것은 귀찮고 시간이 많이 소요된다 우리 회사에서 어떻게 위의 일을 처리하고 있는지, OpenAPI TypeGenerator가 어떤 도움을 주고 있는지 살펴보려고 한다. OpenAPI TypeGenerator가 어떤 문제를 해결할 수 있을까? OpenAPI Typegenerator은 OpenApi specification을 기반으로 여러 가지 데이터 형식을 자동으로 생성할 수 있는 라이브러리이다. OpenAPI Typegenerator로한번 잘 구축해 두면 타입스크립트를 사용할 때 어쩔 수 ..

들어가며 오랜만에 블로그 작성을 하는 거 같은데 최근에 회사를 다니게 되었고 오늘이 딱 3개월 차가 되었다. 나는 대학교 3학년을 다니며 취준을 시작하게 되었고, 약 1년의 준비 끝에 파이퍼블릭이라는 스타트업에 다니게 되었다 취준을 하면서 느낀점과 회사를 다니면서 느낀 점에 대해 후기를 남겨보려 한다. 쉽지 않은 취업 처음에는 자신이 있었다. 신입 중에선 나름 스펙을 쌓은 편이라고 생각했고 구현능력도 스스로 좋다고 생각했다 그리고 22년도 초쯤에 같이 공부하던 사람들이 좋은 회사에 가는 모습을 보면서 자만했었던 거 같다. 과제테스트는 대부분 통과하긴 했지만 일단 서류에서 걸러지는 경우가 많았다. 그리고 면접을 잘 보아야 하는데 초반에 긴장하고 떠는 모습을 보였던 거 같다. 이제와 생각해 보면 덜덜 떨면서..

next 13이 나오고 많은 기능이 새로 나왔다. 1. app Directory 업데이트 소식, 2. 터보팩 3. 새로운 next/image 4. 새로운 @next.font 5. next/link 없이 가능하게 변경 그중 app Directory를 사용할 때 몇가지 차이점은 1. layout : layout 구조를 사용하여 경로간 ui를 공유하고 재렌더링을 피할수있다. 2. server components : react 18에서 지원하는 서버 컴포넌트를 기본값으로 만든다. 3. streaming : 데이터를 필요로 하지 않는 페이지는 바로 렌더링하고 데이터를 불러오는 페이지는 로딩 상태로 표시 할 수 있는 기능 4. Data Fetching : react에서 fetch를 확장시켜 적용하였는데 cache ..