이번주는 주특기 입문주였다.
아예 처음부터 맨땅에 헤딩하는 기분으로 무엇부터 해야할 지 모르는 상태로 시작하다보니 막막하기도 하고 갑자기 그냥 눈물이 막 나기도 했다 😭

과제는 "일주일 평점남기기"였다.
기능으로는,
1. 메인화면페이지에 점수는 랜덤
2. 상세페이지는 요일별페이지로 들어가는 것
3. 점수 선택하기. (메인페이지로 가면 선택한 점수 반영은 안됨)

처음엔 반복문없이 페이지 7개에 동그라미와 세모도 쫙 그려버렸는데 아무리 생각해도 그 방법은 틀린 것 같아서 5일째에 뒤집어버렸다.
(이번주를 보내고 나니 항해 커리큘럼이 지금까지는 만족스럽다고 느꼈다. 2주차에 알고리즘을 하고나서 주특기에서 사용하는 자바스크립트 문법이 전혀 어색하지 않았기 때문..!)

이번주 배운 점

서버리스란?

1) 데이터 생성
2) 데이터 조회
3) 데이터 삭제/수정
등의 기능을 대신 제공해주는 서비스들이 존재하는데 이를 서버리스(서버의 역할을 미리 설정해둔 서버)라고 한다.
=> 즉 서버리스란 서버를 하나부터 열까지 만들 필요가 없다는 뜻이다. 서버기능을 제공하는 곳에서 우리가 필요한 기능들을 클릭 한번으로 구현할 수 있도록 하는 서비스를 서버리스라고 한다.
Ex) 파이어베이스
이런 서버리스에서 데이터를 요청하거나 보내려면 그 서버가 정한 규칙에 따라야한다.
서버에 요청(Request)
서버가 응답(Reponse)
=> 이런 서버쪽에서 정한 규칙을 보통 API라고 부른다.

돔(DOM)이란?

웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.
HTML문서나 XML문서에 접근하기 위한 일종의 인터페이스
DOM은 HTML과 스크립팅언어(자바스크립트)를 서로 이어주는 역할을 한다.HTML 마크업을 시각적이 형태로 변환하는 시간(CSS가 적용되고 수정되어 반영되는 시간)이 드는 것은 어쩔 수 없지만, 최소한의 DOM 조작을 통해 작업을 처리한다면 개선하고자하여 가상돔이라는 개념을 도입한다.
가상돔(Virtual DOM)이란?
실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 자바스크립트 객체를 이용해 사용한다. 실제 (무거운)돔의 가벼운 사본 같은 개념

기억할 점

(과제에서 어떻게 활용했는지 예시)

• props

function App() {
...
return(
....
 {shoes.map((a, i) => {
                return <Card shoes={shoes[i]} i={i} key={i} />;
 )
function Card(props) {
  return (
    <div className="col-md-4">
      <img
        src={
          "https://codingapple1.github.io/shop/shoes" + (props.i + 1) + ".jpg"
        }
        width="100%"
      />
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}</p>
      <p>{props.shoes.price}</p>
    </div>
  );
}

• useState

function ## () {
 const [point, setPoint] = useState(0);
....
return (
...
 {Array.from({ length: 5 }, (item, idx) => {
                        return (
                            <Circle key={idx} onClick={() => { setPoint(idx + 1); }}
                                style={{ backgroundColor: point < idx + 1 ? "#ddd" : "#FF1E9D" }} />
                        )
                    })}
)
}