Enjoy Programming

이번에도 이어서 컨트롤러를 더 만져보자 우선 비디오를 클릭하면 비디오 상세페이지로 넘어가도록 해주자 mixins로 이동해서 videoBlock mixin에 링크를 걸어준다. 라우트를 걸어주고 video.id를 인자로 넣어준다. 이 id는 각 비디오에 부여된 id를 인자로 받게 된다. 이제 videoBlock을 사용하는 곳에서 입력할때 id:item.id를 추가로 보내주는 작업을하자. home 템플릿에서 videoBlock에 id 객체를 추가한다. 추가후 비디오를 클릭하면 url상에 비디오 id가 뜨게 된다. 이제 할일은 로그아웃을 클릭하면 로그아웃 페이지가 아닌 로그아웃후home화면을 접속하게 하겠다. 로그아웃 처리는 차후에 하고 일단 랜더링시 홈화면으로 redirect해줬다. 이제 logout 템플릿은..

이번엔 login과 user profile페이지를 다뤄보자. 역시 userController에 가서 get과 post방식의 두가지 컨트롤러를 만들어준다. 하나는 get 방식으로 로그인 페이지를 띄워줄 getLogin컨트롤러와 post방식으로 로그인이 이루어지면 홈화면으로 redirect해주는 컨트롤러 이렇게 만들어주고 로그인이 이루어지면 화면에 뿌려질 헤더 템플릿을 수정해주자. ul태그 하나 만들어주고 사진과 같이 작성했다. isAuthenticated는 요청이 인증 되었는지 확인하는 속성이다. user변수는 아직 데이터가 없기에 설정이 되진않았다. 이제 middleware에 가서 user정보를 객채로 만들어 주자 전역으로 설정할 user정보를 true로 설정하고 id: 1이라는 객체를 넣어줬다. 우선 ..

그리드 레이아웃이란! 그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다. 이 디자인은 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여준다. 자~ 보자 필자는 이제껏 박스요소를 배치하고 정렬함에 있어 flexbox를 사용해 왔다. 플렉스 박스를 이용해 4개의 박스를 만들어주고 30%의 basis를 갖게 한다. 그리고 격자무늬로 화면에 표시 되기 위해 wrap해주고 4번박스 상단에 margin-top을 준다. 자 이렇게 공간을 가진 화면이 구성되었다. 그럼 여기서 5번 박스 하나를 더 추가한다면?! .... space-between으로 인해 5번이 저 멀리 떨어져 있다. 그리고 마진탑을 ..