• 오늘의 요약
  오늘은 for문을 대신해 반복을 수행하는 map과 관련된 내용을 배웠습니다!
  기존에 우리가 알고 있던 반복문 for문은, 사실 실무에서 자주 사용되진 않습니다.
  대신에 map을 사용해서 반복을 실행하고 break문과 continue문은 filter로 대신 사용하게 됩니다!
  filter와 map을 연달아 사용할 수도 있다는 점 또한 기억하시죠!?
  map을 활용해서 목록을 화면에 나타낼 때, key를 넣어주어야 하지만, 그렇다고 key를 index와 같이 고유하지 않은 값으로 주시면 안되는 것! 주의해 주세요!
  마지막으로, 게시물을 수정/삭제 했을 때, refresh가 되도록 보여주려면 refetchQueries를 활용해서, 다시 요청해주었습니다!
  오늘 배운 내용들은 실무에서 자주 사용하게 될 내용인만큼 복습과 실습을 통해 map,filter 사용에 익숙해지시길 바랍니다!

  - 포트폴리오리뷰

  -필수내용 다 작성했을때 버튼 불들어오게 하는 함수

• useState 진위여부 (맞니, 아니니) 판단할때는 is로 시작하는 이름을 지어준다
• isActive 사용해서 event.target.value false에서 true로 바뀌는거 큰 흐름을 잘보자 !
• 노란불 만들어주기위해서 usestate 하나 만들어주는데
  초기값 false로 두고 설정한다 .
  isActive 따라 내려가보면 contatiner의 usestate, 그 밑에, presenter dml props 밑에 isactive 타고 내려가서... 그림을 보자
  
  
• 버튼 활성화 시켜주는부분 기억해야할것은 함수 하나가 실행될때 묶어놓고 함수가 끝나야 리렌더 (안에 변경된 값을 다 바꿔준다 event.target.value가 그 실행되고 있는 함수가 끝나야 변경이 되는것이다 )
  
• 또, 칸이 event가 생기는 조건 부분 달아줄때 event.target.value && password && title && contents -> 이런식으로 써도 된다. !== ""를 사용하지 않아도, 안에 값이 온다면 값이 true가 되기 때문에 !!
  
  
  -router.query 써주는 파일을 쓸때는 저런 파일명에서 실행할때 당연히 안된다 ! 알고있짜 나중에 불러왔는데 안된다고 당황하지 말그
  
  

- 실무 반복문에선 for문 안쓴다

> map

배열을 순회하며 요소마다 callback 함수 적용 후 새로운 배열로 리턴한다.
-똑같은 로직을 애들한테 주겠다 ! 이렇게 간편하게 실행
-모든 요소들에게 "어린이"를 붙여주고 싶을때
-포인트 : 요소들이 원래 자기 자기로 돌아간다

-객체에도 당연히 적용가능하다
-수정해주고, 새로운 값을 넣는것도 가능 (객체 안에 넣듯이 넣어주면 됨 ! )

• 화살표 함수에서 소괄호 생략가능
• 인자와 파라미터에 대한 이해
  
  -return을 이용해서 result는 함수를 실행한 값을 담아줄 수 있다 (함수이름은 동사로 시작, 변수명은 명사)
• return은 값을 반환한다는 의미도 있지만 함수를 종료한다는 의미도 가지고 있어서 그 밑에 있는 식은 적용이 안된다
  
• 화살표 함수에서 return을 썼을때 {}를 생략할수 있고, ()도 생략이 가능하다. return을 의미한다는 것 알아두자
  
  객체에서는 ()생략이 안된다 왜냐하면 => { 가 바로나오면 함수의 중괄호는 있는데 return이 안되니까!

const add = (aaa, bbb) => {
  return aaa + bbb
}
add(1, 2)
3
const add2 = (aaa, bbb) => (aaa + bbb)
const add3 = (aaa, bbb) => aaa + bbb
const classmates= [
  { name: "철수" },
  { name: "영희" },
  { name: "훈이" }
]
classmates.map((el) => { name: el.name + "어린이" })
(3) [undefined, undefined, undefined]``````

-vscode에서 사용할때 jsx를 사용하여 그려주면 이렇게 된다

• 데이터 값의 양만큼 아래 return값이 반복하여 실행되는걸 볼 수 있다. (백엔드 사이트와 연결한 값을 적어주면 그 안의 데이터만큼 실행이 되겠지!)
  이를 이용해서 게시물목록 그리기를 할 수 있다 !

> filter

배열을 순회하며 요소마다 조건 확인 후 조건을 만족하는 원소들로 부터 구성된 새로운 배열을 리턴한다.
filter를 사용해서 원하는 값만 뽑아낼 수 있다
filter 와 map을 같이 사용할 수 있다

-every

-배열안의 모든 데이터가 조건을 만족하는 경우 true를 반환함. else, false를 반환.

const computers = [
  {name: 'macbook', ram: 16},
  {name: 'gram', ram: 8},
  {name: 'series9', ram:32},
]
const everyComputersAavailable = 
computers.every(function(computer){
  return computer.ram > 16})

- 최신 데이터 다시 가져와줘 refetch

&

- 왜 목록에서 삭제가 안되지 ? key/ index

-게시글 삭제를 백엔드 API형식에 맞게 mutation을 활용하여 작성해주고, 삭제 버튼에 함수기능까지 넣어주어도, 삭제를 눌렀을때 새로고침을 해야 보이는 현상이 발생한다. 이는 백엔드에서 처리한 데이터를 바로 보여달라고 따로 요청을 해야한다 ! (생각해보면 당연하다 나는 삭제해줘.만 했지 삭제하고 다시보여줘.라고 안했으니까!?)
-그때 이렇게 사용했다 refetchQueries:[{query:FETCH_BOARDS}]
게시글 조회 예시에서 해당하는 내용이다 ! ^

{data?.fetchBoards.map( (el) => (
          
          <Row key={el.number}>
       
              <Column><input type= "checkbox"/></Column>
              <Column>{el.number}</Column>
              <Column>{el.writer}</Column>
              <Column>{el.title} </Column>
              <Column>
                  <button id = {el.number} onClick={onClickDelete} >삭제</button>  
              </Column>
          </Row>
      ))}

이렇게 사용할때에 key 값을 index 값으로 주게되면, 삭제되었을때 Index값이 헷갈릴수 있기 때문에 key값은 고유한 번호를 부여해야 한다 .

• emotion props
  props에 값을 담아서 true와 false를 넘겨주는 구조 잘 이해하자 !

- 자바스크립트 기초

지역공간, 전역공간에 대한 이해는 괄호를 이해해주고 나니 당연히 적용되는 범위에 따라 쉽게 이해가 갔고,
스코프를 안에서부터 밖으로 검색해 나가는것을 스코프체인이라고 한다 !

• 바로 위 식별자의 Enviroment를 참조하는것이 스코프체인이다 !

- 알고리즘 수업

역시 내가 먼저 끙끙대면서 풀어보고 멘토님의 리뷰를 보니 굉장히 느끼는게 많다.

• 내가 한 홀수 짝수 알고리즘
  
• 멘토님의 삼항연산자를 활용한 코드
• 가운데 글자 뽑아내는 코드 & 삼항연산자 활용까지