[원티드] 2일차 TIL

협업 걸음마이기에 git에 익숙하지 않아 난항을 겪었다.
확실히 숙지하고 가야할 부분이라 생각해 다시 공부하게 되었다.

GitHub flow

새로운 브랜치를 생성하고 변경 커밋들에 대한 PR을 열고 최종적으로 merge한다.

Git 단축어 모음

$ git clone <https:.. URL>
기존 소스 코드 다운로드/복제
$ git branch
브랜치 목록
$ git branch<브랜치이름>
새 브랜치 생성 (local로 만듦)
$ git checkout -b <브랜치이름>
브랜치 생성 & 이동
$ git push origin <브랜치이름>
만든 브랜치를 원격 서버에 전송
$ git push origin master
변경사항 원격 서버에 업로드
$ git pull
원격 저장소의 변경 내용이 현재 디렉토리에 가져와지고(fetch) 병합(merge)됨
$ git merge <다른 브랜치이름> 현재 브랜치에 다른 브랜치의 수정사항 병합

react-swipeable-list

투두 아이템 슬라이딩 구현을 위해 찾아보다가 괜찮은 라이브러리가 있어 알아보았다.

슬라이딩 정도에 따라 함수 호출이 가능하다

installation

npm install @sandstreamdev/react-swipeable-list
# or via yarn
yarn add @sandstreamdev/react-swipeable-list

example

import { SwipeableList, SwipeableListItem } from '@sandstreamdev/react-swipeable-list';
import '@sandstreamdev/react-swipeable-list/dist/styles.css';

<SwipeableList>
  <SwipeableListItem
    swipeLeft={{
      content: <div>Revealed content during swipe</div>,
      action: () => console.info('swipe action triggered')
    }}
    swipeRight={{
      content: <div>Revealed content during swipe</div>,
      action: () => console.info('swipe action triggered')
    }}
    onSwipeProgress={progress => console.info(`Swipe progress: ${progress}%`)}
  >
    <div>Item name</div>
  </SwipeableListItem>
</SwipeableList>

중요 요소들로는

threshold
Type: number (optional, default: 0.5)
함수 호출을 어느 시점부터 할 지 정하는 값이다.
(얼마큼 슬라이드해야 작동하는지)

swipeLeft
Type: Object (optional)
(swipeRight도 있고 방향 결정)

{
action, // required: swipe action (function)
actionAnimation, // optional: type of animation
content, // required: HTML or React component
}

action
Type: function (required)
(호출 함수)

actionAnimation
Type: ActionAnimations (RETURN | REMOVE | NONE) (optional, default: RETURN)
(애니메이션 효과)

content
Type: Anything that can be rendered (required)
(여기안에 슬라이드 시 구현될 요소 작성)