react 웹서버 시작, react 시작, react 처음 개발

react 처음 개발을 시작하기 위해

Visual Studio Code를 실행합니다.

 

MS(마이크로소프트) 툴은 생각해 보면 참 쉽습니다.

 

최근에 자바만 하다 보니 MS 개발 툴 기억이 조금 나질 않았습니다.

Visual Studio Code는 예전에 사용하던 Visual Studio와 툴이 조금 다릅니다.

그래도 여러 번 만져보니 기억이 슬슬 적응이 되는 것도 같습니다.

 

프로젝트를 시작할 폴더를 지정합니다.

file >> open folder >> 폴더를 선택합니다.

폴더를 미니 만들어 놓고 선택하시면 됩니다.

view >> terminal >> 선택 >> terminal  실행 >> npm init

 

터미널(terminal)에 명령어를 실행할 수 있습니다.

명령어입력 가능 한 이유가 다른 os에서도 사용 가능 하게 하기 위해서였나 봅니다.

윈도의 cmd(명령프롬프트)에서도 실행이 가능합니다.

npm init 실행 시 기본적인 웹화면 설정이 가능하며 웹서버를 실행할 수 있습니다.

 

npm init를 실행하면 아래와 같이 실행이 됩니다.

중간에 입력할 수 있는 내용이 있지만 일단 엔터로 넘어갑니다.

package name 은 선택하신 폴더입니다.

Is this OK? 물어보면 yes 입력합니다.

PS F:\sys\2024\reacttest2> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (reacttest2)
version: (1.0.0)                                                                                                                                
description:                                                                                                                                    
entry point: (index.js)                                                                                                                         
test command:                                                                                                                                   
git repository:                                                                                                                                 
keywords:                                                                                                                                       
author:                                                                                                                                         
license: (ISC)                                                                                                                                  
About to write to F:\sys\2024\reacttest2\package.json:

{
  "name": "reacttest2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes
PS F:\sys\2024\reacttest2>

 

 

terminal에 아래와 같이 실행합니다. 

npm install express --save

 

package-lock.json와 node_modules 가 추가 됩니다.

scripts/start, scripts/dev를 추가합니다.

value 값으로  "node 파일명" 추가하시면 됩니다.

전 파일명을 app.js로 추가하였습니다.

{
  "name": "reacttest2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node app.js",
    "dev": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.3"
  }
}

 

app.js

// express 호출
const express = require("express");
// express 사용
const app = express();
// port설정
const port = 8080;

app.listen(port,() =>{
    console.log("서버실행 되었습니다.");
});
app.get("/hoho",(request, response)=>{
    response.send("<h1>화면 잘나232와11sd</h1>");
});

 

서버실행 및 종료 방법은 terminal에 입력합니다.

서버 실행 : npm start

서버 종료 : ctrl + c

 

app.js 에 설정된 port와 app.get 에 설정된 url입력 시 실행됩니다.

 

react 개발 스터디를 할지 모르겠습니다.

react는 일단 여기까지 실행만 해 보았습니다.

 

다음 글부터는 vue 개발 내용을  작성해 보겠습니다.

vue 공부를 많이 하지는 않았지만 vue는  아침에 한번 컴파일을 하면 서버 내리는 일이 없는 거 같습니다.