[WEB] 웹 프론트엔드 기초 - 4. 프론트엔드 개발자 로드맵: 모던 프론트엔드 가이드

 

---

2024년에 현대적인 프런트엔드 개발자가 되기 위한 단계별 가이드

 

 

프론트엔드 개발 로드맵

출처 :  https://roadmap.sh/frontend

 

 

 

모던 프론트엔드

• 가장 최신의 프론트엔드 개발 트렌드를 통틀어 지칭하는 용어

https://www.lgcns.com/blog/cns-tech/cloud/48514/

 

1. 개발환경 및 기술 스택 선정

프레임워크

1. React

React는 Facebook에서 개발한 프레임워크입니다. 가장 큰 특징은 가상 DOM을 사용한다는 점인데요, 이를 통해 UI 업데이트가 매우 효율적으로 이루어집니다. React는 컴포넌트 기반으로 설계되어 재사용성과 유지보수성이 높습니다.

 

2. Angular

Angular는 Google에서 개발한 프레임워크입니다. 대규모 애플리케이션 개발에 적합한데, 이는 구조가 체계적이고 강력한 기능을 제공하기 때문입니다. 단, TypeScript라는 프로그래밍 언어를 필수적으로 사용해야 합니다. TypeScript는 JavaScript의 상위 집합으로, 타입 시스템을 제공해 코드의 안정성을 높여줍니다.

 

3. Vue.js

Vue.js는 직관적인 애플리케이션 프로그래밍 인터페이스(API)와 유연한 문법으로 학습이 쉽습니다. 그래서 초보자에게도 적합한 프레임워크입니다. Vue.js는 React와 비슷한 컴포넌트 기반 구조를 가지고 있지만, 더 간단하고 직관적인 API를 제공하여 빠르게 배울 수 있습니다.

 

4. Svelte

Svelte는 다른 프레임워크와는 조금 다른 접근 방식을 취합니다. 컴파일 단계에서 코드를 최적화하여 변환된 JavaScript 코드가 매우 빠르게 실행됩니다. 즉, 변환 단계 없이 경량의 코드를 생성하여 빠른 성능을 제공합니다. Svelte는 런타임 오버헤드가 적어, 빠르고 작은 애플리케이션을 만들기에 적합합니다.

 

5. Next.js

Next.js는 React 기반 프레임워크로, 서버 사이드 렌더링 및 정적 사이트 생성을 지원합니다. 이 두 가지 기능 덕분에 SEO(Search Engine Optimization, 검색 엔진 최적화)와 초기 로딩 속도를 크게 향상시킬 수 있습니다. Next.js는 페이지 기반 라우팅 시스템을 제공해 개발이 더 쉽고, 빠르게 진행될 수 있습니다.

 

 

주요 라이브러리

1. Axios

Axios는 HTTP 클라이언트 라이브러리입니다. 주로 서버와 데이터를 주고받을 때 사용되며, HTTP 요청을 쉽게 만들고, 응답 데이터를 간편하게 처리할 수 있습니다. 비동기 처리를 지원하여, 네트워크 통신을 효율적으로 관리할 수 있습니다.

 

2. Redux

Redux는 애플리케이션의 상태를 중앙에서 관리하는 라이브러리입니다. 상태 업데이트를 예측 가능하게 만들어 코드의 가독성과 유지보수성을 높여줍니다. Redux를 사용하면 컴포넌트 간의 상태 공유가 쉬워지고, 상태 관리가 더 체계적으로 이루어집니다.

 

3. React Router

React Router는 React 애플리케이션에서 라우팅을 처리하는 라이브러리입니다. 다양한 경로 및 URL에 대해 페이지 컴포넌트를 매핑하고, 동적 라우팅을 지원합니다. 이를 통해 SPA(Single Page Application)에서 페이지 전환을 쉽게 구현할 수 있습니다.

 

4. Styled Components

