처음으로 강의를 보지 않고 만들어본 React 클론 코딩

 

 

모멘텀을 클론 코딩하게 된 이유 

속성으로 리액트를 배웠으나 뭘 해야할 지 모르는 건 둘째치고 리액트 자체에 적응을 못해서 자바스크립트로 손 쉽게 만들 수 있는 것들 조차도 재현할 엄두가 나지 않았다.

그리고 제일 중요한 것은 나는 일하면서 공부하는 입장이라 시간이 없기 때문에 만드는 기간이 늘어지면 늘어질 수록 내가 앞에서 뭘 하고 있었는지 기억이 나질 않는다.. 🥲

이런 이유들로 인해 가장 단순하고 만들기 쉬워 보이는 모멘텀을 클론 코딩하게 되었다.

효율이나 성능상의 이점을 챙기기 보다는 다소 비효율적일지라도 내가 배운 모든 기능들을 최대한 사용해보고 익숙해지는 것을 목표로 삼았다.

 

 

라이브러리 

React, Redux, React-redux, react-router-dom v6, persist-redux, styled-components, motion-framer, EmailJS, Ant design, axios, gh-pages, uuid 

 

 

이번 클론 코딩으로 인해 얻게된 것

비록 별다른 기능이 없는 단순한 페이지지만 어떤 강의도 참고하지 않고 내 스스로 선택한 페이지를 혼자 완성했다는 사실이 기쁘다.

또한 리액트 문법을 다 배웠을 때까지만 해도 이걸로 어떻게 코딩을 하라는 건지 너무 막막하고 걱정이 많았었는데 구글신님과 스택 오버플로우의 도움으로 불가능할 것 같았던 모든 걸 해결해본 경험이 앞으로도 나에게 자신감을 줄 것 같다.

 

 

어려웠던 부분

DOM을 직접 조작하던 사고 방식에서 벗어나지 못해서 우측 하단의 Todo list를 만드는 부분에서 큰 어려움을 겪었다.

또한 이제는 나름 익숙해졌지만 redux나 React.useState등 모든 것들이 처음 적응할 때는 너무 어렵게 느껴졌다.

 

 

아쉬운 점

styled-components라는 신문물을 만나서 " 어 이거 nesting 문법도 되네?? 하나하나 컴포넌트 만들어야 해서 불편하다더니 완전 편한데? "라고 생각하며 아무렇게나 작성했다가 마지막 컴포넌트를 만들 때 쯤에는 nesting 남발로 인해 css가 완전히 엉망 진창으로 꼬여 있었다..

사실 돌이켜보면 styled-components 뿐 아니라 scss를 사용할 때에도 이미 내가 nesting을 남발해서 다 갈아 엎은 적이 있었는데 styled-components는 컴포넌트 단위로 돌아다니면서 css를 수정해줘야 하니 대체 어디서부터 손을 대야할 지 몰라 그냥 :nth-child()같은 걸로 조절하다가 마지막에는 important까지 날리며 완벽하게 개판을 만들어 버렸고, 개발자를 편리하게 해주기 위해 만들어진 라이브러리들이지만 사용법을 똑바로 숙지하지 않으면 오히려 역효과만 있을 수도 있다는 사실을 뼈저리게 깨달았다..

 

 

 

앞으로의 방향

혼자 결과물을 만들어낸 것이 뿌듯하긴 하지만 내가 자바스크립트를 학습한 경험과 비교해봤을 때 무조건 부딪치며 배우는 것이 능사는 아닌 것 같다.. 학습 속도를 생각했을 때 효율이 너무 떨어진다.

매일 일정 시간을 온전히 개발 공부에 갈아 넣을 수 있는 사람이라면 이런 학습 방식도 괜찮겠지만 나는 최소한의 시간에 고효율의 학습을 해야하기 때문에 일단 다른 강의를 들으며 react 공부를 조금 더 해야할 것 같다.

그리고 최대한 빠른 시일내에 TypeScript는 꼭 배우고 싶다. 타입스크립트가 좋다는 말을 많이 들어서 그런 것도 있지만 요즘은 이게 거의 기본기인지 stackOverFlow 같은 참고용 사이트에 타입스크립트로 예제가 작성된 것들이 많아서 난해하게 느껴질 때가 많다.

 

 

 

 

github

https://github.com/yangddoddi/momentum_react

GitHub - yangddoddi/momentum_react

pages

https://yangddoddi.github.io/momentum_react/#/

React App