do it 클론 코딩 영화 평점 웹서비스 후기: ReactJS 맛보기

이번에는 do it! 클론 코딩 영화 평점 웹서비스를 리뷰하려고 합니다. 

최근에 프론트엔드에 관심이 생겨서 ReactJS를 경험해보고 싶은데 좋은 방법이 없을까? 고민했습니다. 

바닐라 JS 클론 코딩 챌린지를 했을 때, 좋았던 기억이 떠올라서 웹서비스 클론 코딩에 도전했습니다. 

 

Do it 클론 코딩 영화 평점 웹서비스 후기 

Do it 클론 코딩 영화 평점 웹서비스 책은 노마드 코더로 유명한 니코쌤이 쓰신 책입니다. 

아래 홈페이지에 접속하면, 영화 평점 웹서비스뿐만 아니라, 바닐라 JS, CSS, Html, React 심화 등 다양한 클론코딩 강의를 보실 수 있습니다.

클론 코딩 영화 평점 웹서비스

https://nomadcoders.co/

노마드 코더 Nomad Coders

클론 코딩 추천 대상 

Do it 클론 코딩 영화 평점 웹서비스는 ReactJS에서는 초급 단계이지만, 기본적인 JavaScript, CSS, HTML을 아는 분이 수강할 것을 권장합니다. 이상적으로는 노마드 코더 Junior Track에 있는 모든 코스를 수강하고 보는 것이 좋지만, 만약에 모두 보지 못했다면, 최소한 '바닐라 JS로 크롬 앱 만들기'를 끝내고 영화 웹 서비스 클론 코딩을 보는 것이 좋습니다. JavaScript 기초를 자세하게 설명하는 책은 아니기 때문에 JavaScript에 대한 선행 지식이 필요합니다. 

저는 바닐라 JS로 크롬 앱 만들기 챌린지를 성공했는데, 몇 달 전에 본 것이라 기억이 잘 안 났습니다. 

초반 부분은 책을 읽고 따라가기 괜찮았지만, 앱 만들기에 오면서 읽는 게 많이 막혔습니다. 

[2021 Update]로 React 강의가 추가로 업로드되었는데, 이 강의를 듣고, 책을 읽으니 진도를 따라가고 클론코딩하는 데 무리 없었습니다. 만약에 ReactJS가 저처럼 처음이라면, [2021 Update] 강의 부분을 먼저 보고, 책을 처음부터 읽으면 더욱 이해하기 좋을 것입니다. 

클론  코딩 책 분량

클론 코딩 책은 약 250페이지로 구성되어 있으며, 노마드 코더 ReactJS로 영화 웹 서비스 만들기와 같은 내용입니다. 

 

https://nomadcoders.co/react-for-beginners

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

ReactJS 강좌도 무료로 되어있고, 6시간이면 강의를 들을 수 있는데, 책과 함께 공부하면 더욱 좋습니다. 

책을 읽는데 니콜라스 선생님의 딕션이 잘 들려서, 책을 읽는데 강의를 듣는 느낌이었습니다. 

그리고 막힌다고 생각되는 부분에 추가 설명이 있어서 막힘 없이 클론 코딩을 진행할 수 있었습니다. 

예제 코드와 변경 부분을 표시해주는 그림이 많아서 실제로 책을 읽는 데 많은 시간이 걸리진 않습니다만

정말 ReactJS를 이해하고 스스로 코딩할 수 있는 능력을 만들고 싶다면, JavaScript 책과 다른 React 기본서를 보면서 클론 코딩을 하면 좋을 것 같습니다. 저도 이제 1회독을 했는데, 강의 보면서 2회독하고, 기초 책을 읽으면서 3회독을 해보려고 합니다. 코딩도 일종의 언어인 만큼 여러 번 보고, 쓰고, 이해하고, 만들어야 체화된다고 생각합니다. 

클론 코딩 결과물 

git version확인후, npx create-react-app 실행 

git version

깃에 올리는 방법도 자세히 나와 있고, 이미지에 표시가 잘 되어있어서 따라 하기 쉽습니다. 

git init

터미널에서 npm start로 Hello!!! 가 보이는 웹 페이지를 생성했습니다. 

React App Hello!

니코쌤 강의에서 빠지지 않는 감자 사랑 예문으로 React를 어떻게 사용하는지 알 수 있습니다. 

React App I love Potato

음식 평점을 남길 수 있는 간단한 웹 페이지를 제작합니다. 

여기서 props가 무엇인지, 사진을 어떻게 올리는지, 이벤트 처리는 어떻게 하는지 배웁니다. 

I like kimchi

간단한 덧셈과 뺄셈이 가능한 웹 페이지를 만들어 이벤트 상호작용을 이해합니다. 

Add 버튼을 누르면 숫자가 1 증가하고, minus 버튼을 누르면 숫자가 1 감소합니다. 

simple calculator

간단한 Hello부터, 메뉴를 보여주는 웹, 계산기를 거쳐서 React의 기본적인 속성에 관해 공부할 수 있습니다. 

깃허브에 배포하기 

https://flyhigh981.github.io/movie_app_2022/#/

Movie App

영화 앱을 잘 따라 하면 영화 앱을 깃허브에 배포할 수 있습니다. 

package.json파일을 수정하고, 최종 코드를 깃허브에 업로드하고, 깃허브에서 제공하는 GitHub Pages 서비스로 영화 앱을 배포하는 방법을 소개합니다. 이 웹은 정말 따라 쳐서 만든 것이라 누구에게 보여주기엔 자신이 없지만, 추후에 다시 고쳐서 더욱 멋진 웹을 만들고 싶네요 ^^ 

Do it 클론 코딩 영화 평점 웹서비스 결과

마치며

처음으로 react를 사용해보고, 여러 이벤트를 경험하는 것만으로 큰 장점이 있는 클론 코딩 책이라 생각합니다. 

강의 내용을 차근차근 따라가고 싶은 분들께 이 책을 추천합니다. 그리고 책이 2020년에 쓰인 책이라 실습하면서 Console log에 경고가 뜰 수 있는데요, 경고가 있다면 google에 검색하면 바로 해결책을 찾을 수 있으니 걱정하지 않으셔도 됩니다. 

git hub에 챕터별로 완성된 파일을 다운 받을 수 있어서 중간 부분부터 따라 하고 싶은 분들께도 좋은 책입니다. 

git을 모르더라도, 어떻게 입력하면 되는지 상세하게 설명이 있어서 따라 하기 좋습니다. 

저는 1회독이라 모든 부분이 어색한데, 다시 강의를 보면서 복습해보려고 합니다. 

ReactJS를 모르더라도 체험할 수 있다는 점이 인상 깊었고, React의 어떤 부분이 부족한지 일깨워주는 책입니다. 

강의도 보고, 복습도 하고, JavaScript와 React 기초 책을 읽고 싶네요 ^^