12월 프론트엔드 개발자 뉴스 #1

해당 포스트는 Frontend Weekly Digest의 포스트를 참고하여 몇 가지 인상깊은 포스트를 추려 정리한 글입니다.

 

웹 개발 뉴스

Astro 5.0

Astro 5.0 | Astro

Astro란?

블로그, 이커머스, 마케팅 등의 컨텐츠 중심 웹사이트를 구축하기 위한 프레임워크이다. Island 아키텍처 도입을 통해 자바스크립트 오버헤드와 복잡성을 줄이고 빠른 로딩 속도와 뛰어난 검색 엔진 최적화를 제공한다.

 

특징

• Island 아키텍쳐 : 아일랜드 아키텍쳐를 통해 각각의 컴포넌트가 독립적으로 동작하게 하는 동시에 병렬 로딩을 수행하여 한 페이지에 여러개의 아일랜드가 독립적이고 병렬적으로 로드되어 성능 개선에 기여할 수 있다. 
• UI - agnostic : Astro는 UI 프레임워크에 종속되지 않는다는 특징으로 인해 React, Preact, Svelte, Vue, Solid, Lit, HTMX 등 다양한 UI 프레임워크를 사용하여 화면을 구성할 수 있다.

Astro 5.0 업데이트

1. Content Layer: 콘텐츠 레이어는 프로젝트 내에서 콘텐츠를 유연하게 관리할 수 있게 도와준다. Markdown 파일, CMS, REST API 등 다양한 소스에서 데이터를 로드하고, 통합된 타입 안전 API를 통해 접근할 수 있다. 이를 통해 콘텐츠를 효율적으로 관리하고 일관성을 유지할 수 있다.
2. Server Islands: 서버 아일랜드 기능은 정적 콘텐츠와 동적 콘텐츠를 혼합하여 사용할 수 있게 한다. 이는 사이트의 일부는 캐시된 정적 콘텐츠로, 다른 부분은 개인화된 동적 콘텐츠로 제공할 수 있다는 의미이다. 성능과 사용자 경험을 최적화하는 데 유용하다.
3. Simplified Prerendering: 단순화된 사전 렌더링 기능은 사이트의 정적 HTML 파일을 생성하여 로딩 시간을 단축하고 SEO 성능을 향상시킨다. 설정 및 구성을 간소화하여 개발자들이 사전 렌더링을 쉽게 구현할 수 있다.
4. Type-safe Environment Variables: Astro 5.0은 타입 안전 환경 변수를 도입하여 환경 변수가 올바르게 타입 지정되고 런타임 오류의 위험을 줄일 수 있다. TypeScript를 활용하여 더 견고하고 오류에 강한 개발 경험을 제공한다.
5. Vite 6: Astro 5.0은 최신 Vite 6 빌드 도구를 포함하고 있다. Vite 6는 빌드 성능 향상, 빠른 개발 사이클, 현대적인 웹 개발 관행을 더 잘 지원한다.
6. Experimental Features: Astro 5.0은 몇 가지 실험적 기능도 포함하고 있다. 이 기능들은 안정 버전에 포함되기 전에 개발자들이 테스트하고 피드백을 제공할 수 있도록 한다.

Viewport Control with interactive-widget

Control the Viewport Resize Behavior on mobile with `interactive-widget` - HTMHell

기본적으로 모바일 환경에서 가상 키보드가 올라올 때, Visual Viewport는 변하지만 Layout viewport는 변하지 않는 문제로 인해 가상 키보드에 화면이 가려지는 현상이 종종 발생합니다. 이러한 문제를 해결하기 위해 interactive-widget 메타 태그를 사용하여 해결할 수 있다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

해당 interactive-widget 키워드는 Chrome 108+, Firefox 132+ 이상 버전에서 사용 가능.

 

Debugging with console.log()

Front End Debugging Part 2: Console.log() to the Max

기본적으로 디버깅을 위해 console.log를 사용하는 것이 일반적이지만, 이러한 로그에 대하여 레벨을 부여하여 가독성있는 디버깅이 가능하게 할 수 있다.

console.log 레벨링

