Node.js 전체 소스 해석

 

 

1 ~ 7) 이 부분은 모두 모듈들을 불러오고 나중에 사용하기 편하도록 변수에 담는 소스들 이다.

          각각의 모듈들의 역할은 밑에서 쓰일때마다 설명할것이다.

 

require 과 request 둘다 요청하다 라는 비슷한 뜻을 가지고 있다.

하지만 자세한 영어의 뜻으로는

 

request: 사정이 생겨정중히 요청하다.

require: 반드시 필요하다

 

즉, 여기서 사용되는 require은 아마도 애플리케이션을 만들기 위해서는 모듈이 반드시 필요할것이다. 그래서 require을 사용해 요청하는것은 아닐까 라는 생각을 해본다.

 

5) template.js는 사용자가 직접 만든 모듈이다. main.js가 실행되는 위치를 기준으로 해서 lib 디렉토리 안에 있는 template.js 라는 모듈을 불러온다.

 

9) http라는 모듈을 불러와 저장했던 변수 http를 사용한다. http 모듈안에 createServer라는 함수가 있다.

   즉, createServer는 서버를 만드는 함수이고 그안에 callback 함수의 첫번째 인자와 두번째 인자를

  request, 와 response로 한다. 

  첫번째 인자인 request는 클라이언트가 서버에게 요청한 내용을 객체에 담고 있다.

  두번째 인자인 response는 서버가 클라이언트에게 응답한 내용을 객체에 담고 있다.

 

콘솔에 request를 출력해 보면

클라이언트가 서버에게 요청한 내용들이 key와 value로 저장되어있고,

그중 url이 있다.

protocol: 통신규칙, 사용자가 서버에 접속할 때 어떤방식으로 통신할지

 

host(domain): 인터넷에 접속되어있는 각각의 컴퓨터, 특정한 인터넷에 연결되어있는 컴퓨터를 가르키는 주소 

 

port: 한대의 컴퓨터 안에 여러개의 서버가 있을 수 있다. 클라이언트가 접속했을때 그중에 어떤 서버와 통신할지가 애매하다. 그래서 접속할 때 3000이라고 하면 3000번 포트에 연결되어있는 서버와 통신하게 된다.

 

path: 그 컴퓨터 안에 있는 어떤 디렉토리에 어떤 파일인지를 가리킨다.

 

query string: 쿼리스트링의 값을 변경하면 웹서버에게 어떤 데이터를 전달할 수 있다.

내가 읽고싶은 정보는 html이고, 12페이지다.

 

http://localhost/?id=HTML

 

id값이 무엇이냐에 따라 사용자에게 적당한 컨텐츠를 보여줄 수 있다. 

 

10) request 객체 안에 있는 url의 값을 변수 _url에 저장. 

     request.url은 /부터 시작하는 쿼리스트링이다. 예를들어 CSS페이지에 들어가면 /?id=CSS

11) 불러온 url모듈을 사용. url을 분석(필요한 부분만을 사용하기 위해 가공)하기 위해 

    url.parse(  1  ,   2 ).query; 를 사용하는데 1번 인자는 분석할 url주소가 들어가야 한다.

    우리는 서버를 만들고 클라이언트가 서버에게 요청할때 쓰는 request 객체 안에서 .url을 사용해

    url을 알 수 있다. 그래서 1번 인자에 _url이 들어간다.

    2번 인자에 true는 url객체의 query속성을 객체 형식으로 가져온다는 뜻이다.

    false면 url객체의 query 속성을 문자열 형식으로 가져온다는 뜻이다.

    .query 는 예를들어 url이 http://localhost/?id=CSS 라면 key 가 id 이고 value가 CSS인 객체를 불러온다.

queryData를 콘솔에 출력해보았다. 현재 페이지가 http://localhost:3000/?id=CSS 이기때문에 

key 가 id 이고 value가 CSS인 객체가 출력된다.

 

12) pathname은 예를들어 url이 http://localhost:3000/update?id=CSS 이라면 

   /부터 ?전까지의 내용이다. 즉 여기선 update이다.

밑에서 이 pathname을 가지고 조건을 걸어 페이지를 구분할 것이다.

 

 

기능별로 전체적인 조건문의 형태이다.

