(정리) 프론트엔드 개발 기능별 세분화 정리

프론트엔드 개발을 7가지로 정리해 보자

HTML (HyperText Markup Language) | 웹 페이지 구조를 정의하는 마크업 언어.
CSS (Cascading Style Sheets) | 웹 페이지 스타일, 레이아웃 정의.
- Cascading : 여러 스타일 규칙이 우선순위에 따라 쌓여서 적용
Javascript | 웹 페이지 동적기능 구현.
Typescript | Javascript 상위 집합 언어. 정적 타입 지원. Javascript로 컴파일되어 실행.

React | 컴포넌트의 유연성을 강조. 기본 프로젝트 설정 도구 (Create React App)
Vue | template(html), script, style을 한 페이지에 작성해서 쉽게 작성이 가능. 기본 프로젝트 설정 도구 (Vue CLI)
- CLI(Command Line Interface | 텍스트로 명령어를 입력해서 컴퓨터와 대화하는 방법
Angular | Google 에서 만든 프레임워크
Next.js | React 기반 프레임워크. 서버 사이드 렌더링, 정적 사이트 생성 제공. SEO 유리. HMR 제공.
Nuxt.js | Vue 기반 프레임워크. 서버 사이드 렌더링, 정적 사이트 생성 제공. SEO 유리. HMR 제공.

빌드 및 번들러 도구
- Vite | 빠른 개발 환경 제공. HMR(Hot Module Replacement) 지원. 빌드 시 Rollup 사용. 주로 Vue와 같이 사용.
- Rollup | 여러 모듈을 하나의 파일로 번들링 하는 특징.
- Webpack | 모듈 번들링 도구. React와 Vue는 기본적으로 Webpack을 설치한다. HMR 은 별도 설정 필요.
  - 모듈 번들링이란 여러가지 Javascript 파일(모듈)을 하나로 묶어주는 기능을 뜻한다. HMR은 이렇게 할 필요 없이 모듈별로 교체가 가능하다.
- Parcel | 모듈 번들링 도구
패키지 관리
- NPM | Javascript 패키지 관리 도구. Node.js의 기본 패키지 관리자라 생태계에 더 널리 쓰임.
- Yarn | NPM의 대안, 빠르고 효율적인 패키지 관리 도구. 병렬로 패키지를 설치하여 속도가 빠름.

테스트 도구
- Jest | Javascript 테스트 프레임워크, React에서 주로 사용됨.
디자인 도구
- Figma
코드 품질 유지 도구
- ESLint | javascript 코드 문법 검사, 팀의 코딩 스타일 통일 등 활용
- Prettier | 코드의 스타일 일관되게 유지

maverick11471 님의 블로그