[React.JS] 강좌 2.1편 손쉽게 React.js 작업환경 설정하기 / 프로젝트 시작하기

velopertdev.log / node.js / React.js / tech.log17 Comments

이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]

이번 강좌는 React.js 작업 환경설정 시 필요한 부연설명을 모두 생략하고 그냥 빠르게 작업환경을 설정하는데에 집중합니다.
앞으로 작성 될 강좌를 따라하게 될 때마다 새 프로젝트를 생성하거나 기존 프로젝트를 수정하거나 해야 되는데
그 귀찮음을 해소하고하고자 이 포스트를 작성하였습니다.

0. The EASY WAY

NPM을 통하여 설치를 하는게 번거롭고, 공부만 하는게 목적이라면 다음 JSfiddle을 사용하세요!

txsGw

브라우저에서 React.js 프로젝트를 작성 할 수 있습니다.
JavaScript 를 한 파일에 작성해야하고 아직 ES6의 Syntax 가 제대로 지원되지 않는 단점이 있지만, 공부 할 때는 매우 편하답니다.

1. Git 클론하기 (webpack-based)

일반적인 React.js 프로젝트를 생성합니다. 패키지를 하나하나 직접 설치하고 싶다면 전 강좌를 참조하세요.

  • git clone https://github.com/velopert/react-skeleton.git – 프로젝트 클론하기
  • npm install – Dependency 설치하기
  • npm start – 개발 서버 실행하기 (포트: 7777)
  • 조재혁

    node.js 부터 강좌를 잘 보고 있습니다.
    이렇게 소중한 강좌를 만들어주셔서 감사합니다!
    궁금한게 있는데,
    reactjs 와 ejs 는 같은 성격을 띤게 아닌지 궁금합니다.
    또는 이해하기 쉽게 reactjs를 어떤 라이브러리와 비교할 수 있는지…

    • 많이 다르죠 🙂
      일단 React.js 는 클라이언트 사이드에서 사용된다는 점이 큰 차이입니다. (물론 서버렌더링도 가능합니다) 그리고 React.js 는 이름의 뜻이 그렇듯이 데이터의 변화에 효율적으로 반응하는게 주 목표입니다. 그 외에도 HTML 요소들을 컴포넌트화 시켜서 유지보수가 쉽게해주지요.

      반면에 ejs는 view 부분을 담당하긴 하지만 기껏 해봤자 서버에서 데이터 전해주고 미리 만든 템플릿을 include 하는 것 밖에 없죠.

      • 조재혁

        1. 그렇다면 Reactjs 사용의 주목적은 결국 싱글페이지만인가요?

        2. Boostrap으로 웹사이트를 구현하다가, 디자인에 별 효과를 못 보는 듯 하여 새로 언어들을 알아보고 있었습니다. reactjs나 angularjs 등…

        얼마 전까지 node.js와 express, 그리고 jquery, ajax 으로 개발했고, 이 기술들을 가지고 추가로 UI에 힘을 넣고 싶었는데 디자인에 힘이 부족하네요. 그래서 알아보던 중 Reactjs에서 Material UI 가 지원된다고 해야하나? 이게 있어서 Reactjs 강의를 보고 있었거든요…

        기존에 개발했던 환경을 될 수 있으면 가져가되, UI를 채워줄 수 있는 방법을 조언 부탁드립니다. ㅠ ( 웹사이트 목적은 커뮤니티 사이트입니다! )

        • React.js 는 Non SPA 에서도 사용 될 수 있습니다.
          React Router 를 사용하여 URL 에 따라 다른 컴포넌트를 렌더링 하는 방법도있고
          아니면 이미 만들어진 페이지에, 특정 id 에 특정 컴포넌트를 렌더링 하는 방법도있죠

          그런데 오해하시고 계신점은, React 를 사용한다고해서 UI가 멋있어지는것은 아닙니다.
          결국 똑같이 다 CSS 와 JavaScript 로 꾸미는거고,
          Interaction 부분을 편하게 작업하고 유지보수가 쉬워질뿐입니다.

          React.js 에서 Material UI 를 지원한다기보다는,
          React.js 라이브러리중 Material UI 를 사용하는 컴포넌트가 있다고 보시는게 맞습니다. (material-ui.com)

          그 외에도, 요즘 Material 디자인의 CSS Framework는 꽤 많습니다..

          만약에 현재 Stack에서 디자인만 바꾸는거라면, http://materializecss.com/ 을 추천드립니다. 제가 2년전쯤 대학교에서 사용했었는데 꽤 괜찮았습니다.

          지금 당장은 아니더라도, React.js 혹은 Angular.js 를 여유롭게 공부해보시고
          나중에 필요에 따라 적용해보시는걸 추천드립니다. 유용한 기술인건 맞으니까요 ㅎㅎ

          아무 프로젝트에나 React.js 를 사용하는것은 오히려 독이 될 수 있습니다.

          서버 데이터에 실시간으로 반응하면서 자주 리렌더링이 필요한 웹서비스의 경우엔 매우 유용하지만
          그냥 단순히 게시판 구조의 사이트라면 jQuery 나 순수 JavaScript를 사용하는게 훨씬 높은 성능을 보이니까요.

          • 조재혁

            phpschool, hashcode 등 많은 커뮤니티 사이트에서도 못 얻은 답변을 얻어서 기분이 정말 좋습니다. ㅠㅠ
            이렇게 자세히 답변해주셔서 정말 감사드립니다!

            Reactjs가 view을 모두 담당하는 줄 알고 있었습니다. 강좌를 따라가면서 익히니 이해도 더욱 되네요.

            다시한 번 감사드립니다!!!

  • 조재혁

    이 글의 깃을 이용하여 실행했을 때, devServer 가 웹서버가 되는건가요? node.js 기반이 아니면… 이해하기 어렵네요 ㅠ

    • 강좌 초반부의 목적은 React.js 를 공부하는것이기 때문에 임시로, 개발서버를 사용합니다. 후반부로 가면 Express.js 웹서버를 사용하구요.

      Node.js 기반의 웹서버가 아니라면 webpack 으로 빌드한 bundle.js 파일을 불러오는 방법이 있겠네요. 개발할때는 webpack-dev-server 로 프록시를 설정하여 개발서버를 사용하구요 (이 방법 또한 11편에 나옵니다)

      • 조재혁

        아 임시로 사용하는 개발서버가 있구나. 새로운 개념을 알게되었습니다. 자세한 답변 감사드립니다!!

  • 신성훈

    강좌 2편 작업환경설정 하기를 따라해보다가 잘 안되어서

    여기 강좌2.1 를 따라해보는데.

    이것도 잘 안되네요.

    git 뒤에 나오는 부분을 도스 명령어창에 입력하다가 없는 명령어라 그러기에

    REPL에서 실행해야 하는가 생각되서 거기서 해봐도 안되고..

    인터넷 뒤지지 git 을 설치해야 하는거 같네요..

    강좌 2편, 강좌 2-1편 따라하다가 준비만 하다 끝나는데..

    node.js 아니면 react.js, 을 사용할 수 도 없고

    테스트 할 수도 없는 건가요?

    좀 답답한 마음에 어떻게 어떤 순서로 react.js를 연습해야할 지 궁금하네요

    • git을 설치하셔야 git clone을 할 수 있습니다.
      https://github.com/velopert/react-skeleton
      에서 직접 다운로드를 받으셔도 되구요

      React 프로젝트 설정을 할 때 Node.js 가 사용되기때문에 Node 가 있어야합니다.

      간단한 테스트만 하는경우엔 위에있는 jsfiddle을 사용해도되고, 최근엔 http://webpackbin.com 라는 서비스가 나왔으니 한번 살펴보세요.

  • Dev_Senna

    정말 유용한 강좌 감사 드립니다. 선생님 같은 분들 덕분에 우리나라가 발전할 수 있는 것 같다는 생각을 해보았습니다. 늘 건강하시고 즐거운 하루 보내십시오.^^

  • Jinhan Heo

    유용한 강의 감사합니다~

  • Jeon Hyunwoo

    안녕하세요 스켈레톤을 다운받아서 실행하는데 https://uploads.disquscdn.com/images/a39928f984d34788ddf215428f9ac2333702d912e47f3008c4a1710c738fb1c0.png

    이렇게 생겨먹은 에러가 발생합니다.. ㅠㅠ
    해결방법을 찾지못해 댓글로 문의드립니다…!

    • 음.. 그거 에러 아니고 성공적으로 됐다는 거에요!

      • Jeon Hyunwoo

        헛.. 제가 설명을 잘못한거같습니다
        저 상태에서 멈춘채로 bundle.js가 생성되지 않더군요..

        • bundle.js 파일 자체를 생성하려면, npm start 명령어 대신에 webpack 명령어를 입력해보세요.

          • Jeon Hyunwoo

            앗.. 감사합니다
            리액트 시작하고 서드파티 보면서 사경을 헤메고 있었는데 친절하게 설명해주신 덕분에 한발씩 나아가고 있어요 감사합니다!!