13) /는 홈이라는 뜻이다. 만약 홈에 있다면 { } 안에 조건문이 실행.

그런데 이제 홈 안에서 또다시 조건문이 들어가게 된다.

 

홈에 있을때 콘솔에 queryData를 출력해 보면

이런식으로 나온다. 아마 객체가 없다는 뜻 같다.

그리고 queryData.id를 출력해 보면

undefined 라고 뜨는데 정의되지 않았다는 뜻이다.

즉, 홈에 있을때는 예를들어 ?id=CSS와 같이 쿼리스트링이 없기 때문에 undefined 라는 값이 들어있다.

14~15) pathname이 / 이고, queryData.id의 값이 undefined 라면... 이라는 뜻이다. 즉, 홈이라는 뜻이다.

 

16) fs라는 모듈을 사용해 readdir이라는 함수의 기능을 사용한다. readdir은 디렉토리 목록들을 가져오는것이다.

    readdir( 1 , 2 ); 함수의 1번 인자는 읽어올 디렉토리 목록의 위치

    2번 인자는 callback함수이고 function( 1 , 2 ) 에서 1번 인자는 error 인데 에러 처리에 대한것 같은데 여기서는 사용      하지 않은것 같다. 그리고 2번 인자인 filelist는 우리가 불러온 파일 목록들이 저장되는 변수이다. 

    즉, readdir을 사용해 파일목록들을 불러오면 filelist 변수에 담겨진다.

 

17) 제목에 사용될 내용을 title 변수에 담는다.

 

18) 본문에 사용될 내용을 description 변수에 담는다.

 

19) 사용자가 만든 template라는 모듈안에 list라는 객체를 사용하는 것이다. 그리고 넘겨주는 값이 위에서 fs.readdir을         사용해 파일 목록을 받아와 저장한 filelist 변수를 넘겨준다.

 

★여기서 사용자가 만든 모듈인 template 모듈을 확인해 보자.

위에서 우리가 사용한 객체는 19) 줄에 있는 list 이고 매개변수로 filelist인것을 볼 수 있다.

 

20) list변수에 html 태그인 <ul>을 저장한다.

21) 반복문을 사용할것이기 때문에 인덱스변수 i를 선언

22) 우리가 main.js에서 fs.readdir을 사용해 파일목록들을 받아와 filelist에 저장했다.

 filelist를 출력해 보면

배열 형태로 저장된다. 그렇기 때문에 파일 목록 하나하나 출력해주기위해선 배열의 길이만큼 하나씩 반복해가면서 출력해줘야하기 때문에 filelist라는 변수의 길이만큼 반복해야한다. 그래서 .length를 쓴다.

 

23) 위에서 정의한 list에 덮어씌우기 같은 느낌이다.

   <ul> 뒤에 <li><a href="/?id=CSS">CSS</a></li>가 붙는것이다.

   ${ } 이것은 html 소스 안에 JavaScript 문법이 들어갈때 사용한다.

   filelist[ i ]는 배열이기 때문에 0부터 시작해서 배열에 들어가있는 원소 개수 -1 까지 반복된다.

 현재 3개 있기 때문에 filelist[0], filelist[1], filelist[2] 이렇게 반복해 가면서 파일 이름들을 보여줄것이다.

 

list변수에는 html 문법 그대로 저장되는것이다.   

 

24) 다음 배열 인덱스로 넘어가야 하기 때문에 i변수에 + 1을 해줘야 한다.

 

26) filelist안에 ['CSS', 'HTML' , 'JavaScript'] 이런식으로 저장되어있다고 예를 들면

     20번째 줄에서 초기값으로 <ul>을 주었기 때문에(보기쉽게 개행해서 적어둠)

     <ul><li><a href="/?id=CSS">CSS</a></li>

            <li><a href="/?id=HTML">HTML</a></li>

            <li><a href="/?id=JavaScript">JavaScript</a></li>

 라고 저장된 list변수에 마지막에 </ul> 을 붙여주는것이다.

 

27) 최종적으로

      <ul><li><a href="/?id=CSS">CSS</a></li>

            <li><a href="/?id=HTML">HTML</a></li>

            <li><a href="/?id=JavaScript">JavaScript</a></li>

      </ul>

  이런 식으로 list변수에 저장되는것이다.

 

