시간 저장소

이제 CRU까지 됐고 마지막 Delete. 고지가 보인다. create, update와 마찬가지로 일단 delete 링크를 만들어줘야 하는데… 이전이랑 같은 패턴으로 delete 이렇게 하면 될 것 같지만 안 된다. create, update 링크는 그냥 입력 페이지로 연결해 주는 기능이지만 delete링크는 누르는 것으로 실제 삭제 작업을 수행하기 때문에.. id값이 노출되는 get방식으로 만들면 보안 관련 문제가 생길 수 있다. 그래서 form을 사용해 삭제 버튼을 만들어 주기로 한다. create, update랑 보여지는 포맷이 좀 달라서 웹페이지가 약간 못생겨 보이는 단점이 있기는 한데 나중에 CSS 쓰면 해결되는 문제니까 일단은 신경쓰지 않는 걸로.(CSS는 언제 배우나..) 아무튼 히든으로 i..

글 수정(update) 기능 추가하기 애플리케이션의 4대 기본 기능인 CRUD 중에 현재까지 Create, Read까지는 구현한 셈이다. 그러면 당연히 남은 것은 Update와 Delete. 이번에는 글 수정 기능을 추가해 본다. update를 위해서는 당연히 update 링크를 생성해 줘야 하기 때문에, 템플릿에서 해당 부분을 만들어 준다. 그런데 update 링크는 홈 화면이나 create 화면에서는 보일 필요가 없고 특정 글에 들어갔을 때만 보이면 되기 때문에 좀 세부적으로 핸들링해주기 위해 따로 빼서 조건별로 만들어 주기로 한다. 먼저 템플릿 함수에서 create 링크가 있던 부분을 control 변수로 바꿔 주고, function templateHTML(title, list, body, cont..

POST 방식 데이터 받아서 파일로 저장하기 이제 데이터를 입력할 수 있게 만들었으니, 받아서 쓰는 부분도 만들어 준다. 입력form에서 제출 버튼을 눌렀을 때 이동하는 주소를 /create_process 라고 지정했으니 해당 주소에 대한 페이지를 조건문을 사용해 하나 더 만들어 준다. else if(pathname === '/create_process'){ response.writeHead(200); response.end('success'); } 일단 잘 작동하는지 확인하기 위해 리턴 부분에 success라는 텍스트를 넣었다. 제출 버튼을 누르면 화면에 success라고 뜨는 것이 확인된다. 작동 확인 완료. 이제 실제로 입력 내용을 받아오는 기능 구현을 위해 코드를 아래와 같이 수정한다. reque..

입력 페이지 만들기 main.js에 제목과 내용을 입력받는 create 페이지를 신규 생성해 준다. 주소를 /create 로 지정할 것이므로, 우선 main.js 의 템플릿 부분에 /create 페이지로 이동하는 링크를 넣어 준다. WEB ${list} create ${body} 페이지 본문 부분을 위해 if(pathname=”/”)과 else 사이에 else if 조건을 하나 추가하고, 해당 부분에 form 태그 강의에서 만들었던 것과 동일한 html 코드를 넣어 준다. else if(pathname === '/create'){ fs.readdir('./data', function(error, filelist){ var title = 'Web - Create'; var list = templateLis..

HTML form태그 웹페이지에서 정보를 입력받기 위해 form태그의 사용법을 익힌다. 위와 같은 html 소스를 생성해서 파일을 실행해 보면 이런 화면이 생성된다. 내용을 대충 채우고 제출(submit) 버튼을 누르면 아래와 같은 주소로 리다이렉션된다 http://localhost:5000/create?title=hi&description=nice+to+meet+you 쿼리스트링 부분에 내용이 그대로 노출되기 때문에 사용하면 안 되는 방법이다. form 태그의 method 옵션을 get이 아닌 post로 바꿔 주면 해결.(입력하지 않았을 경우 기본값이 get이다)

동기와 비동기 동기적 처리 : 작업을 순차적으로 처리(A작업이 끝난 후 B작업 수행) 비동기적 처리 : 작업을 병렬적으로 처리(A 작업이 끝나고 호출(콜백)할 때까지 B 작업을 동시에 처리) 패키지매니저 Nodejs의 기본 패키지매니저인 npm을 통해 프로세스 관리 패키지인 pm2를 설치하고 활용해 본다. pm2 설치 D:\study\Nodejs>npm install pm2 -g pm2 실행 D:\study\Nodejs>pm2 start main.js ------------- __/\\\\\\\\\\\\\____/\\\\____________/\\\\____/\\\\\\\\\_____ _\/\\\/////////\\\_\/\\\\\\________/\\\\\\__/\\\///////\\\___ _\/\\..

함수를 사용하여 코드 정리하기 그동안 실습코드가 너무 반복적이어서 어떻게 정리를 좀 할 수 있지 않을까 싶었는데(그러다가 겁나 삽질하기도 하고) 여기서 드디어 나왔다. 진도에 다 있는데 너무 급했다 내가… if문 양쪽에 걸쳐 두 번씩 나오는 html 템플릿 부분과 list 생성 부분을 각각 함수로 만들어서 코드를 간결화했다. 1. html 템플릿 함수화 function templateHTML(title, list, body){ return ` WEB ${list} ${body} `; } //중간 생략 var template = templateHTML(title, list, `${title}${description}`); 2. list 생성 함수화 function templateList(filelist){..

파일 목록 읽어들이기 id에 해당하는 파일을 추가할 때마다 자동으로 메뉴가 늘어나도록 세팅하기 위해, 로컬에서 파일 목록을 읽어오는 기능을 학습한다. 실습코드 var testFolder = './data'; //현재 위치(=main.js파일 위치) 하위의 data 폴더를 대상으로 한다 var fs = require('fs'); fs.readdir(testFolder, function(error, filelist){ console.log(filelist); }) 실행결과 D:\study\Nodejs>node readdir.js [ 'CSS', 'HTML', 'JavaScript' ] 파일 이름을 배열로 읽을 수 있음을 확인했다. 그러면 파일만 추가하면 알아서 하위메뉴가 생성되도록 main을 수정할 수 있을..

홈페이지 구현 쿼리스트링 id값이 없는 루트(/) 주소로 접속했을 때 띄울 홈 화면 내용을 조건문을 이용하여 만들어 준다. 그냥 따라하면 조건문 하나만 중첩해 추가하면 되는 쉬운 챕터였는데, 코드가 너무 보기싫게 길다고 느껴져서 효율화를 시키다가 삽질을 거하게 했다. 먼저 강의에서 가르쳐 준 소스코드. var http = require('http'); var fs = require('fs'); var url = require('url'); var app = http.createServer(function(request,response){ var _url = request.url; var queryData = url.parse(_url, true).query; var pathname = url.parse(..

404 not found 구현하기 접속 url을 확인하여 없는 페이지에 접속했을 때 에러 페이지를 띄울 수 있도록 한다. 이를 위하여 먼저 url 정보를 어떻게 가져오는지 확인해 본다. var http = require('http'); var fs = require('fs'); var url = require('url'); //url모듈 사용 var app = http.createServer(function(request,response){ var url_add = request.url; var queryData = url.parse(url_add, true).query; var title = queryData.id; console.log(url.parse(url_add, true)); //중간 생략 }..