Enjoy Programming

자바스크립트로 키보드 드럼만들기를 하던중 data-key속성을 접하게 되었다. 이를 알아보려고 mdn을 뒤지니 아에 data-로 시작하는 속성이 있어서 포스팅한다. HTML5는 특정 요소와 연관되어 있지만 확정된 의미를 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인 되었다. data-*속성은 표준이 아닌 속성이나 추가적인 DOM속성, Node.setUserData()와 같은 다른 조작을 하지 않고도 의미론적인 표준 HTML요소에 추가 정보를 저장할 수 있도록 해준다. 문법은 간단하다. 어느 element에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다. 화면에 안보이게 글이나 추가정보를 element에 담아 놓을 수 있다. 이런식으로 추가정보를 저장한다. 이것을 자바스크립트에서 접..

이번 과제 완성작이다. 이것도 반응형이고~~~ 역시 grid와 flex-box를 활용해서 만들었다. 주요한건 바디에서 grid-templat-columns, rows를 이용해서 3X4그리드를 만들었고 최소는 max-content, column은 1fr row는 33%씩주고 빨간 부분은 span2를 주고 리스트 부분은 grid-row: span3을 줘서 할당했다. 특별히 많이 활용한건 grid-column과 grid-row를 많이 활용했다. 코드를 보자~ 이렇게 보니 복잡하긴 하다.. 근데 나름 layout에 대한 느낌을 더 많이 생각하게된? 계기였다 참고로 챌린지서 처음으로 내 작품이 올라왔다 ㅋ 기분이 좋았다 ㅋㅋㅋ 나이가 먹어도 이런건 기분이 좋다.

4번쨰 css 레이아웃 챌린지는 이렇게 레이아웃을 잡는 챌린지였다. 짧게나마 코드 리뷰를 해야지.. 중점은 반응형으로 며개의 칼럼이 생기더라도 아래로 계속 이어 나갈수 있게 만드는 ? 암튼 반응형 페이지 만드는것 전체적으로 grid를 활용했다. html 코드는 반복반복이다 어짜피 같은 그리드가 계속 반복되니까 css 코드를 보면 챌린지 당시에는 이렇게 줬다는게... 멍청했다... 그냥 바디에 그리드 주고 auto-fit주면 되는건데... auto-fill과 auto-fit을 잘 이해하지 못했었다. 다시 짠다면 바디에 grid-template-columns를 repeat(auto-fit, minmax(Xxxpx, 1fr)요렇게 주고 로우는 필요한만큼 주고 auto-rows를 다시 주면 되고 헤더는 grid..

이번에도 이어서 컨트롤러를 더 만져보자 우선 비디오를 클릭하면 비디오 상세페이지로 넘어가도록 해주자 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는 처음에 들여쓰기의 감지를 그..