[주간회고록] 2주차 주간 회고록

2주차 기간: 2024년 2월 21일 → 2024년 2월 27일

졸업 과제...해치웠나...?

🗒️ 핵심 3줄 요약
- 방심하면 생활 패턴이 다시 뒤바뀐다.
- react js 기초 끝. typescript 시작.
- 남는 건 기록!

🎯 이번 주 목표

• ✅ 건강하게 생활하기
• ⚠️ 학교 졸업 프로젝트 최대한 마무리하기
• ⚠️ 공부한 내용 정리해서 잘 이해하기

👏 칭찬하고 싶은 점

• 예습은 못하고 있지만 복습은 하고 있는 점!
• 저번 주에 생일이라 친구들이랑 노느라 할 일이 밀렸었는데 어찌저찌 다 해낸 점!
• sticky scroll이나 horizontal scroll 구현해보고 싶었는데 이번 리액트 졸업 작품에 시도해 본 것! 그리고 중간에 어떻게 구현해야 하는지 감도 안 와서 포기하고 싶었는데 결국엔 구현함.(하지만 버그가 많음)

😭 고치거나 버려야 할 점

• 강의에서 안다고 생각하는 내용이거나 recap이면 2배속으로 후루룩 흘려 듣는 것 → 결과: 퀴즈 틀림
• 할 일을 늦게 끝난 날에 보상 심리로 오버워치하지 말자 ㅎㅎ 생활패턴 또 뒤집어진다..!!
• 모르는 내용이나 궁금한 점, 헷갈리는 점은 바로바로 쓰라고!! 까먹는다고!!

🏃 일일 스프린트

수요일 | 24.02.21

• ✅ 리액트JS 기초 강의수강 #3.4~#3.9
• ✅ 바닐라 JS 강의수강 #3.4~#3.8
• ✅ 챌린지 퀴즈 풀기
• ✅ 주간 회고록 작성하기
• ✅ 주간 회의 참여하기
• ❌ 졸업 프로젝트

목요일 | 24.02.22

• ⚠️ 리액트JS 기초 강의수강 #4.0~#4.3
• ⚠️ 바닐라 JS 강의수강 #4.0~#4.7
• ✅ 챌린지 퀴즈 풀기
• ❌ 졸업 프로젝트

금요일 | 24.02.23

• ⚠️ 리액트JS 기초 강의수강 #5.0~#6.4
• ✅ 챌린지 퀴즈 풀기

토요일 | 24.02.24

• ✅ 리액트JS 기초 강의수강 #7.0~#7.10
• ⚠️ 챌린지 졸업 과제 하기
• ❌ 리액트JS 공부한 내용 정리하기

일요일 | 24.02.25

• ✅ 챌린지 졸업 과제 하기
• ⚠️ 학교 졸업 작품하기

월요일 | 24.02.26

• ✅ React JS 기초 강의 복습 #1.2~#2.6
• ✅ 타입스크립트 수강 #1.1~#2.1
• ✅ 챌린지 퀴즈 풀기
• ⚠️ 학교 졸업 작품하기
• ✅ React JS 졸업 작품 정리

화요일 | 24.02.27

• ✅ React JS 기초 강의 복습 #3.0~#3.3
• ✅ 타입스크립트 수강 #2.2~#3.1
• ✅ 챌린지 퀴즈 풀기
• ⚠️ 학교 졸업 작품하기
• ❌ 연구 발표 준비

✍️ 이번 주 배운 내용

🤩 새롭게 알게 된 것

React

• props: 컴포넌트에 전달하는 값.
  proptypes: props가 유효하게 전달되었는지 확인 가능
• useEffect: 함수 컴포넌트에서 side effect를 수행하도록 허용한다.  
  useEffect에서 함수를 반환하면 컴포넌트가 unmount될 때 실행된다.
  

  useEffect(() => {
      return () => console.log('component unmount')
  }, [])​

typescript

• type alias: type 키워드로 타입에 별칭을 만들어 사용할 수 있다.
• optional property: ? 키워드 사용하면 만들 수 있다.
• readonly: type 앞에 readonly 키워드를 붙이면 읽기 전용으로 만들 수 있다.
• tuple: 원소의 개수와 타입이 정해져 있는 배열이다.
• unknown: 타입을 알 수 없을 때 사용한다.
• never: 실행이 안 되는 곳에 사용한다.
• call signature: 함수의 호출 방법과 반환 값을 알려준다.
• overloading: 서로 다른 call signature를 가지는 것을 말한다.

🤔 질문

1. useState에서 함수로 값을 업데이트 하는 이유를 제대로 이해하고 싶다.
   

   setCounter(counter + 1);
   setCounter((current) => current + 1);​

   functional update guarantees that you're updating the correct value if it happened to be update multiple times in the same execution frame.
2. 아래 코드에서 console.log(counter)를 하면 update 전의 counter 값으로 콘솔에 찍힌다. 이유가 궁금했는데 클로저와 관련이 있다고 했으니 공부해 봐야지.
   

   const [counter, setCounter] = useState(0); 
   
   const countUp = () => {
     setCount(count + 1);
     console.log(count);
   };
   
   return (...)​​​

   읽어볼 것: https://velog.io/@jay/setStateisnotasync
   

   

   한 번 눌렀을 때 coneole

💖 주간 회의와 조별 활동

📝 이번 주 활동

• 자기소개 작성하기
• 조이름 정하기

🙃 기억에 남는 것

• 다른 분들 자기소개를 봤을 때 멋있는 분들이 너무 많다
• "아이고"