괜찮아 잘하고있어 힘내

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시켜주면 된다.

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

자바스크립트에서의 함수는 값 이기도 하다. 그렇기 때문에 배열과 객체에 담을 수 있다. 값으로서 함수를 배열에 담는 경우는 많지 않다. 대신 객체에 많이 담는다. 그 이유는 이름이 있기 때문에 담아논 함수를 이름으로 꺼내기 때문이다. 객체에 함수를 담는것을 통해서 무엇을 할 수 있는지, 좋아질 수 있는지 알아보려 한다. 100000개의 코드 줄이 있고 그 사이에 누군가가 v1의 값을 바꾼다면? v1은 v1이라는 문자가 아닌 egoing이라는 단어가 저장되고 이것은 버그로 이어진다. 이런 상황에선 객체를 사용해야 한다. 서로 연관된 값들을 하나의 객체안에 정리정돈 해서 넣어둘 수 있다. f1이라는 함수 안에서 o객체 안에 있는 v1을 호출해 출력할 수 있다. f1(); 과 f2();를 통해서 함수를 실행할..

Object Oriented Programming => OOP 프로그래밍 스타일, 프로그래밍에 필요한 기능 함수를 만들어서 서로 연관된 처리 방법들의 f1이라는 이름을 붙여 다른것들과 구분을 시킬 수 있다. 함수는 처리해야할 일에 대한 어떠한 정보를 담고 있는 일종의 구문 (statement) , 동시에 값이다. 함수를 변수에 넣을 수 있으면 값이다. 넣을 수 없으면 값이 아니다. 이 조건문은 값이 될 수 있을까? i 라는 변수에 조건문을 대입해 봤다. 에러가 뜬다. 자바스크립트에서는 조건문이라는 구문이 값이 아니기 때문이다. while도 마찬가지로 에러가 뜬다. 값이될 수 없다. 그렇다면 f1이라는 함수는 값이 될 수 있을까? 일단 f1이라는 함수의 이름을 지운다. 이름이 없는 함수가 된다. 그리고 이..

5) HTML문법을 반환하기 위한 함수 정의, title, list, body가 필요하기 때문에 매개변수로 받아옴. 45) templateHTML함수를 실행하고 인자값으로 title, list, 그리고 제목과 본문의 HTML 문법을 넘겨줌 그리고 모두 합쳐진 HTML 문법을 리턴 받아서 template 변수에 저장 22) 리스트 태그를 만드는 HTML 문법이 담긴 templateList 함수 정의이고, 파일목록들이 저장되어있는 배열 변수인 filelist를 매개변수로 값을 받아온다. 그리고 리스트 태그가 모두 합쳐져 저장되어있는 list변수를 리턴한다. 43) templateList함수를 호출하고 파일목록들이 저장되어있는 filelist를 인자값으로 넘겨준다. templateList 함수 내에서 리스트 ..