프레임워크 없는 웹 개발 - Part 1

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 프레임워크 최소화를 원하는 개발자, 성능 최적화에 관심 있는 개발자

핵심 요약

• 프레임워크 없는 접근법은 복잡성 줄이고 성능 개선을 목표로 함
• 신호(Signal) 기반의 반응성은 프레임워크 없이도 구현 가능 (예: type Signal 코드)
• Vite/BunJS 활용으로 프레임워크 없는 개발 환경 구축 가능

섹션별 세부 요약

1. 프레임워크의 문제점과 접근법

• 프론트엔드 프레임워크의 과도한 추상화로 인한 성능 저하
• React의 컴포넌트 기반 설계가 vanillaJS에서도 적용 가능
• 예시: HelloWorld() 함수를 통해 템플릿 기반 컴포넌트 생성

2. 반응성 구현: 신호(Signal) 기반 접근

• 신호는 값과 구독자 목록으로 구성된 객체 (type Signal)
• 클릭 이벤트 시 counter.value 자동 업데이트 예시 코드 제공
• 개발자가 직접 상태 관리 및 업데이트 제어 가능

3. 도구 활용: Vite/BunJS로 프로젝트 구조화

• Vite/BunJS를 통해 파일/컴포넌트 관리 및 빌드 자동화 가능
• 프레임워크 없는 환경에서도 모듈화와 빌드 최적화 가능

4. 미래 주제: 서버 렌더링, 라이브러리 개발

• 서버 렌더링, 외부 라이브러리 사용, UI 라이브러리 개발 및 NPM 배포 예정
• 프레임워크 없는 환경에서도 고급 기능 구현 가능

결론

• 프레임워크 없는 개발은 코드 최소화와 성능 향상에 유리하며, 신호 기반 반응성과 Vite/BunJS 활용으로 실용적입니다.
• 추후 서버 렌더링 및 UI 라이브러리 개발 주제를 통해 더 많은 기술적 접근법을 공유할 예정입니다.