Overview 4월 회고를 쓰려고 보니 5월이 다 지나가 버렸다. 별 수 없이 4~5월 회고를 쓰기 위해 키워드를 정리하는데 생각보다 이것저것 배운 게 많은 것 같아서 회고할 타이밍을 굉장히 잘 잡았다는 생각이 들었다. 초당 수만 ~ 수십만 건의 대용량 트래픽이 발생하는 애플리케이션의 최전선에서 여러 버저닝을 관리하고 예측하기 어려운 에러들을 핸들링하는 기회가 모든 개발자들에게 찾아오는 건 아닐 것 같은데, 이런 경험을 쌓아나간 것 같아서 감사한 마음이 들었다. FrontEnd Service With Million Traffics 900만명 가까운 사용자가 접속하는 웹 프로젝트를 맡아 개발하는 데에는 참 많은 책임이 따른다는 걸 배웠다. 이전에는 TF에서 맡은 컴포넌트만 몇 개 만든 다음에 QA 돌려보..

Kent. C Dodds의 'One simple trick to optimize React re-renders'를 Reference 하였습니다. Overview React를 사용해서 Web Application을 만들 때, 퍼포먼스의 향상하기 위하여 여러 가지 렌더링 최적화 기법들을 시도합니다. 대표적인 방법이 React.Memo를 사용하여 불필요한 리렌더링을 방지하기, 상태(State)를 업데이트 하는 로직은 최대한 하위 컴포넌트로 내리기등이 있습니다. 이번 포스팅에서는 자주 사용되고, 또 자주 접할 수 있는 위 두 가지 최적화 방법 이외에도 JSX가 가지고 있는 특성을 사용해서 불필요한 리 렌더링을 방지하는 방법을 살펴보려고 합니다. JSX JSX는 Javascript의 확장 문법으로, React에서..

Overview 최근 2주동안 멤버쉽 구독 관련 개발을 계속 진행했다. 멤버쉽이라는 것이 웹페이지 하나, 혹은 서버 API하나 잘 만든다고 잘 돌아가는 것이 아니라 전체 플로우를 고려해야 하기 때문에 클라이언트(앱), 웹뷰, API 서버, 멤버쉽 서버, 결제서버 등의 전체 아키텍쳐를 이해하고, 전체 플로우차트를 같이 설계하고, 각각의 요소들에 있어서 역할과 책임을 명확히 분리하고 논의하는데 주로 시간을 사용했다. 웹뷰는 결제 랜딩 페이지 2개를 동시에 개발했다. 기획이 확정되지 않은 상태에서 개발을 진행했기 때문에 Nextjs를 사용해서 만들기는 했지만, 결국에는 사실상 Nextjs를 사용하는 것이 별로 의미가 없어보이는? Static HTML 형식으로 개발이 되었다. 웹 서버를 하나 두고 클라이언트의 ..

Overview iPhone X 등 notch가 있는 디바이스들에서 웹뷰의 Element를 Inspect 해야 할 일이 생겼었습니다. 최신 Chrome브라우저(포스팅 날짜 기준 Version 87.0.4280.88 (Official Build) (x86_64)) 에서 기본적으로 iPhoneX에 대한 디바이스 시뮬레이션을 제공하지만, notch 등 safe-area가 제공된 환경이 아닌, 스크린 크기만 맞춰진 환경을 제공하기 때문에 safe-area에 대한 테스트가 어렵다는 단점이 있습니다. 따라서 디바이스 환경을 재현할 수 있는 다른 환경이 필요하게 되었고, notch가 있는 iPhone12 mini에서 테스트할 수 있는 환경을 찾아보게 되었습니다. 물론 디바이스가 없는 경우 Xcode에서 제공하는 시뮬..

Overview 회사에서 새롭게 읽게 되는 여러 코드들을 통해, 그리고 코로나 19의 거리두기 강화로 인한 재택근무로 인해 접하게 되는 콘텐츠의 양과 질이 동시에 높아졌던 한 주였던 것 같다. 무엇보다 월간 750만 유저가 사용하는 글로벌 서비스(Qanda)를 프로덕션 하는 회사이니만큼, 그만큼의 트래픽을 감당하기 위한 여러 아키텍처들을 보고, 또 질문하면서 어깨너머로 다양한 코드들을 익힐 수 있어서 굉장히 좋은 경험을 했던 한 주였다. Nextjs Nextjs는 React JS에서 서버 사이드 렌더링(SSR)을 할 수 있도록 지원해주는 프레임워크이다. 사용해 본 결과, React JS에서 Next JS를 사용한다는 느낌보다는 Nextjs 프레임워크 내에서 React를 사용하는 느낌이 더 강했다. 공식 ..

Overview 새로 입사한 회사에서 사용하는 프레임워크 및 코드 관습들을 익히는데 주로 많은 시간을 사용했었던 한 주였다고 정리할 수 있을 것 같다. 기본적으로 React + Django를 사용해서 개발하는 스타일이지만, SPA 방식이 아닌 SSR (Server Side Rendering) 방식을 주로 사용하고 있었기 때문에 React에서 손쉽게 SSR을 지원해주는 Nextjs에 대해 공부하고 이것저것 정리하는 시간을 가졌다. 또한 상태관리 라이브러리로는 기존에 익숙했던 Redux가 아닌 Observable 기반의 Mobx를 사용하고 있었기 때문에 이에 대해서도 공식문서를 읽으며 간단한 튜토리얼을 진행했다. Nextjs & Mobx Nextjs는 리액트에서 Server Side Rendering에 필요..