프론트엔드 개발은 독자적인 전문 영역으로 인정받은지 얼마 되지 않았고, 변화가 무궁무진한 분야이다. 특히 JavaScript 특유의 다재다능함 때문에 선택할 수 있는 기술 스택의 조합도 많은데, 이런 다재다능함은 초심자에게 있어 단점이 되기도 한다.

하나의 프레임워크를 제대로 학습하지 못했는데, 다른 프레임워크를 어설프게 학습함

어떤 기술 스택을 사용할지 고민만 하다 개발 기획을 제대로 시작하지 못함

개발 프로젝트에 별로 필요하지 않은 과도한 기술 스택 설치

이런 상황을 막기 위해 어플리케이션 제작을 위해 꼭 필요한 스택을 선택하고 이를 세팅하는 과정이 필요하다.

필수 항목

Node.js

Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있는 런타임으로, 배포 전 개발 단계에서 JavaScript로 번들링이나 최적화 등 많은 개발 작업을 가능하게끔 한다.

Node.js 패키지 매니저

패키지 매니저는 여러 소프트웨어를 한꺼번에 모아 설치, 업그레이드, 설정, 삭제 등을 할 수 있는 소프트웨어 툴로, 대표적으로 npm과 yarn이 있다.

버전 관리 시스템 / 형상 관리 시스템 + 원격 리포지토리 서비스

프로젝트 전반적인 과정에서 코드의 버전 관리와 협업을 위한 원격 리포지토리 서비스를 많이 사용하는 추세이다. 대표적으로 Git과 Github가 있다.

프론트엔드 프레임워크(라이브러리)

Vanila JS로 개발하는 것이 아니라면 개발하고자 하는 어플리케이션에 따라 취사선택 할 수 있다. 대표적으로 React, Vue, Next.js 등이 있다.

CRA(Create React App)
React 개발진이 쉽고 빠르게 React SPA를 개발할 수 있도록 여러 오픈소스를 묶어 제공하는 툴체인으로, 번들링이나 배포, 테스트를 위한 기본 설정이 모두 되어 있어 개발 환경 설정을 큰 공을 들이지 않고 시작할 수 있다.

CSS

CSS는 개발자나 회사에서 적용하는 방법이 각기 다르며, 상대우월을 가늠하기 어려운 부분이 크기 때문에, 각자의 니즈에 맞게 사용할 수 있다.

CSS 네이밍 컨벤션 : BEM, Utility-First (Tailwind, Bootstrap)

CSS 관리 방법
- CSS-in-JS 라이브러리를 사용하여 컴포넌트로 묶어 관리: Styled-Component, Emotion
- Utility-First CSS: Tailwind CSS, Bootstrap
- CSS 파일 따로 관리
- SASS 사용
- UI 프레임워크 사용 (비추천): Material UI, Chakra UI, Radix UI

린터

문법 에러나 코드 스타일 규칙에 맞지 않는 코드를 찾아주는 툴로, JavaScript에서는 eslint, prettier가 가장 대표적이다. FE 코드 베이스에서는 가능하면 FE 개발자 간 합의된 코드 스타일링 규칙을 사용해 코드 변화를 최소화하고 가독성 높은 코드를 작성하는 것이 좋다.

선택 항목

HTTP 요청

기본적으로는 Fetch API를 사용하지만, 여러 부가기능이 추가된 라이브러리를 사용할 수도 있다. 어떤 방법을 사용해도 상관 없지만 FE 개발자 간 혼용하지 않고 하나만 사용한다.

Fetch API & isomorphic-fetch

Axios

React Query (TanStack Query)

상태 관리

React의 props-drilling 문제와 상태의 효율적 관리를 위해 다양한 라이브러리가 있다. Flux 패턴을 기반으로 한 대표적인 라이브러리인 Redux가 있고, 이 외에도 이를 위시한 라이브러리 중 필요에 따라 선택해서 사용할 수 있다. 어떤 라이브러리든 상관 없지만 FE 개발자 간 혼용하지 않고 하나만 사용한다.

Redux

Recoil

Zustand

React Context API

Mobx

TypeScript

TypeScript는 JavaScript의 동적 언어 타입에서 오는 문제점을 해결하기 위한 Superset으로, 정적 언어 타입처럼 변수나 함수의 리턴값에 타입을 지정하여 JavaScript를 사용할 수 있게 해준다. 타입과 관련된 에러를 엄밀하게 내주기 때문에 견고한 개발을 돕는다.

번들러

CRA로 React를 개발하게 되면 굳이 다른 번들러를 사용하지 않아도 되지만, 필요에 따라 따로 번들링이 필요하다면 Webpack 등 번들러를 별도로 사용할 수 있다. 어떤 번들러를 써도 상관 없지만 FE 개발자 간 혼용하지 않고 하나만 사용한다.

테스트 프레임워크

테스트 프레임워크 역시 CRA에 Jest와 React Testing Library가 있고, E2E 테스트를 위한 Cypress를 추가 설치하면 React 상에서 필요한 대부분의 테스트가 가능해 별도의 프레임워크를 필요로 하지 않는다.

Uploaded by N2T

티스토리툴바

개발을 위한 프레임워크 세팅