스프링부트 팀플) 20240403 properties분리 / 회원가입 로딩창 구현

팀프로젝트/SpringBoot

스프링부트 팀플) 20240403 properties분리 / 회원가입 로딩창 구현

일일일코_장민기 2024. 4. 3. 15:16

728x90

몇 일동안 application.properties의 민감한 정보를 다른 곳에 옮기려고 애를 썼는데 굉장히 쉽게 끝났다..
별거 없어도 알아서 잘 돌아가더라...

우선 이런식으로 다른 application-아이디.properties라는 properties파일을 만든다.

이후, 새로운 properties파일에 옮기고 싶은 정보를 입력한다.
기존 application.properties파일 내의 정보를 그대로 복붙하면 된다.

그 다음 application.properties에 profiles 설정을 한다.

그러면 application.properties에 자료가 없어도 알아서 잘 읽어온다.
원래는 profile를 나누기 위해 사용하는 장치지만 쓰는 사람 마음대로지.

추가로 새롭게 만든 application-dev.properties파일을 gitIgnore 처리를 한다.
본래 profile을 사용하고자 한 이유는 application에 입력해야 하는 구글보안코드 때문인데,
구글보안코드는 gitHub에 올라가지 않는다.
따라서 어떻게 다른 application파일을 사용할 수 없을지 고민하다가 profiles를 쓰기로 했다.
새로운 application.properties에 gitIfnore처리를 하면 commit도 push도 되지 않는다.

이처럼 pull한 다음에 application-dev.properties파일을 resources에 넣었지만
commit목록에 아예 뜨지 않는다.

gitIgnore파일을 gitIgnore.io에서 만들었다.
대충 이런식으로 집어넣는다.

https://www.toptal.com/developers/gitignore

gitignore.io

Create useful .gitignore files for your project

www.toptal.com

2. 회원가입 애니메이션

회원가입 중인 동안 이런 애니메이션이 출력되도록 만들었다. 대충 캡처를 했더니 좀 밉게 나왔다.

회원가입 데이터를 입력하고, 회원가입 컨트롤러 사이에
컨트롤러 메소드 하나, jsp 하나를 더 추가하여 애니메이션 출력 창을 만들었다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html>

<html>

<head>

$(function(){

$("#register").submit();

})

</script>

</head>

<body>

<form id="register" action="<c:url value='/RegisterData'/>" method="POST">

</form>

</div>

</body>

</html>

@charset "UTF-8";

body {

background: #FFFFFF;

}

h4 {

position: absolute;

bottom: 20px;

left: 20px;

margin: 0;

font-weight: 200;

font-family: sans-serif;

color: #000000;

}

#content {

margin: -45px -60px;

width: 120px;

height: 90px;

position: absolute;

top: 50%;

left: 50%;

}

#dot {

background: #FF416C;

border-radius: 50%;

width: 30px;

height: 30px;

position: absolute;

bottom: 30px;

left: 27px;

transform-origin: center bottom;

animation: dot .6s ease-in-out infinite; /* 0.6초만에 빠르게 상하 이동 */

}

@-webkit-keyframes dot {

0% { transform: scale(1,.7) } /* 가로 1배, 세로 0.7배 - 0생략 */

20% { transform: scale(.7,1.2) }

40% { transform: scale(1,1)}

50% { bottom: 100px;}

46% { transform: scale(1,1)}

80% { transform: scale(.7,1.2) }

90% { transform: scale(.7,1.2) }

100% { transform: scale(1,.7) }

}

.step {

position: absolute;

width: 30px;

height: 30px;

border-top: 2px solid #FF4B2B;

top: 0;

right:0;

}

@-webkit-keyframes anim {

0% {

opacity: 0; /* 투명 */

top: 0; /* 화면 상단 */

right: 0; /* 화면 좌측 */

}

50% { opacity: 1; } /* 불투명 / 화면 상단 좌측에 유지 */

100% {

top: 90px; /* 화면 아래에 위치 */

right: 90px; /* 화면 우측에 위치 */

opacity: 0;

}

#s1 { animation: anim 1.8s linear infinite; } /* 0.6초만에 빠르게 상하 이동하기 때문에 첫 번째 스텝 타이밍 */

#s2 { animation: anim 1.8s linear infinite -.6s; } /* 0.6초만에 빠르게 상하 이동하기 때문에 두 번째 스텝 타이밍 */

#s3 { animation: anim 1.8s linear infinite -1.2s; } /* 0.6초만에 빠르게 상하 이동하기 때문에 세 번째 스텝 타이밍 */

CSS가 복잡해보이지만 진짜 별거 아닌 코드다.

다음에는 익명게시판 댓글, 이미지 입력, 더 나아간다면 대댓글까지 구현하게 될 것 같다.