19.12.12 개발기록 -[Javascript] 게시물 상황에 맞는 class 부여하기.

게시물이나 다른 업로드 된 컨텐츠 등이 D-Day가 정해져 있다던지, 내가 이미 확인한 게시물이라던지, 어떤 상황에 따라 색상을 바꾸어 주는 등의 변화를 줘야할 때가 있다.

그럴 때, 함수로 각 상황에 맞는 status를 지정하여 반환하여 주고, 게시물을 그려낼 때 switch 조건문을 이용하여 각 class를 부여하면 된다.

게시물의 기본 디자인이다, status를 active를 부여했다.

게시물의 유효기간이  지났거나, 비활성화 됐을 경우 -> status를 finalized 및 confirmed로 부여했다. 

우선, 나 같은 경우 var status = active 로 기본 status를 선언해주고, 아래 사진과 같이 각 상황에 따라 status의 값을 변경해주었다.

status를 게시물의 유효기간이 지났을 때 finalized를, market.checkComplete 가 true 일 때 confirmed 로 설정했다.

그리고, return 값으로 status 값을 내보내주어, 

switch 문을 이용하여 각 status에 따라 class를 다르게 맥였다.

switch 문을 이용하여 각 status에 따라 class를 다르게 맥였다 !!

이렇게 코드를 구현하니 되게 코드가 깔끔하고 이쁘고, 사랑스럽고 막 그렇게 구현할 수 있었다.

사실 처음에는 if 문 만을 이용하여 디-게 보기 힘들고 더럽고 보면 맘이 아파오는 코드를 구현했었는데, 대표님의 조언을 얻어 위와 같이 구현할 수 있었다.

오늘 하루 또 이렇게 성장할 수 있어서 감사하다 !

 

이 포스팅을 보시는 분 중 제가 틀린 부분, 잘못 이해한 부분이 있어 알려주실만한 내용이 있다면 언제든 편하게 댓글 남겨주세요 :)

감사합니다 !