Entity와 Repository는 개발에서 많이 사용되는 개념이다. Entity는 도메인 모델의 구성 요소로, 하나 이상의 속성을 가지며 유일하게 구분될 수 있는 식별자를 가지고 있다. Repository는 DB나 File system과 같은 저장소에 접근하는 객체이다. Repository는 Entity를 생성, 읽기, 수정, 삭제(CRUD)하는 데 사용된다.

 

예를 들어, 블로그 게시물을 저장하는 웹 애플리케이션을 만든다고 가정해보자. 이 애플리케이션에서는 게시물을 생성, 읽기, 수정, 삭제해야 한다. 게시물을 저장하는 DB가 있다면, Entity는 게시물을 나타내고 Repository는 DB에 접근하는 객체를 나타낸다. 여기서 Entity는 게시물의 속성을 가지고 있다. 예를 들어, 게시물의 제목, 내용, 작성자, 작성일 등이 게시물의 속성이 될 수 있다. 게시물의 식별자는 유일한 값을 가지며, 이를 통해 다른 게시물과 구분할 수 있다.

 

Repository는 DB와 같은 저장소에 접근하는 '객체'이다. 예를 들어, MySQL DB에 게시물을 조회하는 경우 Repository는 MySQL DB에 접근하여 데이터를 조회하고 변경하는 역할을 한다. Repository는 다음과 같은 인터페이스를 제공한다.

 

interface PostRepository {
    create(post: Post): Promise<Post>;
    findById(id: number): Promise<Post | null>;
    findAll(): Promise<Post[]>;
    update(post: Post): Promise<Post>;
    delete(id: number): Promise<boolean>;
}

위 인터페이스는 게시물을 생성, 조회, 수정, 삭제하는 메서드를 정의한다. create 메서드는 게시물을 생성하고, findById 메서드는 주어진 ID에 해당하는 게시물을 조회한다. findAll 메서드는 모든 게시물을 조회한다. update 메서드는 주어진 게시물을 수정하고, delete 메서드는 주어진 ID에 해당하는 게시물을 삭제한다.

이러한 Entity와 Repository 패턴은 도메인 모델과 데이터 액세스 로직을 분리하고, 단일 책임 원칙(Single Responsibility Principle)을 따르기 위해 사용된다. 이를 통해 코드의 가독성, 유지보수성, 확장성을 향상할 수 있다.

 

보통 프론트엔드에서는 Entity와 Repository 패턴을 직접적으로 적용하기보다는, Redux와 같은 상태관리 라이브러리를 사용해 상태를 관리한다. 하지만, 비즈니스 로직을 분리하고, 코드를 유지보수 가능한 상태로 유지하기 위해 Entity와 Repository를 적용할 수 있다. 예를 들어, 게시물을 생성하고 조회하는 간단한 React 애플리케이션을 만든다고 해보자. 이 애플리케이션에는 게시물을 생성, 목록 조회하는 기능을 제공한다.

 

먼저, Entity를 정의해 보자. 이 애플리케이션에서는 게시물이라는 모델이 필요하므로, 다음과 같은 'Post' 모델을 만들 수 있다.

interface Post {
  id: number;
  title: string;
  content: string;
  author: string;
  createdAt: Date;
}

 

다음으로 Repository를 정의해보자. 이 애플리케이션에서는 게시물 목록을 관리하기 위해 ‘PostRepository’를 만들어보자.

interface PostRepository {
  create(post: Post): Promise<Post>;
  findAll(): Promise<Post[]>;
}

여기서 ‘create’ 메서드는 새로운 게시물을 생성하고, ‘findAll’ 메서드는 모든 게시물을 조회하는 역할을 한다. 이 Repository를 구현하기 위해서는, 서버 API와 통신을 처리하는 클라이언트 코드를 작성해야 한다.

 

class ApiPostRepository implements PostRepository {
  async create(post: Post): Promise<Post> {
    const response = await fetch('/api/posts', {
      method: 'POST',
      body: JSON.stringify(post),
      headers: {
        'Content-Type': 'application/json',
      },
    });
    return response.json();
  }

  async findAll(): Promise<Post[]> {
    const response = await fetch('/api/posts');
    return response.json();
  }
}

 

ApiPostRepository 클래스는 HTTP API를 통해 게시물을 생성하고, 조회하는 역할을 수행한다. 이 클래스를 사용하여 게시물을 생성하고, 조회하는 React 컴포넌트를 작성할 수 있다. 간단한 예시 코드이다.

 

function PostList() {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    const repository = new ApiPostRepository();
    repository.findAll().then(setPosts);
  }, []);

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
          <p>By {post.author} on {post.createdAt.toISOString()}</p>
        </div>
      ))}
    </div>
  );
}

function PostForm() {
  const [post, setPost] = useState
	//..

 

반응형

'개발지식' 카테고리의 다른 글

Singleton Pattern 개념 익히기  (0) 2023.04.06
[WEB] 쿠키(Cookie)와 세션(Session) 개념 익히기  (0) 2020.12.08

patch-package

서드파티 라이브러리를 커스텀한 상태가 배포상태에서도 지속되도록 관리해주는 패키지.

즉, node_modules에 수정한 사항이 git으로 관리되고 어떠한 실행 환경에서도 적용되도록 한다.

patch-package를 사용할 시 매번 버전이 달라질 때마다 patch 파일의 버전을 인스톨 되어 있는 버전과 맞춰줘야 하는 단점이 있다.

 

1. 설치

npm install —save-dev patch-package

 

2. 설정

// package.json

"scripts": {
	"postinstall": "patch-package", // 해당 스크립트 추가
},

 

 

3. 변경하고자 하는 패키지 코드 수정

패키지 코드를 원하는대로 수정한다.

 

 

4. patch 적용

npx patch-package [변경한 패키지 이름]

 

5. “patches”라는 폴더가 생기고, 폴더 안에 변경한 패치 내용이 저장되어 있음을 확인

 

 

6. node_moduels 을 지웠다가 npm install 해보면 자동으로 패치내용들이 적용되어 있음

 

주의) 수정한 패키지의 patches 버전과 package.json의 패키지 버전이 다르면 에러를 유발하니 버전 체크하는 것이 중요!

