✨ 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초까지 소요되는 상황이었습니다. 두 번..

📖 들어가며2020년 초부터 프론트엔드 개발자라는 직업을 알게 되어 스스로 준비하며 뒤늦게 대학교를 입학하여 올해 2월 학교를 졸업하고, 4월에 알서포트 회사에 입사를 하게 되었다. 본격적인 취업 준비는 작년 11월 중순부터 시작했으나, 생각보다 취업시장은 어렵다는 것을 체감했었다. 정말 얼어붙어있었다. 실시간 통신 기술에 강점이 있고 원격 지원 및 제어를 기반으로 제품을 만들어가는 알서포트.이전에 한 기업의 채용 과제를 진행하면서 실시간 통신에 대한 재미를 확실히 느꼈고 이 부분으로 강점을 쌓고 싶다는 목표가 생겼다.이런 목표 속에서 알서포트에 합류하게 되어 영광스럽게 생각한다. 이 회사에서 그동안의 경험을 돌아보고 배운점과 앞으로의 계획을 정리해보려고 한다.최고의 복지는 동료다입사 첫날부터 동료분들..

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

📖 들어가며 이번 2024년 04월 03일 ~ 2024년 04월 08일, 총 6일간 진행하는 테오의 스프린트 17기에 10조 콘대팀에서 프론트엔드 포지션으로 참여했습니다. 테오의 스프린트란? 테오의 스프린트는 "구글 스프린트는 짧은 시간 내에 아이디어 검증을 하기 위한 그럴싸한 MVP를 효율적으로 만들어내는 방법론입니다. "6일간 좋은 사람들과 잘 만들어진 협업 프로세스를 함께 경험한다" 즉, 구글 스프린트를 모티브로 한 프로세스입니다. 왜 참가하게 되었을까? 사실 이전부터 테오의 스프린트 모집 공고가 보일 때마다 참여하고 싶은 마음이 무척 컸습니다. 하지만 학교 시험 기간과 겹치는 등 항상 진행할 수 있는 환경이 되지 못했습니다. 하지만 이번에는 마침 적절한 때 공고가 올라와서 바로 참가 신청을 하게 ..

📖 들어가며 이번 포스팅에서는 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)라는 개념이 탄생하게 되었습니다. 이를 설명하기 위해서 한 가지 예를 들어 볼게요. 우리의 서비스가 사용자에게 사용자의 구글에 대한 정보를 제공하려면 어떻게 해야 할까요? 사용자가 구글에 대..