여울코딩
-
Suspense Deep Dive (Code Implementation)Frontend 2023. 3. 26. 09:38
Overview 이전 포스팅 Conceptual Model of React Suspense과, Algebraic Effects of React Suspense에서 React가 Suspense를 어떤 관점으로 바라보고 있는지, 그리고 어떤 개념적 모델을 바탕으로 구성되어 있는지를 살펴보았습니다. 이번 포스팅에서는 이러한 내용들을 바탕으로 Suspense가 실제로 React 소스 코드 레벨에서 어떻게 구현되어 있고, 구체적으로 어떤 과정을 거쳐 동작하게 되는지를 간략하게 살펴보도록 하겠습니다. (소스 코드는 글을 작성하는 시점의 최신 코드를 기반으로 하지만, React 프로젝트는 코드가 굉장히 자주 바뀌는 편이기 때문에 변경사항이 생길 수 있습니다.) Recap Example Code 이전 포스팅에서 언급한..
-
React Mount System Deep Dive (Sync Mode)Frontend 2023. 1. 8. 15:29
Overview 이전 글들 (Conceptual Model of React Suspense, Algebraic Effects of React Suspense, Suspense SSR Architecture in React 18)에 이어 Suspense의 동작 원리에 대해 Source Code Level에서 다루는 포스팅을 준비하고 있었습니다. 하지만 막상 Code Level에서 이를 분석하려고 하니 너무나 방대한 React의 개념들과 용어들(Fiber, Scheduler, Task, Lane, performUnitOfWork, Double Buffering)을 능숙하게 이해하고 있음을 전제하여야 했고, 이 모든 내용을 하나의 포스팅에 담기는 어려울 것 같다는 결론을 내렸습니다. 따라서 React18에서 ..
-
개발일지 (11월 & 12월 회고)Developer History 2022. 12. 18. 10:58
After Class 중간고사 / 기말고사가 끝나고, 이렇게 복무 만료 이후의 첫 학기가 잘 마무리되었다. 아직 성적은 나오지 않았지만, 던진 과목은 없어서 계속해서 장학금을 받지 않을까 생각이 된다. 굉장히 고된 3달 반여를 보낸 것 같지만, 남은 두 학기도 우선은 계속 이렇게 진행할 수 있을 것 같다. 학기 내내 들었던 생각은 나의 "앎"에 대한 기준, 그러니까 무언가를 "이해했다"라고 생각하는 기준이 동기들에 비해 그렇게 높지 않다는 것이었다. 어쩌면 이 사실을 깊게 깨달은 것이 이번학기의 가장 큰 소득일 수도 있겠다. 생각해보면 늘 내가 생각하는 무언가를 "이해했다"고 생각하는 기준은 완벽에 가깝진 않았던 것 같다. 전반적으로 꼼꼼함이 부족하다고 해야 하나, 동시에 많은 일들을 하는 것을 즐기지만..
-
[Essay] After LikeEconomics 2022. 11. 27. 09:41
. 특정 시점 이후로 시장은 어느 정도의 소강상태를 보이는 듯하다. 110을 넘어서 120을 바라보던 달러 인덱스도 고점을 찍고 105 수준으로 내려왔고, 3600선에서 움직이고 여러 전문가들이 연말에 3400선까지 내려갈 것으로 예측했던 S&P 지수는 다시 4000을 회복하고 그 선에서 움직이고 있다. 이것이 산타 랠리 일지, 베어마켓 랠리 일지는 확실하지 않지만 이러나저러나 지금의 국면을 일종의 휴전 상태로 해석하는 것이 큰 무리는 아닌 것 같다. CPI를 통해 확인한 미국의 인플레이션도 9.1%에서 7.7%로 내려오면서 정점을 찍었다는 사실이 확인되었고 여러 상황들이 "그래도 괜찮은데?"로 해석될 여지들이 있지만, 조금 생각해봤을 때 지수에 비해 상황이 그렇게 긍정적으로 보이지는 않는다. . 11월..
-
Conceptual Model of React SuspenseFrontend 2022. 9. 12. 18:23
Overview React v18의 정식 릴리즈가 나오면서 Automatic Batching, Transition등 여러 Feature들이 소개되었습니다. 그중에는 React v16.6에 Experimental Feature로 등장했다가 이번에 정식으로 탑재된 "Suspense"에 대한 내용도 추가되어 있는데, 이번 포스팅에서는 특별히 이 Suspense라는 기능에 대해서 살펴보려고 합니다. What is Suspense? Suspense lets your components “wait” for something before they can render. In this example, two components wait for an asynchronous API call to fetch some data..
-
개발일지 (3월 회고)Developer History 2021. 3. 29. 21:01
Membership 출시 1월부터 시작했던 프리미엄 멤버쉽 출시가 (드디어) 3월 초에 배포가 되었고, 어느 정도의 안정화 작업을 거쳐서 실 결제하는 사용자들이 하나 둘씩 생기게 되었다. 사내에서도 처음으로 구독결제 서비스를 출시하는 것이었기 때문에 기술적으로 여러 가지 고려해야 할 것들이 많아서 팀원들이 정말 고생을 많이 했구나 하는 생각이 들었다. 웹쪽에서는 사실 클라이언트와의 브릿지 연결 & 데이터 로깅등을 통한 일종의 매개 역할을 해주어야 하는 일들이 많아서 직접적으로 구독/해제 모델에 대한 기능 구현쪽과는 복잡하게 묶여있지는 않았지만, '웹뷰' 환경이기 때문에 고려해야 하는 여러 기술적인 과제들이 있었다. 클라이언트 웹뷰는 Operating System자체가 기존 데스크탑 브라우저에서 열리는 환..
-
개발일지 (11월 3주차 회고)Developer History 2020. 11. 20. 21:33
Feedback 디자인 시안은 정말 중요하다. 웹 개발자가, 특히 작은 규모의 프로젝트에서 일하는 웹 프론트엔드 개발자가 빠지기 쉬운 함정 중의 하나는(내가 빠져서 그런가), 디자인 시안에 맞추어 개발하지 않고, 자신의 개발 편의에 맞춰 시안을 조금씩 조금씩 자기 입맛에 맞게 수정하려는 태도인 것 같다. 디자인 시안 (이번 같은 경우는 Zeplin)에 명시된 margin, color, font 등을 엄격하게 준수하고, 애매한 점이 있으면 (시안에 나오지 않는 애니메이션 효과 등) 해당 사항에 대해서 적극적으로 디자인 팀과 소통하여 의사결정을 하는 단계가 필요하다. 유들 있는 Validation. 프론트엔드를 개발한다고 하면 거의 대부분의 프로젝트에서 빠지지 않는 것이 Form Control이다. 사용자의..