Today I Learn 20220721

Jiwontwopunch·2022년 7월 21일

TIL

목록 보기

77/92

❤ Todo

💡 면접 준비 ✔
💻 고차함수 사용해서 계산기 만들기 ✔
💻 Date 사용해서 반응속도 테스트 ✔
💻 틱택토 게임으로 이차원 배열 다루기 ✔
💻 텍스트 RPG 만들기 ✔
💻 카드 짝 맞추기
💻 지뢰 찾기 게임
💻 2048 게임
💻 두더지 잡기 게임
💻 실전형 리액트 Hooks 10개
📗 피그마 완벽 활용서

❤ Error & Solution

❤ What I learned

고차함수를 사용해서 만든 계산기

→ github front-practice

Date 사용해서 반응속도 테스트

→ github front-practice
1. user-select: none;
사용자가 텍스트를 선택할 수 있는지 지정하는 속성
none으로 지정하면 이 요소와 아래 요소의 텍스트를 선택하지 못하도록 막는다.
2. 태그.classList.contains('클래스');
태그에 해당 클래스가 들어 있는지 확인하는 방법
3. 태그.classList.replace('기존클래스', '수정클래스')
4. 평균 반응속도를 구하려면 기존 반응속도를 모두 기록해 둬야 한다. records라는 배열을 만들어 반응기록을 저장!
5. reduce는 배열의 값들을 하나의 새로운 값으로 합치는 메서드

배열.reduce((누적값, 현재값)=>{
	return 새로운누적값;
}, 초깃값);

틱택토 게임으로 이차원 배열 다루기

→ github front-code
1. 자바스크립트로 테이블 직접 만들기
2. 이벤트 버블링
event.target은 이벤트가 발생한 직접적인 대상이다. td 태그를 클릭하므로 td에 이벤트를 연결하든 table에 이벤트를 연결하든 event.target은 그대로 td이다. 이벤트가 발생한 태그가 아닌 이벤트를 연결할 태그에 접근하고 싶다면 event.currentTarget을 사용하면 된다
3. 유사 배열 객체에 indexOf 메서드 사용하기

// Array.from 메서드로 유사 배열 객체를 진짜 배열로 바꾸면 된다.
console.log(Array.from(target.parentNode.children));
   console.log(Array.from(target.parentNode.children).indexOf(target));

flat 메서드
배열의 차원을 낮추는 메서드로 n차원의 배열을 n-1차원의 배열로 낮춘다. 즉, 이차원의 배열이라면 일차원 배열로 바꾼다. 일차원 배열은 flat을 적용해도 그대로 일차원 배열로 남아 있는다.

// 승자가 없으면
let draw=rows.flat().every((cell)=>cell.textContent)
rows.forEach((row)=>{
  row.forEach((cell)=>{
  if(!cell.textContent){
      draw=false;
  }
 });
});
  if(draw){
    $result.textContent=`무승부`;
      return;
   }
   turn=turn==='X'? 'O' : 'X';
};

배열.every(조건함수)
반복문의 일종으로 요소를 순회하면서 조건 함수의 반환값이 모두 true이면 every 메서드도 true를 반환한다. 조건 함수의 반환값이 하나라도 false이면 every 메서드의 반환값도 flase가 된다. every 메서드는 조건에 만족하지 않는 요소를 하나라도 찾으면 바로 반복을 중단하기 때문에 일반 반복문보다 더 효율적이다.

텍스트 RPG 만들기

→ github front-practice
1. 간단한 객체는 JSON.stringify(객체))를 사용해도 크게 문제가 없지만 성능도 느리고 함수나 MAth.Date 같은 객체를 복사할 수 없다는 단점이 있다. 따라서 실무에서는 lodash 같은 라이브러리를 사용한다.