JArchive 프로그래밍 일기

URL 에서 정보를 받아오는 것은 GET방식 이다. 경로 뒤에 '?'를 붙이고 쿼리스트링을 쓰는 것이 일반적이다. 

사용자의 정보를 '서버로 전송'할 때는 POST 방식이 필요하다.  

[ GET 방식 ]

예를 들어 비밀번호 같은게 URL에 드러나게 넘어가면 안된다.

쿼리 스트링에 따라 데이터가 달라지는 것을 눈으로 확인할 수 있다. 

데이터 길이가 길면 URL에서 내용이 짤린다. 

만약, textarea의 내용이 수천줄이라면 URL에 전체 데이터가 담기지 않는다. 

[ POST 방식 ]

URL에 데이터가 포함되지 않는다. 불필요하게 정보가 노출되지 않는다. 

용량이 큰 데이터라도 괜찮다. 

express 가 기본적으로 제공하지 않으므로,

body-parser 모듈을 붙여서 사용자 요청을 가공하여 쓰도록 한다. 

둘 다 보안이 취약하다. 보안을 신경쓴다면 다른 차원의 노력이 필요하다. SSL인증, HTTPS 프로토콜이 필요하다. 

jade template 으로 Form(폼)을 만들어보자. 

html 태그에 속성을 넣으려면 소괄호를 열어서 써준다. 

html 태그의 내용을 서버에 알려주려면 name 속성에 이름을 써줘야한다. 

title 이라는 이름으로 input칸의 내용을 받는다. 

description 이라는 이름으로 textarea 의 내용을 받는다. 

다음과 같은 html 코드가 생성된다. 

폼에 내용을 입력한 화면 

http://127.0.0.1:3000/form_receiver?title=hello&description=world

'제출' 버튼을 누르면 위와 같은 URL이 보인다. 

/from_receiver 로 경로가 변경되고, '?'부터 쿼리 스트링이 돌아온다. 

app.js 에 폼이 전송될 /form_receiver 라우터를 만들어준다. 

라우터를 지정해주고, 서버를 재시작하고, '제출' 버튼을 누르면 

http://127.0.0.1:3000/form_receiver?title=hello&description=world

hello와 world 를 쿼리를 통해 가져온다. 

form 태그의 method 속성. 'get' 방식이 기본이다.  

method='post'로 바꿔보자. 

post 방식이라면, URL을 통해 데이터를 전송하지 않는다. 

post방식으로 해두고, 제출 버튼을 눌러도 

http://127.0.0.1:3000/form_receiver

이처럼 쿼리스트링이 붙지 않고, URL 변경도 없다. 

GET 방식

req 의 query 객체에서 파라미터명으로 접근할 수 있다. 

POST 방식

req 의 body 객체에서 파라미터명으로 접근할 수 있다. 

이 때, 주의할 점은 html form 태그의 method 속성을 get 또는 post로 명시해줘야 한다!

그리고,

POST방식에서 데이터를 넘길 때, body 객체에서 속성을 가지고 올 수 있도록,

body-parser 모듈이 필요하다.

Express 홈페이지의 자세한설명을 보자. 

첫째줄을 읽어보면. body 객체는 기본적으로 undefined 인데, body-parsing 미들웨어를 쓰면된다고 써있다.

express.json() 또는 express.urlencoded() 

body-parser 라는 모듈을 설치하자 

그리고 body-parser를 require() 함수로 가져온다. 

app.use() 로 모듈을 우리 애플리케이션에 붙인다. 

이제, bodyParser 가 html 의 body 부분 객체를 인식할 수 있도록 한다! 

정리하면, bodyParser 가  use() 라는 함수로 연결한다. 

bodyParser는 사용자가 POST 방식으로 전송한 데이터를 request 객체 내의 body 객체를 추가하고, 

body 객체에 title 이라는 속성을 만들고 값을 넣어서 사용자에게 제공해주는 것이다. 

쿼리 스트링에 입력된 값에 따라 다른 내용이 출력되게 해보자. 

topics 라는 배열이 있다. 

인덱스 0에 JS 문자열, 인덱스 1에 Nodejs 문자열, 인덱스 2에 Express 문자열이 있다. 

id 의 값이 0, 1,  2 인 것에 따라서 페이지에 출력되는 문자열이 달라진다. 

URL이  http://127.0.0.1:3000/topic?id=2 이라면, 

인덱스 2에 해당하는 Express is 문자열이 출력된다. 

링크를 만들어보자. 

