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

오늘의 작업

• Header 세부사항 마무리
  • 슬라이드 내부 세세한 디자인 마무리
  • 프로그래스바
    • class101 UI에 있는 프로그래스 바를 사용하려 했으나 0으로 리셋될때 애니메이션이 있어 0초 만에 복귀가 되질 않았다. 결국 div로 커스텀 했다.
      💻커밋보기
• 커스텀 <Grid/> 변경
  • class101 <Grid/>는 너비가 960정도로 실제 class101과 달랐다. 기존 <Grid/>에 css를 줘서 변경하려고 했으나 css가 깨졌다
  • 그래서 커스텀으로 <Grid/>를 만들고 사용했다.
    • 그런데 커스텀으로 만들어도 검색바 쪽 css가 깨진다 ㅡㅡ; 아마 <Input/>컴포넌트와 뭐가 문제가 있는 것 같았다. <Input/>도 <input/>으로 바꿨다
      💻커밋보기
• 반응형 작업
  • react-responsive을 사용했다
    참고링크
• 하단 슬라이드 작업

처리 못한것😅

• 잡다한 버그들...
  • 메인 슬라이드
    • 프로그래스 바가 100% 이상으로 커진다
      • 지금은 overflow:hidden으로 숨겨놓음
    • 네비게이션 버튼을 누르면 auto slide가 꺼진다
    • 태블릿 사이즈와 모바일 사이즈로 이동할 때 슬라이드 타이틀 영역이 % 가 아니라 px이여서 겹친다
• 디자인
  • 섹션
    • 모바일일때 다음 슬라이더가 살짝 보이는 디자인 적용 못함
  • 최하단 슬라이드
    • bullet 네비게이션 디자인 적용 못함
  • 슬라이드 네비게이션
    • 처음에는 prev 안보이고 맨 마지막 슬라이드에서는 next 안보이는것 적용 못함
    • 현재 인덱스 값 표시와 전체 슬라이드 값까지 가져왔는데 그에 따른 show와 hide를 구현하지 못함

오늘의 고민

• 반응형 반응형 반응형
  • react-responsive은 혁명적이였다.
  • isPc isTablet isMobile등 useMediaQuery Hook을 이용하여 손쉽게 브라우저 사이즈 변화에 따른 boolen값을 내려준다.
    💻코드보기
  • 문제점은 props구조
    • 손자 컴포넌트에서 사용할 경우 props로 계속 내려줘야한다.
    • redux와 contaxtAPI를 쓰면 좋을 것 같은데, 마감이 오늘까지고 할게 많아서 적용 하지 않고, 그냥 prop으로 내렸다
  • 부분적인 css적용
    • isPc 값을 사용해서 {isPc? : }삼항연산으로 쓰는건 알겠다. 하지만 emotion의 css={css``} 내부에서는 사용하지 못한다.
      💻코드보기
    • 일단은 급하니까.. 전체 태그를 삼항연산 하거나, 컴포넌트를 <MainSliderPC/>,<MainSliderTablet/>,<MainSliderMobile/>으로 3가지로 만든 후 각각 {isPc && <MainSliderPC/>}으로 연산해버렸다
      💻코드보기
    • 아마 더 깔끔하고 똑똑한 방법이 있을 것 같다. 찾아봐야지

오늘의 커밋

질문 목록

• TypeScript
  • 부분부분 <any>의 향연...!
  • 지금은 급하고 바빠서 대충했다고 하지만 나중에는 안된다 공부해서 바꾸자
• 효과적인 리액트 반응형 작업 방식
  • react-responsive의 값을 어떻게 사용하는가
    • 보관 측면
      • redux? contextAPI?
    • 사용 측면
      • 컴포넌트를 모바일,태블릿, 피씨 3종류로 만들어야 하는것인지?
      • css만 객체로 만들어서 연산하여 내려주면 되는지?
• 파일 정리 방식
  • A컴포넌트를 만들기 위한 a,b,c 컴포넌트가 있을때 파일 트리 구조는 어떻게 만들어야 하는지?
    • 지금은 폴더 A에 A,a,b,c를 한번에 넣어놓았다. 효율적인 방법을 찾아보자
• 효율적인 setIntervel 관리
  • useMemo와 useCallback 그리고 clearIntervel의 관계를 알아봐야 겠다.
• 반응형을 위한 css 공부
  • 적응형이 아닌 반응형을 위한 %단위와 고정값과 나머지를 채우는 레이아웃에 대한 공부가 필요하다.
  • position: absolute의 남용.. 괜찮은지 확인해보기

챌린지 후기

드디어 드디어 끝났다!

간단할 것이라고 생각하고 시작한건 아니었지만, 생각보다 할게 많았다.
그래도 그동안 공부한 리액트 지식들이 쓸모없는 것은 아니였구나 라는 뿌듯함도 들었고,
아직 모르는 것이 많다는 위기감도 느꼈다.
확실히 실습을 해야 내가 어떤부분이 약한지 잘 알 수 있는 것 같다.

---

Typescript

특히 타입스크립트를 강제로 체험해본게 큰 경험이었다. 자꾸 에러를 뱉으니까 '이론 조금만 더 공부하고적용해야지 ㅎ..' 하고 생각하며 미루기 바빴는데 어떡하나 써서 제출하라는데.. 계란에 바위치기 격으로 도전하니까 어떻게 되긴 더라

CI 맛보기? vercel

vercel도 신기했다. 그냥 호스팅이 아니고 빌드 전 깃을 연결하면 빌드해서 서비스 해주다니?
덕분에 회사에서 '깃 푸시하면 자동 CI되니까 깃 올리시면 되고, master에 병합되면 자동으로 서비스되니까 브랜치 따서 작업하세요' 라는 말을 알아들을 수 있었다!
미리 공부하고 경험한것이 빛을 보는 순간.. 이럴때가 묵묵히 공부한 보람을 느낀다 😂

리액트 반응형

그동안은 리액트 기초적인 작동 방식이나 훅, 리덕스 등을 익히기 바빠서 중요한걸 놓치고 있었다. 바로 반응형... 그동안은 css 미디어 쿼리를 사용했으나 emotion을 사용하는 환경에서는 어떻게 하는지 생각을 해보지 않았다.
다행히 똑똑한 개발자들이 react-responsive을 미리 개발해 주셔서.. 편하게 작업했다

---

일단 제출하고.. 조금 쉬어야겠다 😋
탑 10%에 들어서 꼭 코드리뷰를 받고 싶다..
열심히 했어요..