★다시 main.js로 돌아간다.

 

19) template.js에서 가공한 내용들이 담긴 list 변수가 리턴돼서 list변수에 담겨진다.

 

20 ~ 23) template.HTML 함수의 모양은 이렇다.

     template.HTML( 1 , 2 , 3 , 4 ); 이런 모양인데

    1번 인자는 title이고, 2번 인자는 list, 3번 인자는 html언어, 4번인자도 html언어라 복잡하게 보이는것 뿐이다.

사용자가 만든 template 모듈에 있는 HTML 함수로 title, list 변수의 내용이 넘어가고, 3번, 4번 인자로 html 언어가 넘어간다.

여기서부터는 template모듈의 HTML 함수로 넘어가는 인자값에 대한 설명이다.

1번 인자인 title은 17번 줄에서 정의한 'Welcome' 이 넘어간다.

2번 인자인 list는 19번 줄에서 template.list에서 가공해 리턴받은 list 변수가 넘어간다.

3번 인자는 <h2>${title}</h2>${description} 이라는 html언어가 넘어간다.

        여기서 title은 17번에서 정의한 title, description은 18번에서 정의한 description이다.

4번 인자는 페이지 생성 기능을 위한 create <a>태그를 넘겨준다.

 

22) <a> 태그의 속성인 href=" " 는 a태그를 클릭했을때 넘어가는 페이지의 경로를 적어준다. (pathname의 값을 적어주는것 같다.)

 

★여기서 template  모듈에 HTML 객체를 확인해 보자.

2) HTML이라는 이름에 인자로 title, list, body, control이 있다.

 

3) HTML 객체의 함수안에 내용없이 바로 return이다.

    return의 내용은 html문법이다.

 

7) ${title}에 main.js에서 넘어온 title 내용이 들어간다. (Welcome이 들어간다.)

 

11) a태그의 href 속성이 / 이다. 즉, 홈으로 가는 링크이다.

12) fs.readdir로 파일목록을 가져와 template모듈의 list객체 안에서 반복문을 사용해 배열로 가공한 

    파일들의 리스트들이다.

13) 페이지를 생성할 수 있게 나중에 쓰일 <a> 태그이다.

 

★다시 main.js로 돌아간다.

 

24) response 객체의 메소드에서 헤더 정보를 응답에 작성해서 내보내는 것이다. 인자로 200을 보내주는데

    상태코드를 보내주는것이다. 200은 정상 작동한다는 뜻이다.

25) response 객체에 end 메소드를 사용한다. 여기서 html은 20번 줄에서 정의한 html이다.

     우리가 만든 html소스들이 저장된 html 변수를 end를 통해 페이지로 불러오는것이다.

 

28) 홈(/) 이면서 queryData.id의 값이 undefined가 아닌 그외의 경우

  즉, / 뒤에 쿼리스트링이 있는 경우를 말한다.

    CSS, HTML, JavaScript와 같이 페이지의 본문을 보여주는 페이지로 들어갔을 경우이다.

 

29) fs모듈을 사용해 readdir 사용. 디렉토리 목록을 읽어오는 기능이다.

      fs.readdir( 1 , 2 );  이런 형식인데 1번 인자는 읽어올 디렉토리목록의 경로,

     2번 인자는 callback함수이다.

     형태가 헷가릴 수도 있다.

     fs.readdir( '경로' , function(){ }); 이런 형태인데 { } 이 부분에 들어갈 내용이 많고 개행을 하기때문에

     마지막에     });   <- 이런식으로 쓰이는 것이다.

     callback 함수안에 인자로는 첫번째 인자는 error인데 에러 처리에 대한것 같다. 여기서는 사용하지 않는다.

     두번째 인자로 filelist 인데 읽어온 파일목록들을 배열 형식으로 filelist 변수에 담겨진다.

 

30) main.js 파일 맨 위에서 path라는 모듈을 require 시켜서 path라는 변수에 저장했었다.

     그 path모듈에서 parse라는 함수를 사용한다는것인데 path를 파싱해 준다는 뜻이다.

   여기서 queryData는 각 페이지에 들어갈때의 쿼리스트링이다.

CSS페이지에 들어가면 id : 'CSS' 이고, HTML 페이지에 들어가면 id : 'HTML' 이다.

