원티드 #POB 3일차

ghdtjddn·2022년 5월 5일

원티드 프리온보팅 프론트엔드 4차

목록 보기

2/9

classNames 사용하기

어제 todolist 만들기를 진행하면서 취소선 구현을 팀원님과 같이 진행했다.
오늘 다른 팀원분들과 같이 간단한 리뷰를 진행하는데 삼항 연산자를 classNames로 바꾸면 더 좋을것 같다는 이야기를 들었다.
개인적인 생각으로, 리액트는 클래스를 지정하는게 조금 별로다. 근데 classNames 라이브러리를 사용하면 class 지정이 아주 쉽다고 한다.

삽질의 시작

https://www.npmjs.com/package/classnames
팀원분이 친절하게 링크를 보내주고 읽어보라고 하셨는데, 영어니까 일단 먼저 한글로 검색해보고 안되면 봐야지!라고 안일하게 생각했다. ㅎㅎㅎㅎ

<p className={`${styles.title} ${todo.done?styles.done:''}`}>{todo.title}</p>하세요

를

 <p className={cx('title', { done: todo.done })}>{todo.title}</p>

로 바꾸면 되는 간단한 작업이었는데, import 부터 말썽이었다.
구글링한거는 알아서 잘 되던데 오류가 계속 나서 결국 공식문서를 확인했다.

import classNames from 'classnames'

const cx = classNames.bind(styles)

<p className={cx('title', { done: todo.done })}>{todo.title}</p>

이렇게 코드를 짜도 안돼서 혼자서 이것 저것 다 건들여 보았다. 그래도 되지 않아서 팀원분이 준 문서를 확인했다.

(※ 내가 짠 코드 아님! 문서 일부 발췌!!!!! ※)

import classNames from 'classnames'
에서
import classNames from 'classnames/bind'를 하지 않아서 되지 않았던거였다. 영어라고 안본 내 잘못으로 삽질을 겁나 했지만, 다음번에는 더 꼼꼼히 보겠다고 다짐했다.

D-day 설정하기

D-day같은 경우는 자바스크립트로 만들어봐서 자신은 있었다. 근데 갑자기 나혼자 생각을 엄청 어렵게 하는 바람에 거의 다 만들어 놓고 적용을 어떻게 해야할지 골머리를 엄청 썼다.

구글링도 해봤는데 내가 잘 못 찾는 건지 리액트 투두리스트와 연관된 디데이 포스트는 찾지를 못해서 고민하다가 팀원분들에게 물어봤다.

(삽질하는 나를 도와주시는 고마운 팀원분,,,)

팀원분이 가르쳐준 방법은 며칠 남았는지를 계산하는 로직을 함수로 빼서 투두리스트를 map을 돌릴 때 함수에서 투두 하나의 deadline을 받아서 그대로 저 콘솔로그 부분을 return하면 될것같다고 말씀해 주셨다.

오...

const dDayHandler = (todo) => {
    const TODAY = new Date()
    const DAEDLINE = new Date(todo)

    const DDAY = DAEDLINE - TODAY
    const DIFFDAY = Math.floor(DDAY / (1000 * 60 * 60 * 24))

    return `D - ${DIFFDAY}일`
  }
  
  
   <span className={styles.deadLine}>{dDayHandler(todo.deadLine)}</span>

솔직히 이거는 되고나서 조금 현타왔다. ^^;;
이렇게 하면 될걸,, 내 시간,,,