스프링부트 팀플) 20240403 properties분리 / 회원가입 로딩창 구현
몇 일동안 application.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
2. 회원가입 애니메이션
회원가입 데이터를 입력하고, 회원가입 컨트롤러 사이에
컨트롤러 메소드 하나, jsp 하나를 더 추가하여 애니메이션 출력 창을 만들었다.
@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가 복잡해보이지만 진짜 별거 아닌 코드다.
다음에는 익명게시판 댓글, 이미지 입력, 더 나아간다면 대댓글까지 구현하게 될 것 같다.