⌚️ 시간관리

☀️ 기상시간 - 9:30
🌕 마감시간 - 25:30
❌ 취침시간이 너무 늦어진 탓에 늦잠자게 된다.
❌ 점심약속때문에 오전 찔끔 오후 찔끔 시간을 낭비했다ㅠㅠ 약속은 되도록 밤에 잡는걸로..

💻 오늘 배운 것

1. react

1. 어제자 복습내용(push 와 concat)

• push
  원본의 데이터를 변경
• concat
  원본을 바꾸지 않고 새로운 복제본을 만들어서 데이터를 변경하여 저장함
  ->그 복제본을 setState값으로 줌
  

2. create

• shouldConponentUpdate
  - 컴포넌트에 아무런 변경사항이 없음에도 계속해서 render함수가 실행되는 것은
  프로그램상 비효율적.
  -> 비효율적인 실행의 유무를 결정할 수 있기 위한 함수
  - ❶ render함수 이전에 실행된다.
  - ❷ return되는 값을 무조건 true로 설정하면 render함수가 호출되고, false로 설정하면 render함수가 호출되지 않음
  - ❸ 새로 변경된 값(배열)과 원본 값(배열)에 접근할 수 있다.
  ► 예제에서
  if(this.props.data === newProps) {
  return false;// 변경된 값이 없으므로 render함수가 실행되지 않게 함
  } return true; //변경(입력)된 값이 있는 것이므로 render함수가 실행되어 새로운 항목이 형성됨
  ========> 이는 concat으로 입력했을 때 가능

  리액트의 기본 동작은 애플리케이션을 구성하고 있는 컴포넌트에서 발생하는 모든 변경사항에 대해서 다시 렌더링 하는 것이고 대부분의 경우 이 이러한 기본 동작에 맡겨도 정상적으로 동작합니다.
  하지만 불필요한 re-render는 컴포넌트의 라이프 사이클 압장에서 봤을 때, Best practice일 수 없습니다.
  각각의 컴포넌트들은 shouldComponentUpdate라는 메소드를 가지고 있고 이것은 state가 변경되거나 부모 컴포넌트로부터 새로운 props를 전달받을 때 실행됩니다. React는 이 메소드(shouldComponentUpdate)의 반환 값에 따라서 re-render를 할지에 대한 여부를 결정하게 됩니다.

• ✅만약 push로 입력하고 싶다면?
  push를 사용하여 데이터 추가를 할 경우

  • ► 배열
    var a = [1,2];
    var b = Array.from(a);
    b.push(3);
    console.log(a,b,a===b);
    결과값 -> [1,2] | [1,2,3] | false
    ===> Array.from을 통해 새로운 배열을 생성하여 데이터 추가
    3을 추가하기 전에도 배열의 내용은 같지만 결과값은 false가 나옴
  • ► 객체
    var a = {name:eassy};
    var b = Object.assign({}, a);
    b.name = 'grace';
    console.log(a,b,a===b);
    결과값 -> {name: "eassy"} | {name:"grace"} | false

• immutable

3. update

• form

  https://ko.reactjs.org/docs/forms.html 참고

  • input테그에서 value값으로 this.state를 지정하고, onchange이벤트 함수의 중복된 사용을 없애고 inputFormHandler를 사용하여 setState호출
    ->e.target으로 title값과 desc값 호출

• value값에 props을 지정해버리니까 read only인 props때문에 react내에서 개입하여서 다른 조작을 하지 못하게 막음
  -> 컴퍼넌트 안에서 value값을 state화를 시켜줌

4. delete

• delete키가 포함된 component에서(파일이동 x) if와 while을 통해 작업처리
  • confirm을 사용할 때에는 window를 사용해야 함
    -> true이면 ok | false이면 cancel
  • splice : splice(i,1) -> 배열에서 조건식에 쓰인 i부터 1(크기)만큼 삭제

2. 기타

• Refactoring
  강의를 듣다가 흘려 말하신 단어가 생각나서 한국어로 리서치해서 찾은 개념.
  물론 아직 프로그램 구현도 하지 못하는 완전 풋내기지만//

  이미 작성한 코드에서 구현된 일련의 행위들을 변경 없이, 코드의 가독성과 유지보수성을 높이기 위해 내부구조를 변경하는 기법

  이는 성능 최적화와는 말이 다르다.
  미래의 나는 혼자가 아닌 여러 사람들과 협업을 해야 할텐데, 협업을 하는 사람들이 이해할 수 있는 코드를 작성하는 것이 중요하다.
  아무것도 모를때부터 알아두면 좋을 것 같은 기법(?)
  

❓오늘의 나는

1. react강의를 완강했다🎉 비록 아직도 어려운 부분이 90%일만큼 바로 내것으로 만들기는 너무 어렵지만 어떤 방식으로 적용되는지는 대충 그림이 그려진 것 같다.
2. 강의가 코드를 입력하면서 계속해서 가독성을 높이기 위해 중복된 코드를 줄여가는 작업을 하는 것을 보여주는데, 그 모든 것들을 부분적으로 기록해두기가 어렵다.
3. 기온차가 심한 요즘 다시 콜린성두드러기가 심해졌다. 조금 걷기만 해도 두드러기가 올라온다니,,, 그래서 오늘부터 땀이 날정도의 운동을 시작했다🧘🏻‍♀️
4. 블로그작성을 공부시간이 끝난 후 부지런히 작업해서 일찍 마무리 해야겠다. 취침시간이 너무 늦어지다 보니 기상시간을 맞추기가 어렵다😅
5. 1차적으로 생각해놓은 주말공부계획을 문원이와 공유했다. 친구와 이야기하다 보니 유튜브 컨텐츠를 생각해보는 것도 나쁘지 않겠단 생각이 들었다.
6. 공부를 위해 리서치를 하다 보면 정말 대단한 사람들이 많다. 지금 내가 아는게 너무 없기 때문에 더 그렇게 보이기도 하겠지만, 그때문에 작아지지 않도록 조심해야겠다! 나도 조금씩 나아갈꺼니까🔥

❗️내일의 나는

1. 인프런에서 결제해둔 react강의를 들어보아야겠다. 아직 오빠가 계획해준 시간이 많이 남았으니 수단과 방법을 가리지 않고 react에 대해 파고 들어야겠다.
2. 문원이에게도 공유한 'this'에 대해 리서치 하며 공부하기
3. 주말계획을 위해 오빠와 연락취하기
4. 최소 30분은 땀을 흘리며 운동을 해보아야겠다..
5. 끼니 잘 챙겨먹고 물 많이 마시고 자주 움직이기 - 이렇게 가만히만 있다간 굴러다니는 돼지가 될 것 같다🐽