Enjoy Programming

node.js사이트에서 받아서 설치해도 되지만 한번 해봤는데 npm업데이트에서 오류가 나서 삭제했다 맥에서 패키지 관리시스템인 homebrew를 설치하고 brew를 이용해 설치해보겠다 changelog.com/posts/install-node-js-with-homebrew-on-os-x Install Node.js and npm using Homebrew on OS X and macOS Install Node.js and npm using Homebrew on OS X and macOS changelog.com 여기로 가서~~ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 복..

/* nodejs 카테고리는 nomadcoder의 wetube clone coding과정에서 습득한 내용들을 위주로 작성합니다. 클론코딩 과정이 주가 될 것이고 여기에 필자가 따로 찾아보고 학습한 것을 더 기술 할 예정입니다. */ 쉽게 말해 브라우저에 내장된 javascript를 브라우저 밖으로 가지고 나와서 유저가 사용할 수 있게 해놓은 것. 밖으로 가지고 온 자바스크립트를 이용해서 서버를 만들 수도 있고 웹스크래핑도 만들 수 있다. 브라우저와 별도로 자바스크립트를 이용하는 것. developer.mozilla.org/en-US/docs/Glossary/Node.js?utm_campaign=feed&utm_medium=rss&utm_source=developer.mozilla.org Node.js -..

git에서 강력한 기능인 branch에 대하여 알아보자 branch : 사전적 용어는 가지를 치다~ 주로 협업에 많이 좋은 기능인것 같다. 프로젝트를 진행하며 많은 커밋을 하게 되는데 여러 개발자들이 마스터에 영향을 주지않고 각자 동시에 다양한 작업을 할 수 있게 해주는 기능이다. 마스터는 그대로 유지가 되지만 각자 작업 영역에서 마음대로 소스코드를 변경할 수 있고 이렇게 분리된 작업 영역에서 변경된 내용은 나중에 원래의 버전과 비교해서 하나의 새로운 버전으로 만들어 낼 수있다. 이 그림이 잘 설명 해준다. 마스터는 독립적으로 유지 되지만 나나 또다른 누군가가 같은 코드를 다른 영역에서 구성하고 변경하고 손볼 수 있다. 이는 작업시에 마스터에 영향을 주지 않는다. 그리고 나중에 이를 합치고 프로젝트를 완..

이번엔 설정창으로 들어가는 톱니바퀴에 애니메이션을 준다 역시 @keyframes로 method를 하나 만들어준다 시작은 none; 끝은 z축으로 360도 회전하게 해준다~ 그리고 .screen_header--icons .fa-cog 에 animation 효과로 2초간 linear로 infinite한 효과다. 잘 굴러간다~ 이번엔 find.html의 open-post에 하트 아이콘 애니메이션을 넣어보자 먼저 하트 아이콘의 위치는 .open-post__heart__count안에 있다 여기에 마우스를 가져가면 하트의 색상 변화 및 scale을 조절해 움직이도록 해주자 0%일때는 흰색에 트랜스폼은 논이고 50%일때 컬러가 바뀌고 scale은 1.5로 들어간다 여기서 scale은 x,y축에 따로 줄수 있지만 전체..

네브바에 애니메이션 추가하기. 우선 네브바 버튼중 채팅창 버튼에 notification부분에 애니메이션 효과를 준다. 간단하다 @keyframes를 이용해 0%일때 트랜스폼은 none이고 50%일때 트랜스폼은 Y축으로 trasnlate -5px rotate 180도를 준다 100%일때는 transform을 다시 none으로 만들어 준다. 그런다음 notification속성에 애니메이션을 넣어주면 된다 계속 지속되기 위해 infinite특성을 붙여주자 그리고 네브바에 버튼들이 아래서 차례대로 올라오는 효과를 주자. nav_btn 클래스들에 @keyframes를 이용해 메소드를 하나 만들어 준다 Y축으로 50픽셀 아래서 올라오는 효과인데 transform: trasnlateY(50px)을 keyframes에..

진행중 한가지 문제가 생겼다, chat.html만이 아닌 다른 페이지도 statusbar를 고정하기위해 컴포넌트의 statusbar에 포지션을 픽스해줬는데 왠걸 고정하고 헤더에 패딩줬더니 같이 움직인다... 아 골머리 아프다..... 어딘가에 패딩이나 마진을 줘서 고정부위랑 멀어지게 하려고 했는데 도통 통하질 않는다.! 그러나 찾았따..... 기본적인 status-bar에 fixed를 하고 보더박스에 담아준뒤 z-index를 설정해주면 되는거였다. 일단 statusbar는 모두 항상 맨위에서 고정이니 z-index를 높은 값을 주고 헤더에 패딩을 줬더니 잘먹는다!!! ㅋㅋㅋㅋ alt헤더부분은 따로 적용이므로 그쪽에 다시 패딩을 주면 끝 근데 채팅창 헤더도 alt헤더이다 보니~ 너무 내려간다.. 알트헤더부..