React의 전적들... 실무가고싶으면 class형태의 component도 알아야 해 ! useEffect와 axios까지! (Code Camp FE 6기)

같이 새벽까지 공부하고 의지 활활 화르륵이었떤 최고의 pf주이 안녕 ㅠㅠ꼭 같은동네에서 다시 만나...

- 오늘의 굿모닝 Algorithm~

오늘은 코드가 길어지면 문제없이 풀었지만, 첫번째 문제는 삼항연산자 적용해서 뿌듯 !
근데 두번째 문제는 코드가 많이 길어따.. 리뷰전까지 잘 봐바야지 !

// 1.어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.

function solution(absolutes, signs) {
    var answer = 0;
    for(i=0; i<signs.length; i++){
        // if(signs[i] === true){
        //     answer += absolutes[i]
        // } else {
        //     answer += -absolutes[i]
        // }
        signs[i] ? answer+= absolutes[i] : answer += -absolutes[i]
    }
    return answer;
}
// 2.문제 설명
// 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요.

function solution(x) {
    let answer = false
    let num = String(x).split("")
    let sum = 0;
    for(i=0; i<num.length; i++){
        
        sum += Number(num[i])
    }
 if(x%sum === 0){
    return answer = true
 } else{
     return answer
 }

이번주 수업은 백엔드를 이해하고 있는 프론트 개발자로 성장하기 위해 !
백엔드의 처리과정을 배우고, api를 직접 만드는 과정까지 !! 이루어진다고한다
얼마나 실무적으로 꼭 필요한 주인가 ! 코캠 커리큘럼...너무 빡세긴 하지만 최고야 지짜 ?!

- 포트폴리오 리뷰

지난주에 주말과제하느라 이해하기 힘들었지만 꾸역꾸역 이해하고 포폴 과제 끝난 나에게 박수 !!
리뷰시간에 복습한다 생각하니 이해가 잘갔다 !

-기억할 내용들

• 나는...300줄 넘어가는게 많지만 (나누기 귀찮아서 ) 절대절대 유지보수를 위해서도 가독성을 위해서도 컨테이너, 프리젠터들로 나누는게 좋다! (70-90줄 사이 ) 멘토님 폴더를 보니 인덱스의 컨테이너의 프리젠터의 프리젠터 아이템....으로까지 분리를 하셨다 쩝 ...
  
  함수 올리다가 인덱스파일에 까지 올려버린 아름이 반성해 ..
• 코드 작성할때 삼항연산자를 사용하는 경우는 2-3줄 미만으로 다 보일때! 왜냐 이건 어느경우에 띄운다는거지 ? 하고 조건을 찾으러 위로 올라가야하자나 !
  
  
• 글 수정을 위해서 댓글 작성부분을 컴포넌트로 빼서 조건을 걸어줘서 보여주기, 안보여주기 식으로 !
  
  
• 수정하기 일때는 댓글이 안보이고, 일때는 보이게 ! 조건을 건다 !
  그리고 내가 자꾸 어렵게 생각하는 삼항연산자로, 코드 짜서 수정하기 작성하기 다르게 보여주기 !
  
  각각 보여지는 ui바꿔주고, 눌렀을때 실행되는 함수 바꿔주고 ! 하면 된다 !
  어렵게 생각하지 말자 보면 다 이해가잖아 !
  
  
• map으로 뿌려줬던거 el로 넘겨서 props.el로 받아서 defaultvalue로 보여주는 부분 기억잘하자 !
  
  
• 타입스크립트 문제부분 !!
  updateboardid가 없다고 타입스크립트님이 오해하실수도 있으니, if(props로 받은 아이디가 있을때) Return.. 하고 적어드린다 !
  
  댓글 수정 다 하고나면 isEdit false로 꺼주자 !
  없을수도 있다고 또 밑줄이면
  if(!props.setIsEdit(false))로 붙여줘도 되고 , 편하게 옵셔널 체이닝으로 ? 붙여주자 !

- 스프레드 연산자 활용 input묶어주기

• 저기 내용이 ...profile이었던거 잊지말자
  
  그렇다면 우리 실무 코드에서
  주석처리부분 -> 밑에부분으로 바꿀수 있는거 이거 이해가지 !!!
  
  위에서 이어지는 부분을 밑에서 바꿔주면 이렇게 된다
  근데 Variables는 좀 간편해진것 같긴한데, 더 복잡하고 길어진 내용이네?
  생각해보면, 같은 키에 벨류가 두개 있을수 없기 때문에, 마지막 값을 읽기 때문에
  이렇게 있어도 상관이 없어 ! 그럼 스프레드 연산자로 바꿔줄수 있겠지 ?
  그럼 이렇게 바꾸고나서 또 보니, 3개의 함수를 또 하나로 묶어줄수 있을텐데..!
  
  eventtargetvalue에는 그 타깃의 데이터값을 의미하고
  event target id에는 jsx에 id 부여해준 친구!
  그럼 그 아이디를 의미하는거니까
  이렇게 쓰고자하는데 event.target.id를 키로 쓰려고 하니까 string이 아니라서 안되네 ?
  키를 저렇게 써버리면 컴퓨터는 이렇게 읽어버려 , 그래서 키로 들어갈수가 없어 !
  
  그래서 대괄호로 감싸게 되면, 그 값을 먼저 변환을 하고 , 그 writer로 변환을 해서 키로 사용할 수 있게 된다
  그러면 이렇게 3개가 똑같아져부려쓰 !
  그래서 함수 하나로 묶어주고, input함수로 묶어서 내려주는 방법 !!!!
  
  
  한눈에 봐볼래 ? 얼마나 간편해졌는지 !!1
  

- 클래스 컴포넌트

• 클래스란 ? : 물건을 만드는 설명서 !

우리가 써봤던 class는 date만들었던거 !

1. date를 하나 만들어 놓고,
2. 쟤를 date.~ 이런식으로 사용했었는데
3. 그렇게 쓰는 date는 객체라고 했었지 ! (다른말로 인스턴스라고 부르기도 한다)
여기서 . 해서 사용할수 있으려면, 기록이 되어있어야 하지 ?
그게 왼쪽 상세설명 부분(함수)인데, 함수인데 function은 안붙어 있긴한데 이런애들을 메소드라고 불러 !
(우리가 알고리즘 할때 사용했던 애들도 다 이런애들이다!)
<객체안에 만들어놓은 기능들을 사용한다고 생각하면 편해 !! >
저기서 Date()를 내장객체라고 하고
date를 객체라고 하는데, 이런식으로 만드는 걸 객체지향 프로그래밍이라고 해 !

백엔드 쪽에서는 oop를 많이 쓴다 ! 왜냐면
loginAPI를 만들어놓고,
loginAPI.login
loginAPI.logout
.....
이런식으로 각각의 함수를 만들지 않고 객체지향적으로 만들면 더 좋으니까 !
우리는 여기서 컴포넌트를 만들면 어떻게 만들어질까? 함수들이 들어가있는 컴포넌트로 만들어지게찌 !

이 내용만 봐서는 함수형이랑 비슷하지 ! function만 안붙는거고 class만 붙는거 같지 ?
안에 내용은 달라!

• 우리는 일반적인 함수를 훅, state를 사용해서 리턴값을 내주면서 컴포넌트로 사용할 수 있었다
  class도 추가 기능을 넣어조야댐 extends(어떤 기능으로 확장을 하느냐)
  

• extends Component
  (리액트가 제공해주는 기능, 그냥 순수한 class에 불과하는데, 나 컴포넌트로 쓰고싶어 ! )
  근데 얘는 count setcount 하는게 아니라 state라는 이름이 있어
  count라는애를 state를 안에 넣어서 만들고,
  render(){}라는 리액트에서 제공해주는 컴포넌트 기능인데 그림그리기 !
  화면에 그려지는 부분이야 ! return 해가지구 !
  또 우리가 만드는 기능도 만들수 있어 aaa(){} 이렇게 !
  컴포넌트로 확장해줘서 가능한거야 ! state랑 render는 제공해준거라 이름 바꾸면 안댕

- THIS

this는 class 자체를 의미하는데, 내 자신의 state를 가져오는걸 의미한다. this.aaa 이런식으로 !
근데 함수말고 변수도 만들수 있어 걔네도 this.~라고 부를수 있어 !

• this는 매번 같은게 아니라, 매번 누가 저걸 시켰느냐에 따라서 바뀐다 !
  
• 사용자가 직접 입력하거나, 클릭하거나 ... this는 기본적으로 window다
  
  
• aaa라는 애가 qqq를 실행시킨거니까 이때의 this는 aaa가 되는거야(빨간박스가 aaa를 의미) 이해 가능?
  이렇게 매번 달라지는 애들을 동적스코프라고 한다 ! 누가 시켰는지에 따라서 this가 계속 바뀌니까 !
  
• 화살표함수에서는 동적으로 그때끄때 안바뀐다 그래서 this가 window라고 떴지 !
  ^이런걸 우리가 렉시컬 디스라고 부른다. (언어적인)
  실행시킬때마다 매번 바뀌는게 아니라, 언어적인 스코프를 따른다 !
• 자바스크립트가 뿌리가 다르기 때문에(?)
  -자바나 씨언어 부분에서는 클래스를 기반으로 되어있는데, 원래 자바스크립트는 class도 없었고 prototype으로 되어있어따 어려운 프로토타입에서 class사용하게 계속 업그레이드 되는...그런 개념에서 시작된....이야기적인 이야기
  (이부분은 이해못하고 받아적는중)
  
  
  
• 밑에 디스는 화면에 그릴때
  위에 디스는 안에서 선택한다는 의미
  (클래스형일땐 그래서 안되는거고 화살표함수로 바꾸면 저 디스가 이 디스다 해서 말해주는거고
• 이 방법이 싫으면 button onClick={this.onClickCounter.bind(this)} 이걸 쓰면
  이 안에서 this를 저 안에서 쓰는 this에 바인딩 해줘! 라는 뜻이라서 이렇게 써도 된다)
  
  -아직 클래스 기반으로 만들어놓은 회사가 많이 아직 잇어서 클래스 배우는 중이댱
  대부분의 회사들은 함수형 컴포넌트로 옮기고 있긴 하다 그럼 바꾸는 방법을 알아야게찌

- 컴포넌트 생명주기 (Component-Lifecycle)

• 그 주기에 각각 실행시켜주는 함수가 있다!
  
  얘네도 마찬가지로 Render같은 애라서 component에서 가져올수 있는 애들이다 !

- useEffect

대괄호 뭐냐? 의존성 배열이다
(Dependency Array) 이 배열에 의존하고 있다는것을 의미한다.

• 이 함수가 실행될지 안될지를 의존하고 있는거다 .
  의존성 배열이 비었어 그러면 한번만 실행되고 땡 ! 다시 실행이 안되
• didupdate에서 해주면 한번만 업데이트 되고 땡 이라는 뜻이다 !
  근데 [count] 이렇게 들어가 있다 그러면 count가 바뀔때만 실행되는거다
  물론 처음에 한번은 실행 되게찌
  count라는 변수가 바뀔때만 그려짐 !
• componentDidUpdate랑 다른점이다 ([]이렇게 써있는거랑 똑같은거다 )
  [count,writer,title] 이렇게 쓰면 3개중에 하나라도 업데이트 되면 실행하는거다
  
  
• 컴포넌트가 마운트 되고 나서 실행되는 애들...
  한줄한줄 되다가 만들어만지고 안에있는 애들이 실행되는건 아니고
  콘솔찍히고 return 그려지고 마운트가 되었으니까 그리고 나서 안에가 실행이 되는거다

• 나중엔 input 자체가 라이브러리로 작동이 되어있다 ! input태그 스프레드 연산자로 최적화하는거 많이 연습 !

-오늘의과제-

• 게시글 등록하기 부분 리팩토링해 input....
• 랜딩페이지만들기 ? 피그마보면서 따라하지만 처음에 뜨는 페이지 만들기
• 첫페이지는 반응형으로 만들거다 ! 그니까 미리 만들어놓챠 랜딩페이지 슬래쉬해서 들어가는 페이지에 만들자
  앱.tsx 여기다가 만들면 됨니다 page 바로 안에 !

- 알고리즘 수업

1번문제 reduce메서드로 푼 방법

2번문제
마지막 로직에서는 %로 인해 문자열이 숫자열으로 자동변환되기 때문에 신경 안써도 된다는거 숙지!
삼항연산자 숙지 !
오늘의 reduce 파티 ~
reduce는 배열이 필요하니 배열먼저 만들어준다.
x를 문자열로 바꿔서 쪼개준당 ! 그리고 콘솔에 리듀스 찍어보는 습관 !

reduce에 초기값 0을 넣어주면 number로 굳이 안바꿔도된다