[ReactJS] 천천히, 부지런히 배워본 후기 (feat.nomadcoders)

ReactJS.. VueJS..
핫한 프론트엔드 프레임워크인 2개를 평소에 배워보고 싶다는 마음만 존재했다.
하지만 !!! 이 마음은 니꼴라스 선생님을 만나 행동으로 실천할 수 있게 되었고, 덕분에 ReactJS 에 한 발 내딛을 수 있었다.

이 글은 Nomadcoders 페이지에서 ReactJS 강의를 완강한 후 작성한 회고입니다.

 

2주 간 완강 성공..

친절하고 유쾌하지만 설명을 맛깔나게 잘하는 니꼴라스 선생님 덕분에, 리액트를 배워볼 수 있었다.   => 결과물 확인하기

 

# 정리

리액트로 간단한 페이지를 구현하면서, 사용되었던 lib 는 아래와 같았다.

  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "gh-pages": "^2.2.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0"
  },

React Create Native App 하면 기본적으로 설치해주는 lib 외 별도로 설치한 lib 에 대한 설명 (모두 npm i 명령어로 설치했다.)

Library Name	Description	Example
axios	비동기식 데이터 호출을 해주는 lib	getMovies = async () => {     const { data: { data: { movies } } } = await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");     this.setState({ movies, isLoading: false }); }
gh-pages	내 git hub 계정과 project 이름으로 github 클라우드에 소스를 올려서 확인하게 해주는 lib	1. package.json 에 'homepage' 속성과 'scripts' 속성에 deploy 항목을 정의하고 2. `> npm run deploy` 명령어 수행 ================================ "homepage": "https://dev-hajs.github.io/react_movie_app" "scripts": {     "start": "...",     "build": "...",     "deploy": "gh-pages -d build",     "predeploy": "npm run build" },
prop-types	component 간 유효성 검증을 해주는 lib	Movie.propTypes = { year: PropTypes.number.isRequired, title: PropTypes.string.isRequired, ... genres: PropTypes.arrayOf(PropTypes.string).isRequired };
react-router-dom	page 간 리다이렉트를 위해 중간에서 라우터 역할을 할 수 있게끔 해주는 lib	import { HashRouter, Route } from "react-router-dom"; ... return (     <HashRouter>         <Route path="/" exact={true} component={Home}/>         <Route path="/about" component={About}/>         <Route path="/movie/:id" component={Detail}/>     </HashRouter> );

 

# 결론

Virtual DOM 은 정말 섹시(!)하고, 리액트는 확실히 매력적이었다.

그렇기에 VueJS 도 무척이나 궁금하다.. 뷰도 어서 배워서 어떤게 더 재밌는지, 어떤게 더 매력적이면서 나랑 잘 맞는지 찾아보고 싶다 :)

 

Nicolas 선생님 감사합니다 (__). 🌷