노마드코더 유튜브 클론코딩 챌린지 8 기록용

음.. 오랜만에 챌린지 기록을 해본다

그동안 계속 챌린지는 진행중이긴 한데 ~ 다른거 포스팅하고 공부하느라 이것 까진 못하겠다 싶었는데

오늘부터는 간단하게라도 기록해야겠다.

 

일단 오늘의 challenge내용은 영화정보가 담긴 fakeDB를 이용해서 간단한 웹을 제작하는 내용이다.

조건이 세가지 있는데 먼저 기본적으로 정의된 세가지 컨트롤러가 있는데

1. home   should list all the movies

2. movieDetail should show  a movie based on the :id

3. filterMovie should filter for a movies based on the rating or the year.~!

 

홈 컨트롤러는 모든 영화리스트를 보여줘야하고, 영화디테일 컨트롤러는 :id를 라우트로 보여져야 하며~

무비필터는 rating과 year를 이용해 검색할 수 있게 해줘야한다.

 

그리고 db.js에는 네가지 function이 존재하는데

getMovieByID - 아이디를 주면 해당 아이디값의 영화를 반환

getMovies - DB에 모든 영화를 배열로 리턴

getMovieByMinimumRating - function의 인자로 rating값을 넣어주면 해당 rating보다 큰 rating을 갖는 영화들을 배열로

반환한다.

getMovieByMinumumYear - 위와 마찬가지로 인자로 넣은 year값보다 이후에 나온 영화들을 리턴한다.

 

이제 시작해보자 먼저 라우터부터 컨트롤러를 작성해주고 라우터 작성후  해당 템플릿들을 작성했다.

기본적인 server파일이다. 추가한것은 express.urlencoded를 사용해서 body를 parsing할 수 있게 해줬다.

라우터 파일이다. 각각 라우터설정을 해줬는데 여기서 애를 먹은게 fiter의 경우 post로 진행했으나

post는 url상에 정보가 표기가 안되는 바람에 get으로 진행했다. 음 다시 생각해보면 둘다 써서

post에서 get으로 redirect해주면 되긴 하는데 .. 일단 완료된것만

첫번째 home 컨트롤러이다. 홈 화면 연결시 getMovies() function으로 영화 데이터를 받아와 render해준다.

홈화면 템플릿이다. 기본 레이아웃을 extends해주고 사용할 mixind을 include해줬다.

block content에 내용은 fiter페이지와 동일하게 중복되어 따로 파일을 만들어 include해줬다.

include 된 search 의 내용이다. 컨트롤러에서 보내주는 movies배열을 each in을 이용해

각각 mixin의 movie에 적용 시켰다

mixin movie는 이렇다~~~ 이렇게 해서 접속을 해보면

이렇게 영화 제목들이 쫘악~~ 떠준다. 요기까지 첫번째 컨트롤러...

두번째 movieDetail 컨트롤러는 홈화면에서 해당 영화를 클릭하면 전달되는 params를 통해 id값을 얻고

이를 getMovieById에 인자로 전달해주면 해당 영화를 가져올 수 있다.

그리고 나머지는 홈컨트롤러와 별 다른게 없다.

movieDetail 템플릿이다. 역시 home 템플릿과 거의 비슷하고~

block content에 넘겨받은 영화의 배열중 movie.summary와 movie.genres를 통해 정보를 출력해줬다.

이때도 앞서 movie.pug의 mixin을 이용해줬다.  자 그럼 브라우저를 보자

요렇게~~~ 나온다. 

 

마지막 filterMovie 컨트롤러이다. 이부분은 아무래도 form을 먼저 보고 말해야겠다.

submit을 제외한 두개의 인풋에 각각 year와 rating의 name을 주고~ submit이 이루어지면 /filter로 이동하게 해놨다.

여기서 POST로 진행을 했었으나~ 문제는 POST로 하게되면 조건중에 하나인 url에 query가 보이지 않게된다...

그래서 GET으로 진행을 했다.

submit이 이루어지면 year와 rating이 query로 넘어가게 되고 이중 하나가 입력이 되었다면

삼항연산자를 통해 year라면 getMovieByMinimumYear함수에 아니면 getMovieByMinimumRating함수에

전달을 해주고 return값을 movies배열에 담아주었다.

그리고 랜더링 할때 movies를 넘겨주고 홈화면처럼 띄워주기만 하면 끝이다.

pageTitle도 삼항연산자를 이용해서 연결해주었다.~

 

간단히 rating이 7.2보다 큰 것들만 검색을 해보면

이렇게~~~ 7.2 이상의 rating인 영화들만 나열이 되고 url에도 쿼리가 제대로 뜨게 된다~!~!~!

 

자 여기까지이고~ 

https://codesandbox.io/s/express-controller-blueprint-forked-172wv

Express Controller Blueprint (forked) - CodeSandbox

작성한 codesandbox 링크를 남긴다.

 

**** post를 이용해서도 진행해봐야겠다 ***