도대체 계층분리는 무엇이며 비즈니스로직과 뷰는 무엇인가 ?
프론트엔드에서 계층 분리는 소프트웨어 아키텍처에서 매우 중요한 개념 중 하나입니다. 계층 분리는 애플리케이션을 여러 개의 계층으로 분할하는 것을 의미입니다. 각 계층은 특정 역할을 수행하며 다른 계층과 분리되어 있습니다.
보통 프론트엔드에서는 다음과 같은 세 가지 계층으로 나눕니다.
표현 계층(View Layer): 사용자와 상호작용할 수 있는 인터페이스를 제공하는 계층입니다. 이 계층은 사용자와 직접적으로 상호작용하는 모든 요소를 포함합니다. 예를 들어, HTML, CSS, JavaScript, UI 라이브러리 등이 있습니다.
비즈니스 계층(Business Layer): 비즈니스 로직을 구현하는 계층입니다. 이 계층은 애플리케이션의 핵심 로직과 데이터 처리를 담당합니다. 이 계층에서는 데이터를 검증하고 유효성을 확인하는 등의 작업이 이루어집니다.
데이터 접근 계층(Data Access Layer): 데이터베이스나 서버와 같은 외부 데이터 소스와의 상호작용을 처리하는 계층입니다. 이 계층에서는 데이터를 저장, 검색, 수정, 삭제하는 작업이 이루어집니다.
비즈니스 로직이란, 애플리케이션의 핵심 로직이나 규칙을 의미합니다. 예를 들어, 로그인 기능, 회원가입 기능, 상품 주문 기능 등이 있습니다. 이러한 비즈니스 로직은 사용자 인터페이스나 데이터베이스와는 독립적으로 작성되며, 비즈니스 계층에서 처리됩니다.
반면, 뷰(View)는 사용자 인터페이스(UI)를 구성하는 요소들로 이루어져 있습니다. 예를 들어, HTML, CSS, JavaScript 등의 코드로 이루어진 사용자 인터페이스 요소들이 뷰에 해당합니다. 뷰는 사용자에게 정보를 제공하고 사용자의 입력을 받아들이는 역할을 수행합니다.
따라서, 비즈니스 로직과 뷰는 서로 다른 역할을 수행하며 분리되어야 합니다. 이를 통해 코드의 재사용성과 유지보수성이 향상되고, 개발자가 각각의 계층을 독립적으로 개발하고 테스트할 수 있습니다.
도무지 글로 설명하면 잘 이해가 안간다.
그렇다면 로그인 기능을 예시로 들어보자!!
로그인 기능 계층분리 React 예시 코드 !!
- 데이터 계층
- 데이터 계층은 API 호출과 데이터 처리를 담당합니다.
- 이 예시에서는 axios 라이브러리를 사용하여 API를 호출합니다.
import axios from 'axios';
const API_URL = 'http://localhost:3000';
export const login = async (username, password) => {
const response = await axios.post(`${API_URL}/login`, {
username,
password,
});
return response.data;
};- 비즈니스 계층
- 비즈니스 계층은 데이터를 가공하여 필요한 정보를 제공합니다.
- 이 예시에서는 데이터 계층에서 받아온 데이터를 가공하지 않고 그대로 반환합니다.
import { login } from './data';
export const loginUser = async (username, password) => {
const response = await login(username, password);
return response;
};- 프레젠테이션 계층
- 프레젠테이션 계층은 사용자 인터페이스를 담당합니다.
- 이 예시에서는 React 함수형 컴포넌트를 사용하여 UI를 구현합니다.
import { useState } from 'react';
import { loginUser } from './business';
const LoginForm = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const handleLogin = async () => {
try {
const response = await loginUser(username, password);
console.log('Logged in!', response);
// 로그인 성공시 처리
} catch (err) {
console.error('Login failed!', err);
setError('Invalid username or password');
}
};
return (
<div>
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
<button onClick={handleLogin}>Login</button>
{error && <p>{error}</p>}
</div>
);
};위 코드는 단순한 예시이며 실제 프로젝트에서는 조금 더 복잡한 구조와 추가 기능이 필요할 수 있습니다.
그럼 계층 분리를 하는 궁극적인 이유가 무엇일까 ??
계층분리를 하는 궁극적인 이유
코드의 재사용성과 가독성을 높여준다.
일단 제 경험을 빗대어 얘기 하자면 저는 부트캠프를 통한 몇번의 프로젝트를 거치면서 그 이유를 몸소 느낄 수 있었습니다.
맨 처음 2주짜리 단기 프로젝트를 진행 했을 때는 리액트의 순 기능만 배우고 바로 프로젝트를 진행해서 계층을 분리하지 않고 모든 로직들이 한 컴포넌트 안에 들어 있었습니다.
이때 불편했던 점은 에러가 뜨거나 기능을 수정하려고 코드를 고치려고 하면 한컴포넌트안에 로직들이 많으니까 코드를 수정하는데 시간을 너무 많이 잡아먹어서 불편하다 ? 라고 느끼고 다른점은 딱히 불편하지 않았습니다.
근데 두번째 프로젝트를 진행하면서 왜 계층분리를 해야되는지 느낌이 슬슬 오기 시작했습니다.
예를 들어 로그인 기능을 구현하려 할때, 저번에 구현했던 기능인데 다시 구현 하기 시간이 너무 아깝다는 생각이 들어 첫번째 프로젝트 때 짰던 코드를 봤는데 한 컴포넌트에 모든 로직이 들어있어 코드의 재사용성이 매우 떨어졌습니다.
계층 분리를 하지 않으면, 데이터와 로직이 한데 섞여 있어서 코드를 다시 사용하려면 전체 코드를 복사해와서 로직을 수정해야 합니다. 이는 코드의 중복을 유발하고, 유지보수성을 떨어뜨립니다.
또한, 계층 분리를 하지 않으면 시스템이 복잡해질수록 코드의 가독성이 떨어지게 됩니다. 계층 분리를 하면 각 계층에서 수행하는 역할과 책임이 명확해지기 때문에, 코드를 쉽게 이해할 수 있게 됩니다.
따라서, 계층 분리는 코드의 재사용성과 가독성을 높이는데 큰 도움을 주는 중요한 요소입니다.
2. 유지보수와 확정성을 높이기 위함이다.
각 계층은 자신이 담당하는 역할과 책임이 명확하게 정의되어 있기 때문에, 해당 계층에서 변경이 필요한 경우 다른 계층에 영향을 미치지 않습니다.
예를 들어, 데이터베이스 구조가 변경되어도 데이터베이스 계층만 수정하면 되고, UI 디자인이 변경되어도 UI 계층만 수정하면 됩니다. 이는 시스템의 유지보수성을 높이고, 개발자들의 작업 효율을 높일 수 있습니다.
또한, 각 계층이 명확히 분리되어 있으면, 특정 계층에서 발생한 문제가 다른 계층으로 전파되는 것을 막을 수 있습니다. 이는 시스템의 안정성을 높이고, 디버깅을 쉽게 만들어 줍니다.
또한, 계층 분리는 시스템의 확장성을 높이는데 도움을 줍니다. 각 계층은 독립적으로 확장이 가능하기 때문에, 시스템의 규모가 커져도 확장하기 쉽습니다. 예를 들어, 데이터베이스의 처리량이 늘어날 경우, 데이터베이스 계층만 확장하면 됩니다. 이는 시스템의 성능을 높이는데 큰 도움이 됩니다.
마무리
오늘은 이렇게 계층분리가 무엇인지 알아보았고 또 이해하기 쉽게 예시코드를 작성해보았습니다 . 마지막으로는 계층분리를 하는 궁극적인 이유도 설명해보면서 정리해보았습니다. 꼬리에 꼬리를 무는 질문 공부법이 취준하고 있는 저의 입장에서는 정말 도움이 되는것같고 , 머릿속에만 있던 개념들을 공부하면서 정리하니까 이제 뭔가 정리가 되는 느낌입니다. 앞으로 꾸준히 꼬리에 꼬리를 무는 질문법 공부를 포스팅해보겠습니다!
