react npx terminal 명령어 입력 후 환경설정을 해주고
App.js 에서 코드 수정을 해보자
function Header ( ) { } 로 header태그를 함수로 정의하고
이 함수의 리턴값으로 HTML 코드를 반환
eslint 에러가 발생한다면?
<header> 태그를 <div>태그로 감싸주세요
function Header( ) {
return (
<div>
<header>
<h1><a href="/">WEB</a><h1>
</header>
</div>
)
}
| 컴포넌트 만들기 (2) | 2025.06.04 |
|---|---|
| React npm start 배포 (0) | 2025.05.28 |
| div id="root" 값에서 css 코드추가하기 (0) | 2025.05.28 |
| react UI 는 어떻게 코드로 표현 되는가? (0) | 2025.05.23 |
| 소스코드 수정방법 (0) | 2025.05.20 |
' 리엑트는 사용자 정의태그를 만드는 기술 ' (* 리엑트의 본질)
알아야 할 키워드
index.html, public, id, root, App.css, Header, Nav, Article 까지
실습 1.
Public 폴더의 index.html파일에
id 가 root인 div 태그 작성
<!DOCTYPE html>
<html lang="en">
*** 생략 ***
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
이어서 App.css 파일에 간단한 HTML코드를 작성
| react 사용자정의태그 만들기(header태그로 function함수사용) (2) | 2025.06.05 |
|---|---|
| React npm start 배포 (0) | 2025.05.28 |
| div id="root" 값에서 css 코드추가하기 (0) | 2025.05.28 |
| react UI 는 어떻게 코드로 표현 되는가? (0) | 2025.05.23 |
| 소스코드 수정방법 (0) | 2025.05.20 |
npm start 명령으로 실행한 애플리케이션은
개발을 위한 애플리케이션 입니다.
*단점 = 용량이 크고, 여러가지 불필요한 메시지를 표시하기 떄문에
실제 서비스에 사용하는 용도는 아님
How to make "최적화된 효율적인 배포"
1. vscode terminal 을 열고, 실행중인 개발환경이 있을 경우 ctrl+c 입력 후 종료할 것
2. npm run build 입력 *build = 배포판을 만드는 과정
build 를 마치면 폴더에 build 폴더가 생기고, index.html을 의존하는 다른파일들도 존재하게 됌
* index,html 에는 파일용량이 작아서 공백요소 없음
3. serve(웹 서버)
serve 옵션 중에서 -s 를 추가하면 사용자가 어떤 경로로 들어오던
index.html 파일을 서비스 해줍니다.
4. build 폴더를 지정하면 해당폴더에 있는 index 파일을 서비스 하라는 뜻.
serve는 Node.js 로 만들어진 애플리케이션 으로
serve 를 간편하게 실행하고자 할떄 npm 사용하면 된다.
npm build 실행 명령어(하단 2줄)
npm install -g serve
serve -s build
입력 후에 http://localhost : 3000 접속 하면
실제 서비스에서 사용할 수 있는 버전이 만들어집니다.
| react 사용자정의태그 만들기(header태그로 function함수사용) (2) | 2025.06.05 |
|---|---|
| 컴포넌트 만들기 (2) | 2025.06.04 |
| div id="root" 값에서 css 코드추가하기 (0) | 2025.05.28 |
| react UI 는 어떻게 코드로 표현 되는가? (0) | 2025.05.23 |
| 소스코드 수정방법 (0) | 2025.05.20 |
React id root 는 index.html에서 meta data 에 대한 소스로
위치는 App.js 에 있고
<div class="AI">Hello React</div>
입구파일 index.js 에서 <App / >라는 태그 ID값이 root태그로 랜더링 하는 구조
* 랜더링 = 컴퓨터 그래픽에서 2D 또는 3D 모델을 기반으로 사실 또는 비사실 이미지 생성과정을 말한다.
index.html 파일의
<div id="root"></div>
<div id="root">
위 2코드는 같은 태그 입니다.
<div id="root"에 Css 코드를 추가할 경우
(예시) <div id="root" style= "border: 10px solid red;"></div> 를 입력하면
Hello React 테두리에 빨간 테두리가 구현된다.
| 컴포넌트 만들기 (2) | 2025.06.04 |
|---|---|
| React npm start 배포 (0) | 2025.05.28 |
| react UI 는 어떻게 코드로 표현 되는가? (0) | 2025.05.23 |
| 소스코드 수정방법 (0) | 2025.05.20 |
| 리액트 Local host error (2) | 2025.05.20 |
<App /> 이라는 태그가 UI 전체 입니다.
<App /> 의 살제내용은 바로 위에 있는 import App from ' ./App' 의 App을 의미합니다.
4번째 줄에서 App이라고 써서 9번째 줄에서도 <App ./> 로 쓰는 것
./App 은 확장자명인 .js가 생략된 것
그리고 점(.)이라는 기호는 현재 디렉토리를 의미합니다.
즉, index.js 가 위치한 디렉토리와 같은 디렉터리에 있는 App.js로 부터 <App />태그가 왔다는 뜻
App.js 파일에서 <div className="App"></div> 안의 내용을
다음과 같이 Hello react! 로 변경하면 브라우저에서 출력화면을 볼 수 있다.
컴포넌트에 있는 src 폴더 안에 있는 index.js 폴더가 입구 이고, index.js 에는 여러가지 전역적인 설정이 들어가 있다고 생각하면 된다.
그리고 <App /> 안에 App.js 라는 것이 들어 있고,
이 App.js 파일의 내용을 편집해 가면서 UI를 만들어 가는 것 입니다.
Hello react! 가 가운데 위치해 있는 이유는 CSS 때문인데,
개발자 도구(F12)의 <style> 태그에서 .App의 텍스트 정렬(text-allign)이 중앙(center) 로 지정되어있어 가운데로 위치해 있는 것입니다.
css의 위치는 App.js의 상단에 있는 import `./APP.CSS`에 있음
( text allign: center; 와 height, pointer events: none;을 삭제하면
Hello world! 는 왼쪽으로 글자 정렬 됌)
| React npm start 배포 (0) | 2025.05.28 |
|---|---|
| div id="root" 값에서 css 코드추가하기 (0) | 2025.05.28 |
| 소스코드 수정방법 (0) | 2025.05.20 |
| 리액트 Local host error (2) | 2025.05.20 |
| React컴포넌트 및 Node.js설치(M2 2022년 모델에서 실행하기) (0) | 2025.05.17 |
Create React App 을 이용해서 개발 환경을 설정하면
src라는 폴더가 생깁니다.
src 폴더를 보면 index.js 라는 파일이 있는데, 이 파일이 바로 입구파일 입니다.
즉, npm start 명령어를 이용해서 Create React App 을 구동하면
이 도구는 index.js를 찾고, 이 파일에 적힌대로 동작하게 되는 것 입니다.
| div id="root" 값에서 css 코드추가하기 (0) | 2025.05.28 |
|---|---|
| react UI 는 어떻게 코드로 표현 되는가? (0) | 2025.05.23 |
| 리액트 Local host error (2) | 2025.05.20 |
| React컴포넌트 및 Node.js설치(M2 2022년 모델에서 실행하기) (0) | 2025.05.17 |
| React 시작하기, npx프로젝트 (0) | 2025.05.11 |
리액트 컴포넌트를 정상적으로 실행 시켰는데도 화면이 안나온다면
"Something is already running on port 3000 probably" 에러메세지 나온다면
이미 3000번 포트에 무언가가 동작하고 있다는 에러 메세지 입니다.
* 리엑트는 3000번 포트를 사용하는데, 그 포트를 누군가 쓰고 있다는 뜻입니다.
이때 "Would you like to run the app on another port instead?" 에서 y(예) 를 누르면
3001번 이나 다른 포트 번호를 사용해 리액트 앱을 동작 시킬 수 있습니다.
| react UI 는 어떻게 코드로 표현 되는가? (0) | 2025.05.23 |
|---|---|
| 소스코드 수정방법 (0) | 2025.05.20 |
| React컴포넌트 및 Node.js설치(M2 2022년 모델에서 실행하기) (0) | 2025.05.17 |
| React 시작하기, npx프로젝트 (0) | 2025.05.11 |
| React 온라인플레이그라운드 (0) | 2025.05.07 |
npx를 실행하려면 Node.js를 설치해야 합니다.
설치는 Node.js 공식홈 에서 설치합니다.
(Node.js 공식홈페이지 https://nodejs.org.kr), LTS 버전 설치
VScode 스튜디오에서 창이 나오면 바탕화면에 react-app 새폴더 만들기
* 이름은 react 라는 이름은 피해주세요. [생성] 버튼을 클릭해 폴더를 생성하고
[열기] 버튼을 클릭해 생성한 폴더를 비주얼 스튜디오 코드로 열어줍니다.
상단 메뉴에서 [터미널] - [새 터미널]을 선택해 새로운 터미널을 엽니다.
* 터미널에서 명령어로 비쥬얼 스튜디오 코드를 제어할 수 있습니다.
앞서 Node.js를 설치헀다면 npx 명령을 실행 할 수 있을 겁니다.
npx-create-react-app-디렉토리이름 명령어 를 입력하고, 이어서 디렉터리 이름을 입력합니다.
여기서는 현재 디렉터리에 개발환경을 설정할 것이므로
점(.)을 입력하고 엔터를 누릅니다.
Need to install the following packages:
create-react-app
Ok to proceed? (y) y입력 하면
프로젝트 컴포넌트 기본파일 자동생성 됌
엔터를 눌러 설치가 끝났다면 npm start, npm run build와 같은 문구가 나오는데,
먼저 살펴볼 명령어는 npm start 명령어 입니다.
npm start 명령어를 입력하고 엔터를 누르면
리엑트 개발환경이 실행되면서 코딩을 할 수 있는 환경이 동작하기 시작합니다.
웹 브라우저가 나오면서 샘플 리엑트 앱이 나옵니다.
| 소스코드 수정방법 (0) | 2025.05.20 |
|---|---|
| 리액트 Local host error (2) | 2025.05.20 |
| React 시작하기, npx프로젝트 (0) | 2025.05.11 |
| React 온라인플레이그라운드 (0) | 2025.05.07 |
| 리엑트 실습환경구축, react 만드는 방법 2가지 (2) | 2025.05.07 |
새로운 React 앱 만들기
1. Create React App (React 공식 홈)
https://github.com/facebook/create-react-app
2. VScode 화면에서 Terminal -> npx create-react-app 입력하고 -> 프로젝트 디렉터리명 입력
GitHub - facebook/create-react-app: Set up a modern web app by running one command.
Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub.
github.com
https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html
새로운 React 앱 만들기 – React
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
| 리액트 Local host error (2) | 2025.05.20 |
|---|---|
| React컴포넌트 및 Node.js설치(M2 2022년 모델에서 실행하기) (0) | 2025.05.17 |
| React 온라인플레이그라운드 (0) | 2025.05.07 |
| 리엑트 실습환경구축, react 만드는 방법 2가지 (2) | 2025.05.07 |
| 학습예정 React기초(7가지) (0) | 2025.04.09 |
= 컴퓨터에 React를 설치하지않고 온라인으로 이용하는 방법이다. (대표적 사이트 Stackblitz)
스텍블릿츠 https://stackblitz.com/edit/react-dusnmcta?file=src%2FApp.js
React (forked) - StackBlitz
A create-react-app project based on react and react-dom.
stackblitz.com
| React컴포넌트 및 Node.js설치(M2 2022년 모델에서 실행하기) (0) | 2025.05.17 |
|---|---|
| React 시작하기, npx프로젝트 (0) | 2025.05.11 |
| 리엑트 실습환경구축, react 만드는 방법 2가지 (2) | 2025.05.07 |
| 학습예정 React기초(7가지) (0) | 2025.04.09 |
| React programming이란? (2) | 2025.04.08 |