html 링크 3개를 만들어서 res.send() 에 넘기자. 

URL에서 받은 id 에 해당하는 문자는 js표현식으로 같이 넣는다.

${} 를 이용하면, 변수명을 그대로 코드에 넣을 수 있다. 

html 코드를 쓸 때는 작은 따옴표가 아닌, 그레이브 액센트 (ESC 키 위에 있는 ` ) 로 감싼다. 

html 코드는 output 이라는 변수로 만들고, res.send() 함수의 파라미터로 넘긴다. 

링크를 누를 때 마다 아래에 출력되는 문자열이 달라진다. 

시맨틱 URL 을 써보자. (semantic url) 

쿼리스트링 없이 URL만 가지고 정보를 전달해보자. 

예를 들어, 

http://127.0.0.1:3000/topic?id=2 이렇게 물음표와 = 이퀄 문자없이 

http://127.0.0.1:3000/topic/2 이렇게 '/'슬래시만 가지고 사용자 요청을 전달하는 것이다. 

위키에 semantic url 을 검색해보면 다음과 같은 예시가 나온다. 

URL 에서 /topic 뒤에 오는 것을 변수로 받고 싶다면,

app.get() 내부의 라우터에, 경로에 콜론과 변수명을 써준다. 

http://127.0.0.1:3000/topic/1

이 주소로 접근하면, 에러가 안난다!

id 자리에 입력한 숫자 1을 받아오려면 

${topics[req.query.id]} 가 아니라, params 라는 키워드로 바꿔준다. 

${topics[req.params.id]}

즉, id로 1을 받아올 수 있다는 것이다. 

2로 접근하면 Express 문자열이 나오고 

라우팅에서 선언한 파라미터 명과, params.파라미터명을 정확히 맞춰주는 것이 중요하다. 

여러개의 파라미터를 넘겨보자. 

http://127.0.0.1:3000/topic/1/edit  

id는 1로, mode는 edit라는 정보의 파라미터를 넘긴다. 

URL 내부에서 물음표 ('?') 뒤에 나오는 부분을 쿼리 스트링 이라고 한다. 

쿼리 스트링은 사용자에게서 받은 변수를 서버에 넘기기 위해 필요하다. 

http://abc.com 이라는 URL이 있다. 

http는 프로토콜이다.

abc.com은 도메인(호스트)이다. 서버 컴퓨터의 주소다.

http://abc.com/topic?id=1 

http://abc.com/topic?id=2

http://abc.com/topic?id=3 

/topic은 경로이다. path이다. 일종의 라우팅을 하는 것이다. 

'?' 물음표 다음부터는 쿼리 스트링이다. 

id값을 1 또는 2 또는 3으로 넘기고 있는 URL 예시이다. 

같은 패스 안에서도, 쿼리스트링에 따라 다른 결과가 출력되는 애플리케이션을 만들어보자! 

URL에 들어오는 값은 사용자의'요청' 에 해당한다. request 에 해당한다. 

app.js 에  다음의 코드를 추가해보자. 

/topic 경로로 들어왔을때, URL 이 http://127.0.0.1:3000/topic?id=3 이라면 

쿼리 안의 id 라는 변수 값을 

req.query.id 로 접근할 수 있다. 

이 때, 화면에 출력되는 결과는 3이다. id 의 값이 출력된 것이다. 

2개의 값을 넘기고 싶다면? 

예를 들어, id와 name 이렇게 2개의 변수를 넘기고 싶다면. 변수 사이에 & 으로 구분 해준다. 

http://127.0.0.1:3000/topic?id=3&name=brocoli

app.js 코드에서, res.send() 함수 내부에는 변수간에 콤마(,) 로 연결해주면 된다. 

그러면 URL의 여러개의 값에 접근할 수 있다. 

응용을 위해 Express 문서를 보자. 

express가 다루는 객체, 함수에 대해 그때 그때 찾아보고 활용해야 한다. 문서와 친해지자!

request 에서, query라는 객체를 찾아보면 위와 같은 예시가 있다. 

jade 템플릿을 사용법을 정리해본다. 

jade를 설치하고 jade를 express에 사용할 템플릿 엔진으로 설정한다. 

app.set() 함수를  이용한다. (코드 11번 라인)

관습적으로 jade 템플릿 코드는 views 이름의 디렉토리에 저장한다. 

템플릿 코드 파일명을 temp.jade로 하고 views 디렉토리 하위에 만든다. 

/template 경로로 들어오면 아까 만든 'temp.jade' 템플릿을 기반으로 내용을 화면에 뿌려준다.

이를 랜더링한다고 하여 res.render() 함수를 이용하여 템플릿 코드명을 안에 써준다. 

추가로 넘겨줄 객체가 있다면, 파일명 다음에 써준다. 

time 이라는 이름으로 'hello'라는 문자열이 넘어가는 코드다. 

jade 에서 html 태그를 사용할때 개행과 들여쓰기가 중요하다. 

html 태그를 여러개 쓸 때, '줄바꿈'을 하면 새 태그로 인지한다. 

그리고 들여쓰기를 해서 태그의 열고 닫음을 구분한다. 

자바스크립트 코드를 넣고 싶으면 - 마이너스를 하나 넣고 코드를 삽입한다 

jade 템플릿 코드에서 html  태그 끼리 줄바꿈을 안한다면 ?

이처럼 html head body 태그가 제대로 적용이 안된다. 

템플릿에 객체를 주입하고 싶다면? 

Date() 객체를 time이라는 이름으로 넘기고, 'Jade title' 문자열을 _title 이름으로 넘기고 싶다면.

app.js 의 app.get() 함수 내부의 코드를 수정한다. 

res.render() 안에 {} 로 감싸서 여러개의 객체를 넘길 수 있다. 

jade 템플릿에서는

title 태그 옆에 _title 이라는 변수 명을 써주고, 

div 태그 옆에 time 이라는 변수 명을 써준다. 

이 때, 주의할 점은 태그 다음에 '=' 를 꼭 써줘야 한다! 

title태그 = _title변수명

div태그 = time변수명

더 알고 싶다면! Jade template engine 홈페이지를 참조하자. 

튜토리얼 티쳐에 Jade 튜토리얼 페이지도 있다. 

정적인 파일을 표현

public 이라는 디렉토리를 생성한다. 

아래의 코드 한 줄을 추가한다. 

/정적인 파일이 위치할 디렉토리를 지정하는 기능 한줄이다. 

public 디렉토리 하위에 이미지파일, text파일, html, css 등 을 위치시킨다. (관습적으로 public 이라는 디렉토리명을 쓴다.)

웹 애플리케이션 프레임워크 Express 설치하고 hello 를 출력해본다.

https://expressjs.com/ko/

감사하게도 많은 개발자 분들의 노력으로 한글 번역 페이지가 있다. 

간단한 설치 설명 

Node.js 가 설치된 상태에서,

내 프로젝트에 express 모듈을 사용할 것이기 때문에, 

내 프로젝트 디렉토리 경로에서 npm init 을 해서 npm 프로젝트로 만든다. 

npm install express --save 로 설치한다. 

hello world 예제 

require() 로 express 객체를 생성하고

app 이라는 객체를 반환 받는다. 

여기까지는 express 를 사용하기 위한 기본적인 코드다. 

그리고 주의할 것은 app.get() 함수로 구현하는 라우팅이다. 

사용자가 / 라는 URL 로 접속하면 welcom to home 을 출력한다. 

사용자가 /login 이라는 URL로 접속하면 login please라고 출력한다. 

URL에 따라 다른 페이지로 연결하는 라우팅이 중요하다. 

Node.js 서버를 만드는 코드를 해석해본다. 

https://nodejs.org/en/about/

노드제이에스가 뭔가요?

홈페이지에 가보면, 이벤트 기반 비동기식 자바스크립트 런타임 환경이라는 설명이 있다. 

아래의 샘플코드를 해석해보자. 

일단 http 모듈 객체로 서버를 만든다. 

hostname, post 라는 변수를 만들어서 주소와 포트를 저장한다. 

아래의 코드는 createServer를 쉽게 풀어 쓴 것이다. 위의 샘플 코드와 똑같이 동작한다.

함수의 파라미터로 콜백함수가 들어가 있다.

콜백함수는 이름이 없는 익명함수로 들어가 있다. function() 

http 모듈의 createServer() 함수로 server 객체를 만든다. 

콜백함수의 파라미터에는 요청을 뜻하는 request, 응답을 뜻하는 response가 있다. 

클라이언트의 요청이 오면, 어떤 동작을  할 지 CreateServer() 내부에 써주는 것이다. 

클라이언트에게 해줄 작업은 전부 res 객체가 제공하는 함수를 사용한다.  

server 객체의 listien() 함수는 다양한 이유로 오래걸릴 수 있는 작업이다. 

그래서 listion() 수립이 완료되면, 콜백 으로 console.log() 를 출력하게 해놨다.