프론트엔드 아키텍처의 구현 전략

* 회사 기술블로그에 직접 작성한 내용을 발췌.

 

1. 모듈화와 컴포넌트 기반 개발

모듈화와 컴포넌트 기반 개발은 프론트엔드에서 재사용 가능한 코드를 작성하고 유지 보수를 용이하게 하는데 중요한 전략입니다.

1–1. 컴포넌트 기반 프레임워크 사용

React, Vue, Angular와 같은 프레임워크를 활용하여 컴포넌트를 정의하고 재사용합니다.

1–2. Atomic Design 패턴

원자적인 요소부터 시작하여 조합 가능한 구성 요소까지 계층적으로 설계하여 재사용성을 높입니다.

1–3. CSS 방법론 적용

BEM(Block-Element-Modifier), OOCSS(Obejct-Oriented CSS), SMACSS 등의 CSS 방법론을 활용하여 스타일을 모듈화합니다.

- OOCSS : CSS를 모듈 방식으로 작성하여 중복을 줄이는 방식

<사진출처 : https://velog.io/@hahan/CSS%EB%B0%A9%EB%B2%95%EB%A1%A0OOCSS-BEM-SMACSS>

- BEM : 블록(Block), 요소(Element), 상태(Modifier)로 구분하여 클래스 이름을 작성하는 방식

<사진출처 : https://velog.io/@hahan/CSS%EB%B0%A9%EB%B2%95%EB%A1%A0OOCSS-BEM-SMACSS>

- SMACSS : CSS를 범주화로 패턴화하고자 하는 방법론으로 작성할 CSS를 비슷한 종류끼리 모아 5가지 스타일로 나누고 각 유형에 맞는 선택자와 작명법, 코딩 기법을 제시합니다. 기본, 레이아웃, 모듈, 상태, 테마 다섯 가지의 범주를 제시합니다.

① 기본(Base) : Reset, Variable 등을 포함하고 important를 쓰지 않습니다.

<사진출처 : https://velog.io/@hahan/CSS%EB%B0%A9%EB%B2%95%EB%A1%A0OOCSS-BEM-SMACSS>

② 레이아웃(Layout) : 주요 요소(id)와 하위 요소(class)로 구분하고 접두사를 사용합니다.

<사진출처 : https://velog.io/@hahan/CSS%EB%B0%A9%EB%B2%95%EB%A1%A0OOCSS-BEM-SMACSS>

③ 모듈(Module) : 재사용성이 높은 구성 요소를 정의합니다.

<사진출처 : https://velog.io/@hahan/CSS%EB%B0%A9%EB%B2%95%EB%A1%A0OOCSS-BEM-SMACSS>

④ 상태(State) : 요소의 상태 변화를 표현하고 접두사 is 나 s를 사용합니다.

<사진출처 : https://velog.io/@hahan/CSS%EB%B0%A9%EB%B2%95%EB%A1%A0OOCSS-BEM-SMACSS>

⑤ 테마(theme) : 사용자가 선택 가능하도록 스타일을 재선언하여 사용합니다.

<사진출처 : https://velog.io/@hahan/CSS%EB%B0%A9%EB%B2%95%EB%A1%A0OOCSS-BEM-SMACSS>

2. 상태 관리와 데이터의 흐름

프론트엔드 애플리케이션은 사용자의 인터렉션과 데이터 흐름을 효과적으로 관리해야 합니다.

2–1. 상태 관리 라이브러리 사용

Redux, MobX, VueX 등 각 프레임워크에 맞는 상태 관리 라이브러리를 사용하여 애플리케이션의 상태를 중앙에서 관리합니다.

2–2. 단방향 데이터 흐름

Flux, Redux와 같은 단방향 데이터 흐름 패턴을 적용하여 상태 변경을 예측 가능하게 합니다.

2–3. 비동기 데이터 처리

API 호출과 같은 비동기 데이터 처리를 위해 async/await, Promise 등을 사용하여 데이터 흐름을 효과적으로 관리합니다.

3. 성능최적화

성능 최적화는 웹 애플리케이션의 사용성과 사용자 경험을 향상시키는데 핵심적인 요소입니다.

3–1. 번들 최적화

웹 팩과 같은 번들러를 사용하여 코드를 압축하고 불필요한 부분을 제거합니다.

3–2. 이미지 최적화

이미지 사이즈를 최소화하고 WebP와 같은 최신 이미지 포맷을 사용하여 로딩 속도를 향상시킵니다.

3–3. 렌더링 최적화

Virtual DOM과 메모이제이션 기술을 활용하여 불필요한 렌더링을 최소화합니다.

3–3. 코드 스플리팅

페이지마다 번들을 분리하여 초기 로딩 속도를 개선합니다.

<사진출처 : https://crystallize.com/comics/no-code-splitting-vs-code-splitting>

4. 테스트 자동화

프론트엔드 아키텍처를 구현하는 과정에서 테스트 자동화는 필수적입니다.

<사진출처 : https://inpa.tistory.com/entry/JEST-%F0%9F%93%9A-jest-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC>

테스트 자동화를 통해 버그를 미리 발견하고 코드 변경에 따른 영향을 빠르게 확인할 수 있습니다.

예를 들어 Jset과 같은 자바스크립트 테스트 프레임워크를 사용하여 유닛 테스트와 통합 테스트를 자동화할 수 있습니다.

프론트엔드 아키텍처를 구현 전략으로는 소개 드린 내용 이외에도 라우팅, 코드 분할, 크로스 브라우징 등 여러 방법이 존재합니다.

다양한 전략과 방법들을 조합하여 유지 보수가 용이하고 효율적인 프론트엔드 애플리케이션을 개발하는 것이 중요하다고 생각합니다.

감사합니다.

참고사이트

https://yozm.wishket.com/magazine/detail/1531/
https://crystallize.com/comics/no-code-splitting-vs-code-splitting
https://resilient-923.tistory.com/330
https://velog.io/@hahan/CSS%EB%B0%A9%EB%B2%95%EB%A1%A0OOCSS-BEM-SMACSS
https://velog.io/@zzangzzong/React-%EC%A0%84%EC%97%AD-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC
https://learnjs.vlpt.us/async/
https://inpa.tistory.com/entry/JEST-%F0%9F%93%9A-jest-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC