말랑말랑제리스타일
구름 IDE에서 React 프로젝트 생성하고 실행 본문
구름 IDE에서 리액트 프로젝트를 생성하고 실행해 보는 과정을 최대한 간단하게 다루어보겠습니다.
물론 blank나 Html/css/js 프로젝트를 생성해서 직접 npm으로 설지 하고 진행해도 되지만 경험적 요소가 필요한 게 아니라면 최대한 간단한 게 좋겠죠.
구름 IDE에서 React 프로젝트 컨테이너 생성
구름 IDE에서 새 컨테이너를 클릭해서 새로운 React 프로젝트를 진행하기 위한 컨테이너를 생성해줍니다.
이름과 설명을 입력하고 나머지는 그대로 두겠습니다.
이후에 Netlify 배포를 위해서 GitHub 연동을 해줘도 되겠지만 우선은 그냥 두고 진행합니다.
이 많고 많은 구름 IDE의 소프트웨어 스택 중 React를 선택해 주면 하단에 React 프로젝트라는 템플릿이 지정되고 OS가 선택되면서 Node.js 버전과 npm 버전이 나오네요.
일단 구름 IDE 컨테이너는 리눅스 기반이라 윈도에서 사용되는 기능들이 사용 불가한 경우가 꽤 있다는 정도만 알고 넘어가면 되는데 이 역시 웹 개발에는 크게 영향을 받지 않으니 몰라도 됩니다.
구름 IDE에서 생성한 React 프로젝트 살펴보기
자 이제 컨테이너로 들어가서 어떤 형태로 React 프로젝트가 생성되었는지 한 번 살펴봅시다.
네 뭐가 많습니다... 복잡해 보이죠.
일단... 실행해 봅시다.
우측 상단의 실행 아이콘을 눌러서 실행해 주면 하단 터미널에 "npm install && npm start"이라고 자동으로 입력이 되면서 npm이 설치됩니다.
시간이 꽤 걸리는데 일단 기다려 봅시다.
따로 손댄 게 없다면 상단과 같이 컴파일 성공 메시지가 나옵니다. 여기서 미리 보기를 눌러서 작업 창에서 미리보기 버튼을 눌러봅시다.
자 친절하게도 src 폴더 내의 App.js 파일을 수정해서 React 프로젝트를 변경하면 된다고 알려주네요.
구름 IDE에서 React 프로젝트 Hello world 띄워보기
이제 설명과 같이 App.js 파일을 수정해서 구름 IDE의 React 프로젝트에서 Hello world를 띄워보겠습니다.
기본 App.js 파일 소스를 확인해 봐야겠죠.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
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>
</div>
);
}
}
export default App;중간에 보시면 방금 봤던 문구가 보입니다.
code라는 태그가 붙어있긴 하지만 Edit <code> src//App.js </code> and save to reload라는 문구가 정확히 보이죠.
이 <p> 태그의 문구를 Hello world로 바꿔봅시다.
결과 화면에 Hello world로 바뀌었죠?
그럼 다시 App.js 파일로 돌아가 소스를 간단히 분석해 봅시다.
<img src={logo} className="App-logo" alt="logo" />이 부분은 상단의 React 이미지를 띄워주는 파트겠죠.
logo라는 변수에 담긴 값을 source 이미지로 사용한다는 뜻으로 보입니다.
그리고 상단에 2번 라인을 보면 logo.svg 파일을 logo로 import 한다고 되어있네요.
프로젝트 하이라키에서 logo.svg 파일을 까보면 뭔가 알아보기 힘든 코드로 되어있지만 느낌적으로 빙글빙글 돌아가는 로고를 만든다는 뜻으로 이해가 되네요.
여하튼 이 파일을 logo에 받아서 이미지 형태로 띄워주는 부분입니다.
다음으로 Hello world 아래 줄을 보시면 React 홈페이지로 들어가는 링크가 <a> 태그로 만들어져 있습니다.
여기 있는 Learn React의 문구를 바꾸면 바뀐 문구가 나오게 되죠.
이렇듯 메인 페이지를 컨트롤하기 위해서는 React 프로젝트의 App.js라는 자바스크립트 파일을 수정하면 된다는 결론을 얻을 수 있습니다.
'프로그래밍 > 웹코딩(html&JS)' 카테고리의 다른 글
| 리액트 5.0 이상 버전 사용시 "webpack < 5 used" 에러 조치 방법 (0) | 2023.10.05 |
|---|---|
| HTML 파일 소스 나누기 두가지 방법(부트스트랩) (0) | 2023.08.17 |
| 깃허브 코파일럿 자바스크립트 한 달 사용 후기 (0) | 2023.08.17 |
| 웹사이트 만들기부터 무료 배포까지 30분만에 뚝딱 (0) | 2023.07.13 |
| BootStrap 이용해서 Javascript 메뉴바 만들기 (0) | 2021.12.31 |
