시간 저장소

새 게시물 입력 기능 만들기(Create) Node.js 수업과 동일한 순서로, 조회가 잘 되니 이제 입력 차례이다. 수정할 부분은 당연히 /create와 /create_process 페이지이다. /create 부분은 사실 위에 글 목록 띄워 주는 부분만 파일 읽기에서 db읽기로 바뀌는 거고 페이지 본문의 입력폼 부분은 동일하기 때문에 크게 수정할 일이 없다. 목록 불러오는 부분만 홈페이지와 동일하게 간단히 고쳐 준다. else if(pathname === '/create'){ db.query(`SELECT * FROM TOPIC`, function(err, topics){ var title = 'Create'; var list = template.list(topics); var html = templa..

DB를 이용한 상세보기 기능 추가하기 목록을 불러왔으니 이제 제목을 클릭하면 내용이 나오도록 만들 차례이다. 내용은 TOPIC 테이블의 DESCRIPTION 컬럼의 값이다. 제목을 눌렀을 때 출력되는 화면의 코드는 path가 ‘/’이고 id값이 존재하는 경우의 조건문이다. 이 부분을 고쳐본다. 일단 상세보기 화면에서도 글목록은 출력되어야 하니까 홈 화면과 동일하게 SELECT * FROM TOPIC 쿼리를 날리는 것으로 시작한다. 그리고 여기서의 결과값은 여러 개의 제목들이니까 topics라고 하고(뭐라고 정하든 아무 상관없지만…), 에러를 throw 처리해준다. throw는 에러가 발생하면 아래의 내용을 무시하고 바로 에러 페이지를 띄우는 코드이다. 이 부분의 코드는 이렇게 된다. db.query(`S..

MySQL을 이용한 웹페이지 만들기 main.js 에서 mysql을 사용하여 웹페이지를 db에 연동시켜 준다. 우선 db 커넥션 부분을 세팅한다. 소스 위쪽의 변수 정의 부분에 아래와 같은 커넥션 정보를 추가. (보안을 생각하면 나중에 다른 파일로 빼야 할 것이다... 수업 뒤쪽에 아마 나오지 않을까) var mysql = require('mysql'); var db = mysql.createConnection({ host : 'localhost', user : 'root', password : 'pass12', database : 'opentutorials' }); db.connect(); 그리고 홈 화면 부분 코드를 아래와 같이 바꿔 준다(주석처리된 부분이 원래 코드) if(queryData.id =..

Node.js 기본 수업으로 기초적인 게시판 페이지 만들기를 익히고, 내 원래 목적인 DB연동 웹페이지 개발을 위해 Node.js + MySQL 수업으로 넘어갔다. 기본 수업에서 만들었던 소스를 그대로 가져가서 수정하면서 강의가 진행되기 때문에 선수강은 필수였던 것 같다. MySQL 설치 MySQL의 무료 버전인 Community edition을 설치한다. 공식 홈페이지에서 다운받아도 되지만 복잡해서 강의에서는 Bitmani WAMP를 사용했다. 다운로드 페이지 💡 WAMP : Windows에서 사용하기 위한 Apache, MySQL, PHP 솔루션 모음 운영체제에 맞는 버전으로 다운로드받고, 설치 시 root계정의 비밀번호를 입력한다. 설치가 끝나면 매니저 프로그램이 실행되는데…. 나는 설치하면서 자동..

이제 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..

함수를 사용하여 코드 정리하기 그동안 실습코드가 너무 반복적이어서 어떻게 정리를 좀 할 수 있지 않을까 싶었는데(그러다가 겁나 삽질하기도 하고) 여기서 드디어 나왔다. 진도에 다 있는데 너무 급했다 내가… 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(..