그래서 queryData.id 를 출력하면 해당하는 페이지의 id의 값인 CSS나 HTML, JavaScript 와 같은 내용들이 출력된다.

.base를 붙여 경로를 탐색해 나갈 수 있는 정보를 세탁할 수 있다.

(.base에 대한 자세한 내용은 46. App제작 - 입력정보에 대한 보안 페이지에 설명이 있다.)

31) fs.readFile 은 fs모듈에 readFile 함수를 사용해 해당 파일의 내용을 읽는 기능이다.

    fs.readFile( 1 , 2  , 3 );  의 구조로 되어있고, 1번 인자는 읽고싶은 파일의 경로이다.

    우리는 data디렉토리 안에 있는 CSS, HTML 과 같은 페이지를 읽을것이기 때문에

    현재 페이지의 쿼리스트링에 해당하는 페이지 id값이 담긴 filterdId를 넣어준다.

    그리고 2번 인자에는 utf8을 넣는데 글자가 깨지지 않기 위해 사용하는것 같다.

    그리고 3번 인자에 callback 함수가 들어간다.

    callback 함수의 1번 인자엔 err , 에러에 관련되어 사용되는것 같은데 여기선 사용하지 않는다.

    2번 인자에 description이라는 이름의 변수가 들어가고, 우리가 fs.readFile 함수를 사용해 파일의 내용을 읽어온 결과가 저장된다.

 

32) queryData.id의 값인 CSS, JavaScript, HTML과 같은 현재 페이지 id의 value값이 저장된다.

 

33) 출력정보에 대한 보안때문에 npm을 설치했었고, 그것을 사용하기 위해 sanitize-html을 require 했었다.

    그래서 보안때문에 title값을 sanitizeHtml에 넣어준다. 그리고 그 결과를 sanitizedTitle이란 변수에 저장.

 

34) 읽어온 파일 본문의 내용에 대한 부분인데 보안때문에 sanitizeHtml을 사용하고 첫번째 인자로 보안적용할 본문이 저장된 변수를 적어준다.

  두번째 인자에는 객체를 넣어주는데 

35) allowedTags : [     ]   이런 식으로 객체가 있다. allowedTags는 해석 그대로 허용된 태그라는 뜻이다.

    허용하고 싶은 태그를 [     ] 안에 넣어주면 된다.

 

37) 사용자가 만든 template 모듈의 list객체 사용. 읽어온 파일 목록이 저장된 배열 filelist를 넘겨준다.

     그리고 파일 목록들을 보여주는 <li>태그들이 담긴 html언어가 리턴되어 list 변수에 저장된다.

 

38) 사용자가 만든 template 모듈의 HTML 객체 사용. 

      template.HTML( title, list, body, control) 순이다.

 

39) 3번째 인자다. 페이지에 내용을 출력하기 위해 제목을 <h2>태그에 sanitizedTitle을 넣어주고,

    파일의 본문 내용인 sanitizedDescription을 가져와 페이지에 띄운다.

 

40 ~ 46) 4번째 인자다.

40) create 링크를 만든다. href 속성으로 인해 클릭하면 /create로 이동한다.

 

41) update 링크를 만든다. href 속성으로 인해 클릭하면 /update?id={ 현재페이지의 제목 } 으로 넘어간다.

  즉, sanitizedTitle은 title이기 때문에 title에는 queryData.id 값이 들어간다.

   queryData.id 는 현재 머물고있는 페이지의 쿼리스트링 id 값이 들어간다.

 

42) delete 링크를 위해 만든다(보안때문에 form태그 사용) . action 속성은 form태그에서 발생된 데이터를 서버로 보낼때 해당 데이터가 도착할 url을 명시한다.

    그리고 post방식으로 넘어간다.

 

43) 이부분은 type을 hidden으로 했기 때문에 화면상에는 보이지 않는다.

     name은 id, value는 어떤 페이지를 삭제해야 하는지 알고 있어야 하기 때문에 해당하는 페이지 이름을 저장함.

 

44) type이 submit이다. 클릭하면 바로 발행된다.  value는 페이지에 띄울 내용을 넣어준다.

 

48) http응답 메시지 헤더를 작성한다는 뜻이다. 200이면 정상 작동한다는 뜻으로 응답메시지를 전송한다.

 

