[Release] MEMOPAD: React.js 를 사용하여 만든 간단한 메모 웹 어플리케이션

velopertrelease.log5 Comments


React.js, Redux, Express.js, 그리고 MongoDB 를 사용해서 만들어진 싱글 페이지 무한 스크롤링 메모 어플리케이션입니다.

이 어플리케이션은 React.js 강의 진행을 위해서 만들어졌습니다. 이를 만드는 내용은 https://velopert.com/tag/reactcodelab 여기에서 다루고 있습니다.

Preview: https://memo.vlpt.us/

Source: https://github.com/velopert/react-codelab-project

기능

  • 회원인증 (가입/로그인)
  • 메모 작성 / 수정 / 삭제 / 추천
  • 유저 검색

사용된 기술

  • axios
  • babel
  • express
  • bcryptjs
  • mongoose
  • react
  • react-router
  • react-addons-css-transition-group
  • react-addons-update
  • redux
  • redux-thunk
  • materializecss
  • react-hot-loader
  • webpack
  • webpack-dev-server
  • style-loader
  • css-loader
  • 이윤구

    덕분에 열공하고 있습니다. 위 소스를 실행 후 가입 에서 넘어가질 않네요; 어떤 문제일까요.
    항상 감사합니다. ^^

    • 개발자콘솔의 내용을 확인해보시고,
      서버를 실행한 터미널의 내용도 확인해보세요.

      제 예상엔 mongodb서버가 localhost에서 연결되어있어야하는데.. 그게 안열려있어서그런걸지도 모르겠네요

      (GitHub 페이지에서 까먹고 그 부분을 안적었습니다 ㅎㅎ 곧 수정하도록 할게요.)

  • yhlee

    안녕하세요 깃허브에서 메모패드를 복사해서 c9에서 실행해보고자 했는데 잘 안되어서 질문드립니다.ㅠ
    1~4번까지 아래의 순서대로 진행했는데 오류가 뜨네요 ㅠㅠ

    1. https://github.com/velopert/react-codelab-project -> 접속 -> “c9에 clone”
    2. $ npm install -g webpack babel nodemon cross-env
    3. $ npm install
    4.( server/main.js , webpack.dev.config.js )에서 서버와 개발서버의 포트를 8080, 그리고 8081로 변경완료.

    이렇게 안내대로 해봤는데 “Important: use process.env.PORT as the port and process.env.IP as the host in your scripts!” 이런 메세지와 함께 동작이 제대로 되지 않는 현상이 있습니다..;;

    • 서버 시작하실때 c9의 시작버튼 말고 명령어 npm start로 해보세요

      그리고 preview들어가시면 보일거예요.

      mongodb도 mlab에서 호스팅받으시구 설정을 해주셔야 합니다.

      • yhlee

        답변 감사드립니다. 지금 확인해 보니, /build/main.js 에서도 포트를 8080, 8081로 바꿔줘야 하네요;; 몽고db는 안써봐서 강의 들으면서 해결법을 찾아보겠습니다 ^^ 감사합니다 ㅎ