FEConf 2025 참여 후기

 

 

 

세종대학교 광개토관에서 열린 FECONF 2025를 다녀왔다.

 

 일단 사람이 정말 많았다. 프론트엔드 개발자들만 모여있는데도 천 명은 족히 넘게 온 것 같았다. 에어컨이 빵빵해도 더워서 땀이 났다.

 

 컨퍼런스를 다녀오면 항상 현장에서 발표를 들을 때는 이해가 잘 되는데, 막상 집에 돌아오면 머릿속에 키워드 몇 개만 남는 느낌이다. 그래서 까먹기 전에 핸드폰에 적어둔 메모를 기반으로 간단히 리서치를 하고 정리를 해봤다.

 

---

 

1. Svelte

 

1.1) fine-grained reactivity

리액트는 상태가 변경되면 해당 컴포넌트와 자식 컴포넌트가 모두 리렌더링 된다.
하지만 svelte는 변경한 특정 상태만을 렌더링 되도록 할 수 있다고 한다.

1.2) Virtual DOM을 쓰지 않고 실제 DOM을 직접 조작

Virtual DOM을 사용하는 Vue나 React는 Virtual DOM 연산의 오버헤드가 있다.
Svelte는 직접 DOM을 조작하기 때문에 해당 되지 않는다. 겉보기엔 DOM을 직접 다룬다는 점에서 과거의 jQuery와 비슷하다고 생각할 수 있지만, 컴파일 타임에 최적화된 코드로 변환된다는 점에서 본질적으로 차별성이 있다.

1.3) 컴파일러

컴파일 타임에 최적화된 코드로 변환하여 런타임 오버헤드가 거의 없다. 1.2에 포함된 내용이다.

 

2. React Compiler

2.1) 자동 메모이제이션 처리 

memo, useMemo 같은 최적화를 자동으로 적용해 불필요한 렌더링 방지한다.
하지만 자동으로 여러 경우의 수를 미리 따져서 캐시를 만들어 두기 때문에 코드의 양이 많이 늘어난다.

즉, 번들 사이즈가 커진다는 단점이 있다. 일종의 trade-off가 있는 것이다.

프론트엔드 개발하면서 memo, useMemo, useCallback을 고민하는 것이 참 귀찮았는데, 솔깃한 인사이트였다.

2.2) 아직 실험 단계
아직 RCRelease Candidate 버전이다. 그렇기 때문에 약간 사용이 꺼려 진다.

Meta와 같은 회사에서는 이미 프로덕션 환경에 도입하여 사용하고 있지만, 앱에 컴파일러를 점진적으로 도입할지는 코드베이스의 건강 상태와 React의 규칙을 얼마나 잘 준수했는지에 따라 달라질 것입니다.

하지만 위와 같이 React 공식문서에서는 Meta는 이미 잘쓰고 있다고 한다. ㅎㅎ

3. Devup UI (CSS-in-JS)

Next.js가 떠오르고 서버 컴포넌트 개념이 등장하는 배경에서 런타임에 JS가 동적으로 CSS를 생성하는 CSS-in-JS 방식은 호환이 잘되지 않아 인기가 조금씩 떨어졌다. 그래도 사용은 하고 싶어서 사람들이 모든 곳에 use client를 붙이곤 했지만 너무 별로다... 결국 Tailwind처럼 빌드 시점에 클래스 기반 CSS를 생성하는 방식이 호환이 잘되서 각광받고 있다.

"음..왠지 더 잘 만들 수 있을거 같은데 ??"

라는 생각으로 CSS-in-JS이면서도 서버 컴포넌트에 호환될 수 있는 라이브러리를 만들고 있다고 하셨다.

 

• css variable 지원과 조건부 오퍼레이션 추가
• 최신 번들러 (vite, rsbuild, next.js webpack) 지원
• 코드 AST 변환 및 rust와 wa를 활용한 스타일 캐시 로직 작성
• rgba를 hex로 변환 및 중복된 색상 제거를 통한 최적화

등등 ...

 

하여튼 엄청 깎으면서 만들고 계셨다.

 

4. 웹 접근성와 ARIA

접근성 트리를 올바르게 구축하기 위해서는 ARIA 속성을 적극적으로 활용해야 한다. ARIA는 스크린리더나 보조기기가 요소를 정확히 인식하도록 도와주며, 이를 통해 모든 사용자가 차별 없이 이용할 수 있는 웹을 만들 수 있다.

 

 

이 외에도 SEO 최적화를 통한 비용 절감, 모노레포에서 폴리레포로의 마이그레이션 작업에 대해 들었다.

 

---

 

많은 인사이트들을 얻은 알찬 주말을 보냈다. 강의를 듣다가 예전에 next.js를 도입할 때 궁합이 좋은 CSS 라이브러리를 찾으면서 했던 고민들이 오랜만에 생각나기도 했다.

 

https://8156217.tistory.com/86

[Next.js] Next.js와 호환되는 css와 그렇지 못한 css에 대한 고찰

 

그리고 나중에 리액트 컴파일러를 한번 시도해 봐야겠다. 웹 성능과 개발 생산성이 많이 올라갈 것 같다.

전에는 구글 컨퍼런스에서 v0를 알게 되어 잘 쓰고 있다. 컨퍼런스는 이런 꿀팁과 좋은 키워드들을 얻을 수 있어서 좋다!!