전체 소스 해석

main.js

1) express를 사용하기 위해 express 모듈을 가져온다.

2) 가져온 express메소드 함수를 app이라는 변수에 담는다. 즉, Application 객체 리턴

3) FileSystem으로 파일을 조작하기 위해 사용

4) post방식으로 넘긴 데이터들을 사용하기 위해 가공을 하는데 이때 querystring모듈을 사용하고 .parse( )를 사용한다.

   그런데 main.js에서는 데이터를 받아와 가공하고 사용하는 일이 없으므로 qs변수가 연한색으로 표시된다.

5) 기존에 데이터를 post방식으로 보내고 사용할때 request.on('data', function(data){})를 사용했었다. 그런 번거로움을 줄이기 위해 body-parser를 사용.

6) 페이지를 압축해 용량을 줄이기 위해 사용.

7) 홈에 관한 라우터

8) 홈을 제외한 페이지생성,수정,삭제에 관한 라우터

9) 보안을 위해 helmet이라는 모듈을 가져온다.

10) 가져온 helmet 모듈을 사용.

 

13) 페이지에 이미지를 띄우기 위해 사용한다. 미들웨어로 static이라는 express에서 기본적으로 내장하고 있는 미들웨어를 사용한다. 정적인 파일을 서비스 하고자 하는 디렉토리를 직접 지정해 주면 된다.

public이라는 디렉토리 안에 images라는 디렉토리를 url을 통해서 접근할 수 있게 된다.

그 외에 다른 부분은 접근할 수 없기 때문에 안전하다.

 

14) app.use( ) 안에 들어가는 bodyParser.urlencoded({extended:false})는 body-parser가 만들어내는 미들웨어를 표현하는 표현식이다. main.js가 실행될때마다 즉, 사용자가 요청할때마다 저 코드에 의해서 만들어진 미들웨어가 실행된다.

사용자가 전송한 post데이터를 내부적으로 분석해서 모든 데이터를 가져온 다음 callback을 호출하도록 약속돼있다.

 나중에 var post = request.body; 를 사용해 데이터를 자동으로 가공하고 post에 담아 사용할 수있다.

 

15) 페이지를 압축해 용량을 줄이기 위해 compression 모듈을 불러왔고 여기서 사용하겠다고 선언한다.

 

16) 글 목록을 표현하는 기능은 공통적으로 사용된다. 그래서 미들웨어로 사용한다.

   미들웨어는 함수이기때문에 function이 들어간다. 첫번째 파라미터는 request객체가 인자로써 전달된다.

   두번째 파라미터는 response객체를 받도록, 세번째는 next라는 변수이다.

   데이터를 post방식으로 받아오고 작업하는 process 부분에서는 파일 목록을 가져오는 미들웨어는 필요없다.

그래서 app.use에서 app.get으로 바꾸고 '*' 를 넣어준다.

'*'    <-   모든 요청이라는 뜻. 대신 app.get이기 때문에 들어오는 모든 요청이 아닌 get방식으로 들어오는 요청에 대해서만 파일목록을 가져온다는 뜻이다.

 

17) fs.readdir을 사용해 data라는 디렉토리 안에 파일 목록들을 filelist에 담는다.

18) 파일 목록을 담은 filelist를 request객체에 list라는 변수에 담는다.

19) next( ) 를 준다. 16번째 줄 함수의 세번째 인자 next이다. next라는 변수에는 그다음에 호출되어야 할 미들웨어가 담겨있다. 즉 그다음 미들웨어가 실행된다.

main.js

23) path 경로가 홈(/) 일때 indexRouter를 실행한다. indexRouter는 7번줄에서 index.js라고 선언해뒀기때문에 

    routes디렉토리 안에 있는 index.js가 실행된다.

25) path 경로가 /topic으로 실행되면 routes디렉토리 안에 topic.js가 실행된다.

27) 위에서 많은 라우팅에서 처리하지 못했을 경우 이부분이 실행되어 404 에러와 메시지를 사용자에게 전송한다.

 

31) express에서 오류처리도 미들웨어로 한다. 하지만 일반적인 미들웨어와 차이를 두기 위해

     매개변수가 (err, request, response, next)  이렇게 4개를 받는다.

33) status를 500으로 설정하고 에러메시지를 전송한다.

 

37) 서버가 listening이 완료됐을때 3000번 포트에 http server를 띄우고 console.log에 해당하는 문구를 command창에 출력한다. (3000번 포트로 통신하겠다.)

 

templage.js

1) 모듈을 외부에서 사용하기 위해 설정한다.

2) HTML 언어로 페이지를 구현하기 위한 모듈. title, list, body, control을 인자로 받아 페이지를 구현.

18) 페이지에 목록을 만드는 모듈. 인자로 filelist를 받는다. filelist에 목록들이 담겨있다.

 

 

 

index.js

1) express 모듈을 사용하기위해 express를 require해서 express에 담는다.

2) express내에 Router( )을 사용하기 위해.  main.js에서 사용하는 라우터들과의 핸들러 역할을 한다.

