TIL[6일차].폴더구조 패턴, Typescript, 규칙과 협업

남예지·2022년 11월 7일
0

TIL

목록 보기
2/47


이번주는 이렇게 파일을 구조적으로 분리하고 데이터를 주고받으며, 규칙을 정해 협업하는 방법을 알아봅니다.

어제 밤을 세니 아침부터 잠이 쏟아지지만 카페인의 힘을 빌려봅니다... 화이팅!!
우선 포트폴리오 리뷰부터~
boards 목록보기
boards/:id
boards/new
boards/:id/edit
restful한 폴더 구조 방식

규칙을 가지고 효율적이다 하는 것들은 다 유지보수를 더 좋게 할 것인가가 가장 초점입니다.
그렇게 해야 빨리빨리 고칠수 있고, 휴가를 가더라도 다른사람이 고져줄 수도 있겠죠.

앞으로 폴더는 이렇게 restFul 하게, 알아보기 쉽게 만들기로 하자

날짜바꾸기 해보자요

이 new Date()안에 getFullYear, getMonth(), getDate()를 getMonth는 1년을 더해주어야 원래 달이 나온다.

요기 3개를 더해서 화면에 보여주면 됩니다.

오늘은 1, 2번을 배웁니다.

Container / Presenter 구조

자바스크립트 부분을 컨테이너, html부분을 프리센터 파일로 나누자!
파일은 두개로 나누었지만 하나로 합쳐줘야한다.
두개가 한개로 합쳐지려면 프레센터가 컨테이너로 import 되어야 한다.
함수 호출과 동일하게 생각하면 된다.
실제 수행은 컨테이너에서 합쳐져 실행됨

이때 사용하는 용어에 부모 컴포넌트, 자식 컴포넌트가 있다.

부모 컴포넌트와 자식 컴포넌트

→ import되어 불려가는 컴포넌트를 자식 컴포넌트라고 합니다.
반면 import하여 불러오는 컴포넌트를 부모 컴포넌트라고 합니다. 자식컴포넌트는 부모 컴포넌트 안에 포함되는 구조 입니다.
브라우저에서 화면으로 확인할 수 있는 건 부모입니다. 자식 컴포넌터는 부모 안에 들어가는 것. (이 구조가 중요. 나중에 자식 안에 자식이 들어가는 구조도 나옴)
컴포넌트는 연결했지만 파일을 나누면서 분리된 함수나 변수는 어떻게 이어줄까.
이걸 연결시켜주는게 Props라고 합니다.

Props

: 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수 / 함수
우리가 작성한 함수는 키벨류형태로 저장하게되면 부모 컴포넌트가 props를 물려줄때는 객체로 묶어서 넘기게 됩니다.
qqq={handleCahngeWriter}qqq는 키가 되고 handleCahngeWriter은 벨류가 됩니다. 그래서 props.qqq라고 꺼내면 됩니다.

부모가 자식에게 넘겨주는건 ok. 그럼 자식이 부모에게 넘겨주는건 안되나?
정답은 안된다 입니다.
이걸 '단방향'이라고 합니다.
앵큘러는 양방향도 가능합니다.
각자 장.단점이 있습니다.


폴더구조실습

나중에는 페이지에 컴포넌트를 잘게 쪼게놓고 하나의 페이지로 만들예정
재사용이 가능할 수 있다.
2개 이상 사용되는 컴포넌트들을 위해 폴더 안에다 공통컴포넌트 파일을 만들어 한번 쓰이는 것과 분리해준다.
폴더 안에 여러가지로 분리해서 만들 수 있다.
컴포넌트 폴더는 대문자로 시작한다.

함수 안쪽 리턴 전까지 컨테이너에
리턴 안쪽은 프레센트에 저장한다.

컴포넌트 3개를 만들었다면 함수형 컴포넌트로 원본을 만들어준다.
대신 컴포넌트는 이름이 같으면 안된다.
부모 컴포넌트 리턴자리에 자식 컴포넌트를 임포트 해준다.
그리고 함수를 쓸수 있게끔 연결시켜준다.

  return (
    <BoardWriteUI
      aaa={onClickSubmit}
      bbb={onChangeWriter}
      ccc={onChangeTitle}
      ddd={onChangeContents}
    />
  );

컨테이너 컴포넌트에 리턴에는 다음과 같이 적는다.

export default function BoardWriteUI(props) {
  return (
    <div>
      작성자: <input type="text" onChange={props.bbb} />
      제목: <input type="text" onChange={props.ccc} />
      내용: <input type="text" onChange={props.ddd} />
      <button onClick={props.aaa}>GRAPHQL-API(동기) 요청하기</button>
    </div>
  );
}

그리고 props! 로 이어준다.

app.js는 최고부모가 된다.
접속하면 자식요소가 부모가 합쳐진다.

각 컴포넌트 안에서도 다 작성 가능하지만 기능을 구분해 놓은것 뿐이다.
주소를 입력하면 app 컴포넌트를 최종적으로 본다.

다 같은 컴포넌트일뿐 . 페이지에는 설정을 하기로 함
이유는 유지보수를 쉽게 하기 위해서!


graphql도 분리할 수 있다.

더 효율적인 폴더 구조

graphql도 분리하고 이모션도 분리하면 좋겠다!
query 파일을 만들어 관리하면 query보냈어 하면 mutation일수도 query일수도 있다.
이렇게 나누면 문제를 보고 고칠 파일을 파악하기 쉽기때문에 시간도 단축되고 효율적이다.

export vs export default

파일을 import하는 방식에 차이
우리가 export라고 내보내준게 있고 export default로 내보낸게 있다.
export는 내가 뽑아서 쓸 수가 있다. (이모션 등)
이런건 중괄호로 감싸져 가져오기 이다.

중괄호의 사용 여부는 export를 하냐 export default를 하느냐에 따라 결정된다.

import { 나의그래프큐엘셋팅 } from "./BoardWrite.queries"; // export 가져오기
// import BoardWriteUI from "./BoardWrite.presenter";                  // export default가져오기
// import changeNameYes from "./BoardWrite.presenter";                 // export default 이름 바꿔서 가져오기
// import BoardWriteUI, { 나의그래프큐엘셋팅 } from "./BoardWrite.presenter"; // export default와 export 함께 가져오기
import { useMutation } from "@apollo/client";
import { useState } from "react";
// import * as s from './BoardWrite.styles'   /// export 한방에 다 가져오기
// s.BlueButton                               /// export 한방에 다 가져오기
// s.RedInput                                 /// export 한방에 다 가져오기
//사용시 <s.blueButton> 이렇게 사용

atomic 패턴

atomic 패턴이란, 소스코드를 아주 작은 컴포넌트 단위로 먼저 쪼개는 방법을 의미합니다.

이렇게 하는 이유는 컴포넌트의 중복을 최소화하기 위함입니다.

총 5개의 폴더 구조로 이루어지며, 각각의 의미는 화학의 원리를 이용하여 만듭니다.

오늘은 컴포넌트를 실무적으로 바꿔보는 수업을 했습니다.
클론코딩은 보통 네이버나 쿠팡 등 사이트를 복제하듯 만드는데
오해하는 부분이 껍데기는 같을 수 있지만 내부 로직은 완전히 다르다.
회사에서는 세분화해서 누구나 쉽게 고칠수 있게 한다.
동작하는 설계는 완전히 다르다.
그래서 네이밍 룰도 지키면서 항상 유지보수를 어떻게 쉽게 할 수 있는가 를 생각해야한다.

profile
총총

0개의 댓글