시베리안 허숙희의 자바스크립트 비기닝 1

자바스크립트는 크게 2가지

1. 클라이언트(브라우져)안에 갇힌 자바스크립트

2. OS위에서 동작하는 자바스크립트(Node설치 필요)

 

공부전 미리 필요한 최소 지식 및 에디텅

1. html (사용자입력태그까정)

2. css  (기본적인 것만)

3. css 선택자(자주 쓰는 것만)

4. visual studio code

     =>  자바를 많이 하는 사람은 eclipse keymap 플러그인을 먼저 깔공

     =>  node extension pack 플러그인도 일단 깔장.  

     =>  구글에서 vs code 추천 플러그인으로 검색, 본인 판단하에 유용한 플러그인을 설치한당

Node로 간단 웹서버 맹글기

보통은 다운받을 수 있는 웹서버나, vs code의 플러그인 live preview나 live server를 쓰지만

여기선 맹글어서(이해도가 높아진당) 쓰도록 해 보장 -> 왜냐면 비가 온당!

 

1. NVM(Node Version Manager) 을 설치 하공, 요걸로 요래조래 필요한 버젼의 node를 설치한당.

   => 바로 Node를 설치하는 사람은 훌륭하지 않당! 왜? Node는 버젼이 엄칭 많당

   => nvm은 Mac/Linux용과 window용(나중에 출현)이 다르당, 구분하장

   => https://github.com/coreybutler/nvm-windows/releases 에서

                                   윈도우용 nvm-setup.exe를 다운받아 설치

   => 관리자 권한으로 cmd(명령프롬프트) 실행,

         대략 아래 명령어들을 출력결과를 보며 nvm 사용법 느낌 잡는당

nvm -v
nvm help
nvm ls available
nvm install 18.16.0
nvm ls
nvm ls available
nvm install 16.20.0
nvm ls
nvm use 18.16.0
nvm ls

node -v

 

2. D: 드라이브가 있다면 요기에 NodeWS라고 폴더를 맹글장(WS는 WorkSpace 의미당 내맘이당)

   => NodeWS폴더 안에 HttpServer라고 디렉토리를 맹글고, vs code로 요 폴더를 열장

   =>  새파일 server.js를 맹글고, 내용은 간단히  아래 처럼만 하고 저장하장!       

console.log("나 서버할랭!");

   => View 메뉴에서 터미널을 선택하장

        (기본 PowerShell로 열리는뎅, cmd로 1개 더 열고 고기서 아래 작업하장)

 

3. NPM(Node Package Manager)을 이용 package.json 파일 만드는 법과

         모듈 설치/삭제법을 느낌 받장

   => 일단 느낌만 받아도 된당.  스프링을 배웠다면 maven이나 gradle에 해당한다고 생각하면 좋당

npm -v
npm help
npm init -y   ## package.json 파일이 생성됨이 누네 보인당
## npm install -g 모듈명   ##전역설치 
## npm install -D 모듈명   ##개발시에만 포함
## npm install --force 모듈명 ## 있어도 덮어 설치

 

4. 동작확인 및 대략 추측해 보장 (모든 걸 설명 들어야 한다면 그건 힘들당,눈이 힌트들을 잡아 내야 한당)

npm start

 

5. server.js 샘플코드 추가  (아직 까정 추가 모듈은 필요없당)

import http from 'http';  // 내장된 http 모듈 가져오깅

console.log("나 서버할랭!"); // 그냥 괜히 로깅

const serverPort = 272;    // 내 맘대로 서버 포트

// 서버 생성 및 요청에 간단히 항상 같은 응답 구성
const server = http.createServer((req,res)=>{
    console.log("체킹:",req.url);
    res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
    res.write('<h1>안농 난 E7E라고해 </h1>');
    res.end('<h1>정신 연령은 중학생정도는 돼!</h1>');
});

// Listen 시작
server.listen(serverPort, ()=>{
    console.log(`Server is listening on ${serverPort}`);
});

req 는 request (client 요청내용을 담고 있는 객체)

res는  response(client에 응답할 내용을 담아서 응답하는 객체) 로 http 프로토콜의 기본 객체이당!

 

아래 명령어로 server.js 구동하면, 에러발생!(require가 아닌 import를 사용했기 때문)  에러메세지를

잘 보면  set "type": "module" in the package.json or use the .mjs extension 가 보인당!

node server.js

package.json 파일에 "type": "module" 을 추가 하고 다시 위 명령어를 입력하면

Server is listening on 272  메세지가 터미널에 보일 것이당! 

뿌듯하당!, 실행 되었음이당!

 

6. 브라우져에서 새 탭을 열고, 주소줄에  http://localhost:272  를 입력하고 결과 확인!

    실행소스와 결과를 눈으로 맞추어 본당! 

 

7. vs code 터미널에서 ctrl 과 c 키를 누르면  서버가 멈춘당!

   잘했음이당!!!!~~  지금은 뼈대가 중요하당, 뼈 사이 사이 숭숭 구멍들은 앞으로 살과 살로 메꾸장

   어렵다 느꼈다면 당연하당!, 특별한 로직없이 낯선 세팅법이 뇌를 피곤하게 했음이당!

   (그저 세팅일뿐이고, 한번 눈으로 보았음이 중요하당!!)

 

 

인간 자체가 도깨비당!,

모자람을 인정하고 따뜻하게  품어주며 살아갈 수 있다면 그때 인간이 될 것이당!

 

https://www.youtube.com/watch?v=W0cs6ciCt_k