49) 요청에 의한 응답 헤더와 본문을 전송한다는 뜻으로 (  ) 안에 전송할 페이지를 넣어준다.

    38번 줄에서 본문의 내용과 링크들을 만드는 html언어들을 정의하여 html변수에 저장했다.

 

 

 

 

 

-----------------[/create]-------------------------------------------------------------

 

53) pathname이 /create 일때 실행된다.

 

54) 파일 목록을 불러온다.

 

55) 제목을 WEB - create로 하기위해 title에 저장

 

56) 불러온 파일 목록들을 사용자가 만든 template모듈의 list객체의 인자로 전달

 

57) 본문 내용을 담기 위한 부분이고, template.HTML에 인자값으로 (title, list, body, control) 순으로 전달한다.

 

58) 3번째 인자의 시작부분이고 body의 내용을 담는다.

create을 눌렀을때 나오는 페이지를 구성한다.

  <form>태그로 감싸주고 action속성을 주는데 action 속성은 form태그에서 발생된 데이터를 서버로 보낼때 해당 데이터가 도착할 url을 명시한다. 전달방식은 post

 

59) <p>태그는 문단을 나눌때 쓴다. 제목을 입력할 <input>태그의 text 타입을 사용.

    placeholder 속성은 어떠한 내용을 입력해야할지 사용자에게 옅은 색의 글씨로 알려주는 가이드라인과 같은 기능을 한다.

 

61) <textarea>태그는 본문과 같이 긴 내용을 적을때 사용한다.

 

64) 작성한 제목과 본문을 서버로 보내기위해 type속성을 submit(제출)로 한다.

67) template.HTML의 인자로 (title, list, body, control) 이렇게 들어간다.

   마지막  ' '는 control에 해당하는 인자로 공백을 넘겨준다.

 

 

 

 

 

------------------[/create_process]------------------------------------------------

 

우리가 /create 창에서 title과 description 내용을 입력하고 submit을 누르면

/create_process로 데이터가 전송된다.

이제 /create_process에서 전송된 데이터를 받아야한다. 

사용자가 form으로 정보를 전달할때 post 방식으로 전달했었다.

post방식으로 전송된 데이터를 nodejs안에서 가져오기 위한 방법에 대한 설명이 시작된다.

71) pathname이 /create_process라면 실행

 

72) body의 값에 공백을 넣는다.

 

73) request는 createServer에 전달된 callback함수에 있다.

    createServer는 node.js로 웹브라우저가 접속이 들어올때마다 createServer에 callback함수를 node.js가 호출한다.

    그때의 저 함수에 인자를 두개를 준다.

   request에는 요청할때 웹브라우저가 보낸정보를 담는다.

   response는 응답할때 우리가 웹브라우저에게 전송할 정보를 담는다.

사용자가 요청한 정보안에 post정보가 있기 때문에 request를 사용한다.

 

웹브라우저가 post 방식으로 데이터를 전송할때 데이터가 엄청나게 많으면 그 데이터를 한번에 처리하다가는 프로그램이 꺼진다거나 컴퓨터가 무리가 가는 등의 문제가 생길 수 있다.

그래서 nodejs에서는 post방식으로 전송되는 데이터가 많을 경우를 대비해서 사용방법을 제공한다.

어떤 조각조각의 양들을 서버쪽에서 수신할 때마다 서버는 이 callback함수를 호출하도록 약속되어있다.

그리고 호출할 때 data라는 인자를 통해서 수신한 정보를 주기로 약속한다.

 

74) body 데이터에 callback이 실행될때마다 data를 추가해준다.

 

76) 정보가 조각조각 들어오다 더이상 들어올 정보가 없으면 end다음에 callback함수를 호출한다. (정보 수신이 끝남)

 

77)  qs(쿼리스트링 모듈)라고 하는것에 모듈이 가지고 있는 함수중 parse라는 함수에 지금까지 저장한 body를 입력값으로 준다. post변수에 post데이터 정보가 들어간다.

콘솔에 post를 출력해보면 /create에서 입력했던 title과 description이 출력된다.

 

그러므로 우리는 웹브라우저로부터 post방식으로 전송된 데이터를 가져올 수 있다.

