[React] 디자인시스템 FOCUS 챌린지 - day1

Gray Sheep·2022년 1월 10일

[챌린지] React 디자인시스템 FOCUS - Numble

목록 보기

2/7

[React] 디자인시스템 FOCUS 챌린지 - Numble

7일부터 넘블 프로젝트가 시작됬다.
오늘부터 시작

이전에 next.js로 class101 디자인 컴포넌트를 설치했었으나, 새로 열린 챌린지 가이드 라인 페이지에는 따로 next.js언급이 없어 그냥 리액트로 진행하기로 했다.
(next.js가 버그가 많아 ㅠ 기간을 못맞출까봐 걱정된 부분이 크다)

오늘 할 일은 class101 디자인 컴포넌트 설치, 타입스크립트 설치 정도 해보려고 한다

기본 구성

git

github 레포지토리를 만들었다
https://github.com/ezh29/study_numble_class101
레포지토리는 개인 계정이고, 회사에서 작업한건 회사 계정으로 푸시해야해서 레포지토리에 회사계정을 추가했다.
(아직 윈도우에 등록된 깃 계정을 왔다갔다 하는건 미흡하다 ㅠ 회사 깃허브에까지 꼬이느니 그냥 내 개인 프로젝트에 회사계정을 추가할래 ㅠㅠ..)

react + typescript

npx create-react-app . --template typescript
기존 리액트 프로젝트에서 typescript를 적용하면 조금 까다롭다고 한다.
어차피 처음부터 만드는 프로젝트이니까 typescript trmplate으로 설치했다.

class101 UI

npm install @class101/ui
설치 후 테스트로 button 넣고 npm start해보니 잘 뜬다
(next.js랑은 다르게 오류가 안난다...)

json-server

넘블 측에서 데이터를 json으로 주었다.
파일로 진행할까 하다가 그래도 실무처럼 하고싶어서
json-server로 구성하기로 했다.
(카우치코딩 팀플에서 배운게 이렇게 쓰이네..)

파일트리 최상단에 data.json으로 json파일을 다 몰아넣었고

{
  "top_event":[...
  ],
  "bottom_event":[...
  ],
  "time_deal":[...
  ],
  "md_recommend":[...
  ],
  "open_soon":[...
  ],
  "popular_event":[...
  ],
}

임시로 app.js에서 불러와서 컴포넌트 만들기 시작했다

async function getData() {
  const res = await axios.get("http://localhost:4000/time_deal");
  setPostData(res.data);
}
console.log(postData);

emotion

컴포넌트들의 css 관리를 위해 emotion을 적용했다

오늘의 작업

json-server로 time_deal부분을 작업했다
- <Grid>,<Row>,<Section>,<GridList>를 사용했다
- 그런데 101사이트와 컨테이너 너비가 다르다 --; 추후 수정해야겠다
Typescript!!!
- 처음써보는 Typescript라 초반에 오류의 연속이였다. 어떻게 프롭스를 interface로 설정하여 받아내는 것까지는 하였다. 하지만 useState<any[]>([]); ...any... 말로만 듣던 애니빌런이 쓰였다. 추후 고칠 수 있다면 고쳐야겠다.
- https://ddeck.tistory.com/56 참고하였다
세로 비율을 맞추면서 이미지를 꽉 체우는 것을 연구했다.
- 구글링 해보니 height:0; padding-botton:**%으로 세로 비율을 맞추는 방법이 있었다.
  - https://velog.io/@seochanh/newbie-00010
- 클래스101을 뜯어보니 padding-top으로 했을 뿐 같은 방식이였다
  - img를 감싼 div
    - padding-top: 75%; height:0;overflow: hidden;
  - img
    - top: 0px;left: 0px;width: 100%;height: 100%;position: absolute;

오늘의 고민

아이콘 사용시 몇개만 사용한다면 svg 파일로 다운받아서 그것만 사용하는것이 나을지,, 아니면 react-icon같은 라이브러리를 받아써도 무관한지 궁금했다
- 미래애서 온 해답 class101내부에 icon도 있었다
컴포넌트를 어디까지 쪼개야 하는지, 파일 구조는 어떻게 짜야하는지 생각을 많이 했다.
- 결국 컴포넌트 파일명안에 컴포넌트와 컴포넌트를 구성하는 컴포넌트를 다 몰아넣었다.
  - 미래에서 온 해답 컴포넌트는 쪼갤수 있는만큼은 쪼개는게 좋은 것 같다