[20220403 S]

오늘은 (4) 월 (3) 일 / 날씨: (맑음)

한줄: 편집하다 일과표 하나 날렸다..^^ 바본가? 충전기는 어디갔니~

💻 1) WORK MEMO & REVIEW

10 to 12 , 22 to 24

✍️ 코드관련

• 소스코드

  • 컴포넌트 분리 https://as-you-say.tistory.com/221

  • 내가 만든 custom hook/ 공통컴포넌트 초기화 부분 ->이거 다시

  • state 및 비즈니스 로직 상위 페이지로 올리기

  • prop-types? 이 부분 보기

  • e.target.value 이거랑 / assignment.children.length 이거 고치기

  • 커밋메시지 오타조심

  • useMemo/ useCallback
    https://www.youtube.com/watch?v=_AyFP5s69N4
    https://www.youtube.com/watch?v=THL1OPn72vo

  • useCallback (콜백함수/파라미터 활용가능)/ useMemo (값)

  • useMemo를 사용해야 하는 2가지

    • 복잡하고 느린계산(expensive calculations)/ object나 array 등 참조값 기억
      https://reactjs.org/docs/hooks-reference.html#usememo
      https://imagineu.tistory.com/49
      -> 이외에는 이전 계산결과를 저장함으로써 메모리낭비로 이어질 수 있으니 사용x

💻 2) GRAMMAR OF JAVASCRIPT

16 to 18

✍️function (입력 처리 출력)

• nodemon
  * npm install nodemon -g
  • nodemon (파일명)
  • nodemon 종료: ctrl + c
• fucntion
  • 좋은 프로그래밍 => 함수를 잘 작성하는 것
  • 재사용/ 가독성/ 유지보수성을 위해
  • function 함수이름(a,b){return a+b;} <= 정의 /함수선언문
  • 함수이름(x,y); <= 호출
  • 함수이름, parameter 이름 의미있게
  • 참조값
  • 함수는 object 객체
• function return
  * return 명시 x => 자동 undefined
• function parameters
  * arguments object 안에 parameters 저장
  • 기본값 지정 like function 함수이름(a= 10, b=10){}
  • rest parameters
• function expression
  const 함수이름 = function (){}
  함수는 객체이기 때문에 변수로 할당가능
• arrow function
  * const 함수이름 = ()=>{}
• 생성자 함수 const object = new Function();
• callback function
  • 고차함수
  • 외부로부터 주어지는 함수/ 호출x 참조값 전달
• 주의
  * 외부로부터 주어진 인자(특히 원시값이 아닌 참조값 관련)를 내부에서 변경x

const plus = ()=>a+b;
const minus = ()=>a-b;

function 고차함수 (a,b,콜백함수){
let result = 콜백함수(a,b);
return result;
}

고차함수(2,1, plus);

💻 3) SNS PROJECT

18 to 21

✍️ project & 관련지식

• framework, library
  • nextjs
  • react
  • sql (배워서 적용)
  • redux
• front-end
  • 실제 api 받기 전 더미데이터로 데이터작업하기 => 지금 내가 실무에서 하고 있는 부분?
• 브라우저/ 프론트서버/ 백엔드서버/데이터베이스 (ssr과 csr)
  • 3초 안에 화면 나오게
  • csr 의 단점 -> 코드spliting 을 통해 해결
  • 넥스트 -> 처음에는 ssr, 이후 csr
  • 서버사이드 가장 큰 이유: seo/ 로딩없애기
• prop-types
  * npm i prop-types

import PropTypes from "prop-types";
const AppLayout= ({children})=>{
return (
<div>
<div>메뉴</div>
{children}
</div>
)
}
AppLayout.PropTypes = { children: PropTypes.node.isRequired,}

• next Link

<Link href="/"><a></a></Link>

• eslint 개발환경setting
  .eslintrc => 앞의 점 찍으면? 리눅스나 맥 환경에서 숨김파일 역할

• cors
  https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

• github로 관리

• 기능

  • full stack 으로 flow 익히기
  • 로그인부터~

🆎🎾 4) ENGLISH/ GERMAN / TENNIS

Monday/ Wednesday/ Thursday (Clarisse랑 날짜 조정하기)
Wednesday/ Saturday

📌 5) ETC (READING/ ECONOMY/PLAN)

14 to 15

• routine template 만들기 / 자료 찾기

6) TODO & QUESTIONS

• 초기화 부분 테스트
• state 값 올리기 및 props 처리
• iterate 함수 만들기 -> 완료
• ui 작업

❤️ 4월 GOALS

• 루틴화하기(집중 안되더라도 습관화하기)
• 이해하고 넘어가도록 노력하기
• 업무 질문 많이많이하기
• es6 재정리하기/ SNS Project & Redux(4-5월)
• 테니스 시작 스트레스 풀기
• 아웃풋 중요 및 제발 정리정리정리!