시간 저장소

새 게시물 입력 기능 만들기(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계정의 비밀번호를 입력한다. 설치가 끝나면 매니저 프로그램이 실행되는데…. 나는 설치하면서 자동..

개발용 에디터로 Atom을 사용하고 있었는데, 이것저것 눌러보다 보니 Git과 Github 기능이 내장되어 있었다. 마침 새로 노트북을 장만해서, 두 로컬을 왔다갔다하며 작업을 하려고 보니 파일을 클라우드 같은 걸로 일일이 업로드-다운로드하기보다는 아예 본격적으로 버전관리를 하면 좋겠다 싶어 급하게 Github의 개념을 익히고 Atom과 연동작업을 했다. 그동안 좀 알아둬야지 알아둬야지 생각만 하던 Git을 이렇게 입문... 회사에서는 다른 버전관리툴을 써서, 코드 버전관리의 개념은 대충 알고 있지만 Git과 Github은 초면이었다. 뭐 아무튼 서설은 이 정도로 하고. Github을 사용하기 위해서는 먼저 git을 설치해야 한다. Github이 클라우드 서버, git이 내 로컬PC와 클라우드 서버를 연..

이제 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이다)