- 해 석 - style 소스의 type = text를 제어하는 css로 한다. a:link : 클릭하지 않은 링크 a:visited : 한번 클릭했던 혹은 다녀갔던 링크 a:hover : 링크를 클릭하려고 마우스를 가져갔을 때 decoration : 밑줄 none : 없는 상태 underline : 있는 상태
앵귤러JS란 앵귤러JS (짧게 앵귤러라고도 합니다)는 MIT License로 무료로 배포되고 구글이 지원하고 있는 오픈 소스 웹 어플리케이션 프레임워크입니다. 앵귤러JS는 자바스크립트로 제작되었으며 기본적으로 MVC (Model-View-Controller) 모델 지원과 같은 다른 웹 어플리케이션 프레임워크에서도 지원하는 기능을 제공할 뿐만 아니라 Two-way data binding이나 directive 같은 새로운 개념의 기술도 지원하여 웹 개발자들이 해야할 많은 일들의 단축 및 좀더 파워풀하고 테스트가 용이한 웹 어플리케이션 제작에 도움이 되는 기능을 제공하고 있습니다. 아직 나온지 5년 정도 밖에 안된 프레임워크지만 구글의 전폭적인 지원 속에 다른 경쟁 프레임워크들이 비해 가장 빨리 커뮤니티가 성장하고 있는 프레임워크가 아닐까 생각합니다.
왜 사용하나요?
체계적인 코드작성 지원: 개인적인 경험으로 JavaScript는 다른 프로그래밍 언어에 비해서 체계적으로 프로그래밍하기 어려운 언어인 것 같습니다. 그래서 프로젝트 사이즈가 커지면 금방 이해하기 힘들어지고 Debug가 어려워지는 Spaghetti Code가 되기 쉽습니다. 그렇지만 앵귤러같은 프레임워크를 사용하게 되면 이런 부분을 일정 부분 해소해줍니다.
앵귤러는 다른 프레임워크에 비교했을 때 아래와 같은 장점들을 가지고 있습니다.
구글의 지원 속에 개발자 커뮤니티가 가장 빠르게 성장하고 있고 앞으로도 성장 가능성이 큽니다.
Two Way Data-Binding: 앵귤러가 제공하는 여러가지 기능 중 가장 유용한 기능이 이 Two Way Data-Binding 일 것입니다. 이 기능에 대해서 간단하게 이야기하면 Model과 View에서 사용되고 있는 데이터를 연결해줘서 어느 한쪽에서 이 데이터 값이 변화하면 다른 쪽에도 바로 업데이트가 되도록 해주는 기능입니다. 보통 이 기능 구현을 위한 코드가 전체 프로젝트의 80% 정도를 차지한다고 하는데 앵귤러는 기본적으로 이 기능을 제공하기 때문에 많은 코드의 반복을 피할 수 있습니다.
Dependency Injection 기능을 기본적으로 지원하기 때문에 컴포넌트들 간의 서비스 사용 및 Dependency 관리가 용이하며 각각의 컴포넌트들이 Decoupling (코드상에서 밀접하게 연관되어 있지 않음)되어 있기 때문에 테스트 하기가 쉽습니다. Dependency Injection에 대한 좀더 자세한 사항은 저의 다른 블로그 글인 'Dependency Injection이란'을 참고하시기 바랍니다.
Directives: 앵귤러는 Directives를 제공함으로써 개발자가 자신의 용도에 맞게 HTML tag를 제작하여 사용할 수 있게 하였으며 DOM attributes도 수정 가능하게 하였습니다.
예전에는 자바스크립트 런타임이 브라우저 밖에 존재하질 않았다. 하지만 그러한 한계를 극복하고 Node.js가 나왔다.
Javascript 실행 환경?
첫 번째로 Node.js는 REPL(Read, Eval, Print, Loop)을 통해서 런타임을 제공한다.
Read: 유저의 입력 값을 받아서 메모리에 저장
Eval: 입력 값의 평가, 실행
Print: Eval로 인해 반환된 값을 출력
Loop: 1~3을 반복.
이러한 REPL은 Babel REPL과 같이 웹에서 제공해주기도 하고, Node.js에서 제공하는 REPL은 윈도우의 CMD, 맥의 터미널 등등에서 제공을 해준다. 터미널에서 node라고 입력을 하면 node repl이 실행된다.
두 번째로 따로 자바스크립트 파일을 Node.js에서 제공하는 자바스크립트 런타임을 통해 실행이 가능하다. 위와 같이 REPL에서 개발을 하면 간단한 테스트 정도면 몰라도 어플리케이션을 개발하는 데 적합하지 않다. 따라서 repl 보다는 따로 스크립트 파일을 만들어서 그 스크립트 파일을 node.js, V8이 해석 후 실행하는 형태로 작업을 많이 하게 된다. 아래 소스 코드를 node.js에서 돌리는 것은 위의 REPL에서 실행한 것과 동일하다.
소스 코드 첫 라인에 #!/usr/bin/env node을 보면 CLI임을 짐작할 수 있다. 그럼 다음과 같이도 실행을 해볼 수도 있다는 말이 된다.
npm script가 아닌 직접 파일로 접근해서 CLI를 실행
하지만 우리가 접근한 파일은 우리가 흔히 보고 있는 js 파일이다. Node.js는 자바스크립트를 실행해줄 수 있는 환경인 런타임을 제공해주기 때문에 다음과 같이도 할 수 있다. Node.js에서 바벨을 실행시킨 결과
즉, 바벨을 쓴다면, 프론트 엔드 개발자도 Node.js를 쓴다는 결론을 내릴 수가 있다. 바벨 뿐만 아니라 웹팩, 걸프, CRA, Vue-CLI 등등 npm으로 설치하는 모든 CLI는 Node.js를 이용한다고 보면 된다. 그리고 npm(Node Package Manger)을 쓴다는 것 자체가 Node.js를 이용한다고 보면 된다.
웹을 벗어난 Node.js
Node.js 공홈 about 페이지 Node.js는 확장성 있는 네트워크 애플리케이션을 위해 설계했다고 나온다. 네트워크 어플리케이션, 즉 서버, 서버를 위해서 설계된 플랫폼이다. 따라서 Node.js로 실제 구현하는 내용도 서버가 많다는 것에는 동의한다. 또한 많은 프론트 엔드 개발자들이 주로 노드를 이용하는 사례인 npm으로 의존성 모듈 관리, 바벨, 웹팩과 같은 CLI를 Node.js 위에서 구동하는 경우 이 경우에
나 노드 할 줄 안다
라고 누군가에게 어필하기에는 다소 무리가 있을 수가 있다. 왜냐면 노드로 서버를 구축하는 사례가 너무 많고, 이미 그런 오해가 정석처럼 받아들여지는 상황이라 필드에 나가서 노드 할 줄 안다고 했을 때
나 노드로 서버 만들 줄 안다.
나 노드로 의존성 모듈 관리하고 CLI를 Node.js 위에서 돌릴 줄 알아. 둘 중에 누구의 말로 받아들이는 경우가 더 많을까… 이런 고민을 하다보니 그럼 웹이 아닌 경우에는 무엇이 있을까 고민하게 됐다.
데스크탑 어플리케이션을 제작해주는 일렉트론(Electron)
Electron의 정의 맥, 윈도우 등등의 크로스 플랫폼 데스크탑 어플리케이션을 HTML, CSS, JS를 통해 만들 수 있다. 자세히 몰라서 아래의 사진으로 대체하겠다. 출처: http://blog.dramancompany.com/2015/12/electron%EC%9C%BC%EB%A1%9C-%EC%9B%B9-%EC%95%B1-%EB%A7%8C%EB%93%A4%EB%93%AF-%EB%8D%B0%EC%8A%A4%ED%81%AC%ED%86%B1-%EC%95%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0/ 슬랙과 atom, vs code가 일렉트론으로 만들어졌다 하니 믿을만 하다고 할 수 있을 것 같다.
결론
Node.js를 할 줄 안다고 하면 Node.js로 서버를 구성할 줄 안다라고 인식되는 것은 어느 정도 이해할 수 있다. 하지만 Node.js 그 자체를 백엔드 자체만의 기술, 웹 서버 자체만으로 받아들이고 프론트 엔드 개발자들은 Node.js를 쓸 줄 모른다는 그런 잘못된 지식으로 남들에게 더 이상 인식되지 않는 환경이 조성되길 바란다. 명심하자. Node.js는 백엔드, 웹 서버가 아니라 자바스크립트 실행 환경에 불과하다