• console.log
• console.info
• console.warn
• console.error

console.log 스타일링

console.customLog = function(msg) {
    console.log("%c" + msg,"color:black;background:pink;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold")
}
console.customLog("Dazzle")

 

console.table()

console.table(["Simple Array", "With a few elements", "in line"])

테이블 형태의 로그 출력

 

console.count()

function myFunction() {
    console.count('myFunction called');
}

해당 함수가 몇 번이나 호출되었는지 카운트

 

console.group()

console.group('My Group');
console.log('Message 1');
console.log('Message 2');
console.groupEnd();

로그의 특정 그룹으로 묶는 방법

 

monitor()

함수와 함수에 넘긴 argument를 호출 시에 출력

npm vs npx

npm vs. npx: What’s the difference? - LogRocket Blog

npm : Node Package Manage의 역할을 수행한다. package.json을 통해 의존성을 관리할 수 있으며, 버전 관리도 가능하다. 필요한 패키지들을 설치하여 사용할 수 있도록 돕는다.

npx : npm이 패키지의 설치와 관리를 담당한다면 npx는 실행을 담당한다. npx는 node 패키지를 설치하지 않고 바로 실행할 수 있으며, 특정 패키지가 한 번만 실행될 필요가 있을 때 npx를 사용할 수 있다.

5 Technical Trends To Help Web Developers Stand Out in 2025

5 Technical Trends To Help Web Developers Stand Out in 2025

1. Vanilla JS의 힘을 무시하지 말 것 - React나 Angular, Vue와 같은 프레임워크들이 많이 사용되지만, 간단한 프로젝트에 대해서 오히려 불필요한 복잡성을 가질 수 있기에 Vanilla JS를 통해 가볍고 온전히 제어 가능한 웹을 만드는 것도 좋은 방법이 될 수 있다.

2. 전통적인 형식의 포트폴리오 웹사이트 대신 Three.js를 사용한 특색 있는 웹 애플리케이션을 제작하기 - AI의 사용으로 인해 더 이상 일반적인 형태의 웹 애플리케이션은 시각적으로 이목을 끌기가 어렵다. Three.js와 같은 라이브러리를 통해 인터랙티브한 웹사이트를 만들어보자.

3. 보안 지식이 점점 중요해지고 있음 - 보안은 더 이상 옵션이 아니며, 매 해 회사에서 보안을 위해 투자하는 금액이 증가하고 있다. XSS, SQL Injection과 같은 보안적인 부분에 대해 신경쓰며 개발을 할 필요가 있다.

4. 로컬에서 AI 코딩 어시스턴트 사용하기 - AI 툴을 활용하여 코딩을 하는 것은 더 이상 특이한 일이 아니다. 하지만 민감한 데이터 등과 외부 API 의존성을 낮추기 위해 로컬에서 AI 모델을 돌려 사용하는 방법 또한 고려해볼 필요가 있다. 가장 접근성이 좋은 로컬 LLM 모델은 Ollama가 있다.

5. No-code와 low-code 툴의 힘을 무시하지 말 것 - 개발자의 입장에서 이러한 툴을 사용하는 것에 회의적인 사람들이 많지만, 다른 시각에서 이러한 툴은 개발 시간을 효율적으로 단축시키고 복잡한 로직에 더 집중할 수 있도록 돕는다.

 

CSS 뉴스

css wrapped 2024

CSS Wrapped 2024

