[데브로드] 프론트엔드 4주차 주간회고

잘한 것은 무엇인가?

• 강의에서 배운걸 실제로 사용함
  
  • useRef 값 참조, DOM control 하는 부분.
  • useRef는 알기만 하고 어떻게 활용할지 몰랐는데 이번에 사용하면서 고민하던게 좀 쉽게 풀렸다.
  • useEffect clean up 함수도 이번에 활용해봤다. (원하는 방법이 아니라 try에 그치긴 했지만)
• 수요일까지 강의노트 작성하기
  
  • 지난주에 수요일까지 강의 다 듣고 강의노트까지 올리는게 목표였는데 이번주에는 그걸 지켰다. 다행이다.
• 운동 시작
  • 일하고... 퇴근하고 공부하는걸 반복하면서 계속 앉아만 있으려니 체력이 너무 떨어지는게 느껴졌다..
  • 도저히 버틸 수가 없어서 운동 다니기로함..! 월/수 수업에 나가고 있다..! 무지 힘들어서 도움이 될 것 같음.

잘못한 것은 무엇인가?

• 실습량이 부족하다. 
  
  • 강의를 다 듣고 강의노트까지 다 정리했는데도 막상 과제를 하려니 손에 익지 않아 어려웠다.
  • 주중에 실제로 코드쳐보는것까지 더 시간을 할애해야겠다.
• 까먹게 된다,,
  • 그리고 typescript가 아직 손에 안익는다. 주중에는 계손 js만 사용하니까 그런듯.
  • 타입선언은 헷갈려..

무엇을 배웠는가?

• fetch - chunk 
  
  • 이 부분은 새롭게 배운 부분이다.
  • fetch / async-awiat 로 비동기 통신 하는 방법만 알고있었지 안에 있는 데이터를 받을수 있을 때까지 chunk 하고 그 값을 다시 사람이 볼 수 있는 형태로 변환한다는 것은 알지못했다. 개념은 모르고 사용만 하고 있었던 것...
• cors 에러
  • 항상 cors 에러가 나네요... 하고 이걸 어떻게 해결해야할지 정확히 알지 못했다.
  • 백엔드 단에서 데이터는 다 받아오는데 브라우저에서 막는거고, 이 에러를 해결하려면 백엔드에서 "클라이언트 중에 여기서 요청하면 괜찮아~ "라는 것을 알려줘야 한다. 그래서 백엔드에 cors에러 나니까 설정해달라고 요청해야 한다는 것.
• useEffect 와 useRef
  • 실습 중에 document.title 변경하는 부분이 있었다. 오잉 ?? 상태값을 바꿨는데 왜 안바뀌지??? 바로바로 cleanup을 안해줬던거임.. 아 레전드.// 근데 이걸 실제로 회사 프로젝트에서 구현할때 이 문제를 만났음.. 예전같았으면 한~~참을 헤멨겠지만 이젠 난 클린 업 함수를 써야 한다는것을 아는 사람... 바~~로 클린업 함수로 문제 해결 useEffect cleanup
  • useEffect - 비동기 통신할때 여기에서 직접 함수 작성해서 해주기. 관련 있는 애들도 다 이 안에 넣어주기. 밖으로 빼면 동작은 되는데 의존성 문제가 생길때 처리하기 복잡해짐. 이번에 플젝할때도 왠만하면 useEffect 안으로 넣어줬다. 노란줄 뜨면서 찡찡대는 모습 보기 싫어서... 뭔가 useEffect 내부가 뚱뚱해서 보기 싫지만 경고 메시지 없어서 속이 시원했는데 앞으로도 이렇게 하자
    • 궁금한거...page 이동에 따른 부분은 어떻게 처리할지? 이거는 고민해보자. 의존성에 page만 넣으면 경고 뜨니까..
  • useRef도 적용했음. 현재 시점의 본문 내용 값을 가져와야 하는데 useState로 하니까 현재 시점이 아니라 초기값만 잡혔음 그래서 현 시점의 값을 참조하는 useRef로 변경했음. 이것도 안배웠으면 어찌해야할지 한참을 헤멨을 듯... 
• usehooks-ts
  • 정말 유용하다. 이런게 있는데 왜 몰랐지??? useLocalStroage... 이걸 내가 직접 만들어서 쓰고 있었음... 하....
  • useEffectOnce -> 좀 더 명확하게 해준다.
  • 여러 hooks들이 있으니까 차근차근 다 써보자.
• filter / reduce / includes 
  • filter로 배열에서 해당 값 만 제외하는 부분... 구글링하지 않고 머리속에 있던걸 사용했다. 이전에 플젝하면서 이해가 잘 안됐는데 일단 급하니까 복붙해서 썼던 부분인데... 이번에는 이해하고 썼음..
  •  map같은 경우는 정말 정말 자주 써서 익숙한데 나머지는 이번에 몇주간 학습하면서 익혔다.
     

해결해야할 문제/남아있는 의문은 무엇인가?

• react hooks
  • useState / useEffect / useRef - > 공식문서의 활용정석을 알아보자.
  • useContext / useLayoutEffect -> 이거 개념자체가 없음. 이거를 알아보자.
  • use.Memo 메모이제이션? 이거는 괜~~히 했다가 잘못쓰는 경우 많으니 억지로 쓰지 말라고 했던것 같음... 다시 확인
• type interface 
  • 뭔 차인지 언제 쓰는게 좋은지 아직도 모르겠음;;
• type 선언할때 어떤거는 [] 붙이고 어떤거는 안붙이고 하는데 이거 뭔지 정확히 보자. object는 어떻게 해야하는지도!

 

• 공식문서로 학습하기 (요거는 항상 중요!)