Node.js v.6.94 doc : https://nodejs.org/dist/latest-v6.x/docs/api/



http모듈 사용해보기

const http = require('http');
 
const hostname = '127.0.0.1';
const port = 1337;
 
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

상수를 나타내는 const를 사용해서 변하지 않는 것을 사용했다. 

Node.js docs를 확인해서 HTTP모듈에 대한 사용설명서 (API)를 확인한다. 

모듈이라는 것은 부품이라고 할 수 있는데 부품을 가져다 사용할때는 'require'을 통해 사용할 수 있다. 



os모듈 사용해보기

var o = require('os');

console.log(o.platform());




다른사람이 만든 모듈 사용해보기 : NPM

Node Package Manager


JavaScript(+Node.js)가 제공하는 모듈이 아닌 타인의 모듈을 사용하는 방법을 알아보자


npm 사이트(https://www.npmjs.com/) 에서 검색후 cmd창에서 npm install ......  하는 명령을 입력해주고 설치 할 수 있다. 


여기서 설치 명령중 끝에 -g가 붙은것을 확인 할 수 있는데 

g는 global이라는 의미이며 컴퓨터 전역에서 사용하는 독립적인 소프트웨어가 설치된다.

g를 없이 사용하게 되면 현재 npm을 설치하는 프로그램 프로젝트안에서 부품으로 사용하겠다는 의미이다.



ex) 독립적인 소프트웨어로 uglify 설치하고 사용해보기

npm install uglify-js -g

uglifyjs _____.js

uglifyjs _____.js -m

uglifyjs ______.js -o 새로저장할파일명.js -m

uglifyjs ______.js -o _________.min.js -m



ex) _underscore 프로그램 프로젝트 안에서 부품으로 사용해보기

설치하기 이전에 프로젝트 디렉토리를 npm의 패키지의 일종으로 지정을 해줘야한다.

설정할 프로젝트 디렉토리에 들어가서 

npm init 실행

name지정(프로젝트이름) discription입력 entry point(어떠한게 패키지를 구동시키는 자바스크립트인지 지정, 후에 바꿀 수 있다.) test테스트명령어 입력 git repository올리고 싶으면 주소써라 엔터엔터 yes하고 끝

이렇게 실행하고 나면 package.json이 생긴다. 그러면 끝 (프로젝트폴더가 생성된것이다.)

나중에 우리가 만든 프로젝트를 공유할 수 있고, 다른사람것을 사용할 수 있는 준비가 되었다는 것이다.

npm install underscore

설치가 완료되면 node. 과 unsderscore폴더가 생긴다. 


TIP!!! 설치중에 No repository field. 라는 것이 발생 할 수 있는데 이것은 git repository가 저장되어 있지 않아 발생하는 경고이다. 

오류가 발생한것이 아닌 단순 경고!! 그냥 github에 연결되어있지 않다는 이야기.


설치완료창을 보면 extraneous(외부의,부가적인)써있는데 온전하게 포함하지 않았다는 얘기이다.

따라서 npm install underscore --save를 하면 조금 달라지게 생성된다.(플래그생성)

이전에 없었던 dependencies라는 란이 생기게 된다. 

플래그로 선언된 프로젝트버전을 언제든지 내프로젝트에 포함할 수 있다는 이야기이다.

일시적으로 사용해야 할 경우에는 save를 빼고 설치하면된다 (코딩하는 경우에서 잠깐사용할 때 쓰면 될 것 같다.)



underscore는 매우유용한 라이브러리이다. (진짜 개조은듯)

모듈 디렉토리를 사용해야하니 모듈 디렉토리를 선언해주고 사용한다.

const _ = require('underscore');

var arr = [3,6,9,1,12];

console.log(arr[0]);    // 3

console.log(_.first(arr));    // 3

console.log(arr[arr.length-1]);    // 12

console.log(_.last(arr));    // 12



윈도우10에서 관리자모드가아닌 일반모드로 cmd를 실행하였을때

권한에 대해서 오류가 발생하는 것을 확인 했다.

따라서 일반모드가 아닌 관리자 모드를 통해서 npm 설치를 진행하여야한다.






Web에서 사용되었던 JavaScript가 google이 개발한 자바스크립트엔진 V8에 의해 '탈웹화'를 했고, 

따라서 Web에 국한되어있던 JavaScript가 다양한 곳에서 사용될 수 있는 계기를 맞이했다.  

그리고 라이언달이라는 사람에 의해 2009년에 Node.js 프로젝트가 출발하게 되었다. 


Node.js를 설치하고 .

Node.js에서 제공하는 소스코드를 가지고 서버를 실행시킨다. (cmd 창 이용)


createServer를 통해 서버를 만들고 .listen을 통해 port와 hostname을 듣는다.

따라서 브라우저에 호스트네임과 포트번호를 입력하게 되면 서버에 접속할 수 있게 되고

Hello World를 출력하는 브라우저 창을 확인 할 수 있다. 



아래는 Node.js에서 제공하는 튜토리얼 소스코드 이다.

const http = require('http');
 
