JArchive 프로그래밍 일기

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

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라는 객체를 찾아보면 위와 같은 예시가 있다.