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

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

디자이너분들과 오랫동안 겪었던 이슈인데 이번에 해결했고 공유하면 좋을 거 같아 적어본다 문제 우리 회사에서는 지속적으로 있었던 문제가 있었다. A : "B 님 피그마랑 웹이랑 마진이 안맞아요" B : "수치상으로는 정확히 맞는데 보기에는 안맞나요?" A : "피그마 미러로 캡처해서 보면 1~2px씩 어긋나 있어요" 위 대화가 반복되었다. 처음에는 내 구현 방법이 잘못되었나 하고 자책도 많이 했었다 확실히 문제는 있는데 개발은 많이 남아있고, 데드라인은 다가오고 있고 수치상으로 믿지 말고 눈으로 보기에 똑같이 맞추어야 되나? 생각도 들었다 회사의 큰일이 어느 정도 마무리 되고, 이슈 레이즈를 하였다. 다행히 디자이너분도 문제가 있다고 생각을 하고 있었고 스터디를 진행했다 결론부터 말하자면 line heig..

들어가며 백엔드와 협업을 할 때 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 ..

고민상담 A or B 프로젝트를 진행하고 있는데 동영상을 내리는 숏폼은 아니고, 숏폼의 형식만 빌려와서 투표들이 하나씩 올라오면서 투표를 간단하게 할 수 있는 기능을 구현 중이다. 기획상 스크롤을 움직이는 게 아니라 메모장을 넘기듯 애니메이션을 보여준뒤 다음 투표용지를 보여줘야 해서 렌더링 할 때 이전 데이터에서 하나씩 덮어쓰면서 해야 할 거 같아 어떻게 구현할지 고민이 많이 된다. 생각해 본 바로는 1. useQuery로 id값을 바꾸면서 하나씩 데이터를 덮어쓰기 이건 구현까지 했엇는데 하다 보니투표의 id값이 1부터 100 순차적으로 있는 게 아니라 삭제하면 중간이 비는 경우가 있어 id값에 1씩 더해서 불러오게 되면 에러가 발생하고, 그렇다고 다음 id를 예측할 수도 없어 실패했다. 2. 캐러셀 세..

오늘 5시간 동안 에러와 싸웠다. 모노 레포에 관련된 글을 쓰면서 직접 빌드해보기 위해 블로그를 참고하며 빌드를 해봤다. 그런데 typescript sdk 설정에서 아무리 똑같이 따라 해도, 다른 블로그를 참고해봐도 도저히 넘어가지지 않았다. yarn을 berry 버전으로 업데이트 해준후 yarn init -w로 workspace 설정을 해주었다. 그리고 모노레포 세팅을 해준 다음 내부 패키지(프로젝트)에서 nextjs를 빌드해주었는데 전체가 다 빨간색 에러가 떠버렸다. 이러한 에러는 yarn berry와 npm가 모듈을 불러오는 방식이 다르기 때문에 생기는 문제라고 하며 원래 발생해야 하는 에러였고 에러를 해결할 방법도 알고 있었다. 이를 해결하기 위해선 yarn add -D typescript pre..

FE컨퍼런스, 기업 우대사항 등을 보면 모노 레포가 굉장히 핫하다는 걸 알 수 있다. 어떤 장점이 있고 어떻게 빌드해야하는지 알아봐야겠다. 모노 레포란? monolithic + repository 단단히 하나로 되어있는 저장소이다. 서비스가 5개 이상, 프론트엔드가 10명 이상인 기업에서 사용하면 좋다. 멀티레포 - 각각의 프로젝트를 각 저장소 별로 따로따로 관리함 - 강한 오너쉽, 코드베이스 분리로 conflict 위험이 적음 - 레포지의 크기가 작아 동작하는 도구의 속도가 빠르다. 단점으로 코드의 재사용이 쉽지않아 중복코드가 많이 생길수밖에 없다. 하나의 개발에 여러 레포지에 pr을 보내야한다, 버전 연동이 어렵다 안정적이지만 이 때문에 업데이트 부분에서 힘든 부분이 있는거 같다. 모놀리식 애플리케이..