dev

multer : Express를 이용해서 사용자가 전송한 데이터 파일을 어딘가에 저장하는데에 최적화된 모듈 npm install --save multer이 multer를 사용하기 위해서는 따로 설치가 필요하다.   var multer = require('multer');multer모듈을 사용하기 위해 변수를 선언한다.   app.get('/upload', function (req, res) { res.render('upload');});다음과 같이 프레임을 만들어주고 views 디렉토리 내에 upload.pug 파일을 생성해준다.   doctype htmlhtml head meta(charset='utf-8') body form(action='upload' meth..

앞전에 작성한 코드들을 더 깔끔하게 정리하고자한다. 중복 및 불필요한 코드를 제거할 것이다.코드를 개선 및 정리하면 좋은 점은 가독성뿐만 아니라 코드의 유지보수 측면에서도 매우 편리하다. app.get(['/topic', '/topic/:id'], function (req, res) { fs.readdir('data', function (err, files) { if (err) { console.log(err); res.status(500).send('Internal Server Error'); } res.render('view', {topics: files}); })});배열을 이용해 라우터의 경로를 2개를 설정함으..

출력을 하기 위해서 우리는 라우터를 만들어줘야한다./topic이라는 라우터가 있는데 왜 만들어야할까에 대해 의문을 가질 수 있다.이유는 사용자가 url상으로 입력해서 들어오는 방식은 POST 방식이 아닌 GET 방식이기 때문이다.그래서 GET 방식의 /topic을 한 개 더 만들어줘야하는 것이다.   app.get('/topic', function (req, res) { });우선 다음과 같이 프레임을 만들어준다.   fs.readdir('data', function (err, files) { if (err) { console.log(err); res.status(500).send('Internal Server Error'); } ..

지금까지 작성한 포스팅들을 베이스로 웹애플리케이션을 제작해볼 것이다.사실 개념을 숙지하는 것도 중요하지만 실습을 통해 여러가지 경험을 해보는 것이 더 중요하다고 생각한다.그래서 한 번 애플리케이션을 직접 만들어보기로 했다.사용자로부터 어떠한 정보들을 입력받고, 그렇게 입력받은 정보들을 서버에 저장하고, 사용자가 필요한 정보를 요청하면 그것을 제공하는 로직의 애플리케이션이다.여기서의 핵심은 데이터를 어디에 어떻게 저장하는지다.우리가 일상생활에서 사용하는 대다수의 웹애플리케이션들은 데이터들을 데이터베이스(DB)에 저장한다.하지만 이번에 만들 애플리케이션은 데이터베이스에 저장하는 것이 아닌, 파일에 저장하는 형식으로 만드려고한다. 어떻게보면 파일에 저장하는 형식도 일종의 데이터베이스와 비슷한 개념이긴하다.파일..

변경된 사항을 보고 있다가 어떤 변경이 일어났을 때 Supervisor라는 것이 자동으로 node를 껐다 켜서 실행을 시킨다.이를 watch 기능이라고 한다. https://www.npmjs.com/package/supervisor Supervisor에 대한 메뉴얼과 예제들이 있으니 참고하면 될 것 같다.   npm install supervisor -g-g : global의 약자로 컴퓨터 전역으로 사용할 수 있도록 설치   서버 코드를 app.js라고 가정할 때, 터미널에서 node app.js 대신 supervisor app.js 를 실행하면 코드에서 변경이 감지될 때마다 자동으로 app.js를 새로 실행시켜줘서 우리가 서버를 재시작할 필요가 없어진다.

어떠한 정보에 대한 주소를 나타낼 때에는 url상에 모든 정보를 포함시켜야한다.하지만 문제가 되는 케이스가 있다. 바로 아이디와 비밀번호를 입력할 때, 아이디와 비밀번호는 url상에 노출되면 안되기 때문이다.이 경우, url에 정보가 표시되지 않는 방식인 POST 방식을 사용하게 된다. 또한 이 전의 글과 같이 텍스트박스에 만약 매우 긴 문자열들이 들어간다고 가정하면 url의 규격을 위반하기 때문에 post 방식을 사용한다.   (query string 을 사용한) GET 방식 : 하나의 router가 GET방식을 통해 전송된 쿼리 스트링의 데이터에 따라 다른 결과를 보여줄 수 있다. Express 디폴트 값은 GET 방식이다.POST 방식 : url에 데이터가 포함되지 않고 조용히 데이터가 암시적으로 ..

doctype htmlhtml head meta(charset='utf-8') body form(action='/form_receiver' method='post') p input(type='text' name='title') p textarea(name='description') p input(type='submit')app.post('/form_receiver', function (req, res) { res.send('Hello, POST');});이와 같이 작성하면 Hello, POST가 출력되는 것을 확인할 수 있다...

웹브라우저가 상호작용하는 과정에서 2가지 방법이 있다.GET 방식과 POST 방식이 있다.GET 방식은 지금까지 사용했던 것 (웹브라우저에서 웹서버로 정보를 요청할 때 사용. 디폴트가 GET)POST를 알게 됨으로써 GET을 더 잘 이해할 수 있게 된다. 애플리케이션을 이용하기 위해 애플리케이션에 접속하면,애플리케이션은 사용자의 접속(사용자의 요청)에 따라 어떠한 정보를 응답한다.사용자는 그 정보를 가져온다.이 방식이 GET이다. http://a.com/topic?id=1 같은 경우 GET 방식이다. (query string이 없이 /topic 만으로 접속했을 때에도 GET 방식이다.)어떤 정보를 서버에 요청해서 가져오는 방식은 GET 방식이다. 한 마디로 정리하자면 아래와 같다.GET : 사용자가 서버..

http://localhost:3000/topic?id=2 와 같은 url을 사용할 수도 있지만,http://localhost:3000/topic/2 처럼 조금 더 깔끔한 url을 사용할 수도 있다.이러한 방식의 url 체계를 'Semantic URL' 이라고 표현한다.이를 한국어로 번역하면 'Semantic : 의미론적인, 즉, 조금 더 의미에 부합되는 url 체계'라고 한다.우리는 이를 query 방식에서 path 방식으로 바꿔볼 것이다.사실 query 방식이 더 중요하다.최근에는 시멘틱 url도 많이 사용하기 때문에 알아둬서 나쁠 건 없다고 생각한다. 바로 http://localhost:3000/topic/1 에 접속하면Cannot GET /topic/1 라는 오류가 뜰 것이다. 이는 /topic/..

웹페이지들의 url들을 보게 되면http://testing.com/topic?id=1http://testing.com/topic?id=2http://testing.com/topic?id=3과 같이 ?로 이루어진 url을 본적이 있을 것이다.이를 이용해 하나의 라우터를 갖고 여러개의 url을 생성할 수 있다.그럼 방법을 알아보자.   app.get('/topic', function (req, res) { res.send('Hello');});우선 기본적인 라우터의 형식이다.이는 topic?id=1을 작성하든 topic?id=2를 작성하든 모두 똑같이 Hello 라는 문구가 출력된다.그렇다면 어떻게 id값에 따라 웹페이지를 다르게 할당할까?사용자가 위와 같이 입력해서 들어왔다면 이는 request일 것..