[TIL] 내일배움캠프 React 과정 2024.05.17

오늘의 한 일

• 코딩 테스트 연습
  • 덧칠하기
  • 실패율
• 피카츄 놀이터(챌린지반 과제)
• TodoList (React 수업 개인 과제)
  • README 작성
  • ID 생성 방식 변경 (crypto.randomUUID)
• CSS 게임

오늘의 문제 해결

문제: 반복되는 배경 이미지 처리

• 피카츄 놀이터에는 grass라는 이미지를 반복적으로 배경화면에 그릴 필요가 있었는데 처음에는 방법이 떠오르지 않아 하드 코딩을 했다.

• 처음 나의 코드

  function App(){
  	const maps = [];
  	for(let i = 0; i < 10; i++){
    		const line = new Array(10).fill(false);
    		maps.push(line);
  	}
  
  	return (
    	<div>
      {
        maps.map((row)=>{
          	row.map(()=>{
            	<img src={grass}/>
          })
        })
      }
    	</div>
   	);
  }

문제 해결

• 다른 분들은 어떻게 했는지 구경하다가 좋은 방법을 발견했다!

• 해결 코드

  background-image: url(/src/assets/img/grass.png);
   background-size: 50px;
   background-repeat: repeat;

• 단순 css만으로 해결할 수 있는 방법이였다...

오늘의 회고