시간 저장소

새 게시물 입력 기능 만들기(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..

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 =..

개발용 에디터로 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이다)

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

파일 목록 읽어들이기 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을 수정할 수 있을..