Styled Components는 CSS-in-JS 라이브러리로, JavaScript 코드 내에서 컴포넌트를 스타일링할 수 있게 해줍니다. CSS 코드를 JavaScript 파일에 직접 작성할 수 있어, 컴포넌트별로 스타일을 모듈화하고 관리하기 편리합니다.

 

5. Jest

Jest는 Facebook에서 개발한 JavaScript 테스트 라이브러리입니다. 단위 테스트(Unit Test), 통합 테스트(Integration Test)를 쉽게 작성할 수 있도록 도와줍니다. 다양한 기능과 함께, React 애플리케이션 테스트에 최적화되어 있습니다.

 

6. Chart.js

Chart.js는 직관적인 차트 및 그래프 생성을 위한 JavaScript 라이브러리입니다. 다양한 유형의 차트를 간단하게 만들 수 있으며, 데이터 시각화를 쉽게 구현할 수 있습니다. 사용자 정의 옵션도 풍부해, 다양한 요구에 맞춰 차트를 구성할 수 있습니다.

 

개발 전략

- 웹 표준 기술

- 프레임워크에 대한 이해

- 동기, 비동기 통신 방식

- 반응형 웹

- 디버깅

- 성능 최적화

- 신규 기술 도입

- UI/UX 설계 도구 및 방식

 

 

 

2. UI 설계 방식 - Atomic Design 패턴

https://www.lgcns.com/blog/cns-tech/cloud/46396/

• 재사용 가능한 컴포넌트를 설계하면 개발 과정이 훨씬 효율적이 됩니다. 독립적이고 유연한 컴포넌트를 만들고, 이를 여러 곳에서 재사용하는 것이 핵심입니다. 이렇게 하면 프로젝트의 유지보수성과 생산성이 크게 향상된다.
  • 재사용 가능성: 컴포넌트가 단순하고 독립적인 기능을 수행
  • 확장성: 컴포넌트가 다양한 상황에 대응할 수 있도록 유연하게 설계
  • 공통성: 다른 컴포넌트와 기능이 비슷하다면, 공통된 속성이나 기능을 공유하도록 제작
  • 가독성 및 유지보수성: 컴포넌트의 코드는 읽기 쉽고 유지보수하기 쉽게 작성

 

 

3. 성능 최적화 도구 - 렌더링 개선, 테스트 등

 

4. 협업 도구 사용

• 개발 요건과 기획 시안 등 프로젝트 전반에 관한 자료 관리 - Confluence, Jira, Figma, Zeplin
• 실시간 커뮤니케이션도 Slack, Zoom, Teams

 

5. 아키텍쳐 정의

• 마이크로 프론트엔드(Micro Frontend) : 하나의 웹/앱을 구성하는 여러 모듈을 쪼개 빌드/배포하는 것
• 저장소 모델링 확인

 

---

 

아키텍처 설계 방식

• 고전 아키텍처 : 소프트웨어 시스템을 설계시 전통적인 방법론
• FSD(Feature Sliced Design) : 기능 분할 설계

 

 

고전 아키텍처 특징

• 자유롭게 사용하고 있는 익숙한 방식이다.
• 고전 아키텍처의 경우 기능을 어떤 모듈이나 컴포넌트에 넣을지 명확하지 않은 경우가 있다.
• 다른 모듈 내에서 모듈 사용이 어렵다.
• 글로벌 함수의 암시적 종속성으로 인해 구조가 복잡해진다.

 

FSD 특징

• 아키텍처 표준화
• 아키텍처 구성 요소를 쉽게 교체, 추가, 제거할 수 있다.
• 방법론과 개발 스택이 독립적이다.
• 모듈 간의 연결이 제어되고 명시적이다.
• 비즈니스 지향적이다.
• 다른 아키텍처에 비해 진입장벽이있다.
• 인식, 팀 문화 개념 준수가 필요하다.
• 솔루션 문제 발생시 즉시 해결책을 확인 해야한다.