Back Ground

Angular - 글로벌 환경 본문

Javascript/Angular

Angular - 글로벌 환경

Back 2018. 9. 15. 10:06



글로벌 환경 웹 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>webpack demo</title>
  <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
 
<script>
  function component() {
    let element = document.createElement('div');
 
    // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 
    return element;
  }
 
  document.body.appendChild(component());
</script>
 
</body>
</html>
cs


lodash의

- <- 글로벌 변수


위의 코드는 lodash라는 자바스크립트 화일을 글로벌 환경으로 로딩한 다음 div 태그를 만들고 그 안에 Hello webpack 이라는 문구를 넣은 다음 body 태그에 붙이는 예제이다.

실행해보면 Hello webpack 이라는 문구가 보일것이다.

대부분의 페이지 방식의 php, jsp, asp 같은 서버사이드 렌더링에서 사용하는 방식이다. 여기서의 문제점을 나열하면 아래와 같다.



모듈 환경

webpack-demo라는 폴더를 만들고 npm 저장소를 만들자.

1
2
3
4
5
6
7
8
mkdir webpack-demo && cd webpack-demo
# npm 저장소 생성
npm init -y
 
# 의존성 모듈 설치
npm install --save lodash
# 개발 의존성 모듈 설치
npm install webpack webpack-cli --save-dev
cs


npm 모듈 확인

https://www.npmjs.com/ 

에서 확인할 수 있다.


–save 의 의미는 의존성 모듈을 package.json 화일에 기록하라는 것이다




저작자표시 비영리

'Javascript > Angular' 카테고리의 다른 글

꼭 알아야할 핵심 코드  (0) 2018.09.29
Angular - 원리  (0) 2018.09.15
Angular js [3] - 지시어  (0) 2016.08.25
Augular JS[2] - 살펴보기  (0) 2016.08.22
Angular JS[1] - 소개  (0) 2016.08.22
'Javascript/Angular' Related Articles more
Comments