[React] netflix 클론 코딩 후기 - nomad coder

드디어 해봤다. React 마스터 챌린지!

 

냅다 결론부터 이야기 하자면

https://study-by-myself.github.io/nomflix/

React App

 

정말 너무 힘들었다... 😢

니콜라스의 강의를 정말 좋아해서 많이 사두고 하나씩 보고 있는데,

처음엔 다 좋게만 보였지만 이제는 슬슬 개선점이 보인다.

그만큼 내가 많이 성장했다는 거겠지?

강의는 라이브 코딩으로 진행하는데 그러다보니 파일 분리나 이런건 하지 않고 기능 구현에 치중해서

뭔가 내가 원하는 그런 클린 코드나 클린한 아키텍처가 아니게 되고...

한 파일 안에 코드가 막 쌓이다보니 디버깅도 힘들어지고 가독성도.. 재사용성이나 유지보수도...😥

 

 

어려웠던 점 . . .

https://pro-yomi.tistory.com/75

[CRA] TypeScript와 React 18

강의를 하는 시점과 지금의 리액트 버전이 달라서 충돌이 나거나 에러가 뜨는 일도 빈번해서 일일이 찾아봐야 했다.

그새 리액트는 18로 버전이 올라갔고, react-router-dom도 버전 6으로 올라가버린 것이다.

아예 입문자라면 강의를 따라하기 위해 버전을 낮춰서 맞추는 것도 방법이겠지만

그래도 리액트를 꾸준히 써왔던 입장이니까 새로운 버전에 맞게 써보자 싶어서 그냥 새 버전으로 디버깅하면서 했다.

한 파일에 다 때려넣어져있던 코드를 최대한 많이 쪼개고 쪼개서 재사용에 용이하고 가독성있게 만들었다.

 

 

클론 코딩의 장점

용량때문에 화질이 좀 깨진다. 피카츄사진은 이미지가 없다는 뜻

클론코딩의 장점은 쉽게 따라하면서 익숙해질 수 있는 것 같다. 익숙해지면 자신감이 붙는다.

나는 css나 애니메이션은 배울 때만 잠깐 재밌고 그걸 실전에서 써먹으려면 많은 심리적 장벽을 거쳐야 했는데

여기엔 애니메이션이 가득 들어있고 모양새도 나쁘지 않아서 꽤 마음에 들었다.

그리고 뭔가 하나를 하루만에 뚝딱(?) 만들었다는 뿌듯함..

결과가 뭐라도 남으니까 누구에게나 보여줄 수 있어서 좋다.

 

 

과몰입의 무서움 . . .

되게 웃긴 버그

클론코딩이니까 금방 끝나겠지~ 했는데 기능을 이것저것 추가하고 리팩토링을 하다 보니 하루 종일 걸려버렸다.

정말 웃긴게, 아이스크림 먹으면서 대충 하려고 했는데 집중하다보니까 아이스크림이 다 녹아서 책상에 줄줄 흐르고 있었다 🤣

그리고 되게 웃기게 동작하는 버그가 생겨서 그거 고친다고 삽질을 좀 했더니 시간을 보니까 새벽 네시 반이 넘어가고 있었다..

운동도 해서 진짜 너무 피곤했는데 과몰입을 해버리면 시간이 진짜 무섭게 가버린다. 과몰입이 이래서 무섭다.

 

 

조금 더 손을 본다면 . . . ?

오늘 마지막 과제를 제출하고 심사중이다.

시간이 너무 늦어버려서 완전히 마음에 들진 않지만 그럭저럭 동작하는 페이지를 만들어서 배포할 수 있었다.

중간에 버그 때문에 삽질하느라 시간이 너무 지체되어 코드를 그냥 막 나열해놨는데 이 부분도 리팩토링을 하면 좋을 것 같다.

모달을 좀 더 예쁘게 만들어보고 싶다. 지금은 그냥 딱 이미지랑 제목, 줄거리 이정도만 보여주는데 평점같은 걸 추가하면 좋을것 같다.

그리고 모달을 클릭하면 이걸 볼 수 있는 사이트로 직접 넘어가면 더 좋을 것 같다. 좀 귀찮겠지만?

이 글을 적다가 menifesto랑 favicon이 맘에 안들어서 바꿔버렸다. 이건 금방 할 수 있을 것 같아서.

 

이상한 여백이 엄청 많은데 css도 제대로 파보고 싶다.

확실히 css는 어렵다. 대충 떡칠하다보면 보기엔 그럴듯해도 중구난방이라 디버깅하기가 진짜 힘들다.

저 위에 되게 웃긴 버그도 css 한 줄 때문에 일어난 거였다.

어떻게 하면 css를 좀 더 구조적으로 클린하게 관리할 수 있을까?

 

슬라이더에 자잘자잘한 버그들도 있는데 이것들도 손보면 더 좋을 것 같다.

interface라고 앞에 I를 붙이는 것은 더이상 안쓴다고 하는데 이 부분은 강의를 따라하느라 이렇게 됐다.

이 부분도 나중에 I를 떼고 다른 이름으로 바꾸면 좋을 것 같다.

디렉토리 구조를 좀 더 예쁘게 관리하고 싶다.

회원가입/로그인 기능을 덧붙이고 서버도 붙이면 기능은 얼마든지 늘어날 수 있을 것 같다 😚

 

 

끝으로

다음엔 어떤 삽질을 하게 될까?

이번에는 노마드 코더 리액트 마스터 챌린지를 해보았다.

뭔가를 만들어보는 경험을 해보고 싶은데 아직 막막하다면 클론코딩을 적극 추천한다.

솔직히 클론코딩을 하다 보면 아쉬워서 뭔가 기능을 자꾸 덧붙이게 되고

코드도 계속 리팩토링 하게 되는데 그 때부터가 진짜 재미인 것 같다.

힘들지만 그만큼 재미있었고 리액트가 막 싫어지다가 막 정이 붙는 그런 시간을 보냈다.

하지만 다음부터는 몰입은 적당히 하는 걸로...