괜찮아 잘하고있어 힘내

express에서 generator을 사용해 프로젝트를 만들고 npm start 를 입력하면 실행된다. 그런데 코드를 수정할때마다 서버를 껐다 다시 실행해야 변경된 작업내용이 적용된다. 번거롭기 때문에 자동실행하는법을 사용하면 편리하다. npm install nodemon -g 를 사용해 nodemon을 설치해준다. 설치가 완료됐으면 nodemon /bin/www 를 입력해 실행시키면 서버를 껐다 키지 않아도 저장만 하면 바로 적용된다.

expressjs.com/ko/starter/static-files.html Express에서 정적 파일 제공 Express에서 정적 파일 제공 이미지, CSS 파일 및 JavaScript 파일과 같은 정적 파일을 제공하려면 Express의 기본 제공 미들웨어 함수인 express.static을 사용하십시오. 정적 자산이 포함된 디렉토리의 이 expressjs.com 23) 정적 파일을 가져다 쓰려면 public 폴더에 넣어 사용해야한다. public 폴더 안에 템플릿 다운받았던 것들을 넣어두면된다.

API : Aplication Programming Interface 우리가 만든 웹 애플리케이션은 Nodejs가 가지고 있는 기능을 호출함으로써 동작하게 된다. 우리가 사용했던 fs.readFile 함수는 우리가 만들지 않았다. Node.js를 만든 개발자들이 만들었다. 그래서 우리는 fs.readFile이 어떤 원리로 동작하는지 알 수 없다. Node.js를 만든 개발자들은 Node.js를 이용하는 개발자들에게 파일을 읽을때는 readFile 을 사용하라고 사용설명서를 통해서 말하고 있다. 즉, readFile이라는 함수의 이름과 거기에 들어가는 파라미터, 리턴값은 이 함수를 만드는 Node.js를 만드는 개발자들과 이 함수를 사용하는 Node.js를 이용하는 개발자들간에 약속된 조작장치이다. 이런 ..

7) sanitize-html 을 require하면 node_modules 디렉토리안에 sanitize-html 모듈을 찾을 것이다. 그리고 sanitizeHtml 변수에 담아준다. 상세보기 페이지에서 description(본문)과 title을 sanitize 해야한다. 32 ~ 33) 변수명에 sanitized를 붙여 자신이 사용하는 변수가 살균이 되었다는것을 나타냄으로써 어느정도 안심할 수 있다. 나머지 부분에 title을 sanitizedTitle로 바꾸고 description을 sanitizedDescription으로 변수명을 모두 바꿔준다. 그리고 다시 태그가 포함된 내용의 페이지를 만들어 본다. 내용만 사라지고 나머지 부분만 페이지에 뜬다. f12를 눌러 소스를 보면 내용이 사라져있다. 하지만..

1. 사용자가 입력한 정보를 외부로 출력할 때 오염된 정보를 소독하는 방법 2. npm을 통해 내가 아닌 다른사람이 만든 모듈을 사용해서 애플리케이션을 빠르게 만드는 방법 [npm sanitize html] 현재 59만명의 개발자들이 사용하고 있어 검증이 된 자료이다. npm init 우리의 애플리케이션을 npm으로 관리하기 위한 절차가 시작된다. package name에서 멈추는데 엔터 누르면 된다. 그러면 기본적인 패키지 이름이 설정된다. 자신의 애플리케이션을 패키지로써 관리하는 것이 된다. 그 후로 version 등등이 나오는데 그냥 다 엔터 눌러주면된다. 모두 엔터를 누르게 되면 이런 내용이 뜬다. 그리고 main.js와 같은 디렉토리에 package.json 이라는 파일이 생성되는걸 확인할 수 ..

새로운 페이지를 만들기 위해 create 버튼을 누르고 title과 description 내용에 태그를 추가하고 경고창을 띄우는 alert를 사용하고 submit을 하게 되면 우리가 의도한 페이지동작대로 동작하지 않고 경고창이 뜬다. 새로 생성한 XSS 파일 내용을 보면 입력한 태그가 그대로 저장되어있는걸 확인할 수 있다. 그리고 본문 내용을 location.href을 사용해 주소를 적어주고 저장하면 XSS페이지를 클릭할때 웹 개발자가 의도하지 않고, 사용자가 의도한 페이지로 넘어가게 된다. 온라인 서비스들이 사용자로부터 입력을 받은 정보를 바깥쪽으로 꺼낼때( 출력할때) 그 정보에서 문제가 될 수 있는 것들을 필터링 하는 작업을 해야 한다. [html entities] 는 > 로 사용하면 ..

나중에 데이터베이스를 이용해 데이터를 관리하게 될것이다. 데이터베이스는 id와 password가 있어야 데이터를 가져올 수 있는데 id와 password는 어딘가에 저장돼 있어야 한다. 예를들어 main.js와 같은 디렉토리에 password.js 라는 모듈을 만들고 그안에 id와 password값이 저장된 객체를 저장한다. id=HTML 이라는 정보는 27) queryData.id라고 하는 형태로 데이터가 들어오게 된다. 그런데 우리가 직접 주소창에 url을 수정해 id값을 ../password.js로 바꾼다면 우리가 저장한 모듈의 내용이 웹페이지에서 볼 수 있게 되므로 보안상 아주 취약하다. 여기서 ../password.js 이부분은 27번째 줄에 fs.readFile( ) 의 첫번째 인자인 경로 부..

lib 디렉토리 안에 template.js 파일을 만들고 그안에 template 객체를 잘라 붙여넣기 한다. 그런데 모듈을 exports해야한다. 이전 시간에 배웠던 module.exports = template; 를 해도 되지만 코드를 줄이기 위해 객체 생성 부분에 바로 모듈을 exports 시킬 수 있다. 1) 객체의 이름을 없애고 바로 module.exports 하고 = 을 붙여 객체와 연결해 준다. 그러면 끝이다. 그리고 main.js로 돌아가 5) qs와 fs와 같이 require 시켜준다. require이 정확히 무슨뜻인진 모르겠지만 모듈을 요청해 와서 사용할 수 있게 하는 기능인것 같다. template 변수를 만들고 그안에 template모듈이 있는 경로를 적어주고 require시켜주면 된다.

우리가 여태까지 객체 안에 함수를 넣어 사용했다. 그런데 객체를 담을 수 있는 모듈이라는 것이 있다. 변수 우리가 지금 만들고 있는 모듈이 담겨있는 mpart.js안에 있는 여러 기능들 중에 M이 가리키는 객체를 이 모듈 바깥에서 사용할 ..

객체란 서로 연관된 데이터와 그 데이터를 처리하는 방법인 함수를 그룹핑 해서 코드의 복잡성을 낮추는 수납상자이다. templateHTML( ) 함수와 templateList( ) 함수는 공통된 template이라는 접두사가 있었다. 성격이 같은것을 그룹화 하기 위해서 template이라는 공통된 접두사를 사용했는데 이 함수를 깔끔하게 정리하기 위해 template이라는 객체 안에 넣고 호출만 하면 된다. 이런식으로 template 객체 안에 HTML과 list로 구분하여 함수를 정리하면 된다. 그럼 이 함수는 46) template.list( ) 와 같이 객체.함수( ) 이런식으로 호출해 사용하면 된다. 47) template이란 객체를 만들었기 때문에 변수명을 html로 바꿔준다. 52) templat..