오늘은 (4) 월 (3) 일 / 날씨: (맑음)
한줄: 편집하다 일과표 하나 날렸다..^^ 바본가? 충전기는 어디갔니~
💻 1) WORK MEMO & REVIEW
10 to 12 , 22 to 24
✍️ 코드관련
- 소스코드
-
내가 만든 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
- 복잡하고 느린계산(expensive calculations)/ object나 array 등 참조값 기억
💻 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 => 앞의 점 찍으면? 리눅스나 맥 환경에서 숨김파일 역할 -
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월)
- 테니스 시작 스트레스 풀기
- 아웃풋 중요 및 제발 정리정리정리!
제대로 꾸준하게 / 블로그 이전 => https://dailybit.co.kr