굳이 Svelte 를 선택한 이유왜 하필 Svelte 인가요? 아직 시기상조 아닐까요?Javascript 가 Web 표준 개발 언어기 때문에, 자연스럽게 해당 언어에 기반한 Web Framework (혹은 Library) 는 짧은 시간 내 굉장히 많이 생기고, 동시에 많이 사라지고 있는 것 같습니다.Web Framework 를 선택하는 것이 더욱 어려운 이유는, Frontend 분야의 트렌드가 다른 개발 분야에 비해 비교적 빠르게 변화하고 있기 때문입니다.실제로, 지난 10년 사이에 크고 작은 지각 변동이 수차례 있었던 것 같습니다.2010년대 초반에는 jQuery, 2010년대 중반에는 Angular, 2010년대 후반 이후에는 React 와 Vue 가 Web Framework 핵심 트렌드였던 것 같습니다.개인적으로는 대부분의 기간을 Frontend 분야와 친숙하게 지내지 않았기 때문에, 위와 같이 빠르게 변하는 Frontend 업계 트렌드를 그저 '옆동네 불구경' 정도로 생각했던 것 같습니다.막상 Web 개발 공부를 시작하려다 보니 꽤나 많은 선택지 앞에서 당황했고, 실제로 공부하고자 하는 Web Framework 를 선택하는 과정에서 많은 고민을 하게 되었습니다.현재 시점에서 Javascript 기반의 Web Framework 를 선택할 때, 가장 안정적인 옵션은 의심의 여지없이 React 혹은 Vue 입니다.Frontend 분야에서 이미 전세계에서 큰 비중으로 활용되고 있기에, 개발 안정성이나 확장 가능성은 보장되었다고 해도 무방합니다.실제로, Frontend 분야의 채용 시장도 모두 React, Vue 중심으로 열려 있고, 온라인과 오프라인 구분할 것 없이 대부분의 학습 자료는 해당 Web Framework 위주로 구성되어 있습니다.또한, 현실적으로 개발자들에게 굉장히 중요한 요소로 작용하는 커뮤니티 성숙도 측면에서 압도적인 모습을 보이고 있습니다.직면한 문제가 무엇이든, 대부분 Google 혹은 Youtube 에 이미 해당 문제를 경험하고 해결한 사례가 존재하기 때문에React, Vue 에 익숙하지 않은 개발자더라도 풍부한 Reference 를 통해 어렵지 않게 궁금증을 해결할 수 있습니다.심지어, ChatGPT 도 다른 Web Framework 와 관련된 질문보다는 React, Vue 와 관련된 질문에 보다 명쾌한 해결책을 제시하는 경우가 많습니다.처음 Svelte 를 접하게 된 계기는 '노마드 코더' 라는 유튜버의 Svelte 소개 영상이었습니다.Frontend 분야에 대한 기본 지식이 부족했기에, Svelte 를 추천하는 다양한 이론적인 (Virtual DOM 을 사용하지 않는다든가, 경량화 되었다든가, 실질적인 의미의 Reactive 특성이 구현된 형태다든가 하는) 강점보다는,초심자 입장에서 가시적으로 느낄 수 있을 정도의 간결한 Code 형태가 굉장히 매력적으로 다가왔습니다.이를 계기로, Svelte 라는 Web Framework 에 관심을 가지고 다양한 자료를 찾아보기 시작했습니다.하단에 첨부된 이미지와 같이, 20

