페이지 버그 수정 및 post의 index action 수정

전체 소스코드 : https://github.com/imtaekh/my_app/tree/67eed1c385feb374d86c9f16f97c814e82a4ab9c

테스트 사이트 : https://azure0777board.herokuapp.com

다음 포스팅에 검색기능을 추가해 볼텐데, 그 전에 자잘한 몇가지 수정이 있습니다.

1.  기능 수정

- URL 상에 ~/posts&page=1와 같이 query에 페이지를 입력받아서 해당 페이지로 이동하는데, ~/posts 처럼 page query를 입력하지 않은 경우 현재 페이지가 굵은 글씨로 표시되지 않던 버그가 수정됐습니다.(또한 게시물 클릭시 page=NaN query가 추가되는 버그도 수정됐습니다)

- URL query에 limit를 추가하여 한 페이지에 표시되는 게시물 수를 변경할 수 있습니다.(이 전에는 10개로 고정이였습니다.)

- 게시물 클릭시 page query만 전달하는 것이 아니라 모든 query를 전달합니다.

2. 코드상 수정

- posts의 index action에 async waterfall을 사용합니다.

routes/posts.js

10, 11번째 줄 : 각각 query가 양수인 경우 숫자로 저장하고, 아닌 경우 기본값을 사용합니다. parseInt를 하지 않으면 값이 string으로 저장되어 +연산시 문자열이 되어버립니다. 예를 들어 1+"1"은 2가 되는 것이 아니라 "11"이 됩니다. 이전엔 이부분이 없어서 버그가 있었죠.

13~37번째 줄 : 카운터 데이터를 찾고, 게시물 카운트를 하고, 게시물을 찾는 과정을 순차적으로 진행하게 하였습니다.

mongoose 함수들은 기본적으로 비동기(async)입니다. 

즉 함수들을 

Counter.findOne({name:"vistors"}, function (err,counter) {...

Post.count({},function(err,count){...

Post.find({})....

으로 나열하면 Counter.findOne, Post.count, Post.find의 함수가 순서대로 진행되는 것이 아니라 한번에 동시에 진행됩니다.

특히 Post.count, Post.find는 Post.count의 결과값을 이용해서 Post.find에 skip값을 전달해 줘야 하는데, 이전에는

Post.count({},function(err,count){

    ...

    Post.find({})....

}

이렇게 Post.count안에 Post.find을 넣어서 사용했는데요, 작성자 검색을 위해 mongoose를 한번 더 호출하게 되면 3단계로 깊어지게 되어서 async package를 사용했습니다.

async는 이전에도 한번 설명한 적이 있습니다.(http://blog.naver.com/azure0777/220600732194)

31번째 줄 : req._parseUrl.query를 사용해서 전체 url query를 전달해 줍니다. req._parseUrl.query에 전체 url query가 저장되어 있는지 어떻게 아냐면..

console.log(req)해 보시면 이 안에 뭐가 들어 있는지 전체를 볼 수 있어요. 한번 해보세요^^

아래는 이전에 page를 전달해 주던 부분을 urlQuery로 바꾼 부분들입니다.

페이지만 전달하는게 아니라 query 전체를 전달하기 때문에, pagination에서는 이 query를 바꿔줘야합니다.

56번째 줄은 regex를 사용해서 query에 page=<value>부분을 지우는 부분입니다. 왜냐면 61번째 줄에 page를 넣어주기 때문이죠.

regex를 모르는 분들을 위해 간략히 설명하자면, 문자열에서 조건을 줘서 원하는 부분을 선택하는 식입니다. /<regex식>/<options>로 구성되며 option은 생략될 수 있습니다.

56번째 줄에서 /page=(.*?)(&|$)/ig 이 regex인데요, 일단 뒤에 option부터 살펴보면,

i : 대소문자를 무시함(ignore)

g : 조건에 맞는 모든 부분을 찾음(global) g가 없으면 하나만 찾습니다.

regex는 page=(.*?)(&|$)

page= : "page="를 찾음

.*? : 임의의 문자의 반복

& : "&"를 찾음

| : or

$ : 문자열의 끝

(): 그룹

입니다.

regex는 한글자씩 검사를 하게 되는데 그룹은 그 한글자가 어떻게 되는지 여러가지 조건을 넣을 수 있습니다.

&는 특수기능이 아니라 &문자를 찾으라는 거니까 (&|$)는 &이거나 문자열의 끝을 나타내고,

(.*?)는 임의의 문자인데 한글자가 아니라 반복을 나타냅니다.

즉, page=로 시작하고, 임의의 문자가 반복된 후, &이거나 문자열의 끝인 부분을 찾는 regex입니다.

regex는 처음 접하면 정말 어렵게 느껴지는데요,  웹개발에 유용하게 쓰이니 꼭 공부하세요.

주로 사용자가 입력한 값이 이메일이 맞는지 아닌지 판별, 전화번호가 맞는지 아닌지 판별, password가 주어진 조건에 맞는지 등에 주로 쓰입니다.

다음은 게시판 검색입니다.

[출처] 페이지 버그 수정 및 post의 index action 코드 수정|작성자 azure0777