백엔드/JSP

JSP (2)

SeungEunii 2023. 4. 13. 22:29

화면을 만들기 전에 CDN부터 폴더에 넣어주려고 한다

 

부트스트랩

 

https://getbootstrap.kr/

 

Bootstrap

강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기

getbootstrap.kr

 

 

다운로드 받아서 압축 풀고 

 

css 폴더에서 bootstrap.min.css와 js 폴더에서 bootstrap.min.js를 이클립스 src-webapp 폴더에

새로운 폴더 생성 후 그 폴더 안에 css폴더 js폴더를 생성해 준 후 각 폴더명에 맞게 파일을 넣어주면 된다.

 

 

 

 

jQuery CDN

 

 

https://releases.jquery.com/

 

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

releases.jquery.com

 

 

 

 

 

https://code.jquery.com/jquery-3.6.4.min.js 링크 복사

 

 

이대로 <script src="https://code.jquery.com/jquery-3.6.4.min.js"> </script> 해줘도 되겠지만 

앞으로 이 사이트를 사용 못할 경우를 대비해서 파일로 만들어서 폴더에 넣어 편하게 쓰도록 하자

 

 

 

저 주소로 들어가게 되면

 

 

 

이렇게 나오는데

 

 

우클릭 - 다른 이름으로 저장

 

 

파일을 js폴더에 저장해 주면 된다.

 

 

 

 

 

twbs pagination CDN

 

https://cdnjs.com/libraries/twbs-pagination

 

twbs-pagination - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

jQuery simple pagination plugin for bootstrap-style webpages - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered

cdnjs.com

 

 

axios CDN

 

https://cdnjs.com/libraries/axios

 

axios - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Promise based HTTP client for the browser and node.js - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Clou

cdnjs.com

 

 

MQTT CDN

 

https://cdnjs.com/libraries/mqtt

 

mqtt - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

A library for the MQTT protocol - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it fas

cdnjs.com

 

 

앞으로 다른 CDN도 이런방식들로 저장해 주면 사용하기 편하다

 

 

 

jsp파일에서 CDN 적용하는 방법

 

 

- CDN 링크로 적용

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"></script>

 

 

- CDN 파일로 주소 적용 (절대경로)

 

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" />

<script src="${pageContext.request.contextPath}/resources/js/jquery-3.6.4.min.js"></script>

 

 

주소는 EL(Expression Language) 표현식을 사용 했다

 

${pageContext.request.contextPath}는 현재 내 프로젝트 경로이다