강의소개
create-react-app 혹은 stackblitz를 이용해서 개발환경을 구축하는 방법을 소개합니다.
강의
stackblitz.com
개발환경을 직접 구축하지 않고 실습을 진행하고 싶은 분은 아래 서비스를 추천합니다.
댓글
-
2024.11.20 (수) -
2024.07.13 react 시작! -
2024-06-13 완료
설치가 잘 안되어서 애 먹다가 유튜브 댓글보고 실행 완료!
혹시나 비슷한 내용으로 고통 받을 분들을 위해 제가 해결한 댓글 남겨둡니다.
---
혹시 터미널에서 오류가 나는 분들은
cd my-app 입력 후 npm start를 입력해보시길 추천드려요! -
.tsx 파일은 TypeScript 확장자를 가진 파일로, 주로 React 애플리케이션에서 TypeScript를 사용할 때 이 파일 형식이 사용됩니다. TypeScript 파일을 실행하려면 브라우저나 특정 프로그램이 직접 필요한 것은 아니지만, TypeScript 코드를 JavaScript로 변환하고 실행하기 위해 몇 가지 도구 및 환경이 필요합니다.
여러 가지 방법 중에서 가장 흔한 방법은 다음과 같습니다:
Node.js 및 npm 설치:
TypeScript 코드를 JavaScript로 변환하고 실행하기 위해서는 Node.js와 npm이 필요합니다.
Node.js 공식 웹사이트에서 Node.js를 다운로드하고 설치합니다. npm은 Node.js 설치와 함께 제공됩니다.
TypeScript 설치:
TypeScript를 사용하여 .tsx 파일을 변환하려면 TypeScript를 설치해야 합니다.
터미널 또는 명령 프롬프트에서 다음 명령어를 실행하여 TypeScript를 전역으로 설치합니다.
npm install -g typescript
TypeScript 컴파일:
TypeScript 코드를 JavaScript로 변환하려면 터미널 또는 명령 프롬프트에서 TypeScript 컴파일러(tsc)를 실행합니다.
tsc yourfile.tsx
이 명령은 yourfile.tsx를 컴파일하여 yourfile.js를 생성합니다.
JavaScript 실행:
생성된 JavaScript 파일을 브라우저에서 직접 실행하거나, Node.js를 사용하여 실행할 수 있습니다.
브라우저에서 실행: .js 파일을 HTML 파일에 연결하고 브라우저에서 HTML 파일을 열어 실행합니다.
Node.js에서 실행: 터미널에서 다음 명령어를 실행합니다.
node yourfile.js
이렇게 설정하면 TypeScript 코드를 작성한 .tsx 파일을 JavaScript로 변환하고 실행할 수 있습니다. 만약 React를 사용하고 있다면, React와 관련된 라이브러리 및 모듈도 설치 및 설정해야 할 수 있습니다. React 앱을 개발하는 데는 주로 Create React App과 같은 도구를 사용하여 더 간편하게 설정할 수 있습니다. -
StackBlitz는 온라인 통합 개발 환경(IDE)으로 React 애플리케이션을 개발하고 실행할 수 있는 플랫폼입니다. 확장자가 .tsx인 것은 TypeScript 파일임을 나타냅니다. TypeScript는 JavaScript에 정적 타입을 도입한 언어로, React 프로젝트에서도 널리 사용됩니다.
StackBlitz에서 React 앱을 실행하려면 추가적인 확장 앱이 필요하지 않습니다. StackBlitz는 온라인 상에서 코드 편집, 빌드, 실행까지 모두 제공하는 환경이기 때문입니다. 다만, 로컬 환경에서 React 앱을 실행하려면 Node.js와 npm(노드 패키지 매니저)가 설치되어 있어야 합니다.
로컬에서 React 앱을 실행하려면 다음 단계를 따를 수 있습니다:
Node.js 및 npm 설치: Node.js 공식 웹사이트에서 Node.js를 다운로드하고 설치합니다. npm은 Node.js 설치 시 함께 제공됩니다.
프로젝트 폴더로 이동: 터미널 또는 명령 프롬프트를 열고 React 앱이 있는 폴더로 이동합니다.
의존성 설치: 다음 명령어를 실행하여 프로젝트에 필요한 의존성을 설치합니다.
Copy code
npm install
앱 실행: 다음 명령어를 실행하여 React 앱을 실행합니다.
sql
Copy code
npm start
이제 브라우저에서 ://......로 이동하여 React 앱을 확인할 수 있습니다. 만약 포트 3000이 이미 사용 중이라면, 대체 포트가 자동으로 선택되어 터미널에 출력됩니다.
StackBlitz를 사용하면 이러한 설정이 자동으로 이루어지기 때문에 개발 환경을 구축하지 않아도 빠르게 React 앱을 만들고 실행할 수 있습니다. -
StackBlitz 사용법이 어려워서 실습을 따라하기가 힘듭니다.
확장자도 tsx로 다르네요
실행할때는 어떤 확장앱이 필요한지요 -
23.11.28 -
23.08.22 -
23.07.14 -
230709 -
230706
-
2023.04.15 완료
-
23.03.09
-
23.01.17 -
왔노라! 보았노라! 해냈도다!
-
22.12.13
-
2022.09.21 -
감사합니다! -
필요하신 분 계실까해서 영상 요약된 노트 공유드립니다 :)
[1강] 수업소개: https://bit.ly/3dhgpzI
[2강] 실습환경 구축: https://bit.ly/3BmMnm6
[3강] 소스코드 수정방법: https://bit.ly/3QPTA3X
[4강] 컴포넌트 만들기: https://bit.ly/3xrB8aQ
나머지 노트는 공부하는대로 업데이트할게요 ~~ -
08/18 -
폴더 삭제가 안돼서 넘 답답했는데 어쩌다 보니 삭제됨... 완성
-
220704 오전 12시 40분 완료
-
npm start하니까 에러발생....에러 때문에 고생했는데 구글링으로 해결하고 다시 파일 만들어서 npm start하니까 localhost:3000이 실행잘되요 박수!! 짝짝짝
-
2022.4.3완료
-
이고잉님 vscode 에 구축하니까 아래와 같은 오류가 뜨는데 해결방법 알수있을까요?
Installing react, react-dom, and react-scripts with cra-template...
Aborting installation.
Unexpected error. Please report it as a bug:
Error: spawn UNKNOWN
at ChildProcess.spawn (node:internal/child_process:413:11)
at Object.spawn (node:child_process:700:9)
at spawn (C:\Users\rlaru\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\cross-spawn\index.js:12:24)
at C:\Users\rlaru\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:390:19
at new Promise (<anonymous>)
at install (C:\Users\rlaru\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:341:10)
at C:\Users\rlaru\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:468:16
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
errno: -4094,
code: 'UNKNOWN',
syscall: 'spawn'
}
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
