10주차 토요일 - 과제 리팩토링, new Map();

10주차 토요일 - 과제 리팩토링, new Map();

1. 배운 것

• 과제 베어미니멈 파트 복습
• css flex 복습

2. 내용 정리

과제 복습 - Modal Component

• 동작이 거꾸로 작동. 모달창 외부 클릭시 아무 변화 없고 모달창을 클릭 시 모달창이 닫힘.
• stopPropagation 이해도 부족.
• css 문제: 모달창 요소가 모달창 배경 좌상단 끝에서 안움직임.

과제 복습 - Toggle Component

// 조건부 스타일링: 조건에 따라 클래스 추가
className={`toggle-container ${isOn ? 'toggle--checked' : null}`}

• CSS: 토글버튼 좌우로 움직이게 + 그라디언트 구현해야 함.

과제 복습 - Tab Component

• CSS: 탭 메뉴와 선택된 탭 메뉴 하이라이팅 구현해야 함.

과제 복습 - Tag Component

// 태그 추가 메서드 내부

if (
	tags.indexOf(event.target.value) === -1 &&
  event.target.value.length !== 0
) {
  setTags([...tags, event.target.value]);
  event.target.value = '';
}

처음에 addTags 함수 안에서 if문의 조건을 3가지나 case1 && case2 && case3 으로 주었는데 콘솔로 확인해 보니 input에 입력이 있을 때마다 addTags 함수가 실행되고 있었다.
그래서 input 태그에 onKeyUp 이벤트 발생시 엔터 키를 쳤을 경우에만 addTags 함수를 실행시키기 위해 여러가지 방법을 다 해보았지만 실패했고 아래 코드처럼 단축평가를 사용했을 경우에만 의도대로 동작했다.
if(event.target.value) { … } 이런 식으로 조건을 줄 경우 event.target.value === ‘’ 일 경우 false 가 아니라 true가 됨에 주의해야 한다. 빈 문자열은 falsy 값이라고 처음에 입력값이 없을 경우에 해당하는 조건으로 저렇게 주었더니 의도대로 동작하지 않았다.
즉 아무것도 입력하지 않은 상태는 빈 문자열이 아니라 undefined이다.

// onKeyUp 핸들러함수 정의하기

<input
  className="tag-input"
  type="text"
  onKeyUp={e => {
    e.key === 'Enter' && addTags(e);
  }}
  placeholder="Press enter to add tags"
  />

→ onKeyUp 안에서 이벤트 핸들러 함수를 직접 정의해서 입력된 key가 Enter일 경우에만 addTags 함수를 실행시키기 위해서 삼항연산자, 일반 if문 이것저것 다 해보았지만 먹히지 않아서 다른 동기분께 여쭈니 단축평가는 제대로 동작한다고 하셔서 단축평가를 사용해보니 되었다. 왜 이렇게 했을때만 되는지 알아봐야겠다.    -> 해결: 함수 호출하면서 event를 인수로 넣어주면 if문으로도 동작함. 

자바스크립트 내장 객체 Map 사용법

별도 문서로 해시 설명에 첨언하여 정리함. https://github.com/ryan-kim-dev/data-structures-and-algorithms/blob/master/dataStructures/hash/hash.md
참고: 딥다이브 37장, 개발자의 품격 님 유튜브 강의
해시 문제를 풀 경우 또는 기타 객체를 사용해서 문제를 풀어야 할 경우 사용할때 굉장히 편리하고 코드가 명시적이다.

• key 값을 일반 객체와 달리 어떤 자료형이든 사용할 수 있음. key 값으로 객체나 함수도 가능.
• Map 객체를 생성하며 인수 전달 시 키-값 쌍의 이터러블 만 가능. 키 중복 시 값이 덮어씌워지므로 중복된 키를 갖는 요소가 존재할 수 없음.
• 이터러블하므로 forEach문 사용 가능.
• Map객체의 메서드와 프로퍼티
  • size: 요소 개수 확인 프로퍼티. *size 는 메서드가 아니라 프로퍼티다.
  • set : 요소 추가 메서드. (key 값과 value 값 지정)
  • get : 요소 취득 메서드. (Map 객체의 key값을 인수로 입력하여 해당 key의 value를 반환)
  • has : 요소 존재 여부 확인 메서드. (Map 객체에 지정된 요소가 있는지 여부를 boolean 값으로 반환)
  • delete : 요소 삭제 메서드.
  • clear : 요소 일괄 삭제 메서드.

참고 자료

• 개발자의품격님 Map객체 유튜브 강의 https://www.youtube.com/watch?v=6DLLaHJi6Ks
• 딥다이브 37장

3. 리뷰

3.1 좋았던 점

• 베어미니멈 파트는 리액트 코드는 다시 복습했다.

3.2 아쉬웠던 점

• 늦잠과 딴짓으로 오전 오후 시간 활용 못함.
• 과제 css 추가 못함.

3.3 notes

개인 포폴사이트 먼저 만들고 커뮤니티를 만드려 했는데 정규 커리큘럼 일정 및 내 실력 여건상 커뮤니티를 먼저 만들면서 커리큘럼 내용 예습/복습에 활용하기로 계획을 바꾼다.
그동안 그렇게 미루고 미루던 백지 상태에서의 복습을 오늘은 할 수 있을 것 같았는데 빈둥대느라 날린 시간이 너무 길어 못했다. 내일 과제 css 구현을 얼른 마치고 과제 내용 백지에서 복습 해봐야겠다.
원래 redux 예습을 했어야 하는데 시간 활용을 제대로 하지 못해서 너무 쓰라리게 아쉽다.