[TIL]2022.09.27

오늘 한 일

DOM구조 이해 유튜브 X
flex와 grid 유튜브 X
React.js 기초 10강 O
알고리즘 손코딩 X
알고리즘 모의고사 O
10가지 배열 함수들 O

오늘 느낀 것

10가지 배열 함수들

// Q1. make a string out of an array
{
  const fruits = ["apple", "banana", "orange"];
  const result = fruits.join(",and ");
  console.log(result);
}

// Q2. make an array out of a string
{
  const fruits = "🍎, 🥝, 🍌, 🍒";
  const result = fruits.split(",", 2);
  console.log(result);
}

// Q3. make this array look like this: [5, 4, 3, 2, 1]
{
  const array = [1, 2, 3, 4, 5];
  const result = array.reverse(); // 배열 자체를 변환시킴
  console.log(result);
}

// Q4. make new array without the first two elements
{
  const array = [1, 2, 3, 4, 5];
  const result = array.slice(2, 5); //slice는 새로운 배열을 만들고 splice는 짜르기만함
  console.log(result);
}

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student("A", 29, true, 45),
  new Student("B", 28, false, 80),
  new Student("C", 30, true, 90),
  new Student("D", 40, false, 66),
  new Student("E", 18, true, 88),
];

// Q5. find a student with the score 90
{
  const result = students.find((student) => student.score === 90);
  console.log(result);
}

// Q6. make an array of enrolled students
{
  const result = students.filter((student) => student.enrolled === true);
  console.log(result);
}

// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
  const result = students.map((students) => students.score * 2);
  console.log(result);
  // 배열안에 있는 요소들을 콜백함수로 호출해 가공되어진 값으로 다시 만듬
}

// Q8. check if there is a student with the score lower than 50
{
  const result = students.some((student) => student.score < 50);
  console.log(result);

  const result2 = !students.every((student) => student.score >= 50);
  console.log(result2);
}

// Q9. compute students' average score
{
  // 배열의 있는 모든 값을 순차적으로 누적하는 (prev,curr)
  const result = students.reduce((prev, curr) => prev + curr.score, 0);
  console.log(result / students.length);
}

// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
  // join을 쓰면 스트링으로 바뀜
  const result = students
    .map((student) => student.score)
    .filter((score) => score >= 50)
    .join();
  console.log(result);
}

// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
  const result = students
    .map((student) => student.score)
    .sort((a, b) => a - b)
    .join();
  console.log(result);
}

DOM구조 이해 유튜브
Docment Object Model
HTML이란 설계도를 브라우저라는 공장에 보내면
DOM이라는 제품이 나온다.

DOM- HTML트리형태로 하나하나를 노드라고 함
API 무엇인가를 입력하면 출력해줌

flex와 grid 유튜브

props 구조 사용법
---컴포넌트를 사용하게 해줌

state가 변화할때 모든 컴포넌트는 다시 실행되고 모든
코드들이 다시 실행된다. 

어떻게 중복 되지 않게 하는가 --- API 호출이 반복되지 않게 하는가?
--- useEffect

state를 절 대 직접적으로 수정하지 않는다.

async await = then() 비슷함 동기, 비동기

react로 api 통신하는 법 찍먹..

route 만들기
Hash router - 해쉬 #이 들어감
Brower router - 평범한 사이트

내일 할 일

리액트 기초 진짜 완강
인공지능 딥러닝 컴c 듣기 
DOM구조 이해 - 정리하기
flex와 grid -정리하기