[부스트코스][BoostCourse] 9. Javascript 활용(1/2) (JS 파일 저장 / 라이브러리-프레임워크, JQuery)

본 게시글은 생활코딩 강의를 듣고 정리한 글입니다

---

.js 파일 이용

<style/> 태그 안의 css 코드를 .css 파일로 분리시킬 수 있는 것처럼,

JS 파일도 따로 분리시킬 수 있다

 

<script>
  --- JS 코드 ---
</script>

'파일명.js' 이름으로 파일 분리 후 ->

<script src='파일명1.js'></script>
<script src='파일명2.js'></script>
...

 

위와 같이 src='' 속성을 추가하면 파일을 불러올 수가 있다

되도록이면 파일 수를 줄여야 페이지를 불러올 때 성능이 향상되고, 로딩시간이 감소한다

 

이처럼 파일을 분리할 경우 다음과 같은 장점이 있다

 

• 유지보수가 편리하다 : 여러 곳에 쓰이는 JS를 동시에 수정할 수 있다
• 가독성이 좋아진다
• 캐시에 저장할 수 있다 : 페이지에 JS 파일을 다운로드하여 캐시에 저장해두면, 후에 더 빨리 페이지를 표시할 수 있다

 

---

라이브러리-프레임워크

라이브러리는 단순 활용가능한 도구(소프트웨어)들의 집합을 말하고,

프레임워크는 만들고자 하는 프로그램의 종류에 따라 공통적인 부분을 미리 만들어 놓는 것이다. 필요한 부분만 약간 수정해서 사용할 수 있는 것이다 (여러 클래스나 컴포넌트로 구성되어 있음)

 

라이브러리는 우리가 필요한 부분을 가져와서 사용하는 것이라면,

프레임워크는 직접 프레임워크 안으로 들어가서 디테일을 수정해서 사용하는 것이다

 

---

 

위와 같이 검색하면 정의를 찾아볼 수 있다

라이브러리 같은 경우는 처음 C언어를 배울 때부터 <stdio.h> 라이브러리를 접하며 많이 들었지만,

프레임워크는 잘 이해가 되지 않아 예시를 찾아보았다 (출처 : 위키백과)

 

프레임워크 예시

 

• 드로잉, 작곡, 기계 CAD
• 금융 모델링 애플리케이션
• 지구 시스템 모델링 애플리케이션
• 의사결정 지원 시스템
• 미디어 재생 및 저작
• Ajax 프레임워크 / 자바스크립트 프레임워크
• 웹 프레임워크
• 미들웨어
• Cactus 프레임워크 - 고성능 과학 컴퓨팅
• 애플리케이션 프레임워크 - 일반 GUI 애플리케이션
• 엔터프라이즈 아키텍처 프레임워크
• OpenCV - 컴퓨터 비전 개발 프레임워크

 

---

라이브러리 - JQuery

JS의 가장 유명한 라이브러리 중 하나는 제이쿼리이다

인터넷에서 제이쿼리를 다운로드하는 방법도 있고, CDN 방법도 있다

다음은 CDN 방법으로 코드 한 줄을 추가하여 라이브러리를 가져올 수 있다

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

위는 수많은 소스 중 하나로, 구글 CDN이다

 

제이쿼리 사용예시로,

다음 코드 한 줄로 모든 <h1/> 태그의 글자크기를 한 번에 처리 할 수 있다

 

$('h1').css("font-size","20px");

 

이처럼 적절한 라이브러리를 잘 사용하면 효율적으로 코딩이 가능하다

 

---