IT 14

Atom-Github 연동하기

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

[생활코딩 Node.js] 16. 글 삭제 기능 만들기

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

[생활코딩 Node.js] 15. 글 수정 기능 만들기

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

[생활코딩 Node.js] 13. 입력 페이지 만들기

입력 페이지 만들기 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..

[생활코딩 Node.js] 12. HTML form태그

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

[생활코딩 Node.js] 11. PM2 사용하기

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

[생활코딩 Node.js] 8. 홈 페이지 만들기

홈페이지 구현 쿼리스트링 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(..

[생활코딩 Node.js] 7. 에러 페이지 만들기

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)); //중간 생략 }..

[생활코딩 Node.js] 6. 파라미터 입력하기

콘솔에서 파라미터 입력하기 콘솔 명령줄로 입력한 파라미터를 받아서 사용하는 방법. 입력된 파라미터는 process.argv 라는 객체에 배열로 저장된다. var args = process.argv; console.log(args[]); 위 코드를 cmd에서 실행하면서 para1이라는 파라미터를 입력했을 때 출력은 아래와 같다 D:\study\Nodejs\syntax>node conditional.js para1 [ 'C:\\Program Files\\nodejs\\node.exe', 'D:\\study\\Nodejs\\syntax\\conditional.js', 'para1' ] 배열의 3번째 값부터 입력 파라미터임을 확인했으니 잘라서 사용하면 된다. 실습 코드는 아래와 같다(파라미터가 1일 때 B1, ..

[생활코딩 Node.js] 5. 파일을 이용한 동적 웹페이지

파일 읽어들이기 실습을 위해 fileread 폴더를 만들고 그 안에 sample.txt 파일을 생성해 아무 내용이나 넣는다 fileread.js 파일을 만들고 아래 코드를 저장한다 var fs = require('fs'); fs.readFile('sample.txt', 'utf-8', function(err, data){ console.log(data); }); cmd에서 fileread 폴더로 이동해 fileread.js 파일을 실행시킨다 내용이 잘 출력되면 성공 파일을 이용한 동적 웹페이지 만들기 ‘data’ 폴더를 만들고 그 아래에 HTML, CSS, JavaScript 3개의 파일을 생성, 각 파일 안에 1.html, 2.html, 3.html의 본문(태그 사이의 텍스트 부분)만 복사 붙여넣기한다..