const hostname = '127.0.0.1';
const port = 1337;
 
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

require이라는 것을 통해 http라는 모듈을 가지고 사용한다는 것을 알 수있다.


언어 : 사람과 사람사이의 약속

프로그래밍 언어: 사람과 컴퓨터 사이의 약속


코드 , 소스 , 코더 ,  프로그래머



-----------------------------------------------------------------------------------


HTML : HyperText Markup Language


 Hypertext - 하이퍼텍스트 문서와 문서가 링크로 연결되어있다. (HTML의 가장 큰 특징이라고 할 수 있다.)

                링크는 HTML의 본질, HTML의 본질은 웹의 본질 


 Markup Language - Markup --> TAG라고 할 수 있다.  - 설명하는 정보가 TAG 

                               <strong> ---- </strong> 을 태그를 통해 사용한다. 시작과 끝태그에 있는 내용을 컨텐츠라고 한다. 

                               language --> 언어는 컴퓨터와 사람의 약속의 언어  



------------------------------------------------------------------------------------

FORMET


<!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8" />

</head>

<body>

안녕하세요 <strong> 헤파이토스 </strong> 입니다.

</body>

</html>



<> : 열린태그 </> : 닫힌태그


------------------------------------------------------------------------------------


+@ 추가기능(링크걸기)


 <a> : 링크를 건다. (알파벳중 가장빠른 순서 = 중요하다) 

 <a href="http://hpitos.tistory.com/> 티스토리 </a>

 

링크라는 것만 알려주지 어디에 걸려있는지는 안알려준다.  여기서 어디를 알려주는지 를 말하는것이 속성이라는 것이다. 


  href -- 속성명(규칙,약속)

  = -- 속성의 값에 해당

 


<!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8"/>

</head>

<body>

안녕하세요 <a href="http://hpitos.tistory.com"> 헤파이토스</a> 티스토리 입니다.

</body>

</html>


-------------------------------------------------------------------------------------


+@ 추가기능 (새창열기)


 target="_blank" :  현재의 창이 아닌 새창(브라우저 or 탭)에서 띄워준다.

 target="_self" : 현재의 창에서 링크를 연다. (기본값)


a 태그하나만으로 다 표현할 수 없기 때문에 속성을 추가해서 사용한다. 

하나는 링크의 주소

또 하나는 타겟 (어떤 브라우저에 무엇을 통해서 새로운 페이지를 열 것인가?)


총 두가지의 속성이 들어갔고 

속성과 속성을 구분할 때에는 띄어쓰기를 한칸 해서 구분해야한다. 



<!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8"/>

</head>

<body>

안녕하세요 <a href="http://hpitos.tistory.com" target="_blank"> 헤파이토스</a> 티스토리 입니다.

</body>

</html>


일시정지












인터넷과 웹은 같을까???

다르다!!


인터넷이라는 것 안에 웹이 있다. 


 - 인터넷이 운영체제 이면 웹은 프로그램이라고 할 수 있다. 

 - 인터넷이 도시라면 웹은 집이라고 할 수 있다. 


웹과 같이 인터넷 이라는 범주안에 FTP, 이메일(SMTP) 등이 있다.  



웹 창시자 -> 팀 버너스리 ( 최초의 웹브라우저, HTTP, HTML )



----------------------------------------------------------------------------------------------------


서버와 클라이언트 



웹은 서버와 클라이언트라는 체계안에서 돌아가는 것이라는 것을 알아야한다. 



클라이언트 : 웹 브라우져가 설치되어있는 컴퓨터

서버 : 웹 서버가 설치되어 있는 컴퓨터



클라이언트가 서버에 '요청'하고 

서버는 클라이언트에게 '응답'한다. 



웹을 기준으로 말해서 


웹브라우저(웹클라이언트) 와 웹서버 를 말하게 된다. 


웹서버 : < 오픈소스 계열 : Apache, Nginx >,  < 마이크로소프트 : IIS >


아파치 설치 주소 : https://httpd.apache.org/


bitnami 설치 주소: https://bitnami.com/stack/wamp (윈도우버전)





구상 → 기획 → 디자인 → 개발 → 테스트 → 피드백



1. 구상 : 뭘 만들까


2. 기획(계획): 세부적으로 어떻게 할까

   어떤 기능 어떤 사용성 등

- UI : User Interface : 시스템 제어 사용자 조작장치 

- 모델링 : 실제 제작이 아닌 가상으로 미리 만들어보는 것 (손으로 그려보기, 오픈소스 이용해보기 Pencil_http://pencil.evolus.vn/ )

( balsamiq : https://balsamiq.com , PowerPoint )


3. 디자인 : 아름답게, 편리하게


4. 개발 : 서비스가 동작하도록 한다. 

   위와같은 순서를 하면서 동시에 진행도 가능


5. 테스트 : 완료전 테스팅 (QA) 


6. 1~5를 반복하며 피드백



작은 것을 크게 키워가는 능력이 필요하다. 

작은 것이라도 완성하는 노력이 필요하다. 

+ Recent posts