목표
- 제이쿼리, 부트스트랩을 적용해 디자인 적용하기
- 제이쿼리 ui를 이용해 사이드바에 애니메이션 효과 적용하기
제이쿼리 (jQuery)
jQuery는 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는
자바스크립트 기반 라이브러리입니다.
jQuery는 여러 가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발할 수 있어 편리합니다.
저는 이번에 부트스트랩을 적용하고 jQuery UI를 이용해 사이드바에 약간의 애니메이션 효과를 적용해볼 계획입니다.
이후 jQuery Ajax 기능을 이용해 로그인 중복 검사에 적용할 것입니다.
우선 부트스트랩이 무엇인지와, 부트스크랩과 jQuery를 설치하는 법을 알아보고,
부트스트랩과 jQuery UI를 이용해 헤더와 사이드바에 간단한 디자인과 애니메이션을 적용해보겠습니다.
부트스트랩 (Bootstrap)
부트스트랩은 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은
반응형의 HTML, CSS, Javascript 프레임워크입니다.
부트스트랩은 웹 사이트를 개발할 때 디자인 때문에 개발 시간이 길어지는 문제를 해결하기 위해,
또 모바일 환경에 적합한 반응형 웹 사이트를 위해 만들어졌다고 합니다.
그런데 부트스트랩을 사용하기 위해선 jQuery를 알아야합니다.
부트스트랩의 bootstrap.js는 내부적으로 순수 자바스크립트가 아닌 jQuery로 구성되어 있기 때문입니다.
(그런데 최근의 부트스트랩5 버전은 순수 자바스크립트인 Vanilla JS를 지원한다고 합니다.)
부트스트랩5 이전 버전에선 부트스트랩 자바스크립트가 제이쿼리가 없이 동작하지 않기 때문에
제이쿼리를 먼저 로드 시킨 다음 bootstrap.js를 로드해야 합니다.
부트스트랩 설정
저번에 코드를 입력하면 자동으로 해당 라이브러리, 프레임워크를 다운 받아주는 메이븐을 설치했었습니다.
이번엔 이 메이븐을 이용해서 부트스트랩과 제이쿼리를 다운로드 받겠습니다.
이렇게 pom.xml에 다운로드 받을 제이쿼리와 부트스트랩을 입력하면
자동으로 해당 파일들을 다운로드합니다.
어떻게 코드만 입력하는데 알아서 다운이 되냐고 생각할 수 있는데 다음과 같은 원리입니다.
WebJars - Web Libraries in Jars
www.webjars.org
위 사이트에서 다운로드 받을 라이브러리나 프레임워크를 찾아서
이렇게 해당하는 파일의 코드를 pom.xml에 넣으면 다운로드 되는 방식입니다.
나는 최신버전만 받아야겠다! 하는게 아니라면 직접 사이트에 방문해서 받을 필요는 없습니다.
어쨌든 이렇게 다운로드 받았으면 적용하는 법 역시 간단합니다.
해당 파일들의 위치를 잘 확인하고 해당 제이쿼리와 부트스트랩을 사용하기 위해 스크립트에 반영하면 됩니다.
예를 들어 HTML, JSP 파일에 다음 코드를 붙여 넣으면 됩니다.
<link rel="stylesheet" href="/webjars/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>
그리고 메뉴 드롭다운 사용을 위해서 popper.js도 pom.xml에서 다운받아 줍시다.
이제 popper.js까지 사용하려면 위의 코드에 popper.js를 추가하면 됩니다.
<link rel="stylesheet" href="/webjars/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="/webjars/popper.js/1.16.0/dist/popper.min.js"></script>
혹은 위 절차와 같이 다운로드 받지 않고 각 파일의 사이트 링크를 연결해서 사용하는 방법도 있다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
부트스트랩 적용
부트스트랩을 이용해 헤더jsp파일과 로그인창, 회원가입창을 간단하게 디자인해보겠습니다.
부트스트랩 적용 : header.jsp
소스코드를 보면 navbar가 눈에 띄실 겁니다.
부트스트랩은 많은 웹페이지의 화면 상단에서 볼 수 있는 메뉴 바의 기본 틀을 제공합니다.
따라서 이렇게 부트스트랩을 이용하면 간단하게 짜여있는 틀을 이용해 디자인을 쉽게 할 수 있습니다.
부트스트랩 적용 : loginForm.jsp
css 참고 자료 : https://homnay.tistory.com/19
로그인 폼에 해당 링크에서 다운로드 받은 css를 적용하는데 에러가 발생했습니다.
간단하게 말하자면 대체 login.css가 어딨는데? 이렇게 말하고 있는겁니다.
servlet-context.xml의 코드를 약간 수정해서 문제를 해결하거나,
절대경로를 제대로 표시해주는 방법이 있는데
저는 간단하게 상대경로를 사용함으로써 문제를 해결하였습니다.
로그인폼이 제대로 적용되었습니다.
이제 제이쿼리 Ajax를 이용해 회원가입 시 아이디, 이름, 이메일의 중복 검사 기능을 추가해보겠습니다.
우선 회원가입창이 제대로 열리는지 확인해봅시다.
제 기억으로는 memberForm과 관련해서 오류가 날 것 같은 곳이 두 가지가 있었습니다.
우선 MemberControllImpl.java 부터 확인해보겠습니다.
로그인창과 회원가입창인 loginForm과 memberForm이 잘 매핑되어 있습니다.
그럼 이제 tiles_member.xml를 살펴보겠습니다. (타일에 관한 설명은 다음 회차의 글에 있습니다.)
tiles_member.xml 에서 memberForm을 누락시켜서 에러가 발생했던 것이였습니다.
따라서 memberForm을 작성해줍니다.
이게 회원가입창이 제대로 뜹니다.
그런데 상태가 엉망입니다. 앞서 로그인창을 꾸몄던 css를 수정하고 적용시켜서
회원가입창을 디자인 해보겠습니다.
폼이 낮게 위치해있는데 align-items가 center라서 그렇습니다.
.wrap2 {
width: 100%;
height: 140vh;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.1);
}
컨테이너를 중앙 정렬이 아니라, 위에서 붙이고 공간을 띄우는 방식으로 다음과 같이 수정했습니다.
.wrap2 {
width: 100%;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 40px;
background: rgba(0, 0, 0, 0.1);
}
그리고 전체적으로 css 파일을 수정해서 회원가입에 적용되는 간격들이 좀 더 밀집되게 만들었습니다.
jQuery ui란?
jQuery ui는 jQuery를 기본으로 하면서 뷰를 표현하는 다양한 컴포넌트와 위젯을 모아놓은
UI(User Interface) 를 모아놓은 것입니다.
jQuery로 스크립트 및 화면제어가 가능하고, jQuery ui를 사용해 UI를 사용하는 것입니다.
jQuery ui를 이용해 사이드바를 꾸며보도록 하겠습니다.
jQuery ui를 통한 애니메이션 적용 : side.jsp
이제 사이드바를 새로 만들어야 합니다.
기존의 사이드바 화면을 보시면 아시겠지만 사이드바가 상당히 급조한 느낌이 듭니다.
급조한 것은 아니고.. 제가 직접 사이드바에 css까지 만들어서 적용해 본 것인데 형편이 없습니다..
이왕 새로 만드는 김에 부트스트랩만이 아니라 jQuery를 이용해
간단하게 사이드바를 열고 닫을 수 있는 애니메이션을 적용해보면 어떨까 생각했습니다.
우선 jQuery의 애니메이션 기능을 이용하기 위해서는 jQuery UI 파일이 필요합니다.
아마 side.jsp에서 사이드바에 적용시키는 것 이외엔 쓸 일이 없을 것 같으니 사이트에 연결해서 가져오겠습니다.
코드를 보시면 webjar 로 시작하는 것들은 제가 pom.xml로 다운받았던 파일들을 가져오는 것이고
맨 아래에 jQuery ui는 사이트에 연결해서 가져오도록 했습니다.
jQuery ui를 이용해 사이드바를 열고 닫을 수 있는 소스코드를 배우고 적용했습니다.
출처 : http://v2.eyoom.net/bbs/board.php?bo_table=js&wr_id=7&sfl=mb_id,1&stx=eyoom_mount&device=pc
달러 기호($)는 jQuery 자체를 의미하고 jQuery에 접근할 수 있게 해주는 식별자입니다.
$(선택자).함수() 와 같이 이루어져 있는데, 선택자를 이용해 원하는 요소를 선택하고 함수를 정의해서
선택된 요소에 원하고자 하는 동작을 설정할 수 있습니다.
소스코드가 짧은걸 보실 수 있습니다.
애니메이션 효과를 주는데 소스코드가 이렇게 짧을 수 있냐고 생각할 수 있는데,
위에서 정의되어 있는 애니메이션 효과인 easeOutBack과 easeInBack은 사용자가 따로 만들어야 하는 것이 아니라
jQuery ui에 이미 다음과 같은 애니메이션 효과들이 정의되어 있습니다. 간단하게 꺼내서 사용하면 되는 구조입니다.
여기까지 제이쿼리, 부트스트랩을 적용해 디자인 적용해보았고,
제이쿼리 ui를 이용해 사이드바에 애니메이션 효과 적용해보았습니다.
다음에는 로그인 기능을 구현하고, ajax를 이용해 실시간 아이디 중복검사를 구현해보겠습니다.
'자바 스프링 > 스프링 게시판 프로젝트' 카테고리의 다른 글
| #4 계정(시큐리티 적용)과 게시판 CRUD 구현 (0) | 2022.05.28 |
|---|---|
| #3 로그인 구현, ajax 이용해 실시간 아이디 중복검사 구현 (0) | 2022.04.12 |
| #1 마이바티스 & 회원가입 데이터베이스 연동 확인 (0) | 2022.03.30 |
| #0 개발 환경 세팅1 (0) | 2022.03.29 |
| 자바 스프링을 이용한 게시판 + 채팅창 (0) | 2022.03.28 |
