React

개발환경

수업소개

수업의 방향성과 개발환경을 마련하는 방법을 소개합니다. 

 

 

 

강의 1 - 오리엔테이션

 

 

 

강의2 - React.js 개발환경의 종류

 

 

 

강의3 - npm을 이용해서 create-react-app 설치하기

 

 

 

강의4 - create-react-app을 이용해서 개발환경 구축

 

 

 

강의5 - 샘플 앱 실행하기

 

 

 

강의6 - JavaScript 코딩하는 법

변경된 코드

 

 

강의7 - CSS 코딩하는 법

 

 

 

 

강의 8- 배포하는 법

변경된 코드 

댓글

댓글 본문
  1. 파시
    230627
  2. 금도끼은도끼
    잘봤습니다.. 최신버전깔아서 그런가 좀헤멘건있었지만 잘진행되네요..
  3. LLLEE
    react 개정판을 듣고 잘 이해가 안돼서 왔습니다. 여기서 답을 찾을 수 있으면 좋겠네요.
  4. chio
    20220221
  5. 뿡관이
    일단들었음
  6. GelandeWagen
    ok
  7. 토미
    npm으로 다운은 받아놨는데 앞으로 npx로 만들때 문제 없이 만들어지나요?
  8. Poroporo
    2021.08.03 React 개발환경 완료:)
  9. jeisyoon
    2021.05.31 React 개발환경 - OK
  10. 김고단
    로고가 돌지않고 멈춰있는 경우는 뭘까요?
  11. 둠칫
    짱 좋아요!!!
  12. 유대영
    21.4.1 완료
    감사합니다.
  13. 혜경
    지우고 다시 설치하고 싶을때는 어떤 명령어를 사용해야할까요?
  14. 유재현
    serve -s build에서 보안 정책으로 인한 에러가 발생하시는 분들은 window powershell을 관리자권한으로 여신 후, Set-ExecutionPolicy Unrestricted 로 설정하시면 실습 잘 진행됩니다!
  15. kkn1125
    21.01.30.토 완료~!
  16. 생활둘기
    2021 1 20
  17. testrestbestwest
    감사합니다!!
  18. 하믄랑
    강의 8 에서 bulid 생성 이후에 serve -s bulid하면 the requested path could not be found 에러 발생하시는 분들 있으신 경우에는 아래 순서대로

    npm uninstall -g serve

    npm install -g serve@11.3.2

    serve -s build

    진행하시면 해결 될것 같습니다.

    출처 : https://stackoverflow.com......-js
  19. 땅콩왕
    감사합니다~
  20. 고니스타크
    신년 5일차
    npx serve -s build
  21. 뚜또
    감사합니당
  22. 김인환
    냠냠!
  23. thebluerat
    감사합니다
  24. Brandon S. Ha
    감사합ㄴ디ㅏ
  25. momo
    200831 감사합니다
  26. woook
    혹시 저와 같은 오류로 npm run start가 안되시는 분들은 참고해주세요.
    <npm start 실해시 에러 메시지>
    There might be a problem with the project dependency tree.
    It is likely not a bug in Create React App, but something you need to fix locally.

    The react-scripts package provided by Create React App requires a dependency:

    "eslint": "^6.6.0"

    Don't try to install it manually: your package manager does it automatically.
    However, a different version of eslint was detected higher up in the tree:

    ---------> /Users/user1/node_modules/eslint (version: 7.5.0) <----------

    Manually installing incompatible versions is known to cause hard-to-debug issues.
    ----------------------------------------------------------------------------------------------------------

    eslint 충돌? 이 발생해서 오류가 생긴 거 같습니다. 홈 디렉토리에 가서 해당 모듈을 삭제하면 될 거 같습니다.
    메시지에 나온 /Users/user1/node_modules/eslint 설치되어 있는 폴더로 이동해서 안에 있는 내용을 모두 지우고 다시 실행해서 문제를 해결했습니다.
  27. psyless
    20200726
  28. bongja1988
    으아 8번동영상 마지막 용량 표현이 잘못된것같습니다ㅜㅜ
    그래도 다들 용량 작아진다는거 아시니까 문제는 안될것같아요 ^-^
    좋은 강의 감사합니다
  29. supernet
    시작합니다!!
  30. 할수이따
    2020.03.05
  31. illliilllliillliii
    정말 감사합니다
  32. nmcl
    아직까지는 순조롭게 진행하고 있습니다. 고맙습니다.
  33. caroan
    npx serve -s 를 하는 위치를 build 폴더 안이 아니라 해당 폴더 바깥 react 폴더에서 하면 됩니다.
    저도 한참 헷갈려서 헤메다가 겨우 방법을 찾아서 서버를 띄웠습니다.
    대화보기
    • shy1008
      강의 8 에서 serve를 다운받고 정상적으로 5000포트 터미널에서 확인됬는데 막상 브라우저로 로컬호스트5000을들어가보니 404에러 페이지가 뜹니다 ㅠㅠ 3시간동안 찾아보아도 해결되지않습니다 아시는분있나요
    • lygon
      2019-10-15 완료
    • 별강
      재밌다.. ㄷㄷ
    • 융복
      감사합니도~
    • Giri
      감사합니다.
    • 산티아고
      재밌누
    • 위준우
      완료
    • 처음
      고맙습니다!
      정상 작동됩니다.
      대화보기
      • egoing
        첫번째줄도 고치셔야 한답니다.
        import React, { Component } from 'react';
        대화보기
        • 처음
          좋은 강의 고맙습니다.
          한 가지 질문이 있습니다.
          강의 6 중간 부분에서 함수 형식이면 클래스 형식으로 변경하라 했는데,
          에디터에서 원래 함수 부분을 지우고 영상 아래에 있는 [변경된 코드]로 붙여 넣기 하는 것인지요?
          그렇게 하니 컴포넌트가 정의되지 않았다는 에러가 뜹니다.

          == (npm 실행시 에러 메시지) ==

          Failed to compile.

          ./src/App.js
          Line 5: 'Component' is not defined no-undef

          Search for the keywords to learn more about each error.


          == (수정한 내용) ==
          class App extends Component {
          render() {
          return (
          <div className="App">
          <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
          Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
          >
          Learn React
          </a>
          </header>
          Hello, React!!
          </div>
          );
          }
          }

          export default App;
        • 윈도우10 Pro 64비트 + Intel 3gen i3 CPU 사용자이며,
          처음에 node-v12.0.0-x64 + create-react-app@2.1.8를 설치했지만 아랫 분들같이 오류가 발생했었습니다.

          전부 제거하고
          node-v10.15.3-x64(안정화 버전) + create-react-app@2.1.8로 설치하니 성공하였습니다.

          오류가 발생하시는분깨서는 참조하시기 바랍니다.


          ps. 명령프롬프트(CMD)는 관리자 권한으로 실행하였으며,

          이고잉님께서 설치하신 node-v11.14.0버전으로 해보고 싶으신분들은 아래 주소에서 받으시면 됩니다.
          https://nodejs.org......msi
          (32비트 사용자는 https://nodejs.org......msi)
        • SSING
          저 역시 광범님과 같은 문제로 node, npm, create-react-app까지 정상 설치되었는데 npm run start 과정에서 계속 오류가 났습니다. 어제 이것저것 다해보고 한숨 푹 쉬면서 아침에 다시 이것저것 시도해 봤는데 설치하는 두 가지 다 최신 버전이 아닌 안정화/낮은 버전으로 문제를 해결했습니다.

          1. cmd에서 'npm untnstall create-react-app'를 실행하여 제거하고 'react-app'폴더에 파일도 삭제합니다. 물론 node 자체도 삭제하시고요.
          2. node를 설치하는데 최신버전 말고 LTS 안정화 버전을 설치 후 create-react-app도 강의의 2.1.8버전을 설치해서 해결됐습니다.

          2번의 경우 node를 최신 버전으로 설치했을 때 create-react-app를 최신버전/2.1.8버전으로 둘 다 설치해 봤는데 오류가 떴었고 안정화 버전까지 처음부터 다시 설치해 볼 생각을 어제 못했네요. 해결되시기 바랍니다.
          대화보기
          • SSING
            저도 npm run start 에서 사이트에 연결 할 수 없다고 뜨면서 뒤로 진도를 못나가고 있습니다.
            npm환경변수 설정, 방화벽/백신끄기, create-react-app 최신버전/2.1.8버전 설치, npm재설치, 프록시 환경설정 등 하루종일 다 해봤지만 안되니 너무 답답하네요. ㅠㅠ
            cmd상에서 npm과 create-react-app은 정상 설치가 나옵니다. npm run start때 나오는 VScode 오류 코드는 다음과 같습니다. 에러 경로의 로그는 아래 김광범님과 동일한 에러코드, 에러넘버가 나옵니다.

            # Fatal error in , line 0
            # Check failed: U_SUCCESS(status).
            #
            #
            #
            #FailureMessage Object: 0000005CCBCFDF70npm ERR! code ELIFECYCLE
            npm ERR! errno 3221225477
            npm ERR! react-app@0.1.0 start: `react-scripts start`
            npm ERR! Exit status 3221225477
            npm ERR!
            npm ERR! Failed at the react-app@0.1.0 start script.
            npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

            npm ERR! A complete log of this run can be found in:
            npm ERR! C:\Users\사용자이름\AppData\Roaming\npm-cache\_logs\2019-04-25T08_24_13_772Z-debug.log
            PS C:\Users\사용자이름\Desktop\react-app>
          • 김광범
            에러가 뜨면서 실행이 안되네요 ;;
            npm run start 실행을 하면 아래와 같은 오류로 브라우져 화면이 나타나지 않네요 ;;;

            0 info it worked if it ends with ok
            1 verbose cli [
            1 verbose cli 'C:\\Program Files\\nodejs\\node.exe',
            1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
            1 verbose cli 'run',
            1 verbose cli 'start'
            1 verbose cli ]
            2 info using npm@6.9.0
            3 info using node@v12.0.0
            4 verbose run-script [ 'prestart', 'start', 'poststart' ]
            5 info lifecycle react-app@0.1.0~prestart: react-app@0.1.0
            6 info lifecycle react-app@0.1.0~start: react-app@0.1.0
            7 verbose lifecycle react-app@0.1.0~start: unsafe-perm in lifecycle true
            8 verbose lifecycle react-app@0.1.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;E:\www\react-app\node_modules\.bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\nodejs\;C:\Users\김광범\AppData\Local\Microsoft\WindowsApps;;C:\Users\김광범\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\김광범\AppData\Roaming\npm
            9 verbose lifecycle react-app@0.1.0~start: CWD: E:\www\react-app
            10 silly lifecycle react-app@0.1.0~start: Args: [ '/d /s /c', 'react-scripts start' ]
            11 silly lifecycle react-app@0.1.0~start: Returned: code: 3221225477 signal: null
            12 info lifecycle react-app@0.1.0~start: Failed to exec start script
            13 verbose stack Error: react-app@0.1.0 start: `react-scripts start`
            13 verbose stack Exit status 3221225477
            13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
            13 verbose stack at EventEmitter.emit (events.js:196:13)
            13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
            13 verbose stack at ChildProcess.emit (events.js:196:13)
            13 verbose stack at maybeClose (internal/child_process.js:1000:16)
            13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:267:5)
            14 verbose pkgid react-app@0.1.0
            15 verbose cwd E:\www\react-app
            16 verbose Windows_NT 10.0.17763
            17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "start"
            18 verbose node v12.0.0
            19 verbose npm v6.9.0
            20 error code ELIFECYCLE
            21 error errno 3221225477
            22 error react-app@0.1.0 start: `react-scripts start`
            22 error Exit status 3221225477
            23 error Failed at the react-app@0.1.0 start script.
            23 error This is probably not a problem with npm. There is likely additional logging output above.
            24 verbose exit [ 3221225477, true ]


            ===================================

            #FailureMessage Object: 00000060650FE020npm ERR! code ELIFECYCLE
            npm ERR! errno 3221225477
            npm ERR! react-app@0.1.0 start: `react-scripts start`
            npm ERR! Exit status 3221225477
            npm ERR!
            npm ERR! Failed at the react-app@0.1.0 start script.
            npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

            npm ERR! A complete log of this run can be found in:
            npm ERR! C:\Users\김광범\AppData\Roaming\npm-cache\_logs\2019-04-25T07_09_35_356Z-debug.log
          • 폭스킴
            이른바 쪽집게 강의!
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기