지수의 블로그

3 분 소요

Course

Wanted Pre Onboarding FE Course

발표

디에이그라운드 과제 발표

간단한 서비스 소개

구현 과제 소개

이번에 저희는 디에이그라운드 샌드뱅크 과제를 수행했습니다.

실제 샌드뱅크 모바일 앱의 인포탭에 있는 기능을 전반적으로 구현하는 과제였습니다.

상세 기능

기능을 말씀드리자면,

3개의 탭과 그 컨텐츠를 디스플레이하는 과제입니다.

각 탭에는 메인과 리스트 요소 클릭 시 디테일 페이지가 있습니다.

메인 페이지에는 새로 올라왔어요 section과 구독하기 section, 각 sector마다 고유한 아티클을 가진 section이 있습니다.

컨텐트를 클릭하게 되면 유튜브 영상과 글, 혹은 미디엄 블로그의 칼럼, 노션에 적혀있는 칼럼을 나타냅니다. 하단에 더보기 컨텐츠와 구독하기 또한 포함되어 있습니다.

사용 스택

react : React를 이용하여 개발하였습니다.

javascript

emotion: 저희가 그 전에 emotion을 사용하며 reset css 등 보일러 플레이트를 가지고 있었기에 emotion으로 바로 채택하여 빠르게 개발

보일러 플레이트 cra, github template, prettier, emotion으로 사용할 경우가 많았기 때문에 생산성을 위해 선택하게 되었습니다.

추가적으로 기능 명세 정리 및 컨벤션은 노션을 이용하였습니다.

배포

netlify 자동 배포

역할

역할은 다음과 같이 나누었습니다.

탭 컴포넌트

새로 올라왔어요 컴포넌트

구독하기 컴포넌트 및 공용 컴포넌트 제작

더보기 컴포넌트

디테일 컴포넌트

로 나누어 진행하였습니다.

주제별 발표

Device Mockup

탭을 누르면 스와이프로 이동해야하므로 라우터를 사용하거나 전체 페이지에 translate를 적용할 수 없으므로 모바일 박스를 만들어서 tranlate을 적용하고자 했습니다.

하지만 모바일 박스로 css만 적용하면 너무 완성도가 떨어져 보였기 때문에 조금 더 완성도를 높이고 UI를 향상시키기 위해 device mockup을 도입하기로 했습니다.

Device mockup을 사용하여 얻을 수 있는 장점이 설명되어 있습니다.

UI 향상하여 고객 유치, 결과물의 완성도 높임, 모바일에서도 동작할 수 있다는 것을 알려준다는 장점이 있습니다.

공통 컴포넌트 스타일

겹치는 스타일이 매우 많았기 때문에 공통 컴포넌트를 나누고 스타일을 미리 지정하여 사용하도록 했습니다.

box shadow가 있는 컨텐트 박스, 태그들과 버튼들을 미리 style에 컴포넌트를 생성하여

스타일 통일성을 향상하고 각자 스타일을 지정해주지 않아도 되므로 생산성 향상 효과도 가져올 수 있었습니다.

CORS error

CORS 에러는 cor-anywhere를 헤로쿠에 배포하여 우회하였습니다.

하지만 cors-anywhere는 시간 당 50회 요청 제한이 있기 때문에 data를 가져오지 못하는 경우도 있습니다.

그래서 cors-anywhere 주소에 들어가면 일시적으로 데모 서버에 접근하도록 하는 버튼이 생성되어 있습니다.

이를 이용해서 이 서버를 iframe에 띄워 사용자가 버튼을 눌러 데이터를 가져올 수 있도록 했습니다.

Tab slide

저희 팀은 tab만 슬라이드로 구현한 것에 추가로 페이지 자체도 sliding이 되도록 구현했습니다.

다음과 같이 간단하게 구현할 수 있습니다.

app에서 부모 컴포넌트에서 tab state를 가지고 있고, Tabs 컴포넌트에 setTab을 넘겨주어 사용자가 클릭한 tab 즉, sector가 어떤 것인지 받습니다.

