수업소개
수업의 방향성과 개발환경을 마련하는 방법을 소개합니다.
강의 1 - 오리엔테이션
강의2 - React.js 개발환경의 종류
강의3 - npm을 이용해서 create-react-app 설치하기
강의4 - create-react-app을 이용해서 개발환경 구축
강의5 - 샘플 앱 실행하기
강의6 - JavaScript 코딩하는 법
강의7 - CSS 코딩하는 법
React
댓글
-
230627 -
잘봤습니다.. 최신버전깔아서 그런가 좀헤멘건있었지만 잘진행되네요..
-
react 개정판을 듣고 잘 이해가 안돼서 왔습니다. 여기서 답을 찾을 수 있으면 좋겠네요.
-
20220221
-
일단들었음
-
ok
-
npm으로 다운은 받아놨는데 앞으로 npx로 만들때 문제 없이 만들어지나요?
-
2021.08.03 React 개발환경 완료:)
-
2021.05.31 React 개발환경 - OK
-
로고가 돌지않고 멈춰있는 경우는 뭘까요?
-
짱 좋아요!!!
-
21.4.1 완료
감사합니다. -
지우고 다시 설치하고 싶을때는 어떤 명령어를 사용해야할까요?
-
serve -s build에서 보안 정책으로 인한 에러가 발생하시는 분들은 window powershell을 관리자권한으로 여신 후, Set-ExecutionPolicy Unrestricted 로 설정하시면 실습 잘 진행됩니다! -
21.01.30.토 완료~!
-
2021 1 20
-
감사합니다!!
-
강의 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 -
감사합니다~
-
신년 5일차
npx serve -s build -
감사합니당
-
냠냠! -
감사합니다
-
감사합ㄴ디ㅏ -
200831 감사합니다
-
혹시 저와 같은 오류로 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 설치되어 있는 폴더로 이동해서 안에 있는 내용을 모두 지우고 다시 실행해서 문제를 해결했습니다. -
20200726
-
으아 8번동영상 마지막 용량 표현이 잘못된것같습니다ㅜㅜ
그래도 다들 용량 작아진다는거 아시니까 문제는 안될것같아요 ^-^
좋은 강의 감사합니다 -
시작합니다!!
-
2020.03.05
-
정말 감사합니다
-
아직까지는 순조롭게 진행하고 있습니다. 고맙습니다. -
npx serve -s 를 하는 위치를 build 폴더 안이 아니라 해당 폴더 바깥 react 폴더에서 하면 됩니다.
저도 한참 헷갈려서 헤메다가 겨우 방법을 찾아서 서버를 띄웠습니다. -
강의 8 에서 serve를 다운받고 정상적으로 5000포트 터미널에서 확인됬는데 막상 브라우저로 로컬호스트5000을들어가보니 404에러 페이지가 뜹니다 ㅠㅠ 3시간동안 찾아보아도 해결되지않습니다 아시는분있나요
-
2019-10-15 완료
-
재밌다.. ㄷㄷ
-
감사합니도~
-
감사합니다.
-
재밌누
-
완료 -
고맙습니다!
정상 작동됩니다. -
첫번째줄도 고치셔야 한답니다.
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 -
이른바 쪽집게 강의!