• field-sizing - 이제 input의 placeholder 컨텐츠에 맞게 사이즈를 제어할 수 있다.
• interpolate-size , calc-size를 통해 자연스러운 확장/축소 애니메이션을 구현할 수 있다.
• <detail> 태그를 통해 아코디언을 쉽게 구현할 수 있다.
• <detail> 태그에 대한 다양한 스타일 적용이 가능해졌다.
• anchor positioning - anchor-name:--over-easy 와 같은 css 스타일링을 통해 툴팁, 메뉴 등에 필요한 엥커를 손쉽게 구현할 수 있다.
• scrollbar-color, scrollbar-width : 해당 스타일링을 통해 스크롤바의 색상과 width 커스터마이즈가 가능하다
• cross-document view transition : 해당 스타일을 통해 서로 다른 경로의 페이지가 자연스럽게 넘어가는 효과를 구현할 수 있다.
• scroll-driven animation : 스크롤 위치에 따른 애니메이션 효과를 제어할 수 있다.
• scrollsnapchanging : 해당 기능을 통해 스크롤 위치에 따른 이벤트를 실시간으로 트리거하여 업데이트할 수 있다.
• ::backdrop이 이제 특정 요소에 접근하여 스타일을 상속받을 수 있다.
• css에서 light/dark 모드 전환 스타일링 기능을 제공한다.
• @property를 통해 스타일을 함수처럼 재사용할 수 있다.
• popover API를 사용하여 버튼 클릭 시 팝업 창이 나타날 수 있도록 하는 기능을 구현할 수 있다.
• @starting-style을 통해 스타일 업데이트 시 나타나게 하고 싶은 스타일을 지정할 수 있다.
• ruby-align : 한자 등에 사용되는 발음 기호 표시에 대한 제어를 손쉽게 할 수 있도록 한다.
• text-stroke는 텍스트의 겹치는 라인을 모두 표시하거나 겹치는 부분을 제거하는 기능을 제공한다.
• CssNestedDeclarations를 통해 동일한 스타일이 선언되었을 때 뒤에 오는 스타일이 덮어쓰기가 되는 것을 방지할 수 있습니다.

Javacript 뉴스

5 Javascript Libraries you should say goodbye to in 2025

5 JavaScript Libraries You Should Say Goodbye to in 2025

1. JQuery - 자바스크립트의 조부모님 격이었던 JQuery가 2025년부로 지원 종료됩니다.

2. Moment.js - 날짜를 핸들링 할 때 자주 사용된 이 라이브러리는 비교적 무겁고 유연하지 못한 특징으로 인해 다른 대체 라이브러리에 밀려 2025년부로 지원이 종료됩니다.

3. Loadash - 다양한 편의 기능 지원 라이브러리인 Loadash의 대부분의 기능이 ES6에서 지원됩니다.

4. Unserscore.js - Loadash와 비슷한 라이브러리로 ES6에서 이제 대부분의 기능이 지원됩니다.

5. Require.js - webpack, vite와 같은 대체 라이브러리로 인해 더 이상 지원되지 않게 되었습니다.

 

React.js 19

React v19 – React

• useTransition - useState 대신, useTransition을 사용하여 비동기 함수에 대한 pending, error 등의 상태를 처리할 수 있다.
• useActionState - 해당 훅을 사용하여 마지막 액션을 data 형식으로 반환하며, pending 상태도 표현이 가능하다.
• form, useFormStatus - form을 submit 할 때의 액션에 대하여 action을 통해 넘길 수 있으며, useFormStatus를 통해 각각의 input에 대한 값들을 state를 정의할 필요 없이 추출할 수 있다.
• use API - use를 통해 promise가 해결될 때 까지 동작을 유예할 수 있다.
• prerender API - 해당 API를 통해 데이터를 모두 로드하여 정적 html을 반환할 수 있다.
• React Server Component - 리액트에서도 서버 컴포넌트를 사용하여 SSR이 가능하게 한다.
• ref - 이제 함수형 컴포넌트로 접근 가능하다. 추후 forwardRef는 사라질 예정이다.
• react에서 script를 async로 가져오는 것이 지원된다.

SOLID principles for javascript

SOLID principles for JavaScript - LogRocket Blog

Javascript에서의 SOLID 원칙 준수 방법 설명

 

Mastering progressive Hydration for enhanced web performance

https://thenewstack.io/mastering-progressive-hydration-for-enhanced-web-performance/

Mastering Progressive Hydration for Enhanced Web Performance

lazy-loading vs Progressive Hydration에 대한 차이점과 각각의 상세 동작 방식 설명

참고

https://frontender-ua.medium.com/frontend-weekly-digest-392-9-15-december-2024-5e3f9125f232

https://frontender-ua.medium.com/frontend-weekly-digest-391-2-8-december-2024-35fe18049f8d