Frontend란 무엇이며 왜 중요합니까?

Frontend 개발의 주목할 만한 trend 중 하나는 다양한 programming 언어로 작성된 code를 browser에서 native에 가까운 속도로 직접 실행할 수 있게 하는 WebAssembly의 사용입니다. WebAssembly는 빠르게 실행할 수 있는 compact한 binary 형식으로, game과 video 편집처럼 성능 집약적인 애플리케이션에 적합합니다.

또한 Progressive Web Apps(PWA)는 web 앱과 mobile 앱의 기능을 결합하므로 인기 있는 trend가 되었습니다. PWA는 native 앱과 거의 같은 방식으로 기기에 설치할 수 있지만 배포에 app store가 필요하지 않습니다. PWA는 offline 기능, push 알림(iOS에서는 버전 16.4부터, 그리고 홈 화면에 추가된 web 앱에서만), 더 빠른 loading 시간을 제공할 수 있어 사용자 경험을 크게 개선합니다.

기존 web 애플리케이션은 매 request마다 모든 page를 server에서 rendering합니다. 이에 반해 Jamstack architecture는 frontend를 backend에서 분리합니다. 미리 구축된 page를 Content Delivery Network(CDN)에서 직접 제공할 수 있으므로 이는 더 빠른 loading 시간과 더 나은 확장성으로 이어질 수 있습니다. 한편 동적 기능은 API를 통해 처리됩니다. 현재 많은 현대 framework는 필요에 따라 정적 생성과 server 측 rendering을 결합합니다.

User experience(UX)는 사용자가 애플리케이션이나 website와 상호 작용하는 방식에 직접 영향을 주므로 frontend 개발의 design 결정에서 중요한 역할을 합니다. 좋은 사용자 경험은 interface가 직관적이고 탐색하기 쉬우며 시각적으로 매력적이도록 하여 사용자 만족도와 참여를 높입니다.

최적의 사용자 경험을 달성하기 위해 frontend 개발자는 다양한 화면 크기와 기기에 적응하는 반응형 design을 만드는 데 집중합니다. 여기에는 사용자가 smartphone, tablet, desktop 중 어디에서 접근하든 콘텐츠가 올바르게 표시되도록 하는 유연한 layout, image, CSS media query의 사용이 포함됩니다.

속도와 성능도 UX design 결정의 중요한 요소입니다. Frontend 개발자는 file 크기를 최소화하고, 리소스를 비동기로 불러오고, caching 기법을 구현하여 loading 시간을 최적화합니다. 이를 통해 사용자는 빠르고 원활한 상호 작용을 경험하며, 이는 관심을 유지하고 이탈을 막는 데 필수적입니다.

Backend 개발에서는 흔히 데이터 처리와 server logic에 초점이 맞춰집니다. 이에 반해 frontend 개발은 사용자 경험에 직접 영향을 주는 미적, 기능적 측면의 영향을 크게 받습니다. Design 결정에서 UX를 우선시하면 개발자는 business 목표와 사용자 요구를 모두 충족하는 더 몰입감 있고 사용하기 쉬운 애플리케이션을 만들 수 있습니다.

Frontend 개발은 기술과 도구가 몰입감 있고 효과적인 사용자 경험을 만드는 데 중요한 역할을 하는 역동적이고 끊임없이 발전하는 분야입니다. 오늘날 가장 인기 있는 기술 중에는 Facebook(현재 Meta)이 개발한 JavaScript library인 React가 있으며, React를 사용하면 component 기반 architecture로 interactive 사용자 interface를 구축할 수 있습니다. React는 효율성과 유연성으로 알려져 있어 전 세계 개발자가 선호하는 선택지입니다.

Google이 개발한 framework인 Angular도 frontend 개발에서 널리 사용됩니다. Angular는 양방향 data binding과 dependency injection 같은 기능으로 동적 web 애플리케이션을 구축하기 위한 포괄적인 솔루션을 제공하여 높은 성능의 복잡한 애플리케이션을 만들 수 있게 합니다.

Vue.js는 가벼움과 단순함으로 알려진 또 다른 인기 기술입니다. Vue.js는 특히 기존 project와 통합할 수 있는 능력과 점진적으로 도입할 수 있다는 점에서 높이 평가되어 소규모와 대규모 project 모두에 좋은 선택입니다.

이러한 기술 외에도 build 도구는 현대 frontend 개발에서 중요한 역할을 합니다. Webpack은 project의 리소스를 관리하고 최적화하도록 돕는 module bundler입니다. 한편 Babel은 이전 browser를 계속 지원하면서 최신 JavaScript 기능을 사용할 수 있게 하는 JavaScript compiler입니다. 현재 많은 project는 Vite와 esbuild 같은 더 빠른 대안을 사용하며, TypeScript가 널리 보급되었습니다.

