TmaxRG
1.사용자 경험 향상하기: Layout Shift의 최소화
사내 프로젝트를 진행하면서 사용자 경험을 향상하기 위해 layout shift를 최소화한 경험을 소개하려합니다. Layout Shift란? Layout Shift는 사용자가 페이지를 보는 동안 발생하는 예기치 않은 레이아웃 변경을 의미합니다. 주로 이미지, 광고
2.Module Federation의 도입기: 관리자 미리보기 구현
최근, 학습 관리 솔루션의 백오피스 개발 중에, 사용자 애플리케이션의 배너 이미지를 변경할 수 있는 기능을 구현하게 되었습니다. 이 기능의 핵심 요구사항은 다음과 같습니다:배너 이미지 업로드와 실시간 미리보기: 사용자가 배너 이미지를 업로드하면, 적용된 홈 화면을 미리
3.PWA InApp 설치 버튼 만들기
0. PWA란 무엇인가? PWA(Progressive Web App)는 웹과 네이티브 앱의 이점을 갖도록 개발된 웹 앱입니다. 사용자에게 네이티브 앱과 유사한 경험을 제공하며, 앱을 다시 다운로드/업데이트할 필요 없이 사용할 수 있습니다. 1. React InApp
4.K8S 인프라 기반 CI/CD 구축기
서론 사내 프로젝트의 프론트엔드 개발과 함께 배포 관리를 맡게 되었습니다. 시스템 특성상 두 곳의 폐쇄망을 사용하는 특수한 상황이었기에 효율적인 CI/CD 구축이 필요했습니다. 사내망 코드저장소(Gitlab) 저희 팀의 코드 저장소는 회사 사내망에서 운용되고 있었습니
5.가상 스크롤링(Virtual Scrolling) 을 활용한 렌더링 성능 최적화
문제 파악 현재 진행중인 프로젝트에 서버에서 받은 리스트 데이터를 화면에 렌더링하고 각 아이템을 클릭하면 메인 콘텐츠를 업데이틑 하는 페이지가 있습니다. 하지만 아이템을 클릭하고 화면의 변경이 지나치게 오래 걸리는 것을 발견하였습니다. 원인 기존의 코드는 리스트 데
6.ARIA 적용하여 웹 접근성 향상하기
0. 서론 웹 접근성이란 장애를 가진 사용자들을 포함해 모든 사용자가 웹 콘텐츠에 동등하게 접근하고 이용할 수 있도록 웹을 설계 및 개발하는 것을 의미합니다. 현재 교육 분야에서 프론트엔드 개발을 담당하고 있는 만큼, 웹 접근성은 모든 사용자에게 정보를 공평하게 제공하
7.디자인 패턴 적용하여 전역 토스트 구현: Observer + Singleton
토스트(Toast)는 팝업의 일종으로, 이름처럼 토스터기에서 빵이 튀어나오는 것과 비슷한 형태의 UI 요소입니다. 이번 프로젝트에서 서버 오류가 발생했을 때, 서버의 오류를 매번 확인하는 것이 번거로워 직접 토스트 UI를 구현하려 했습니다.이전에 만들어진 토스트 컴포넌
8.MobX에서 MobX-State-Tree로 전역 상태 관리 마이그레이션
취업 전에는 전역 상태 관리를 단순히 props drilling을 피하기 위한 도구로만 여겼다. Redux와 같은 보일러플레이트가 장황하고, 엄격한 상태 관리는 불필요하다고 느꼈기 때문에, Recoil과 같이 편하게 사용할 수 있는 상태 관리 라이브러리를 선호했다.
9.프론트엔드 테스트 도입기
1. 서론: 테스트코드의 필요성 개인적으로 프론트엔드에서 테스트 코드 작성에 회의적이었다. "테스트 코드 작성할 시간에 빠르게 구현하고 직접 확인하는 것이 더 효율적이지 않나?"라고 생각했다. 하지만 올해 초, 여러 인원이 참여하는 대규모 프로젝트를 진행하면서 아래와 같은 문제가 빈번하게 발생했다 수정한 버그의 재발 새로운 코드로 인한 기존 코드의 고장 ...
10.번들 최적화를 통해 성능 개선하기
1. 서론 리액트와 같은 SPA(Single Page Application) 프로젝트는 빌드 과정에서 하나의 JS 파일로 번들링됩니다. 그러나 하나의 파일로 번들링된 결과물을 배포하게 되면, 웹 애플리케이션은 초기 로딩 시 모든 페이지에 대한 정보를 한 번에 불러오게