오늘 해야 할 일
- 개인과제 AWS 연결 (V)
- 개인과제 생활코딩 보며 react-router-dom v6 적용해보기
- 팀과제 하기
오늘 배운 것
AWS S3 호스팅
-
S3 버킷 만들기
-
버전관리 : 버전 1, 2, 3 활성화
-
업로드: 사진 or 작업한 파일
-
객체개요: 객체 URL
-
정적 웹사이트 : 동적 웹사이트 = 서버측 스크립트 사용 안함 : 서버측 스크립트 사용 함(PHP, JSP, ASP)
-
정적 웹사이트: html, js, css 자원
-
이번 목표는 S3로 정적 웹사이트 호스팅 설정을 하는 것.
-
S3 버킷 설정하기: (AWS DOC이 친절히 설명해 줌)
-
Route 53 설정: 레코드 생성: 별칭 on: S3 웹사이트 엔드포인트에 대한 별칭, 리전 선택(처음에 설정한 값(서울))
마일스톤2.
리액트 자습서, Doc을 읽는게 강의 듣는거 보다 좋을 수 있다.
MDN에 나온 기능들 뭔지는 몰라도 이런게 있다는 걸 아는게 좋다.
기능 고도화를 위해 공부필수. 프린트해서 형광펜 칠하기, 그림 그리기, 패드로 사이트 캡쳐해서 그 위에 그림 그리기 등등 자신만의 방법 찾는게 중요하다.
props는 첫번째 함수에서 그 기능을 다 함. (리액트 DOC에 상세설명)
리스트와 key React DOc 읽기 (V)
클래스형 자바스크립트 개념을 보면 리액트 클래스 컴포넌트를 이해하기 쉽다.
확장성을 고민하여 props를 만들라.
개인과제 메인-디테일 페이지 평점 저장하기 기능 만들어보기.
flex-grid 개념 잡기. css 미리 준비 하는게 실전 프로젝트에서도 좋다.
오늘 공부 한 것
반복 기능을 하는 메서드를 쓸 때 key={idx} 는 최대한 피해야 한다는 사실을 알게 됬습니다. 아래의 수정전 코드로 설명 드리자면 이 코드는 각각의 요일을 나타내는 day와 평점을 나타내는 rate를 갖는 딕셔너리가 있는데, 그 딕셔너리를 map메서드로 가져오는 코드 입니다.
{week_rates.map((e,idx) => {
console.log(idx)
return (
<Div key={`week_day_${idx}`}>
<P>{e.day}</P>
{Array.from({length: 5}, (item, i) =>{
return (
<CircleStyle rate={e.rate} index={i} />
);
})}
<Triangle onClick={() => {
history.push(`/detail/${e.day}`);
}}
/>
</Div>
);
})} 그리하여 map메서드에 키값을 주기 위하여 key={`week_day_${idx}`}를 넣었습니다. 하지만 범용성이 너무나도 높은 idx를 가져오는 실수를 범하고 있습니다.
왜냐하면 idx는 이미 컴포넌트 전반에 어딘가에서 사용하고 있을 것이기 때문에, key값으로 지정하면 그 어딘가에서 기능이 제대로 구현이 안 될 수 도 있기 때문이죠.
그렇다면 어떻게 해야 할까요? 네, idx 대신 고유한 값을 주면 되죠! 그것은 우리는 데이터의 ID라고 부릅니다.[리액트 docs. 리스트와 Key]
그리하여 우리는 map메서드에서 과감히idx를 뺄 수 있습니다. 이렇게요.
{week_rates.map(({day, rate}) => {
console.log(day)
return (
<Div key={`week_day_${day}`}>
<P>{day}</P>
{Array.from({length: 5}, (item, i) =>{
return (
<CircleStyle rate={rate} index={i} />
);
})}
<Triangle onClick={() => {
history.push(`/detail/${day}`);
}}
/>
</Div>
);
})}하지만 여기서도 아리송한게 있습니다. 바로 데이터의 ID는 무엇으로 봐야 할까요? 저 같은경우는 day라고 주었습니다. 그 이유는 이 변수는 실질적으로 이 메서드 안에서만 쓰이기 때문입니다! 즉 고유한 값이 되어 다른 값과는 비교되는 특별한 값으로 쓸 수 있기 때문이죠.
