1.프론트엔드 기술 정리
필자가 프론트엔드를 프로그래밍 하면서 쓴 기술 스택은 다음과 같다.
jQuery,html,javascript,cdn(css),thymeleaf
이중에서 듣기에 생소할 수 있는 jQuery,cdn,thymeleaf를 소개해 보고자 한다.
2.제이쿼리
제이쿼리는 자바스크립트 작업을 간소화해 생산성을 향상시켜주도록 설계된 자바스크립트 라이브러리이다.
제이쿼리는 dom(Document Object Model) 요소의 속성을 설정하고,
dom 요소를 생성하거나 삭제,표시 또는 숨긴다.
클릭, 마우스의 이동,동적 스타일 등의 이벤트를 정의하고, ajax를 호출한
다.
3.cdn(css)
cdn은 부트스트랩 등의 프레임워크를 쓸 때, 이를 직접 설치하지 않고 테마
가 있는 사이트에서 테마를 불러오는 방식이다.
4.thymeleaf
타임리프는 view template(뷰 탬플릿) 중 하나이다. 뷰 템플릿은 컨트롤
러가 전달하는 데이터를 이용해서 동적으로 화면을 구성할 수 있게 해준다.
타임리프는 html 태그를 기반으로 해서 th: 속성을 이용해 동적인 view를
제공한다.
타임리프를 사용하기 위해서는 프로젝트를 만들 때 thymeleaf 디펜던시를
추가해야 한다.
디펜던시를 추가하지 않았다면, build.gradle 페이지에서
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'을 적으면 된다.
5.실제 코드로 설명
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<link rel="icon" th:href="@{/favicon.ico}" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>메인 화면</title>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=0db590807cb08a226ef449271cc2660f&libraries=clusterer,services"></script>
<link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css" rel="stylesheet">
<link th:href="@{/static/css/main.css}" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat%3A400%2C600%2C700"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C600%2C700"/>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1546.0.min.js"></script>
<script>AWS.config.update({
region: 'ap-northeast-2',
credentials: {
accessKeyId: 'AKIA43IC3LBBCBPD3VEM',
secretAccessKey: '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'
}
});</script>
</head>
<body>
<!-- <div class="responsive-iframe">
<iframe src="http://127.0.0.1:5000/" width="480" height="320" frameborder="0" scrolling="no"></iframe>
</div> -->
<div id="nav">
<div class="icon-container">ROADs</div>
<div class="login-button">
<!-- 모델에 loggedInUser가 있다면 로그인 상태로 간주 -->
<a th:if="${loggedInUser != null}" href="/logout">로그아웃</a>
<a th:unless="${loggedInUser != null}" href="/login">로그인</a>
</div>
<ul class="gnb">
<li><a href="/main">메인</a></li>
<!-- loggedInUser가 null이 아닌 경우에만 보이도록 설정 -->
<li th:if="${loggedInUser != null}"><a href="/goofficer">지자체 페이지</a></li>
<li th:if="${loggedInUser != null}"><a href="/detail">데이터 상세보기</a></li>
<li class="my-location-button">내 위치</li>
</ul>
</div>
<video id="webcam" width="320" height="240" ></video>
<div id="map" style="width:100%; height: calc(100vh - 80px);"></div>
<script src="/static/js/main.js"></script>이 코드는 메인 페이지를 띄우는 html 코드이다.
이 코드 부분에서, thymeleaf를 쓸 수 있게 해주는 코드는 다음과 같다.
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
cdn을 쓸 수 있게 해주는 코드는 다음과 같다.
<link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css" rel="stylesheet">또한, 이 페이지에서는 없지만, 제이쿼리를 쓸 수 있게 해주는 코드는 다음과 같다.
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>제이쿼리는 이렇게 추가만 해서 끝이 아니다. javascript 파일에서 제이쿼
리를 실질적으로 써야 제이쿼리를 사용한 것이다.
또한, 제이쿼리를 쓸 때는 $를 통해 제이쿼리를 선언하거나 접근한다.
