반응형



◎ babel 설치 방법

▼ 내용

npm install @babel/node


babel 설치 후 babel 추가 설정 다운로드 방법

npm install @babel/preset-env npm install @babel/core

설치 후 node 동작할 메인 폴더에 .babelrc 를 추가 하고 아래 소스를 적어준다.

대충 babel의 preset-env 의 옵션을 사용하겠다는 듯이다.

{ "presets" : ["@babel/preset-env"] }


그리고 package.json 의 scripts 안에 start 도

node index.js 가 아닌 babel-node index.js로 변환

그후 작동되는지 테스트를 위해서 최신의 문법이 변환되나 확인

import express from "express"; //const express = require('express'); 위와 동일한 소스임

P.S 설치 하면 아래 그림처럼 pakage.json 의 dependencies의 버전 기입이 된다.

P.S 2 소스를 변경할때마다 일일이 재시작 할 필요없이 자동으로 재시작해주는 패키지 설치

npm install nodemon -D //-D 를 붙이면 pakage.json 에 알아서 붙혀준다 그이후 // scripts 의 start 를 nodemon --exec babel-node index.js --delay 2 로 바꾼다


반응형
반응형

◎ NODE JS 란?

▼ 내용

back-end (서버기술) 로

프론트가 아닌 백엔드에서도 javascript기술을 쓸수 있게 고안된 언어.

NPM : Node Package Manager

◎ Express.js

▼ 내용

Node.js 의 프레임워크다

java 의 스프링 php 의 라라벨 파이썬의 django 같은 프레임워크다.

express.js 의 경우 github의 마지막 커밋이 2달전 4년전 1년전이다.

그만큼 준비가 다되있고 완벽,완성에 가까운 프레임 워크라는거다.

가장 많이 쓰이는 프레임워크다.

◎ express js 설치방법

▼ 내용

npm install express // install 하고나서 npm init -y //하면 pakage.json 이자동으로 생김

//pakage.jsn { "name": "wetube", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "express": "^4.16.4" }, "devDependencies": {}, "scripts": { "start": "index.js" }, "keywords": [], "author": "", "license": "ISC" } //이렇게 설정해주고 나면 npm run start 할때마다 start 기준으로 파일이 실행됨

◎ express 라우팅 (서버 실행을 위한 index.js 정의)

▼ 내용

라우팅은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말합니다. 라우팅에 대한 소개는 기본 라우팅을 참조하십시오.

링크 : https://expressjs.com/ko/guide/routing.html )

requIre : module.exports를 리턴한다 (함수로 모듈을 가지고 온다.)

다음 코드는 매우 기본적인 라우트의 예입니다.

const express = require('express'); //requre 는 module.exports를 리턴한다 (함수로 모듈을 가지고 온다.) const app = express(); const PORT = 4000; // PORT 번호 const handlehome = (req,res) => { console.log(req); console.log("핸들홈"); res.send("Hello From Home"); } const handleProfile = (req,res) => { res.send("You are profile"); } app.get('/',handlehome); //root로 접속한 경로에 response로 helloworld를 받아서 출력해준다 app.get('/profile',handleProfile); //경로 http://localhost:4000/profile console.log('시작'); const handleListening = () =>{ //애로우 함수로 펑션을 만들엇다. console.log(`Listening on : http://localhost:${PORT}`); } app.listen(PORT,handleListening); //port번호 설정 //node 실행 방법 node index.js

express 를 불러와서 app 변수에 담아서 port번호달고,url 경로를 맵핑시켜주는게 다다.

위 소스처럼 express는 url 경로를 쉽게 해주고

url 경로마다 호출해서 보여줄 함수들을 쉽게 정리할수 있다.

REQUIRE, Exports , module.exports 내용정리 링크

https://medium.com/@flsqja12_33844/require-exports-module-exports-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-1d024ec5aca3


◎ node.js 로 만들어진 대기업 사이트

▼ 내용

paypal uber netflix

-> node js로 만들어진 웹사이트

-> 데이터를 다루기 때문에 node js 를 사용

netflix

-> 엄청 많은 언어를 사용했을 것으로 추정 !

-> 기본 메인 언어는 하나 있겠지만, 여러 언어를 사용

paypal

-> 자바 : 은행과 연결

-> 등등 다른 언어들...

facebook

-> 수백개의 언어로 만들어졌다.

-> 채팅 : javascript(websocket)

==node js==

많은 테스트가 있었고, 많은 사람들이 사용하고 , 많은 회사에서 사용한다.

cool~~~~

수없이 검증되었고 많은 곳에서 사용 되니 걱정말고 공부하자~


반응형
반응형

◎ 1 .NODE JS 설치


▼ 1. 아래 URL 주소로 NODE JS 접속 해서 각 자기 OS 환경에 맞는 버전 다운

 


저는 윈도우 10 64비트라 저거 클릭후 다운받음.


node-v10.15.2-x64.z01

node-v10.15.2-x64.zip


파일 다운로드

혹시나 싶어서 분할압축으로 NODE JS 윈도우 10 X64비트용 올려놓음

그후 파일클릭후 실행하고 NEXT 만 누르면 자동으로 다운됨

(PATH설정도 자동 맞춰주는거같음)


◎ 2. NPM 설치


▼ NODE.JS 설치후 CMD에서 아래 명령어를 치면 NPM 설치 작업 완료.

npm install --global --production npm-windows-upgrade

요런 창이뜨더니 계쏙진행되면서

요런창이 뜨면 작업완료


◎ 3. parcel 설치


▼ npm 설치후 vs 코드에서 작업을 수행하였다

1. 터미널에 npm install -g parcel-bundler 입력

npm install -g parcel-bundler

이렇게 작업이 수행된다

작업 완료까지 2분 이렇게 뜨면 작업이 완료된다.




◎ 4. parcel 사용 (서버실행)


▼ parcel 을 사용하기 위하여 pacakage.json을 수정

1. vs 코드 터미널에서 npm init -y 명렁어를 친다.

2. package.json 파일이 생성된다.

3. package.json 파일에서 main 부분을 지우고

4. scripts 부분에 'start : 'parcel index.html' 로 수정

5. 터미널에 npm run start 입력

6. 터미널에 뜬 주소로 들어가면 index.html이 서버로 수행이된다. (제경우는 http://localhost:1234)

npm init -y

npm init -y 입력호 package.json 다운받아짐


package.json 내용 수정

npm run start 터미널 입력


반응형

+ Recent posts