이번 주 목표
리액트 기초 완전히 빡숙되기
리액트 프로젝트 1개 해보기(강좌 내용 말고) (달성)
규칙
1. 억지로 쓰지 않기.
- 진짜 배운 게 있는 날만 쓰기!
2. 양 신경쓰지 않고 기록하기.
- 양이 적다고 글을 포기하지 말고 조금이라도, 그게 한두줄이더라도 배운 게 있다면 기록하기!
3. 꼭 내 것으로 만든 후 작성하기.
- 스스로 생각을 좀 정리해본 후 TIL 글 적기!
- 남이 쓴 글 복붙 X , 내가 배우고 느낀 점 위주로. (일단은 그렇게 해보자)
밑의 내용들은 내가 수업중에 메모해가며 적은것들이고 이를 통해 다시한번 공부가 되어 올렸으며 적으면서 복습이 되기 때문에 그날 공부한 것들은 안 외우더라도 매번 적을 예정입니다.
<오늘 공부한 것들>
1. 팀원들과 코드 리뷰
2. 과제에 대한 리뷰 및 개인과제 해설 영상
3. 어제 본 영상에 대한 리액트를 통한 url로 인한 코드 다르게 하기 완성
4. propTypes에 대한 추가 정보들
<가장 인상 깊었던 것들>
[코드 중 자르는 부분들]
웹 페이지에서 나오는 뒷부분에 대한 상세 페이지로 이동을 할때는 글을 짤라서 만드는 부분인 것을 알았다.
{summary.length > 235 ? `${summary.slice(0, 235)}...` : summary}
-235글자가 넘으면 뒷부분을 ...으로 넘기는 코드
[링크 부분]
html에서 링크를 넣어줄 떄는 a href를 사용해서 링크를 넣는데
리액트에서는 유효하지 않다. 왜냐하면 코드가 전체가 다시 렌더링 되기 때문이며 그러면 리액트의 기능을 사용하기 힘들어서 Link to를 사용하는게 유효하다고 느꼈다. 작업이 훨씬 수월하게 진행되면서 JSX문법에도 맞기 때문이다.
즉 HTML에서 사용할 경우 a href , JS를 사용할 경우 Link to
[propType 부분]
protoType이 아니라 propType 이다.
간단히 설명하면 유효성 검사라고 생각하면 된다.
작업에 유효하지 않으면 콘솔에서 평소의 작업에 에러인 부분처럼 에러라고 나오는 것이다.
id:PropTypes.자료형.isRequired
-> 위와 같은 경우는 id는 자료형(불린형, 숫자형, 문자열) 같은 형태여야 한다는 이야기이다.