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이라는 객체를 넣어줬다. 우선 ..

Sass(syntactically awesome stylesheets)는 css 의 pre-processor로 css의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 css를 생성하기 위한 css의 확장판이다. css자체로 사용하여도 무리는 없지만 프로젝트의 규모가 커지고 수정이 빈번함에 따라 유지보수가 어려워 지는 단점이 있다 이런 css의 한계를 보완하기 위해 sass는 다음과 같은 추가 기능과 도구를 제공한다. 변수의 사용, 조건문과 반복문, import, nesting, mixin, extend/inheritance 등이 있다. 쉽게말해 궁극적인 목표는 css의 결함을 보정하는 것이다. 단지 css의 부족한 부분만 돕기를 원한다. SCSS Sass는 처음에 들여쓰기의 감지를 그..

min-content와 max-content를 알아보자 예를들어 텍스트가 적힌 태그가 있다고 하자 이상태에서 첫번째 칼럼은 min-content를 두번째 칼럼은 max-content를 주면 이렇게 ! 바뀐다. 태그안에 컨텐츠가 어떻게 보여야 하는지 나타내 줄때 매우 용이하다 두번째 처럼 안에 제목같은 텍스트가 반응형에서 움직이지 않아야 할때 그리고 문장이 최소 단위로만 표기되기만 하면 될때 이 두가지를 잘 섞어 사용하면 된다. 그리고 이것을 minmax & repeat과 함께 사용할 수 잇는데 예를 들어 보자 서로 다른 길이의 문장들이 있다. grid-template-columns: repeat(6, minmax(max-content, 1fr)); css에 이렇게 스타일을 줘보겠다 6개의 칼럼이 반복되고..

이번에는 minmax속성을 알아보자 minmax는 그리드가 얼마나 작게 혹은 큰 요소가 될 수 있을지 지정하도록 해준다. 음 쉽다. 이런식으로 지정해주면 된다. 화면사이즈가 아무리 줄어도 최소 100px은 유지되고, 화면이 커지면 그냥 화면상 10개의 칼럼이 최대한 나눠 갖는다. 또는 minmax(50px, 150px)이라면 최소 50px은 유지되고 브라우저가 커지면 150px까지만 커지게 되는 것이다. gif를 못만들어서 코드만 사진 올린다...

앞서 다룬 포스트에서는 그리드 전체를 움직이거나 또는 그리드 셀안에서 움직임을 전체로 다루었다. 이번에는 자식요소인 그리드셀 하나씩 다루는 것을 알아보자 먼저 align-self이다. grid-container에 두는 속성이 아닌 각 그리드마다 주는 속성이다. 한번 헤더에 align-self:end;를 줘보겠다. 이렇게 헤더박스셀 하나만 영역을 지정했다 . 다시한번 보면 align-items는 그리드 컨테이너에 속성을 줌으로써 각 그리드 셀을 모두 영역을 주지만 self는 grid박스 자체에 속성을 주고 그 박스 하나만 영역을 다룬다. justify-self도 마찬가지~~~~ 이것도 두가지를 한번에 다룰 수 있는 place-self가 있다. 그리고 자동으로 칼럼과 로우를 지정해 줄 수 있는 grid-au..