Spring boot/JPA실습 부트스트랩 사용해서 로그인 기능 연습해보기(1)

부트스트랩을 사용해서 간단하게 블로그를 만들어보는 연습을 해볼게요

부트스트랩은 쉽게 설명하자면 디자인 라이브러리이다

위 주석을 꼭 공부할 것!

그리고 위 코드 위에 의존성 주입하는 코드는 너무 당연해서 포스팅하지 않았습니다. 저번 포스팅을 참고해주세요

 

아래에 사이트는 트위터에서 재공 하는 부트스트랩입니다.

https://www.w3schools.com/

부트 스트렙을 사용할 때 잘 어떻게 사용해야 할지 잘 모르겠을 땐 일단 위에 사진처럼 들어가서 다 복사한다.

그리고 test폴더를 만들어서 한번 테스트를 해본 후에 어디에 뭘 넣을지 선택하면 되는 것이다.

위와 같이 18번 줄부터 21번 줄까지 코드를 보면 css와 js를 다른 서버로 자원을 요청하도록 주소가 적혀있다.

CDN

컨텐트 딜리버리 네트워크

위와 같이 내 서버가 위 파일들을 부담하는 것이 아닌 외부에서 각각의 서버의 응답을 받아서 출력해줌으로써 내 서버의 부하를 줄이는 기술이다 

 

 

위와 같이 필요 없는 것은 날리고 필요한 부분을 추가 후 header.jsp에 코드를 넣어서 include 해줄 것이다.

똑같은 방식으로 footer도 만들어준다

왜냐하면 중복되기 때문에 파일로 중복되는 코드를 파일로 관리하는 것이다.

 

 

footer

 

위와 같이 해더와 푸터로 소스코드를 파일에 넣어서 include 하면 중복을 줄일 수 있다.

위와 같이 입맛에 맞게 부트스트랩 코드를 끌어와서 수정해준다

 

form태그에 action속성은 컨트롤러 주소로 설정한다. 회원가입 버튼을 누르면 컨트롤러 함수를 때릴 수 있도록.

회원 가입 기능

정보 입력하고 회원가입하기 버튼을 누르면 

위 첫 번째 사진의 코드에서처럼 redirect가 return 된다.

db에 데이터도 잘 추가된 것을 볼 수 있다.

 

나머지는 다음 포스팅에서 작성 하겠습니다!