bootstrap을 이용한 ui 변경
여기서도 정말 어이없는 error 발생! bootstrap 을 정신없이 사용하던 도중 form tag 안에 action 을 중복으로 써서 .. 잘 보자, 잘 보자 🤨🤨🤨🤨
하나만 보자면 위 화면은 가입화면이다. 이렇게 아무것도 없는 매우 못생긴 화면ㅋㅋ 진짜 보기도 싫은 웹사이트 ⭐
하지만! 우리의 부트스트랩을 적용하면 결과는 달라진다. 사실 부트스트랩도 오랜된 아이라서.. 나는 요즘 https://material-ui.com/ 이게 더 좋긴 하다. 더 자유자재로 커스텀할 수 있음. 깔끔하기도 하고, 째뜬.. 사족은 집어치우고 결과를 보여드리도록 하겠습니다.
1. 홈화면
navbar의 기능은 없지만 보기 좋게 상단에 설정해주었고, 안에는 card를 사용하여 내용을 넣어주었다. simple spring boot example using kotlin !
그리고 밑에는 sign-up, login 버튼을~ footer로는 그냥 의미 없는 샘플을 가져다 붙였다. 그래도 꽤 귀여워 보인다. 호랑이 이모티콘 때문인가 ..ㅎ
2. 가입화면
id는 happy, 그리고 password는 1234를 입력해서 가입을 시도했다.
h2-console을 이용해서 happy 계정으로 데이터베이스에 잘 저장되었음을 확인할 수 있다. 참고로 비밀번호는 SHA-256 알고리즘을 통해 암호화를 진행해 다음과 같이 길게~보여지는 것이다.
3. 로그인 화면
방금 가입한 happy 계정으로 로그인을 시도해보자. 보다시피 가입화면과 로그인 화면은 타이틀만 다르고 완전히 똑같다 ㅋㅋ
4. welcome 화면
login을 함과 동시에 welcome으로 리턴된다. ID: happy 를 확인할 수 있는데, happy라는 유저를 통해 로그인 하였기 때문이다.
소스 참고
https://github.com/leyuri/Springboot-kotlin
느낀점
짧게 코틀린과 스프링부트를 활용하여 웹 사이트를 만들어보았다. 코틀린 간편해보이긴 한데 익숙하지 않아서 .. 모르겠다.. 그냥 여기까지만 공부하고 싶달까...^^..
