[220123-220129] 한 건 없는데 시간은 왜 이리 빨리 지나가는지

 

 

1/23

📝 할 일

• 리액트 과제 9일차
• 리액트 Youtube 토이 프로젝트 : 상세페이지 작업

 

✅ 한 일

• 리액트 과제 9일차

오늘의 과제는 영화 목록 무한스크롤

useInfiniteQuery 를 이용해서 무한스크롤이 되도록 영화 목록이 계속 나오게 하는 작업이었다

문서도 뒤져보고, 구글링도 해봤지만 사용하는 사람들이 잘 없는지 정보가 그리 많지 않았다

그래서 다른 팀원의 코드를 살짝 참고했다..ㅎ 죄송해요 안 그러면 하루죙일 붙잡고 있을 것 같았어요

사실 나는 인자로 title 도 넣고 pageParam 도 넣어서 해주고 싶었는데 그렇게 하면 계속 똑 같은 것만 나오길래 도저히 풀리지 않아서 볼 수 밖에 없었다

title 을 넣어줘야 할 때는 도대체 어떻게 해야되는지 의문이다

 

 

 

• 리액트 Youtube 토이 프로젝트 : 상세페이지 작업

이제 슬슬 멘토님들이 리뷰도 시작하고 계시고 진짜 나오지 않으면 안될 것 같아서 하루종일 프로젝트만 붙잡고 있었다

없는 정보를 출력하려고 해서 문제인 건가 싶어 해당 정보들이 있을 때 출력해주도록 전부 예외처리를 해주고 중간에 배포 사이트에 등록해놓은 api key 의 할당량이 다 되어서 다른 사람의 api 로 변경하여 배포 페이지를 다시 실행시켜봤다

그랬더니 된다..?

 

이게 왜 되지? 아니 도대체 뭐가 문제였던 거냐고~~~~~~~

 

 

 

 

 

 

 

1/24

📝 할 일

• 리액트 과제 10일차

 

✅ 한 일

• 리액트 과제 10일차

오늘의 과제는 저번에 했던 framer-motion 2 : animation, variants, gestures 구현!

animation 만드는 게 은근 재밌고 결과물도 바로바로 나오니까 뿌듯하고 막 그래서 framer-motion 할 때는 재밌닿ㅎ

저번에 슬라이드가 오작동했던 부분은 아직 고쳐지지 않아서 좀 찝찝하다

 

 

 

 

 

 

 

 

1/25

📝 할 일

• 리액트 과제 11일차

 

✅ 한 일

• 리액트 과제 11일차

 

오늘의 과제도 framer-motion 3 : drag 1, 2, scroll 구현!

이번 주는 계속 framer-motion 과제를 내주실랑가보다 오히려 좋아 감기에 걸리고 난 뒤로 자꾸 몸이 축축 쳐지고 왠지 집중도 안됐는데 약간 쉬는 시간을 가진 것 같다

니꼬쌤 강의 들으면 어려운 animation 구현도 쌉가능이라구여~

자막 보는 게 쩜 힘들긴 해도 가끔 다른 한국 강의를 볼 때 자막이 필요할 때가 종종있는데 이런 점은 또 메리트가 된다

useMotionValue, useTransform, useScroll 을 사용하여 요소의 움직임을 감지하고, 반환되는 값을 내가 원하는 값으로 변환하여 style 로 적용시켜주며, 스크롤의 값을 반환해준다

여러 프로젝트에서 적용해볼 수 있을 것 같아 기대가 된다

 

 

 

 

 

 

 

1/26

📝 할 일

• 리액트 과제 12일차
• 노마드 코더 리액트 마스터 state management 실습

 

✅ 한 일

• 리액트 과제 12일차

오늘의 과제는 framer-motion 4 : 모든 기능 구현 및 복습!

이번엔 니꼬쌤이랑 똑 같은 걸 구현하는 게 아니라 약간 응용하는 거라 오랜만에 머리를 좀 썼다

잊었던 custom 도 다시 사용해보고, layoutId 를 새로 배우고 AnimatePresence 를 다시 사용해봤다

역시 쓰지 않으면 까먹는다더니 몇 일 전에 쓴 것도 죄다 까먹는 것 같다

리마인드, 리팩토링 필수필수!!!

 

 

• 노마드 코더 리액트 마스터 state management 실습

crypto tracker 프로젝트가 마지막으로 recoil 을 쓰면서 마무리됐다

요즘 상태 관리 라이브러리로 recoil 을 많이 쓴다던데 확실히 redux 쓰는 거랑 달랐다

기능도 좋고 간단하고 코드도 좀 더 가독성이 있어졌다

mobx 를 배우면서 와 redux 는 천사다 라는 생각을 했었는데 recoil 은 뭐 거의 하사장 수준으로 편했다

저장소도 atom 하나 만들어서 key 와 default 값을 써주면 끝이고 수정도 값을 가져오는 것도 코드 한 줄이면 끝, 수정하는 것도 useState 마냥 쓰면 끝. 이건 혁명이야~~ recoil 안 쓰면 바보...는! 아님 안쓸 수도 있지..

 

 

 

 

 

 

 

 

1/27

📝 할 일

• 리액트 과제 13일차

 

✅ 한 일

• 리액트 과제 13일차

오늘은 라이브러리 없이 form 유효성 검사 구현!

확실히 이때까지 react-hook-form 을 이용해 구현했던 것을 없이 구현하려니까 좀 귀찮고 코드양도 많아지고 가독성이 떨어졌다

그래도 라이브러리 없이 한번씩 구현해보는 것이 언어를 이해하고 배우는 데에 많은 도움이 되는 것 같다

 

 

 

 

 

 

 

 

1/28

📝 할 일

• 리액트 과제 14일차
• 노마드 코더 리액트 마스터 state management 실습

 

✅ 한 일

• 리액트 과제 14일차

오늘은 react-hook-form 이용해서 form 유효성 검사 구현!

게비스콘~ 너무 맘이 편안하고 구현하기 쉬웠다

라이브러리만 왕창 쓰고 싶은 내 마음.. 너무 염치없는 것일까?

 

 

 

• 노마드 코더 리액트 마스터 state management 파트

react-hook-form 을 배웠는데 이전에 4차과제하면서 한번 사용해봐서 수월하게 진행했다

이번 파트가 긴 편이라 하루에 다 듣진 못하고 나눠서 듣고 있는데 이마저도 계속 다른 일에 치여서 진행을 못하고 있다