TOAST UI

해피뉴이어!🙌 새해 복 많이 받으세요! 올해부터 매달 TOAST UI Monthly를 배포합니다. 한 달간 있었던 TOAST UI 업데이트와 FE개발랩의 활동을 한 눈에 확인할 수 있습니다. 궁금한 점이나 요청하고 싶은 기능이 있나요? 주저하지 말고 알려주세요. 문은 항상 열려있습니다! 그럼 시작해볼까요~?

2020년 새해가 밝았다. 올 한 해를 계획하기에 앞서, 작년 한 해를 되돌아보는 시간을 가지려고 한다. TOAST UI는 GA(Google Analytics)와 여러 통계 자료를 통해 사용자가 어떤 제품을 많이 사용하는지, 어떤 경로를 통해 브랜드 사이트로 접속하는지 등을 관심 있게 지켜보고 있다. 다양한 통계 수치를 살펴보면서 2019년에 TOAST UI가 얼마나 큰 활약을 했는지 확인해보자.

코드 스플리팅은 코드를 다양한 청크(chunk)로 나눌 수 있으며 필요에 따라 로드할 수 있다. 페이지 렌더링에 필요한 초기 응답 크기를 줄이는데 도움이 된다. 글에서는 Vue 프로젝트에서 적절한 예시를 통해 코드 스플리팅을 알아본다.

라이트하우스 버전 6에서는 새로운 지표인 Largest Contentful Paint (LCP)와 Total Blocking Time (TBT)가 First CPU Idle (FCI) and First Meaningful Paint (FMP)를 대체하고 있다. 5가지 지표의 각 가중치는 로드와 상호작용 측정의 다른 위상을 더 균형있게 맞추기 위해 조정될 것이다.

2019년 11월에 개최한 회사 컨퍼런스 NHN FORWARD에서 프런트엔드에 대한 고민이나 궁금증을 해결할 수 있는 프런트엔드 상담소 를 운영했었다. 다양한 고민이 있었지만, 연차나 직책별로 궁금증과 고민거리들이 비슷하다는 것을 알 수 있었다. 명확하게 묘수를 알려줄 수 있는 트러블 슈팅부터 프런트 엔드 개발자가 가야할 방향까지 다양한 고민이 있었다.

얼마 전 상태 관리를 위해 MobX를 사용하여 React 앱을 개발했다. 때론 흥미롭기도 하고 가끔은 혼란스럽기도 했지만, 바로 글을 쓰고 싶을 만큼 즐거운 경험이었다. MobX 개발에서 가장 흥미로웠던 점은 클래스의 속성을 작성하기 위해 데코레이터를 사용했다는 것이다. 실제로 사용해보지 못했을때는 깨닫지 못했지만, MobX개발에서 몇 번 작성해본 후에는 데코레이터가 엄청난 잠재력을 가진 기능이라고 생각하게 되었다.

오늘은 고전 게임인 테트리스로 게임 개발 여행을 해보려고 한다. 그래픽, 게임 루프 및 충돌 감지 등을 다루고, 마지막에는 점수와 난이도가 완벽하게 작동하는 게임을 갖게 될 것이다.

자바스크립트 코드 베이스가 다소 복잡하더라도, 배포(production) 모드와 개발(development) 모드의 코드를 다르게 번들링하고 실행할 수 있다. 배포 모드와 개발 모드의 코드를 다르게 번들링하고 실행시키는 것은 매우 강력한 기능이다. React의 개발 모드는 버그로 이어질만한 많은 부분을 미리 경고해주는 검증 코드가 포함되어 있다. 하지만, 이런 코드는 번들 크기를 증가시키고 앱 속도를 느리게 할 수 있다.

TOAST UI Grid는 자체적인 반응형 시스템을 구축하여 데이터의 상태 관리를 하고 있다. 데이터가 변경되면 반응형 시스템이 변경을 감지하고 있는 다른 데이터 속성들도 자동으로 갱신해주기 때문에 데이터의 변경 관리를 편리하게 할 수 있었고, 간결하면서도 선언적인 코드를 사용할 수 있어 불필요한 코드도 줄일 수 있었다. 하지만 대용량 데이터를 반응형 데이터로 변경할 때 치명적인 성능 문제가 있었고, 그리드의 초기 렌더링 속도 저하를 유발했다

이 글을 읽고 있을 개발자라면 적어도 한 번쯤 API 문서를 작성해 본 경험이 있으리라 생각한다. "오전까지 100개 함수에 대한 API 문서를 만들어주세요."라는 업무가 주어졌다고 가정해보자. 이때 어떤 그림이 그려지는가?