[CS] 폴더구조 및 레이아웃

✅ 데이터 바인딩 (Data Binding)

화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다.

HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 한다.

• 단방향 데이터 바인딩(One-way Data Binding)

  ✌️ 컴포넌트 내에서 '단방향 데이터 바인딩'은 Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미한다.
  [JS(Model) -> HTML(View)]
  
  ✌️ 단방향 데이터 바인딩이기에 역으로 HTML(View)에서 JS(Model)로의 직접적인 데이터 갱신은 불가능하다. '이벤트 함수(onClick, onChange,...)'를 주고 함수를 호출한 뒤 Javascript에서 HTML로 데이터를 변경해야 한다.
  [HTML(View) -> JS(Model)]
  
  ✌️ 컴포넌트 간에서 단방향 데이터 바인딩은 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 구조이다.
  
  ✌️ 대표적으로 SPA Framework에서는 React에서 단방향 데이터 바인딩을 한다.

• 양방향 데이터 바인딩(Two-way Data Binding)

  ✌️ 컴포넌트 내에서 '양방향 데이터 바인딩'은 Javascript(Model)와 HTML(View) 사이에 ViewModel이 존재하여 하나로 묶여서(Binding) 되어서 둘 중 하나만 변경되어도 함께 변경되는 것을 의미한다. [HTML(View) <-> ViewModel <-> Javascript(Model)]
  
  ✌️ 컴포넌트 간에서는 부모 컴포넌트에서 자식 컴포넌트로는 Props를 통해 데이터를 전달하고, 자식 컴포넌트에서 부모 컴포넌트로는 Emit Event를 통해서 데이터를 전달하는 구조이다.
  
  ✌️ 대표적으로 SPA Framework에서는 Vue.js, Angular에서 양방향 데이터 바인딩을 한다.

---

✅ 폴더구조 패턴

• export default와 export

  ✌️ default는 지정한 하나만 export가 가능하다. export된 것은 import qqq from ‘’와 같이 이름을 마음대로 변경하여 사용할 수 있다.
  
  ✌️ export는 여러개를 지정하여 export가 가능하다. export가 된 것은 import {zzz, sss, ddd} from ‘’와 같이 불러올 수 있고, import * as s from ‘’ s.ddd처럼 하 번에 불러와서 사용할 수 있지만, 이름을 default처럼 바꿀 수는 없다.

• 컨테이너(js) / 프리젠테이셔널(html) 패턴

  ✌️ Container : 자바스크립트 로직 부분
  =>BoardWrite.container.js
  
  ✌️ Presenter : Html코드만 있는 부분
  => BoardWrite.presenter.js

• 훅스 패턴

  ✌️ 함수를 여러개 파일로 쪼개어서 사용하는 방법이다. 보통 공통적으로 사용되는 함수를 공통 custome하여 사용하지만, 필요에 따라 함수를 꺼내어 쓸 수 있게 만드는 것이다.
  =>useAuth(), useSearch()와 같은 함수파일 안에는 인증과 검색에 대한 함수가 들어있다.

• 아토믹 패턴

  ✌️ 컴포넌트를 가장 작은 단위로 설정하고 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론이다.
  => input 하나로 된 파일, button 하나로 된 파일 등 하나한를 원자단위로 가장 작게 쪼개어 개발한다.

---

✅ 레이아웃

UI배치를 효율적으로 사용하기 위한 방식으로, 배너 / 헤더 / 푸터 등 공통된 요소들을 배치하고 자주 바뀌는 부분만 갈아끼우는 방식으로 적용된다. 설정 파일을 분리할 때 가장 많이 사용 한다.

• 응용코드

  <ApolloSetting>
    <>
    <Global styles={globalStyles} />
    <Layout>
      <Component {...pageProps} />
    </Layout>
    </>
  </ApolloSetting>

• Layout

        {!isHidden && <LayoutHeader />}
        {!isHidden && <LayoutNavigation />}
        {!isHidden && <LayoutBannerUI />}
        <Wrapper>
          <Component>{props.children}</Component>
          {!isHidden && (
            <BlankBox>
              <FlotiongItem />
            </BlankBox>
          )}
        </Wrapper>
        {!isHidden && <LayoutFooter />}

• 설정파일

      <>
        <ApolloProvider client={client}>{props.children}</ApolloProvider>
      </>

위 코드에서는 ApolloSetting과 Layout에서 props.chlidren(컴포넌트 합성)을 이용하여 넘겨 받은 컴포넌트들을 사용하고 있다.

---

참고자료
Contributor9