본 게시글은 인프런 강의 "생활코딩 - 자바스크립트(JavaScript) 기본"를 보고 공부한 내용을 정리하고 있습니다.
[무료] 생활코딩 - 자바스크립트(JavaScript) 기본 - 인프런 | 강의
생활코딩의 자바스크립트 언어 기본 수업입니다. 기본 문법을 통한 자바스크립트 기본에 대해 배울 수 있습니다., - 강의 소개 | 인프런...
www.inflearn.com
모듈
프로그램은 작고 단순한것 에서 크고 복잡한것으로 진화한다 . 그과정에서 코드릐 재활용성을 높이고 , 유지 보수를 쉽게 할수 있는 다양한 빅법들이 사용된다. 그 중의 하나가 코드를 여러개의 파일로 분리하는 것이다. 이를 통해 얻을수 있는 효과는 다음과 같다.
- 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
- 코드 수정 시에 필요한 로직을 빠르게 찾을수 있다.
- 필요한 로직만을 로드해서 메모리 낭비를 줄일 수 있다.
- 한번 다운로드된 모듈은 웹 브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 츠래픽을 절약할 수 있다.
순수한 자바 스크립트에서는 모듈이라는 개념이 분명하게 존재하지 않는다. 하지만 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다. 여기에서는 자바스크립트의 대표적인 포스트 환경인 웹브라우저에서 로직 모듈화하느 방법에 대해서 알아볼 것이다.
모듈이 없다면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function welcome(){
return 'Hello world';
}
alert (welcome());
</script>
</body>
</html>welcome함수가 다음처럼 짧지 않고 상당히 길다고 가정해보자.
그러면 사용자가 지금 사용할 코드와 사용하지 않을 코드를 구분하기 힘들것이다.
이러한 경우 welcome이라는 함수를 별도의 파일로 빼고 별도의 파일을 읽어 오는 방식으로 코드를 더 정돈 할 수 있다.
<head>
<script src = "greeting.js"></script>
</head>헤드에 다음을 추가한다.
최신 html은 script태그 에서 type = "text/javascript"속성을 생략해도 사용에 지장이 없다.
html을 실행하면 script에 src속성이 있는지 확인한다.
있다면 src를 읽어 와서 안에 있는 내용을 script태그 내에서 보여준다.
function welcome(){
return 'Hello world';
}다음 자바 스크립트 코드를 갖고 있는 greeting.js파일을 만들었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "greeting.js"></script>
</head>
<body>
<script>
alert (welcome());
</script>
</body>
</html>다음코드르 실행하면 경과를 얻는다.
코드 각각의 중요한 부분을 모듈화 시켜 가독성을 높이고 수정을 용이하게 할 수 있다.
또한 다른 페이지에서도 사용이 가능하기 때문에 코드의 재사용성을 높일 수 있다.
라이브러리
라이브러리는 모듈과 비슷한 개념이다. 모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리핟도록 잘 정리한 일련의 코드들의 집합이다. 프로그래밍 세계에 는 훌륭한 라이브러리가 많다.
jQuery
https://leewang31.tistory.com/entry/InteliJ-jQuery-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC
InteliJ - jQuery 라이브러리
https://jquery.com/download/ Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development..
leewang31.tistory.com
다운로드 방법은 다음에서 확인 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<ul id="list1">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input type="button" value="execute" id="execute_btn"/>
<script type="text/javascript">
$('#list1 li').text('hi');
$('#execute_btn').click(function () {
$('#list1 li').text('coding');
})
</script>
</body>
</html>
버튼을 누르면 다음과 같은 결과가 나온다
다음 jQuery라이브러리를 완전히 이해하고, 다음코드를 완전히 이해할 필요는 없다.
라이브러리를 사용해서 편리하게 새로운 동작을 할수 있다는 것만 이해하고, 위에 코드는 html,css,javascrupt에 대한 공부가 어느정도 된 이후에 이해해도 좋다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
| 생활코딩 자바스크립트 기본 - 함수지향(유효범위) (0) | 2022.08.02 |
|---|---|
| 생활코딩 자바스크립트 기본 - 정규표현식 (0) | 2022.08.01 |
| 생활코딩 자바스크립트 기본 - 객체 (0) | 2022.08.01 |
| 생활코딩 자바스크립트 기본 - 배열 (0) | 2022.07.31 |
| 생활코딩 자바스크립트 기본 - 함수 (0) | 2022.07.31 |