node.js (2)

반응형

 

실행 방법

 

 

1. Visual Studio Code 열기

 

 

2

 

2. File > Open Folder > 원하는 폴더에 workspace 설정

 

 

3

 

3. 파일 생성 > 코드 입력 > Ctrl + Alt + T 로 실행

console.log("내용!!");

 

 

 

+알아둘 것

더보기
1

 

1. + 버튼 클릭 > Command Prompt 클릭

 

 

2

 

2. cmd버전이 추가된 것을 확인할 수 있음 

 

 

3

 

3. cmd를 입력하여 powershell를 cmd로 변경 가능 

 

4. cls 로 TERMINAL 창 지우기

 

 

 

 

 

테스트

 

 

실행 방법 : node 파일 이름

 

 

 

test.js

console.log("내용!!");

const temp = [];
for(let i=1; i<=10; i++) {
    temp.push("숫자 " + i);
}
console.log("체크 : ", temp);

 

결과 화면1

 

 

 

create-react-app 설치

 

 

1

 

1. npx create-react-app 폴더 이름 엔터 > y 엔터

폴더 이름 적을 시 대문자가 들어가면 안 됨

 

 

2. cd 폴더 로 위치 변경

 

 

3. node server.js 로 실행

 

결과 화면2

 

 

 

폴더 생성된 것 설명

 

 

  • package-lock.json, package.json 파일 설명

package-lock.json, package.json 파일 설명

 

 

 

  • 실행 방법

실행 방법 : npm start => 실행 시 package.json의 scripts start가 실행됨

 

 

 

  • index.jsp와 index.html

 

 

 

=> 주석이 많기에 지운 최종 코드

 

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

 

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

 

 

 

  • App.js

.App로 연결되어있기에 src의 App.js 확인

 

 

App.js

function App() {
  return (
    <div>
      <h1>h1 테스트 글</h1>
      <h2>1개의 컴포넌트라고 부름</h2>
    </div>
  );
}

export default App;

 

실행 전 화면

 

결과 화면3

 

 

반응형
반응형

 

Node js란

 

: JavaScript 런타임

개수는 많지만 크기는 작은 데이터를 실시간으로 주고 받는 데 적합  => SNS나 채팅서비스에 많이 사용
코드가 매우 짧고 쉬워서 빠른 개발 가능

 

 

런타임

: 프로그램들을 실행할 수 있는 환경

 

 

 

다운로드 방법

 

 

1. 하단의 링크로 이동

https://github.com/coreybutler/nvm-windows

 

GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.

A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows

github.com

 

 

2

 

2. 링크 클릭

 

 

3

 

3. 링크 클릭 후 다운로드

 

 

4

 

4. 받은 파일 더블 클릭하여 설치

 

 

 

설치 및 실행 방법

 

 

1

 

1. cmd 검색  > 관리자 권한으로 실행

 

 

2

 

2. nvm -v로 버전 확인

 

 

3

 

3. nvm -help 로 실행 가능한 코드 확인

nvm installnvm list 를 자주 사용함

 

 

4

 

4. nvm list nvm ls 로 설치 여부 확인

nvm listnvm ls 는 같은 뜻

 

 

5

 

5. nvm ls available 로 설치할 수 있는 버전 확인

Node js는 버전이 많고 자세함. 5번의 경우 일부만 출력된 것.

 

 

6

 

6. nvm install 20.15.1 로 설치

버전의 경우 위의 버전 확인한 것 중에서 하나 골라 설치하면 됨.

 

 

7

 

7. nvm ls 로 설치된 버전 확인 가능

 

 

8

 

8. 다른 버전 추가 설치 > nvm use 20.15.1로 사용 버전 정함 > nvm ls로 사용 버전과 버전들 확인 (*로 사용하는 버전 확인)

 

 

9

 

9. 확실히 사용하는 node 버전 확인 시 node -v 사용

 

 

 

사용 cmd 용어 정리

 

cmd 입력 코드
nvm -v 버전 확인
nvm -help 실행 가능한 코드 확인
nvm list
nvm ls
설치 여부 확인
nvm ls available 설치할 수 있는 버전 확인
nvm install 버전 버전으로 설치
nvm use 버전 사용할 버전으로 전환
node -v node의 버전 확인

 

 

반응형
1