[프리온보딩코스] 5주차 -과제8

✍알게된 것과 느낀점

• global style로 reset.css 사용하기
• StyeldComponent에 변수 사용하여 애니메이션 주기
• Drag and Drop 사용하기
• ContextAPI + 상태관리의 어려움
• TypeScript와 친해질 수 있을까?

 

🔥그래서 해보는 정리

1. global style로 reset.css 사용하기

src/styles/GlobalStyle.ts 를 생성하여 최상단에서 import한다.

GlobalStyle을 작성할 때에는 아래와같이 import하여 적어야 한다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *  {
    box-sizing: border-box;
  }

// 내용 생략

`;

export default GlobalStyle;

 

 

2. StyeldComponent에 변수 사용하여 애니메이션 주기

옆에서 스윽 나오는 사이드탭을 만들었다!

사이드탭이 열리는 건 할 수 있었는데, 부드럽게 닫히는게 잘 안돼서 질문드렸더니 부모컴포넌트에서 상태 받아오기+삼항연산자로 해결해주셨다. 

const fadeIn = keyframes`
 from {
   transform : translateX(30rem);
 }
 to {
   transform: translateX(0);
 }
`;

const fadeOut = keyframes`
 from {
   transform: translateX(0);
 }
 to {
   transform: translateX(30rem);
 }