3) 페이지를 구성하거나 리스트 목록을 만드는 템플릿과 같은 기능을 하는 template.js를 사용하기 위해 require한다.

5) 6번줄의 내용과 같은 기능이지만 좀더 최신의 방식이다.

6) 웹페이지에서 '/'로 접근했을때 function 안에 내용이 실행된다. 

9) template.js에 list 메소드함수로 request안에 있는 list값을 넘긴다.

  여기서 request.list는 main.js에서 

main.js

이부분과 연관이 있다. main.js에서 fs.readdir을 이용해 가져온 파일 목록들을 filielist에 담았고 그 내용을 

request안에 list로 담았다. 현재 내가 아는 개념으로는 request를 사용해  서버측에 list부분에 filelist값을 저장하고

나중에 index.js에서 필요할때 request.list로 불러와 값을 사용하게 하는 그런 원리라고 생각하고있다.

index.js

10) template.js에 HTML 메소드 함수를 이용해 페이지를 만든다.

11) body에 해당하는 부분이다. 제목과 본문이 들어간다.

12) body에 해당하는 부분이다. 이미지를 삽입한다.

15) control에 해당하는 부분이다. create버튼을 만들고 클릭했을때 /topic/create 으로 넘어간다.

17) 완성한 html을 반환한다. 즉, 완성한 페이지를 화면에 띄운다.

20) 'router' 객체를 exports 해서 모듈화 한다.

 

--------------------[topic.js]-----------------------------------------------------------------------------------------------------

topic.js

1) express를 사용하기 위해 express를 요청

2) express안에 Router 함수를 사용. 라우터 기능을 하는것으로 본다.

3) parse(분석) 하기 위해 path 모듈 요청.

4) 파일에 대한 조작을 위해 fs모듈 요청.

5) 입력에 대한 보안을 위해 sanitize 모듈을 요청.

6) 사용자가 html 페이지를 구현하는 템플릿 모듈을 로드함.

 

 

 

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

[페이지 상세보기]

 

※ create, create_process, update, update_process, delete_process는 /:pageId 보다 나중에 나오면 안된다.

    그래서 /:pageId 부분을 먼저 설명하고 넘어간다.

 

app.use    <-  모든 요청 객체에서 공통으로 사용할 수 있는 미들웨어

app.METHOD(get, post등...)     <-  특정 객체에서만 사용할 수 있는 미들웨어

topic.js

80) 2번 줄에서 라우터로 연결했기 때문에 app.get이 아니라 router.get을 사용.

     주소창에서 HTML입력하면 출력은 {"pageId": "HTML"} 이라고 뜬다.

      그리고 request.pageId로 접근해 출력하면 HTML이 출력된다.

81) 사용자가 주소창의 url을 조작해 개발자가 의도하지 않은 작업을 할 수 있다. 그래서 입력정보에 대한 보안을 위해 

    3번줄에서 로드한 path를 사용해 parse(분석)을 하고 .base를 사용해 필터링을 한다.

     (request.params.pageId)에는 원래 queryData.id가 들어간다. 원래는 쿼리스트링의 id값이 들어간다는 뜻인데

    express와 라우터를 사용하고 있기 때문에 url 주소중 페이지 id값이 들어가있는 params중 pageId를 사용한다.

/page/CSS/WEB 이라고 주소창에 치면

request.params에는 이런식으로 값이 들어가있다.

즉, 여기서는 현재 열려있는 페이지의 id 값(HTML, CSS,등등...)이 필터링 되서 filteredId값에 들어간다.

 

topic.js

82) 현재 열려있는 페이지의 id값을 통해 페이지 내용을 읽어와 description에 담는다.

83) 만약 에러가 있다면

84) 다음 미들웨어로 넘어가며 err값을 전달한다.

85) 에러가 없다면 

86) request에 params 에 담겨져 있는 pageId값을 title 변수에 담는다. 즉, 현재 열려있는 페이지의 id값이 title에 담겨진다.

request.params.pageId 값

87) 출력정보에 대한 보안 때문에 title값을 sanitize 적용

88) 본문 값을 sanitize 적용

89) 그중 <h1> 태그는 사용 가능하게 설정.

91) main.js에서 파일 목록들을 받아와 request안에 있는 list에 담았기 때문에 

    request.list 값을 다시 가져와 리스트 목록을 만들 수 있는 템플릿인 template.list로 값을 넘겨준다.

92) 본문을 완성시키는 템플릿인 template.HTML로 제목과 목록값들을 넘겨주고준다.

93) template.HTML의 3번째 매개변수 body 내용이다.

94) 4번째 매개변수 control 영역이다. 그중 create 버튼을 만들고, 클릭하면 /topic/create로 넘어간다.

95) 4번째 매개변수 control 영역이다. 그중 update 버튼을 만들고, 클릭하면 /topic/update/★  로 넘어간다.

     ★는 수정할 페이지 이름이다. 즉, 현재 열려있는 페이지의 id값인데 보안상 sanitize를 적용했다.