qs.parse함수를 이용해서 정보를 객체화 하여 전환할 수 있다.

 

80) fs.writeFile( 1 , 2 , 3 , 4 )      <-  파일을 저장하는 함수

    1번 인자는 파일의 이름인데 우리는 data디렉토리 밑에 저장할것이기 때문에 data/가 붙는다.

    ${title} 이 들어가는 이유는 우리가 /create에서 입력한 title이 곧 파일 이름이기 때문에 위에서 post.title 한 값이 들어 가야한다.

    2번 인자는 파일의 내용이 들어간다. 우리는 post.description해서 구해온 본문 데이터가 저장되어있는 description 변수를 넣는다.

    3번 인자는 utf8을 넣는다.

    4번 인자는 callback함수가 들어간다. callback함수 인자로 err을 넣는데 에러 처리에 관한것인데 여기서는 신경쓰지 않는다. 여기 callback 함수가 실행된다는것은 파일의 저장이 끝났다는 뜻이다.

 

81) 파일의 저장이 끝나면 우리가 생성한 뷰 페이지를 보여줘야한다.

    사용자를 다른 페이지로 튕겨버리는것을 리다이렉션이라고 한다.

    301은 영원히 바꾼다는 뜻

    302는 페이지를 다른곳으로 리다이렉션 시키라는 뜻, 일시적으로 바꾼다는 뜻

    Location 뒤에는 리다이렉션 시키고싶은 주소를 적는다.

    우리가 만든 파일을 보여줘야하기 때문에 쿼리스트링 id 값에 제목이 들어가야한다.

HTML이라는 파일을 만들었다면  /?id=HTML 이라는 쿼리스트링을 만들기 위해선

  /?id=${title}이 들어가야 한다.

 

82) end에는 특별히 띄울 메세지가 없기 때문에 비워준다.

 

 

 

--------------------------[/update]----------------------------------------------------------

 

85) pathname이 /update일때 실행

 

86) data디렉토리에 있는 파일들의 목록을 읽어온다.

 

87) path -> 맨 위에서 path라는 모듈을 require 시켰었다.

     .parse -> path라는 모듈안에 있는 메소드 함수다. 파싱하는 기능을 한다.

     (queryData.id) -> 쿼리문의 id의 값을 나타낸다.

      예를들어 url이      http://localhost/?id=CSS  라면 queryData.id의 값은 CSS이다.   

      .base -> 입력정보에 대한 보안 때문에 사용

 

88) 수정할 파일을 읽어와야 하기 때문에 fs.readFile 메소드 함수를 사용한다.

    파일의 이름을 알아야 하기 때문에 ID을 가져와 파싱한 결과인 filteredID를 첫번째 인자로 넣는다.

    세번째 인자 callback함수는 읽어온 파일 내용을 description에 담는다.

 

89) 쿼리문에 있는 ID의 값을 title에 담는다.

 

90) 86번줄에서 읽어온 파일 목록들이 담긴 filelist 변수를 사용자가 정의한 template.list( ) 메소드에 인자로 넘겨준다.

 

91) template.HTML( ) 메소드의 인자는 title, list, body ,control 순이다.

 

92 ~ 103)  update 페이지를 구성하는 html소스들이다.

 

93) <form> 태그를 사용하고, action 속성을 이용해 수정한 데이터를 /update_process로 post 방식으로 전달

 

94) 수정을 하려면 title 값도 수정될때가 있다. title값이 수정되면 title값으로 수정할 파일을 찾아야 하는데 title값을 변경하면 찾을 수 없다. 그래서 따로 title값을 넘겨줄것이 필요하다. 

  type을 hidden으로 하면 페이지상에는 보이지 않지만 name을 id로 주었기 때문에 나중에 값을 사용할 수 있다.

 

104) create 링크와 update 링크를 만든다. href 속성은 연결할 주소를 적어준다.

 

106) 정상작동

 

107) template.HTML( ) 로 만든 페이지를 담은 html변수를 전송해 페이지를 뿌림

 

 

 

-----------------[/update_process]-----------------------------------------------------

 

110) pathname 이 /update_process 라면 실행

 

111) body 변수에 공백으로 초기화시킨다.

 

