📖 들어가며이번 글에서는 프론트엔드에서 성능 최적화를 하기 위해서는 어떤 방법이 있는지 살펴보겠습니다.코드 예시는 React 코드 기반으로 보여드리지만, VanilaJS, 다른 프레임워크에서도 활용할 수 있는 기법들입니다.해당 글에서는 각 방법에 대해서 동작원리와 같은 이론적인 부분에 대해서는 깊게 설명하지 않습니다!크게 어떤 방법들이 있는지, 어떤 개념인지, 어떻게 하는 건지, 그래서 어떤 이점이 있는지 이 총 4가지에 집중하여 설명합니다.그래서 처음 알게된 방법에 대해서는 "이런 것도 있구나! 바로 한번 적용해볼까?"라는 생각이 들었으면 좋겠어요.🤣최적화를 진행하기 전에는 브라우저 개발자 도구 > 성능 탭 또는 네트워크 탭, Lighthouse, React-Dev-Tools와 같은 성능 측정을 통..

📖 들어가며웹 애플리케이션이 커질수록 번들 크기도 함께 커지게 됩니다. 이는 초기 로딩 시간에 직접적인 영향을 미치죠.Vite에서 제공하는 Code Splitting 기능을 활용하면 이 문제를 효과적으로 해결할 수 있습니다. 해당 글에서는 manualChunks에 대해서만 다룹니다.왜 Code Splitting이 필요할까?웹 애플리케이션을 빌드하면 모든 Javascript 코드가 하나의 큰 파일로 번들링 됩니다.하지만 이 상황은 아래 문제들을 일으킬 수 있습니다.긴 초기 로딩 시간: 사용자가 첫 페이지를 보기 전에 모든 코드를 다운로드해야 합니다.불필요한 리소스 낭비: 당장 필요하지 않은 코드도 함께 불러옵니다.비효율적인 캐싱: 작은 코드 변경에도 전체 번들을 다시 다운로드해야 합니다.메모리 사용량 증..

