Enjoy Programming

대부분 프로그래밍 언어는 OS에서 실행 되지만 웹어플리케이션의 자바스크립트는 브라우저에서 html, css와 함께 실행된다. 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 request하고 server의 response를 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 html, css ,javascript, image file등을 response받는다. html, css 파일은 렌더링 엔진의 html parser와 css parser에 의해 parsing되어 DOM, CSSOM tree로 transform되고 render tree로 combine된다. 이렇게 생성된 render tree를 기반으로 브라우저는 웹페이지를 표시한다. 자바스크립트는 렌더링 엔진ㄴ이 아닌 자바스크립트..

expressjs.com/ko/ Express - Node.js 웹 애플리케이션 프레임워크 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 $ npm install express --save expressjs.com Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 node.js 웹 앱 프레임웍이다. 활용할 수 있는 많은 http 유틸리티 메소드 및 미들웨어를 통해 쉽고 빠르게 강력한 API 작성이 가능 node.js로 서버를 만들때 Express라는 프레임웍을 이용해 몇 줄의 코드로 서버를 간편히 만들 수 있다. 이미 많은 줄의 코드로 만들어져 있어서 사용법을 익힌다면 빠르게 만들 수 있다. 예를 들면 파이썬의 장고, 플라스크 PHP의 라라벨 JAVA의 spri..

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축에 따로 줄수 있지만 전체..