시작하며안녕하세요. 카카오엔터프라이즈 워크Web개발파트에서 프론트엔드 개발을 하고 있는 Dale(조한별)입니다.이번 포스팅에서는 지난 8월 카카오워크 신규 기능으로 탑재된 음성채팅을 구현하면서 얻은 프론트엔드 개발 경험을 소개해볼까 합니다. 카카오워크 PC 버전(Mac, Windows)에 구현되어 있는 음성채팅은 JavaScript로 구현된 Webview(이하 웹뷰)로 개발되었습니다. 아무래도 웹뷰로 구현하게 되면 빠른 구현과 간편한 배포를 통해 유지보수가 편하지만, 웹뷰라는 틀 안에서 음성 기술을 다루다 보니 각 플랫폼 별로 제약사항이 꽤 존재했던 만큼 고려해야되는 한계점들도 분명히 존재했습니다. 이 포스팅이 WebRTC 기술을 활용하여 웹뷰로 비슷한 서비스를 개발하시는 분들에게 소소한 팁이 될 수 있었으면 좋겠습니다.카카오워크 음성채팅카카오워크의 음성채팅 기능은 메시지 형식의 커뮤니케이션 방식에서 한발 더 나아가 음성으로 서로 연결된 느낌의 커뮤니케이션을 제공합니다. 음성채팅은 기존 화상회의보다는 간단하지만, 텍스트보다는 빠르게 의사소통할 수 있는 서비스를 제공한다는 점에 주목하며 개발하게 되었는데요. 카카오워크 음성채팅은 로컬 오디오와 스피커의 상태/종류를 변경하거나 참여자들의 음량 레벨을 통해 발화자를 표시하고, 메인 스피커(주발화자)를 판단하여 표시할 수 있습니다. 뿐만 아니라 참여자들의 정보와 미디어 기기 권한 여부를 표시하는 등 음성채팅을 위한 기본적인 기능들을 간단하고 빠르게 제공합니다.❕카카오워크 음성채팅 사용 방법카카오워크 PC 버전에서 음성채팅 사용법을 궁금해하시는 분들을 위해 사용법을 설명드리면, 사용법은 아주 간단합니다. 채팅방 우상단에 있는 🎧아이콘을 누르면 바로 채팅방 멤버들과 음성채팅이 시작됩니다.[그림 1] 카카오워크 음성채팅 시작하기음성채팅이 시작되면 [그림 2]와 같이 초록색 아이콘이 채팅창 목록과 채팅방 우상단에 표시됩니다. 저 같은 경우 개발하면서 동료들과 그때 그때 잠깐씩 빠르게 이야기를 나눌 때(그리고 화상회의는 뭔가 부담스러울 때), 음성채팅을 정말 유용하게 사용하고 있는데요. 개발 구조에 대해 텍스트로 의견을 나누는 것보다, 클릭 한 번으로 음성채팅을 통해 안건을 빠르게 논의할 수 있어 참 편리합니다. 🙂[그림 2] 카카오워크 음성채팅이 진행되는 모습음성채팅 구현에 사용한 기술카카오워크의 음성 채팅을 구현하기 위해 제가 사용했던 기술들을 공유해 보겠습니다.음성 라이브스트리밍 with WebRTC음성 채팅에서 가장 핵심적인 기능은 역시나 음성 라이브스트리밍 기술입니다. 음성 라이브스트리밍 기술은 카카오엔터프라이즈의 자체 WebRTC 기술을 사용했습니다. 음성채팅은 화상이 아닌 음성만을 다루다 보니 안정적인 음성 전달과 음성 품질이 매우 중요합니다. 음성채팅을 개발하면서 사내에서 음성 성능 테스트를 진행한 적이 있었는데요. 몇백 명 수준의 인원이 접속해도 성능이나 품질 면에서 이상이 없는 부분을 확인했고, 덕분에 성능에 대한 의심 없이 다른 기능 구현에 집중할 수 있었습니다.[그림 3] (좌)음성

안녕하세요! DevOps 팀 악동입니다. 많고 많은 프론트엔드 프레임 워크중 흔히 3대 프레임워크로 불리는 리액트(React), 뷰(Vue), 앵귤러(Angular)를 제치고 Stack Overflow에서 2021년 발표한 개발자 설문 조사의 웹 프레임워크 부분에서 가장 '사랑받는' 프레임 워크 1위에 오른 Svelte 의 특징 및 장점에 대해 설명 하고자합니다.   먼저 Svelte란 무엇인가와 Svelte의 특징에 대해 설명 드리겠습니다. Svelte라는 단어는 날씬한, 호리호리한이라는 뜻으로 단어의 뜻답게 적은 코드와 작은 용량이 장점입니다.다른 프론트엔드 프레임워크와 다르게 가상돔을 사용하지 않으며 가상돔을 사용하지 않기 때문에 돔의 변경을 찾기 위한 런타임이 필요하지 않습니다. 또한 Svelte의 경우 구현된 애플리케이션을 런타임에서 해석하는 것이 아니라 이미 빌드 시점에 자바스크립트로 변환을 하기때문에 프레임워크가 아닌 자바스크립트 컴파일러라고 설명을 하기도 합니다. Svelte로 구현한 모든 코드는 빌드 시점에 bundle.js 라는 하나의 파일로 Vanilla Js로 컴파일 됩니다. 즉 Svelte로 개발된 애플리케이션은 빌드가 끝나면 bundle.js 하나의 파일로 만들어지기 떄문에 이 파일 하나만 배포하면 되고, 이 파일을 실행시키기 위한 별도의 Svelte 라이브러리를 포함할 필요가 없습니다. 아래 그림은 Svelte 공식 홈페이지에 설명되있는 글을 번역한 Svelte의 큰 특징들입니다. 1. Write less code - 적은 양의 코드로 동일한 동작을 하는 애플리케이션을 만들 수 있씁니다. Vue, React, Svelte 로 동일한 코드를 작성 했을 경우 Svelte가 현저히 코드 길이가 작습니다. 그러므로 번들의 크기가 감소되며 유지보수 비용이 감소 됩니다. 다음은 동일한 기능을 Svelte, React, Vue로 각각 구현했을때의 코드입니다.     위의 예제 코드를 보면 알 수 있듯이 확실히 Svelte로 구현한 코드의 길이가 적은 것이 확인 가능합니다. 2. No Virtual DOM - Vue, React는 가상돔을 사용합니다. 가상돔은 대부분의 경우 실제 돔보다 빠릅니다. 하지만 가삼동을 사용하는것이 항상 빠른것은 아니며 가상돔이 변경될 경우 새로운 가상돔과 변경되기 전의 가상돔을 비교하는 작업이 필요하며 이때 가상돔을 비교하는 오버헤드가 발생하게 됩니다.  분명 Virtual Dom은 빠르지만, 브라우저 돔의 갱신 여부를 비교하는 오버헤드가 발생하고 Svelte는 Virtual DOM을 사용하지 않고도, 오버헤드 없이 충분히 빠르게 DOM을 갱신 할 수 있습니다.  3. Truly reactive - Svelte는 빌드 타임에 어느 부분이 변경될지 파악하는 방식을 사용합니다. 어느 부분이 변경 될지 파악하고 그 부분의 상태가 변경 될 경우 반응형으로 화면을 갱신하는 진짜 반응형입니다.  글을 마치며​2015년 React, 2014년 Vue가 출시되고 시장에 자리잡기까지 그리 오랜 시간이 걸리지 않았