`;

const SideTabWrapper = styled.div<{ fade: boolean }>`
  
  //내용 생략
  
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-name: ${({ fade }) => (fade ? fadeIn : fadeOut)};
`;

fadeIn : 사이드탭이 보여지는 효과

fadeOut : 사이드탭이 사라지는 효과

 

 

3. Drag and Drop 사용하기

저번 과제에서 DND 됐으면 좋겠다고 적어냈는데 그게 이렇게 과제로 나올줄이야^^.. 그래서 진짜 해보고싶었는데 우리 조 설계가 복잡해서 예상했던거보다 훨씬훨씬 훨씬 정말 너무많이 어려워서 계속 삽질만 했던 것 같다😭 (이걸 구현해내신 팀원분은 천재가 아닐까)

우선 이렇게 생겼기 때문에 TO DO, On Progress, DONE 이 부분은 전부 한 컴포넌트를 재사용 한 부분이다. (=TodoBoard)

 

1. 그래서 같은 보드(TO DO, On Progress, DONE)일 때에는 state가 유지됐지만 드래그해서 옆 라인으로 이동하게되면 unmount → mount 되는 문제가 있었다. = isDrag(현재 드래그 되고 있는 중인지를 나타냄) 등의 state가 유지되지 않음

2. 또한 onDrop은 요소가 드롭존에 놓여질 때 반응하는데, 마우스가 그 드롭존을 벗어나있는 상태로 놓게되면 onDrop이 호출되지않는 문제도 있었다. 드롭존을 벗어나있는 상태 = 위의 그림처럼 흰 여백 부분(노란색 네모로 표시)에 마우스가 있는 상태로 손을 놓게 되면 onDrop이 적용이 안됨! 

 

1을 해결하기 위해 isDrag를 useState가 아닌 ContextAPI로 관리했다. 드래그가 시작되면 isDrag: true가 되고, 이는 ContextAPI에 저장이 되어있기 때문에 다른 라인으로 넘어가도 상태가 유지된다. 그러다 마우스를 놓아서 onDrop이 호출되면 isDrag: false로 만들어서 드래그 중일 때 나타나는 효과를 적용하지 않는다.

 

2는 드롭존의 영역을 확대했다. (적고보니 너무 간단해서 억울하다!)

onDrop 조건, 드롭존 등등 검색했더니 onDrop이 적합한 곳에 떨어졌을 때 실행된다고 해가지고.. 그래서 그 적합한걸 어떻게 바꿔야 하는데요..🤔했는데 저 여백(노란 네모)을 포함하는 컴포넌트에 onDrop을 설정해주었다! isDrag는 ContextAPI로 관리하고 있으니까! 그냥 가져다가 쓰면 된다! (여기에서 나는 상태관리 짱어렵다고 생각했다) useState와도 이별 할 때가 온 것 같다....

 

 

4. ContextAPI + 상태관리의 어려움

위의 문제로 인해 ContextAPI의 소중함을 깨달았다. (마침 지난주에 리덕스를 배웠는데..)

ContextAPI VS Redux를 짧게 정리해보자면.....

 

ContextAPI (현재 로그인한 유저, 테마, 선호하는 언어 등을 사용하면 좋음)

• 컴포넌트의 재사용이 어려워질 수 있다
• Provider 하위에서 context를 구독하는 모든 컴포넌트는 value prop이 바뀔 때 마다 다시 렌더링 된다 (당연하지!)
• 기본적으로 하나의 context를 구독하도록 설계되어있지만, 여러 context를 구독하기 위해서는 그 값들을 한번에 받는 render prop 컴포넌트를 만들 수 있다

Redux

•  JS 앱을 위한 예측 가능한 컨테이너
• 스토어를 사용하여 상태를 컴포넌트 구조의 바깥에 두고, 스토어를 중간자로 두고 상태를 업데이트 하거나 새로운 상태를 전달 받는다
• Single source of Truth / State is read-only / Changes are made with pure functions 라는 원칙이 있다

 

 

5. TypeScript와 친해질 수 있을까?

타입스크립트와 계속 싸우던 나는 아.. 정말 딱 한대만 쥐어박고싶다.. 라는 생각을 백번정도 한 것 같다.

우릴 힘들게 했던...... 

그동안 JS를 얼마나 막 써왔는지 다시 느꼈고, 타입스크립트는 정말 어렵다. 

그래도 이번 팀과제에서도 세분 다 나보다 잘하는 분들이셔서 다른분이 정의해둔 타입을 많이 볼 수 있어서 좋았다! 잘 모르겠는건 다른분들은 어떻게 했지? 하면서 기웃거리기도 하고, 마지막에 리팩토링할때는 라이브쉐어로 같이 고민도 하고 여러모로 기억에 남는 과제였다.

 

 

🚀과제 후기

5번이 쓰다보니 후기같아져서 급하게 여기에 적기 시작...

사실 아쉬움도 많이 남았다ㅠㅠ DND 해보고싶어서 내가 맡겠다고 했는데 결국 다른 팀원분들이 다 봐주셔서..ㅜㅜ 그래서 이 아쉬움 그냥 남겨둘 수 없다고 판단, 추후 개인 프로젝트에 도입하기로 결정했다(ㅋㅋㅋㅋㅋㅋㅋㅋㅋ) 사실... dnd는 라이브러리 검색하면 천개넘게 나오겠지만.... 뭐.. 그래도 할줄알면 좋으니까...?🤔

그리고 이번 팀 과제 역시 매일 스크럼을 했는데 진행 상황을 자주 공유하니까 확실히 전체적인 그림을 파악하는데는 좋은 것 같았다. 그리고 github의 프로젝트 기능도 사용해봤고, 이번에는 issue관리도 같이 하기로 했는데 정작 내가 크게 활용을 못한 것 같아서 아쉬움이 남는다. (세부적으로 나누지 않고 메인화면... 이라고 툭 올려둠....) 이슈 생성 -> 새 브랜치 생성 -> 작업 -> 푸시 -> PR -> 머지 -> 이슈 닫기 -> 브랜치 삭제 이런 느낌이었는데 자주 못해봐서 아쉬운 느낌..? 그리고 저렇게 하자고 제안해주셨는데 내가 제대로 다 못지켜서 죄송하기도 하고..😭 확실히 혼자 하는거보다 팀플이 어렵지만 배우는것도 많은 것 같다. 이번 팀플은.. 빨리 더 잘해지고 싶다는 생각이 많이 든 과제였다....ㅠㅠ

 

 

 

👀참고(감사합니다)

https://velog.io/@mementomori/React-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-Tool-%EC%82%AC%EC%9A%A9-%EB%B9%84%EA%B5%90-Redux-VS-MobX-VS-Context-API

React 상태 관리 Tool 사용 & 비교 - (Redux VS MobX VS Context API)

 

https://velopert.com/3528

리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i) | VELOPERT.LOG