React

개발환경

수업소개

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

 

 

 

강의 1 - 오리엔테이션

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

강의5 - 샘플 앱 실행하기

 

 

 

강의6 - JavaScript 코딩하는 법

변경된 코드

 

 

강의7 - CSS 코딩하는 법

 

 

 

 

강의 8- 배포하는 법

변경된 코드 

댓글

댓글 본문
작성자
비밀번호
  1. caroan
    npx serve -s 를 하는 위치를 build 폴더 안이 아니라 해당 폴더 바깥 react 폴더에서 하면 됩니다.
    저도 한참 헷갈려서 헤메다가 겨우 방법을 찾아서 서버를 띄웠습니다.
    대화보기
    • shy1008
      강의 8 에서 serve를 다운받고 정상적으로 5000포트 터미널에서 확인됬는데 막상 브라우저로 로컬호스트5000을들어가보니 404에러 페이지가 뜹니다 ㅠㅠ 3시간동안 찾아보아도 해결되지않습니다 아시는분있나요
    • 2019-10-15 완료
    • 별강
      재밌다.. ㄷㄷ
    • 융복
      감사합니도~
    • 감사합니다.
    • 산티아고
      재밌누
    • 위준우
      완료
    • 처음
      고맙습니다!
      정상 작동됩니다.
      대화보기
      • 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)
        • 저 역시 광범님과 같은 문제로 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버전으로 둘 다 설치해 봤는데 오류가 떴었고 안정화 버전까지 처음부터 다시 설치해 볼 생각을 어제 못했네요. 해결되시기 바랍니다.
          대화보기
          • 저도 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 자세히 보기