원문 : https://css-tricks.com/comparing-the-new-generation-of-build-tools/ 지난 해 많은 개발자 도구들이 출시되었다. 그리고 그 개발자 도구들은 지난 몇 년 동안 webpack, Babel, Rollup, Parcel, create-react-app을 포함하는 프론트엔드 개발을 지배해 온 도구의 뒤를 따른다. 여기서 소개할 새로운 도구들은 같은 기능을 하도록 설계되어있지 않으며, 도구마다 목표와 기능이 다르다. 이 도구들은 서로 다르지만 개발자 경험 개선이라는 공통의 목표를 가진다. 목차 왜 지금 이 도구들이 출시 되었을까? 기존 존재하는 도구들과 얼마나 다른가? 실험 비교 가능한 기능 esbuild Snowpack Vite wmr 기능 비교 마무리 구체적으로 각 제품의 기능, 필요 이유, 사용 사례 등을 간략하게 평가해보자. 필자는 비교가 이미 공평하지 않다는 것도 알고있다. 다시 말하지만 이글에서 이 도구들을 경쟁자로 다루려고 하는 것이 아니다. 사실 Snowpack과 Vite는 특정 작업을 위해서 esbuild를 사용한다. 우리의 목표는 작업을 더 쉽게 만들어주는 개발자 도구를 폭넓게 보고자 함이다. 이를 통해 어떤 도구를 선택할지와 얼마의 비용이 드는지를 알 수 있어 최선의 선택을 할 수 있다. 물론 이 도구들은 필자의 React와 Preact 사용 경험으로만 보일 수 있다. 필자는 이 라이브러리들에 익숙해져 있다. 하지만 다른 프론트엔드 프레임워크들에 대한 지원도 함께 살펴볼 것이다. 이 새로운 개발 도구에 대해서 많은 훌륭한 팟캐스트나 스트림, 기사들이 존재한다. 좀 더 자세한 내용을 위해 몇 가지 ShopTalk Show(역자 주: 팟캐스트 채널) 에피소드를 추천한다. 에피소드 454에서는 Vite에 대해 설명하고 에피소드 448에서는 wmr 및 Snowpack 제작자를 소개한다. 이 에피소드에서 눈에 띄는 점은 개발환경의 최신화를 위해 이런 도구를 만드는데 엄청난 양의 작업이 들어갔다는 것이다. 왜 지금 이 도구들이 출시 되었을까? 일부 도구들은 자바스크립트 도구 피로감에 대한 반응으로 등장하고 있다고 생각한다. 2016년 자바스크립트 학습에 대한 기사에서 잘 나와있다. 또한 이 도구들은 하나의 바닐라 자바스크립트 파일을 작성하는 것과 자신의 코드를 작성하기 전에 200MB의 도구 의존성을 다운로드해야 하는 것 사이의 부족한 중간 지점을 채워준다. 이 도구들은 의존성 없이 표준 라이브러리만으로도 모든 작업을 수행하는데 문제없으며(batteries-included) 자바스크립트 생태계의 계층 붕괴(역자주: 많은 것이 한 가지 일을 잘하는 것 대신에 한 가지가 여러 가지를 잘하는 것)의 추세의 한 부분이다. Snowpack, Vite 및 wmr은 모두 브라우저의 네이티브 자바스크립트 모듈에 의해 활성화되었다. 2018년에 파이어폭스 60은 ECMAScript 2015 모듈을 기본으로 활성화한 상태로 출시되었다. 그 이후로 모든 메이저 브라우저 엔진들은 네이티브 자바스크립