- 포트폴리오리뷰

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

• 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를 참조하는것이 스코프체인이다 !

- 알고리즘 수업

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

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