96) 4번째 매개변수 control 영역이다. 그중 delete 버튼을 만드는 form 태그이다.

    클릭하면 /topic/delete_process로 넘어가고, 데이터는 post방식으로 넘어간다.

97) 삭제할 페이지의 id값을 id라는 이름으로 숨겨서 넘겨준다.

98) 실질적으로 페이지에 보이는 delete버튼을 만든다.

101) 완성한 html 을 가지고 서버가 응답한다.

 

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

[create 페이지화면]

topic.js

8) router로 연결돼어있고, get방식이다. 경로가 /topic/create 일때 function함수가 실행된다.

10) 페이지 목록을 만들고 완성한 소스를 list변수에 담는다.

11) create 페이지를 만들기 위해 template.HTML을 사용.

12) template.HTML의 body 영역이다.submit 버튼을 클릭하면 /topic/create_process로 넘어가고 데이터들은 post방식으로 넘어간다.

13) title을 입력하는 text

15) description을 입력하는 textarea

18) submit(제출) 버튼

21) control 영역에는 넣을것이 없기 때문에 ' '(공백)을 넣는다.

22) 완성한 소스들이 담긴 html을 서버측에서 클라이언트에게 응답으로 전달한다. 즉, 화면에 보여준다.

 

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

[create 기능 구현]

topic.js

25) router로 연결되고, 데이터들을 post방식으로 받아온다. 

26) body parser을 사용했기 때문에 내부적으로 자동으로 분석해 입력한 데이터들이 request.body에 담겨있다.

27) 넘어온 데이터들이 담긴 post 중에서 title값을 title에 담는다.

28) 넘어온 데이터들이 담긴 post 중에서 description을 description에 담는다.

29) fs모듈을 이용해 파일 본문에 내용을 쓴다.

30) 페이지 리다이렉션을 한다. 방금 만든 페이지의 제목을 이용해 주소로 이동한다.

 

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

[update 페이지 구현]

 

topic.js

34) /update/:pageId   <-  현재 페이지 이름이 들어간다. (현재 페이지의 update)

35) 사용자가 url조작으로 입력정보에 대한 보안을 대비하기 위해 path.parse( ).base를 사용.

      request.params.pageId 는 현재 페이지의 id 값이다.

36) 파일의 내용을 읽어와 description에 담는다.

37) 현재 페이지의 id값을 title에 담는다.

38) 페이지 목록을 만들어 list에 담는다.

39) 페이지 내용을 완성해 html에 담는다.

41) submit 버튼을 클릭하면 /topic/update_process로 이동하고 입력한 데이터는 post방식으로 넘어간다.

42) 수정 작업을 할때 현재 페이지의 id값을 가지고 수정해야하기 때문에 현재 페이지의 id값을 숨겨서 넘긴다.

43) 제목 수정을 위한 text창이고 기존 페이지의 id값을 보여준다.

45) 본문내용 수정을 위한 textarea창이고 기존 페이지의 본문내용을 보여준다.

48) 제출 버튼

52) template.HTML 메소드 함수의 4번째 매개변수 위치고, control 영역이다.

     create버튼을 클릭하면 /topic/create로 넘어간다.

     update 버튼을 클릭하면 /topic/update?id=${title}로 넘어간다. 즉, 현재 작업중이던 페이지 그대로다.

 

54) 완성한 html을 가지고 응답한다. 

 

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

[update 기능 구현]

topic.js

58) 라우터로 연결돼있고 데이터를 post방식으로 받는다. pathname이 /topic/update_process 일때 실행된다.

59) body parser을 사용했기 때문에 내부적으로 자동으로 분석해 입력한 데이터들이 request.body에 담겨있다.

60) 넘어온 데이터들 중 id값을 id 라는 변수에 담는다.

61) 넘어온 데이터들 중 title값을 title 이라는 변수에 담는다.

62) 넘어온 데이터들 중 description값을 description 이라는 변수에 담는다.

63) 파일의 제목을 수정한다. 첫번째위치는 수정할 파일, 두번째 위치는 무엇으로 수정할지

64) 파일의 본문내용을 작성한다. 첫번째 위치는 본문내용을 작성할 파일의 위치와 이름, 두번째 위치는 어떤 내용으로  작성할지.

65) 작업이 완료되면 방금 수정한 파일의 상세보기 페이지로 리다이렉션한다.

 

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

[delete 기능 구현]

topic.js

70) 라우터로 연결돼있고 데이터를 post방식으로 받는다. pathname이 /topic/delete_process 일때 실행된다.

71) body parser을 사용했기 때문에 내부적으로 자동으로 분석해 입력한 데이터들이 request.body에 담겨있다.

72) 넘어온 데이터들 중 id값을 id 라는 변수에 담는다.

73) 사용자가 url조작으로 입력정보에 대한 보안을 대비하기 위해 path.parse( ).base를 사용. id값을 필터링 해준다.

74) 파일 삭제

75) 파일 삭제 완료한 후 홈('/')으로 리다이렉션