이후 SlidingPage에서 클릭된 tab에 따라 컨텐츠 페이지 또한 translate으로 움직여주도록했습니다.

선택된 tab과 store에 저장되어 있는 pages들 (sector id가 포함된 리스팅할 데이터) 이것의 sector_id 속성을 통해 현재 index를 파악하고 그 index와 -100을 이용해서 오른쪽으로 이동하도록 했습니다.

디테일 페이지

디테일 페이지에서는 컨텐츠를 클릭하였을 때 컨텐츠의 상단부터 보여야 하기 때문에 id가 변할 때마다 즉, 컨텐츠가 선택될 때에 scrollintoview를 이용해서 상단으로 스크롤을 이동시켜 주었습니다.

공통 컴포넌트

emotion/styled 와 같은 css in js를 사용하여 개발 생산성의 이점을 가져올 수 있었던 것 같습니다. postCSS나 vanilla css를 사용해서 제작을 하였다면 className 네이밍에 시간이 훨씬 들어갔을 것이라고 생각하고, 스타일된 컴포넌트를 사용하여 코드를 더욱 줄일 수 있어 이러한 마이크로 단위 개발에 적합한 css 라이브러리가 아닐까라고 생각합니다.

캐러셀

새로 올라왔어요에 내부에 이미지를 캐러셀로 나타내는 부분을 라이브러리를 사용하지 않고 구현했습니다.

먼저 디스플레이를 자식요소만 하나씩 보여야 하기 때문에 슬라이드를 모두 가지고 있는 요소를 슬라이드 개수 * 100%로 설정하고, 부모 요소에 overflow hidden을 적용합니다.

또한, 5초 마다 autoslide가 되어야 하므로 다음과 같이 currentItem을 1씩 증가시키되 infiniteRotate가 되어야 하므로 currentItem이 마지막 슬라이드라면 다시 0으로 설정하도록 했습니다.

tranlate은 useRef를 통해 style.transform에 동적으로 할당하며 슬라이딩을 구현하였습니다.

추가적으로 setCurrentItem으로 currentItem state를 직접 사용하여 업데이트 해주었는데, 이 때 setState는 업데이트 된 것을 알지 못하기 때문에 (비동기적 특성으로 변경 요청을 일괄 처리 하기 때문에) 0 에서 1로만 넘어가고 다른 인덱스로는 넘어가지 못하는 현상이 있었습니다.

이 부분은 함수형 업데이트를 통해서 해결했습니다. setState에서 함수형 업데이트는 업데이트된 값을 저장하기 때문에 여러번의 업데이트가 적용되어 렌더링에 반영되기 때문입니다.

Study

GraphQL

GraphQL이란?

Graph + Query Language 줄임말. API를 위한 쿼리 언어라고 할 수 있다.

GraphQL은 클라이언트 요청에 따라 유연하게 트리 주고의 JSON 데이터를 응답으로 전송할 수 있다. (클라이언트 요청에 따라 유연하게 자원을 가져올 수 있다)

GraphQL keywords

  • Query: 저장된 데이터 가져오기 (REST의 GET과 비슷)
  • Mutation: 저장된 데이터 수정하기
    • Create: 데이터 생성 / 추가
    • Update: 기존 데이터 수정
    • Delete: 기존 데이터 삭제

회고 (TIL)

2022.03.18 Daily 회고

✏오늘 한 일

  • 팀 과제 발표 준비 및 발표
  • GraphQL study
  • 면접 대비 공부

⁉느낀 점

4주 동안 발표를 맡아서 해왔는데, 못하는 걸 했다고 생각하니 괜히 뿌듯하다. 물론 완전 잘했다고는 못하지만..

팀원분들 블로그 보면서 많은 걸 느낀다. 상세하게 상황을 정리해서 다음에 봤을 때 잘 알아보도록 정리해야겠다.

마지막 팀플이 모두 끝났다! 팀원들 덕에 잘 끝냈고, 많이 배워서 너무 기쁘다.

🎃현재 나의 상태

면접 준비만 잘하자.

댓글남기기

참고