C portfolio

 예전부터 참여하고 싶었던 피로그래밍 리크루팅 날짜가 잡혔다. 학원 알바때문에 참여할 기회가 없었는데 너무 잘된것 같다. 피로그래밍 때문에 수학 학원알바를 과감하게 퇴사했다! 문의 결과 평일 하루 평균 7시간 이상을 프로그래밍에 매진해야 하기에 도저히 학원과 병행이 불가능! 하지만! 올해 휴학의 목표는 프로그래밍의 맛을 보는것이기 때문에 괜찮다!! 

 분명 피로그래밍의 멋진 커리큘럼을 알고있는 쟁쟁한 참여자분들이 많을 것이 예상된다! 따라서 피로그래밍 회장님이 추천해 주신 '점프투 파이썬' 을 면접 기간 전 까지 공부하고 가려고 한다.

 사실 나는 프로그래밍을 시작한지 100일도 안 되었다. ( 학원 알바 끝나면 10시가 넘기 때문에 실질적으로 프로그래밍을 다룬 시간 자체는 더 적을 것이다. ) 하지만 피로그래밍은 비전공자를 위한 연합동아리이기 때문에 오히려 나와 더 잘 맞을것이란 생각이 든다! 필자는 지금까지 자바스크립트로 Nodejs 로 서버개발을 해보려 노력하고있다. 하지만 독학을 하다 보니 명확한 가이드라인이 잡히지 않았었다.

 사실 파이썬은 처음 이용해 보는 것이지만 기본적인 문법구조는 자바와 비슷한것 같아서 열심히 한다면 할 수 있을 것 같다! 피로그래밍 9기 합격을 위해 화이팅!

1. 먼저 파이썬의 기본 문법을 살펴 보기 전에 기본 툴로는 Sublime Text 3 를 사용했다. 예전 html 으로 코딩할때 괜찮다고 느껴서 그렇게 하기로 했다. 사용해보고 별로면 바꾸지뭐 ㅋㅋ...

< 첫 hello world >

2. 근데 >>> 를 사용한다고 되어있는데 오류가 난다. 이유는 다음 글 쓰기 전 까지 알아내야겠다.

var express = require('express');
var app = express();
var cookieParser = require('cookie-parser');
app.use(cookieParser());

app.get('/count', function(req, res){
  if(req.cookies.count){
    var count = parseInt(req.cookies.count);
  } else {
    var count = 0;
  }
  count = count+1;
  res.cookie('count', count);
  res.send('count : '+ count);
});
app.listen(3003, function(){
  console.log('Connected 3003 port!');
});


- 쿠키는 하이퍼 텍스트의 시록서 일종으로 인터넷 사용자가 어떠한 웹 사이트를 방문할 경우
그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 말한다.
 
- 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다.

- cookieParser 로 쿠키를 사용할 미듈웨어 세팅을 한뒤 웹브라우저에서 웹서버에 접속하면 웹 서버에서 cookie 값을 1 로 세팅해 response한다.

- 웹 브라우저는 받은 쿠키값으로 웹 서버에 request 하는 것이다.

 먼저 post 형식으로 정보를 받기 위해 npm body parser 가 필요하다.

따라서 터미널에 npm body paser --save 를 하여 body-parser 모듈을 사용할 준비를 해야 한다.

그리고 npm bodyParer 설명서를 보면 

var bodyParser = require('body-parser');

를 하여 bodyParser 를 요청한다. 그 다음

app.use(bodyParser.urlencoded({ extended: false }));

로 바디파서를 사용하는 코드를 use 하면 본격적으로 body 객체를 이용하여 post 방식을 사용 가능하다.

app.post('/topic', function(req, res){

var title = req.body.title;

var description = req.body.description;

res.send('H, post' + '+req.body.title')

을 통해 post 형식으로 잘 작동하는지 확인한다.

파일을 제어하기 위해 (파일 시스템) 'fs' 라는 모듈을 호출 해야한다.

var fs = require('fs'); 

로 fs 를 호출한다.

그리고 밑에

fs.writeFile('data(폴더이름)/'+(파일이름)title,description,(콜백)function(){

if(err){

 res.status(500).send('Internal Server Error');

}

res.send('success')

});

그러면 success 가 뜨면서 data 폴더에 title 을 제목으로 한 파일이 생성된다.

다음에 data 폴더에서 확인해 보면 Sample 파일이 생성되어 있다.

들어가기 전에...

- Post 형식으로 라우팅 해서 연결하는 단계 까지 할 것이다.

- 파일은 app_file.js 로 설정했고 템플릿 엔진(PUG) 는 views_file 폴더에 넣어 뒀다.

코드는 아래와 같다.

먼저 express 를 require 로 불러온다. (express 설치가 선행되어야 함.)

그리고 var app 을 통해 express 정의한 뒤, 템플릿 엔진을 사용하여 html 소스코드가 깔끔하게 보이게 하기 위하여 app.locals.pretty = true; 코드를 입력해 준다.

그 후 템플릿 엔진 'pug' 를 사용하기 위해 

app.set('views', './views_file');

app.set('view engine', 'pug');

코드를 입력해 준다. 

그 다음 pug 템플릿 엔진으로 사용할 text 에 아래 코드를 입력한다.

form 문에서 action 으로 정보를 보낼 곳 을 지정해 준 뒤, method는 post 로 지정해준다.

그리고 아래 코드를 통해

app.get('/topic/new', function(req, res){

  res.render('new');

})

new.pug 파일을 랜더링 해준다.

그리고 아래 코드를 입력하여 3000 포트에 listen 해주고,

app.post 에 'Hi post') 를 입력하여 post 형식이 연결 되었는지 확인한다.

 app.post('/topic', function(req, res){

  res.send('Hi, post');

})

app.listen(3000, function(){

  console.log('connected, 3000...')

})

참고) 들어가기 전에 form 문

- pug 안에서 사용한다.

- URL 을 생성하는 역할을 함.

- 그것을 get 하면 된다.

- form 에서 method=get 을 생략하면 명시적으로 get 으로 인식한다.

method 에서 'post' 를 입력 할 경우 정보를 post 로 받게 된다. ( mothod 를 생략할 경우 자동으로 get 형식으로 받게 된다. )

post 방식을 이용할 때는 get 방식을 이용할때 app.get 을 하는것 처럼 app.post 로  코드를 입력받는다. (라우트)

즉. app.post('form_receiver', function(req, res){ ......

var title = req.body.title;

var description = req.body.description;

res.send( <- 이런 식으로. 그리고 위의 코드처럼 post 방식에서는 

req.query 대신에 body 객체를 이용한다.

 하지만 이렇게 하면 에러가 발생하는데, 이는 req 안에 body 객체가 존재하지 않기 때문이다. 이를 해결하려면 body-parser 라는 미들웨어 (확장모듈) 을 cdm 에서 설치해야한다. 설치를 하게 되면 body 객체를 사용할 수 있다.

그리고 express.js 홈페이지 설명서를 참고하면

var bodyParser = require('body-parser') 과 app.use(bodyParser.urlencoded({extended: false})) 

코드를 추가 시키라고 한다. 두 코드를 적당한 위치에 넣어주면 body 객체를 사용 할 수 있다. 이는 바디 파서를 리콰이어 한 뒤 app.use 를 통해 붙여 넣는것으로 이해하면 편하다.

그러면 바디라는 객체를 사용하여 get 방식과 처럼 정보를 얻을 수 있다.