반응형

서론

우선 리액트 공식 문서에서 리액트를 '사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리'로 소개하고 있다. SPA(Single Page Application)형태로 하나의 페이지에서 보여지는 컴포넌트 조합을 동적으로 바꿔가며 화면을 표현하는 형태다. Virtual DOM이라는 개념을 사용해 이러한 SPA를 구현하고 있다. 장, 단점이 존재하지만 자세한 내용은 나중에 다루도록 하겠다.

 

React 특징

1. Component 구조

2. JSX

3. Data Flow

4. Virtual DOM

 

 

1. Component

"컴포넌트"라고 불리는 작고 고립된 부품을 이용해 복잡한 UI를 구성하도록 해주는 것이 리액트이다. 컴포넌트에는 몇 가지 종류가 있다. 크게 2가지로 나누자면 '함수형 컴포넌트', '클래스형 컴포넌트'가 있다. 우선 클래스형 컴포넌트는 다음과 같은 구조를 가지고 있다. 아래에 간단한 예시를 작성해봤다.

class MyClassComponent extends React.Component {
    render() {
    	return(
            <div className="my-component">
            	<h1>Hello World!</h1>
                <ul>
                    <li>React!</li>
                    <li>React Native</li>
                </ul>
            </div>
        );
    }
}

이러한 컴포넌트는 재사용 가능하고 여러 컴포넌트들을 조합해 다양한 형태의 UI를 쉽게 만들 수 있다. 불필요한 반복적 코드를 줄이고 빠르게 UI를 구성할 수 있어 개발 생산성에 있어 장점을 가진다. 또한 작은 형태의 컴포넌트는 테스트하기 용이해 코드를 유지보수하기에도 도움이 된다. 아래에 여러 작은 컴포넌트를 조합한 예시 코드가 있다.

class App extends Component {
  render() {
    return (
      <Layout>
        <Header />
        <Navigation />
        <Content>
          <Sidebar></Sidebar>
          <Router />
        </Content>
        <Footer></Footer>
      </Layout>
    );
  }
}

 

 

2. JSX

리액트에서는 HTML의 태그 문법과 비슷한 형태로 ui 화면을 표현하고 있다. HTML과 비슷하지만 HTML과는 다르다. 리액트에서는 JSX라 하는 JavaScript를 확장한 문법을 사용한다. 간단하게 JavaScript이지만 화면을 표시하기 위해서 조금 더 확장된 개념이라고 보면 된다. 

JSX란?
Javascript를 확장한 문법입니다.

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

출처: React 공식문서

 

 

3. Data Flow - 단방향 데이터 바인딩

단방향 데이터 바인딩은 간단히 말해 데이터의 흐름이 한 방향으로만 이뤄진다. 부모 요소에서 자식 요소로 전달이 되고 적절한 Event를 통해 데이터를 갱신하게 된다. 양방향 바인딩은 앱의 규모가 커질수록 추적하기 어려워지고 그에 따라 복잡해지게 된다. 이런 단점을 보완해 데이터 흐름을 보다 예측 가능하도록 하고자 리액트에서 단방향 형태로 바인딩을 하도록 했다고 한다. 단방향, 양방향 각각 장, 단점이 존재하기에 사용하는 프레임워크나 라이브러리에 따라 사용되는 데이터 바인딩 형태도 다 다르다. 조금 더 깊은 내용은 검색을 하면 많이 나오니 참고하면 될 것 같다.

 

 

4. Virtual DOM

브라우저는 화면을 그리기 위해서 DOM(Document Object Model)이라는 개념을 사용한다. DOM은 HTML 파일 내용을 토대로 만들어지는데, JavaScript와 같은 스크립팅 언어로 수정할 수 있도록 만들어진, 웹 페이지의 객체 지향 표현이다. DOM은 브라우저가 화면을 그리기 위해서 필요한 정보가 트리 형태로 저장된 데이터다. DOM에 변화가 생기면 렌더 트리를 재생성하고 레이아웃을 만들고 다시 보여주는 과정이 반복된다. DOM 트리가 재생성되는 과정에서 모든 요소들이 다시 계산되고 많은 연산을 반복하게 되면서 비효율적이게 된다. React에서는 이런 불필요하고 비효율적인 방식을 개선하고자 Virtual DOM이라는 개념을 도입했다.

React에서 Virtual DOM은 UI의 이상적인 또는 가상의 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍적 개념이다. 뷰에서 변화가 생기면 실제 DOM에 적용되기 전 가상 DOM에서 먼저 적용이 되고 비교를 통해 최종적 결과가 실제 DOM으로 전달이 된다. 이런 DOM 관리 과정을 리액트 내에서 자동화, 추상화를 통해 불필요한 연산 비용을 줄이고 성능을 높이도록 해준다.

 

참고자료: 리액트 공식문서 - Virtual DOM

 

반응형

+ Recent posts