112) 우리가 update 페이지에서 수정할 데이터를 post 방식으로 전송했었다. post방식으로 전송할때 많은 양의 데이터를 보내면 다양한 오류가 생길 수 있다고 한다. 자세한건 모르겠다.

그래서 request.on을 사용해 데이터를 받아온다고 한다.

그리고 데이터를 받을때마다 request.on 함수의 두번째 인자인 callback 함수의 data를 이용해 데이터를 받는다.

 

113) body 변수에 새로 들어오는 data를 추가로 담는다.

 

115) 데이터 수신이 끝나면 end가 실행된다.

 

116) 전달받은 데이터를 qs.parse를 이용해 가공해준다.

가공한 데이터를 post변수에 담았다. post를 콘솔에 출력해보면 객체형식이다.

 

120) 파일의 제목을 수정하기위해 fs.rename( 1, 2 , 3 ) 을 사용.

      1번 인자에는 수정해야 할 파일 이름이 들어간다. 

      2번 인자에는 변경할 이름을 넣는다.

      3번 인자에는 callback함수이고 callback인자에 error가 들어가는데 여기서는 사용하지 않는다.

      파일 이름을 변경하면 callback 함수가 실행된다.

 

121) 파일 본문의 내용을 바꾸기 위해 fs.writeFile( 1 , 2 , 3 , 4 )을 사용한다.  

      1번 인자는 본문에 내용을 넣을 파일 이름이 들어간다. 120번줄에서 파일 이름이 변경된 후 fs.writeFile이 실행되는 것이기 때문에 변경한 후의 파일 이름을 적어야 한다. 

      2번 인자는 본문이 들어간다.

      3번 인자는 utf8을 넣어준다.

      4번 인자는 callback함수이고, callback 함수로 err을 넣어주는데 여기서도 사용하지 않는다.

 

122) 파일 본문 내용까지 넣어준 뒤 실행된다. 302는 페이지를 다른곳으로 리다이렉션 시키라는 뜻, 일시적으로 바꾼다는 뜻,

     {Location: `/?id=${title}`}  객체 형식이다. 리다이렉션 해주기 위해 사용.

     수정한 후 수정한 화면을 보여주기 위해 id를 수정한 페이지의 title 값인 페이지를 보여준다.

 

 

------------------[/delete_process]------------------------------------------------------------

 

128)  pathname이 /delete_process 일때 실행

 

129) body에 공백문자로 초기화

 

130) post로 삭제할 데이터를 보냈기 때문에 request.on을 사용해줘야한다. 그 데이터는 callback함수의 data 인자로 들어온다.

들어온 data 값을 출력해 보면 이런식의 알 수 없는 숫자와 영어로 데이터가 표시된다. 

그래서 134번 줄의 qs.parse로 파싱(가공) 해줘야 한다.

 

133) 데이터 받아오는것이 끝나면 end가 실행되고 callback 함수가 실행된다.

 

136) 보안때문에 id값을 .base라는 것을 이용해 바꿔줘야한다.

 

137) 페이지를 삭제하기 위해 fs.unlink( 1 , 2 )를 사용한다.

     1번 인자에는 삭제할 페이지 이름이 들어간다.

     2번 인자는 삭제한 후 실행되는 callback함수이고, error가 인자로 들어가지만 여기서도 사용하지 않는다.

 

138) 302는 리다이렉션 한다는 뜻이고, 삭제하면 홈으로 페이지가 돌아가야 하기 때문에 Location 값은 '/' 가 된다.

 

 

 

----------------[ 마지막 ]--------------------------------------------------------

 

144) 그렇지 않으면 이란 뜻인데 전체적인 조건문을 한번 봐보자.

 

/(홈) 이거나, create이거나 , create_process이거나, /update이거나, /update_process이거나, /delete 도 아닌 나머지 모든

경우

즉 저 조건문에 걸리지 않은 경우를 뜻한다. else는.

 

즉, else에 걸린다는것은 우리가 만든 페이지도 아니고 개발자가 의도한 페이지가 아니라는 뜻이기 때문에

에러를 표시해줘야한다.

 

145) 404는 에러 즉, 페이지를 찾을 수 없다는 뜻이다.

 

146) 그리고 'Not found' 라고 페이지에 출력해준다.

 

149) 3000번 포트에서 http 수신을 시작