포스코DX X 비트교육센터 6기 - ReactJS

리액트 시작

  • 확장 설치

image

  • 프로젝트 시작

npm i -g create-react-app
npx create-react-app [ex00.cra(프로젝트명)]

cd .\ex00.cra\

npm start (표준)

ex01: 전통적인 DOM 기반의 Application

  • readme.txt
ex01: 전통적인 DOM기반의 Application

1. DOM API를 직접 JavaScript 코드로 호출
2. 주로 DOM API에 특화되어 있는 jQuery 라이브러리를 사용한다.
3. 장점은 작성된 애플리케이션 코드 전달이 쉽다.(HTML에 작성된 js 링크)
  • ex01 폴더 생성
  • cd ex01
  • npm init -y
  • public 폴더 생성
  • index.html
  • index.js
    • 밖에 있는 큰 컴포넌트 만들어서 안에 내용을 넣는걸 web app라고 한다.
  • npm i -D express (서버를 위한 패키지 다운로드)
  • dev-server.js 파일 생성
  • node dev-server.js

image

image

작성 코드
  • index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="index.js"></script>
</body>

</html>
  • index.js
function App() {
  const App = document.createElement("div");
  App.textContent = "Hello Wolrd";
  return App;
}

document.getElementById("root").appendChild(App());
  • dev-server.js
//서버를 만들어서 사용하는 중..

const http = require("http");
const path = require("path");
const express = require("express");

const port = 9090;
const application = express().use(
  express.static(path.join(__dirname, "public"))
); // =default servelt
http
  .createServer(application)
  .on("listening", () => {
    console.log(`server starts...on ${port}`);
  })
  .listen(port);
dev-server.js 설명

이 코드는 Node.js를 사용하여 간단한 웹 서버를 만들고, 정적 파일을 제공하는 웹 애플리케이션을 실행하는 것을 목적으로 합니다. 아래는 코드의 주요 부분을 해석한 것입니다:

코드 시작 부분에서 필요한 모듈을 가져옵니다:

  • http: Node.js의 내장 모듈로, 웹 서버를 만들고 관리하기 위한 모듈입니다.
  • path: 파일 및 디렉토리 경로를 다루는 모듈입니다.
  • express: 웹 애플리케이션을 빌드하는 데 사용되는 외부 패키지인 Express.js를 가져옵니다.

포트 변수 port를 9090으로 설정합니다. 이 변수는 서버가 리스닝할 포트 번호를 지정합니다.

application 변수를 만듭니다. 이 변수는 Express 애플리케이션을 나타내며, 정적 파일을 제공하기 위해 현재 스크립트 파일이 위치한 디렉토리의 “public” 디렉토리를 정적 파일 루트로 설정합니다.

웹 서버를 생성하고 application을 핸들러로 사용합니다. 이것은 HTTP 요청을 처리하고 정적 파일을 제공하는 웹 서버를 만듭니다.

웹 서버가 리스닝할 때 “listening” 이벤트가 발생하면 콘솔에 메시지를 출력합니다. 이 메시지는 서버가 시작되었음을 나타내며, 포트 번호도 함께 출력됩니다.

마지막으로, 서버를 지정된 포트 (port 변수)에서 리스닝합니다.

이 코드는 Express.js를 사용하여 간단한 정적 파일 서버를 구축하고, 클라이언트가 서버에 접속할 때 정적 파일을 제공합니다. 정적 파일은 “public” 디렉토리 내에서 호스팅되며, 웹 브라우저를 통해 이 서버에 접속하면 해당 디렉토리의 파일을 브라우저에 제공하게 됩니다. 이를 통해 웹 페이지와 웹 애플리케이션을 개발하고 호스팅할 수 있습니다.