✨ WebRTC란 뭘까?실시간 통신에 있어 아주 재밌는 기술이 있습니다. 바로 webRTC(Web Real-Time Communication)인데요. 2011년, Google의 개발자들에 의해서 탄생한 기술입니다.WebRTC를 사용하는 유명한 서비스들 중 Google Meet, Discord, Zoom 등 존재합니다. 쉽게 말해서 "다양한 플랫폼에서 가능한 실시간 커뮤니케이션 기술"이라고 생각하시면 됩니다.화상 채팅, 음성 통화, 파일 공유 등등 이 모든 걸 별도의 프로그램 없이 웹 브라우저는 물론이고, 모바일 앱, 데스크탑 앱에서도 사용할 수 있는 오픈소스 프로젝트이며 강력한 기술입니다. 더욱 신기한 점은 서버 없이 P2P(Peer To Peer)로 연결되어 데이터를 주고받을 수 있다는 점입니다.(P2..

📖  들어가며최근 회사에서 담당하는 서비스에 대해서 CRA에서 Vite로 마이그레이션을 하면서 약간의 코드 개선까지 진행을 하는 경험을 갖게 되었습니다. 프로젝트 규모가 작은 편이 아니었기 때문에 마이그레이션을 하면서 webpack에 의존하고 있는 등의 사이드이펙트가 발생하는 부분에서 제일 걱정을 많이 했는데요. 이번 글에서는 크게 왜 마이그레이션을 진행했는지, CRA와 Vite는 어떤 차이가 있는지 어떻게 진행했는지, 어떤 결과가 있었는지 기록하려 합니다.⁉️ 마이그레이션의 필요성현재 담당한 서비스는 webpack 기반의 CRA로 구성된 프로젝트였습니다. 첫 번째, 오래 걸리는 개발 서버 구동시간이었습니다.구동되는 시간까지 평균 약 20초가 소요되고 최대 약 30초까지 소요되는 상황이었습니다. 두 번..

📖 들어가며현재 React 19 버전의 업데이트에 대해서 많은 관심을 가지고 있습니다. 여러 변경사항들이 많지만 이번 포스팅에서는 핵심 내용이라고 생각하는 부분을 포스팅하려 합니다. 즉, 기존에는 필요하고 사용해야 했지만 19 버전이 도입되면서 사용하지 않아도 되는 것들과 추가로 몇 가지 새로운 기능들을 소개하려고 합니다. 현재 2024년 5월 15일 기준으로 리액트 19버전을 사용해보고 싶다면 카나리 버전을 설치하여 사용할 수 있습니다.npm i react@canary react-dom@canaryoryarn add react@canary react-dom@canaryReact Compoiler19 버전의 가장 큰 부분은 리액트 컴파일러입니다. 리액트 컴파일러는 리액트 코드를 일반 자바스크립트 코드로..

📖 들어가며 이번 포스팅에서는 React에서 사용되는 상태관리 라이브러리에 대해서 각각의 특징과 개인적인 견해가 들어가 있습니다. 현재 포스팅에서 다룰 주요 네 가지 라이브러리입니다. react-redux & redux-toolkit recoil zustand jotai React에서 상태 관리 라이브러리와 함께 개발을 하다 보면 위에서 언급한 네 가지 라이브러리 중 하나쯤은 분명 알고 계시리라 생각합니다. 위 이미지는 최근 1년간 네 가지 라이브러리의 NPM 동향입니다. 현재 추세로 봤을 때 1위: redux (react-redux & redux-tookit) 2위: zustand 3위: jotai 4위: recoil 위 순위로 보입니다. 그럼 간단한 코드 예제와 함께 특징을 알아보겠습니다. Redux..

📖 들어가며 Next.js 14버전 app router 프로젝트의 styled-comoponents에서 vanilla-extarct로 마이그레이션을 진행함에 있어서 다크모드 기능도 같이 진행하게 되었습니다. 그리고 이번 다크모드를 적용하면서 next-themes를 활용해 봤는 데 사용 경험이 매우 좋았습니다. 또한, app router에서 vanilla-extract로 다크모드를 구현함에 있어서 참고자료가 많지 않다는 것을 깨달았기 때문에 글을 작성하려 합니다. 그럼 이제 Next.js app router에서 vanilla-extract + next-themes를 활용한 다크모드를 한번 구현해 봅시다. 🧐 next-themes 소개 https://github.com/pacocoursey/next-them..

📖 들어가며 기존 프로젝트에서 Next.js 14버전의 앱 라우터에서 styled-components를 사용하고 있었습니다. 이전에 Next.js 11버전에서 14버전으로 마이그레이션을 진행하면서 남아있던 부분이었습니다. 앱 라우터에서 서버 컴포넌트를 지원하기 시작하면서, 서버 컴포넌트 활용 해보고자 마이그레이션을 진행했습니다. 그럼 먼저 왜 마이그레이션을 진행했고, 왜 vanilla-extract를 선택했는지 간략히 설명해 볼게요. 🔍 앱 라우터(app router)에서 styled-components의 문제점 styled-components는 서버 컴포넌트를 지원하지 않기 때문에, styled-components를 사용하려면 'use client'를 명시함으로써 클라이언트 컴포넌트를 강제적으로 사용해..

📖 들어가며 최근 다양한 웹 서비스를 접해보면 간편한 SNS 로그인으로 쉽게 서비스를 이용할 수 있습니다. 이런 간편한 SNS 로그인이 바로 OAuth2.0 프로토콜을 통해 진행됩니다. 그럼, OAuth가 어떤 배경에서 등장하였고, 현재는 어떻게 표준화되어 OAuth2.0이라는 이름으로 사용되고 있는지, 그 흐름에 대한 개념을 함께 알아보겠습니다. 🧐 OAuth 등장배경 웹 서비스의 다양성이 증가하면서, 안전하게 정보를 공유하는 방법에 대한 필요성이 생겼습니다. 이로 인해 OAuth(Open Authorization)라는 개념이 탄생하게 되었습니다. 이를 설명하기 위해서 한 가지 예를 들어 볼게요. 우리의 서비스가 사용자에게 사용자의 구글에 대한 정보를 제공하려면 어떻게 해야 할까요? 사용자가 구글에 대..