[본 캠프 19일차] 걷기반 5주차 실습 + React 입문 1주차

어제 팀 프로젝트 영화 검색 사이트 만들기가 끝나고, 오늘부터 React 입문 1주차 시작이다.

 

그 전에 저번에 진행했던 걷기반 5주차 강의를 듣고 오늘 실습을 진행했다.

원래는 넘어가려고 했으나 React 입문 들어가기에 앞서 굉장히 중요한 부분이라 실습 한다고 하셨다.

 

api fetch

비동기함수 async 와 await

try, catch 문

slice 배열 메서드 활용

할당과 재할당

 

나는 햇갈렸던 건 아래 재할당하는 부분이였다.

slice 메서드를 활용하여

      //    comment의 body의 길이가 40 이상일 때

      //    0번째부터 39번째 문자를 복사하고 맨 뒤에 "..."을 붙인 문자열을

      //    slicedBody라는 변수에 할당해주세요.

slicedData.forEach((comment) => {

      let slicedBody = "";

 

slicedBody 라는 변수에 빈값이 할당되어 있었는데, 재할당 하는 방법이 햇갈렸었다.

 

comment 의 body 의 길이(length)가 40 이상일 때

0번째 부터 39번째 문자를 복사하고, 맨 뒤에 "..." 을 붙인 문자열을

slicedbody 라는 변수에 할당해주세요. 

 

여기에서 나는  comment.body(0, 40) + "..." 여기에 slice 메서드를 써야 하는데 못 썼고

길이가 40 미만인 문자열도 할당을 해줘야 하는데 생각을 못했다.

이걸 그래서 하나하나씩 되는데로 써놨다가 마지막에 합치려고 하니 이렇게 나왔다.

 

if(comment.body.length >= 40) {

    comment.body(0, 40) + "..."

} 

 

여기서 해매고 있었다.  그러다 튜터님의 힌트를 받아서

 

comment.body 에 0부터 40번째니까 slice를 해줘야겠다는걸 알아서

comment.body.slice(0, 40) 그리고 이상인 문자열에는 + "..." 를 더해줬다.

그리고 미만인 숫자는 그대로 출력해줘야 하니까

} else {

   comment.body;  자르지 않고 그대로 출력되게 했다.

근데 여기서 끝난게 아니라 slicedBody 라는 변수에 할당을 해줘야 하니까 재할당을 해줘야 하는데

이것도 잊어버렸는데 부모요소에 자식을 넣어준다고 생각하고 let 을 생각했지만 그게 아니라 그냥 

slicedBody 변수명만 입력하면 된다고 하셨다. 

진짜 지금까지 뭘 배운건지 다 잊어버리고 응용하려니 답답했다..

 

if(comment.body.length >= 40) {

    slicedBody = comment.body(0, 40) + "...";

} else {

    slicedBody = comment.body;

} // 이게 최종..ㅠ

---

React 입문 1주차 강의

1-1 ~ 1-4 

 

Template Literals 

문자열 입력 시 `` (빽틱)을 이용해서 문자열을 삽입하고 그 안에서 여러가지 동작을 하게 하는 것

`` 안에 변수를 사용할 땐 ${ }

상품 : ${item.name}

가격 : ${item.price}

안녕하세요. ${ item.name } 제품 가격은 ${ item.price } 원 입니다.

 

Destructuring

구조를 파괴하는 것(De + structuring)

const item = {

   name: "커피",

   price: 4000,

} 

const name = item.name;

const price = item.price;

 

const { name, price} = item;

 

function greet({ name, age}) {

    console.log(`안녕하세요. 제 이름은 ${name}입니다. 나이는 ${age}입니다.`); // 빽틱사용 시 ${}

// 객체를 구조 파괴할 때 순서는 상관없다

const person = {

    name: "르순이",

    age: 28,

};

greet(person);

 

배열 (순서대로) 

const color = ["red", "green", "blue"];

const [firstColor, secondColor] = colors; // red, green

const [, , thirdColor] = colors;  // blue

 

Spread Operators

다음 시간에...