TIL: 진인사대천명(盡人事待天命) - 5. 디지털 헬스케어 플랫폼 (2)

앞으로의 과제

• 과제 수행 보고서
• README
• 개인 프로젝트 기획

Keyword

light house

• light house: 웹페이지 성능 검사

웹 페이지 접속 - 크롬 개발자 도구 - light house - Generate report 클릭

svg

svg는 path 이미지를 겹쳐서 만드는 것이었다.. path가 하나의 이미지..

• vscode extension SVG: 우클릭으로 svg 이미지 미리 보기 가능

한글 받침 검사

export const hasLetterStand = (word: string) => {
  const lastLetter = word[word.length - 1]
  const uniCode = lastLetter.charCodeAt(0)
  return (uniCode - 44032) % 28 !== 0
}

배열을 객체로

interface ITagList {
  [key: string]: string[]
}

export const tranforming = () => {
  const newData: ITagList = {}
  healthTagList.forEach((item) => {
    newData[item.tagId] = [item.tag1, item.tag2, item.tag3]
  })
}

컴포넌트 map key index 사용하기

컴포넌트를 map으로 생성 시 린트에서 key에 index를 사용하지 말라는 경고문이 표시된다
.. 린트를 우회하는 것 같아 기분은 좀 그렇지만 index를 써야 유니크한 값 생성이 편하다

 {tagList.map((item, index) => {
   const tagListIndex = index
   return <Tag 
   			key={`index-${item}${tagListIndex}`} 
			tagTitle={`${item}`} 
		  />
   })}

Sass for loop

$COLORS: (1: #3cce3c, 2: #c63de8, 3: #738dfc, 4: #529afc,5: #c63de8, 
6: #ffb850, 7: #f9b4b4, 8: #75d3c7,);

// ardContainer를 for문으로 선택하려면 cardContainer에 nth-child()를 준다
@each $key, $color in $COLORS {
  .cardSection .cardContainer:nth-child(#{$key}) h2 {
    color: $color;
  }

.cardContainer:nth-child(#{$key}) h3 {
    color: $color;
  }
}

sass에서 nth-child() 사용 시 블록 위치와 계층 생각해야 한다
현재 블록에서 현재 위치를 차일드로 잡으면 정확한 위치를 찾지 못한다
부모 태그를 하나 넣어주니 편한다
nth는 className에 관계 없이 자녀 태그를 모두 세는 것 같다
.cardContainer:nth-child(#{$key}) h2

변수는 보간법으로 처리해야 컴파일 에러가 발생하지 않는다
: 보간법 #{$변수명}

팝업

clearTimeout()을 시작할 때 확인하고 주면 되는데 콜백으로 넘겨주려 했었다..

let popupDelay: NodeJS.Timer

if (popupDelay) clearTimeout(popupDelay)
  popupDelay = setTimeout(() => {
  	setShowPopup(false)
}, 1000)

---

아모른직다

인간이 자신의 할 일을 마치고
하늘의 뜻을 기다린다

좋은 과정이 꼭 좋은 결과를 주진 않지만
좋은 결과엔 좋은 과정이 있다

좋은 결과는 가져오는 것이 아니라
도전하는 것이다

그러므로 우리는 과정에 대한 평가를 하고
계속해서 도전해야 한다

함께 자란다

저번 프로젝트와 같은 조 셋이 또 함께 하게 되었다 이제는 정말 팀이 된 것 같은 느낌
두 분 모두 나와 각각 페어 프로그래밍을 진행했던 분들이기도 하고
덕분에 금방 합이 좋아진 것 같다