이전 기술은 더 많은 수동 구성과 유지 관리가 필요했습니다. 이에 반해 이러한 현대 도구와 기술은 더 간결하고 효율적인 개발 process를 제공합니다. 이들은 높은 성능과 확장성으로 복잡한 애플리케이션을 처리하도록 설계되어 최고 수준의 사용자 경험을 제공하려는 frontend 개발자에게 중요한 선택지입니다.

Mobile 및 web 앱의 frontend 성능을 최적화하는 것은 빠르고 반응성 좋은 사용자 경험을 보장하는 데 매우 중요합니다. 성능을 개선하는 한 가지 방법은 모든 request와 모든 kilobyte가 loading 시간에 지연을 더할 수 있으므로 download해야 하는 양과 크기를 줄이는 것입니다. HTTP/2와 HTTP/3에서는 많은 작은 request의 비용이 이전보다 적으므로 모든 file을 함께 bundling하는 것과 CSS sprite 같은 기법은 오늘날 덜 중요합니다. 한편 code splitting, 압축, 현대 image 형식, image의 lazy loading은 더 중요해졌습니다.

또한 JavaScript를 비동기 또는 지연 방식으로 불러오면 성능을 크게 개선할 수 있습니다. Script를 async나 defer로 불러오면 browser는 script를 background에서 가져오는 동안 page rendering을 계속할 수 있습니다. 이를 통해 모든 script가 완전히 로드되기 전에 콘텐츠가 표시되므로 사용자는 더 빠른 page loading을 경험합니다.

리소스의 동기 loading은 rendering을 차단하고 loading 시간을 늘릴 수 있습니다. 이에 반해 비동기 loading은 훨씬 더 효율적입니다. 이는 network 연결이 더 느리고 불안정할 수 있으며 최적의 사용자 경험을 제공하는 데 1밀리초도 중요한 mobile 기기에서 특히 중요합니다.

Frontend는 button, menu, form, layout처럼 사용자가 보고 상호 작용하는 애플리케이션의 부분입니다. Web 개발에서 frontend는 일반적으로 HTML, CSS, JavaScript로 구축되며 React, Vue 또는 Angular 같은 framework와 함께 사용되는 경우가 많고, 사용자의 browser나 기기에서 실행됩니다.

Backend는 server에서 실행되며 business logic, database, 인증, 다른 시스템과의 통신을 담당하는 부분입니다. Frontend와 backend는 일반적으로 API를 통해 통신합니다. 둘 다 다루는 개발자는 흔히 full-stack 개발자라고 부릅니다.

Frontend와 backend service의 효과적인 통합은 일관되고 반응성 좋은 사용자 경험을 만드는 데 매우 중요합니다. 이 통합은 두 계층 사이에 명확한 통신 channel을 구축하여 달성되며, 일반적으로 frontend와 backend 사이의 다리 역할을 하는 API(Application Programming Interfaces)를 통해 이루어집니다. API를 사용하면 frontend 애플리케이션이 backend service에 request를 보내고 데이터를 받을 수 있어 전체 page를 다시 불러오지 않고도 사용자 interface를 동적으로 업데이트할 수 있습니다. JavaScript 기반 frontend에서는 일반적으로 내장 Fetch API나 Axios 같은 library로 request를 보냅니다.

데이터 교환에 맞는 접근 방식을 선택하는 것도 중요합니다. RESTful API와 GraphQL은 인기 있는 선택지이며, REST는 단순성과 폭넓은 사용으로 알려져 있습니다. 한편 GraphQL은 client가 가져올 데이터를 정확히 지정할 수 있게 하여 더 많은 유연성을 제공합니다. 이러한 접근 방식을 사용하면 개발자는 frontend가 필요한 데이터만 받도록 하여 network 부하를 줄이고 애플리케이션의 성능을 개선할 수 있습니다.

기존 방식에서는 server가 완전한 page를 생성했고 frontend와 backend가 긴밀하게 결합되어 있었습니다. 이에 반해 API 같은 현대 기술은 더 modular하고 확장 가능한 architecture를 가능하게 합니다. 이를 통해 API 계약이 유지되는 한 backend service의 변경 사항을 frontend code에 직접 영향을 주지 않고 구현할 수 있으므로 애플리케이션을 더 쉽게 업데이트하고 유지 관리할 수 있습니다.