[Java Project] Part 2. 게시판 서비스 만들기 - 로그인 페이지 생성 & 디자인

1. 로그인 페이지

(1) 이전 시간 branch 작업

1. 깃허브 branch 전략 1
   • 새로운 branch가 복사된 것처럼 생성되었는데 merge는 되지 않은 상태로 보이는 것 : 깃허브 전략 rebase & merge
   • 즉, 티가 안 나게 merge를 해준 것이다.
   • 팀에 따라서 깔끔한 전략을 쓸 것인지 모든 기록을 남길지 선택할 수 있다.
2. 깃허브 branch 전략 2
   • 내가 작업하는 사이에 다른 팀원의 작업이 merge까지 일어났을 때, 문제 해결 방법
     (다른 팀원의 내용까지 내가 반영하고 있는 것이 좋을 것이다.)
     1. 만약 내 작업까지 remote push가 되어 있다면, main branch를 merge 받아와야 한다.
     2. 만약 remote push를 안 했다면, feature branch를 main으로 rebase를 해주면 좋다.

 

(2) 로그인 페이지는 spring security를 사용해서 구현

• 의존성 추가
  • Spring web
  • Spring Security
  • Thymeleaf
  • 여기서 Spring Security와 Thymeleaf를 동시에 넣어야 thymeleaf-extras-springsecurity5 이게 함께 잡힌다.
    주의하기!
  • 두 줄(security, thymeleaf-extras-springsecurity)만 의존성에 추가하면 된다.
    • 추가만 하면 로그인 페이지가 자동으로 작동된다.
    • 자세한 로그인 페이지는 BefaultLoginPageGeneratingFilter.java 에서 확인 가능하다.
• 로그인을 위해서 SecurityConfig를 작성해 주어야 한다.
• 어떤 권한이 들어오든 모든 것을 허용해주는 코드를 작성한다. 즉 로그인 페이지는 있으나 로그인 없이 다른 페이지 접속이 가능하다.

@Configuration
public class SecurityConfig {
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) {
        return http
                .authorizeHttpRequests(auth -> auth.anyRequest().permitAll())
                .formLogin().and()
                .build();
    }
}

• AuthControllerTest를 생성하고, 로그인 페이지가 정상 호출되는지 테스트 한다.

@DisplayName("로그인 페이지 - 정상 호출")
@Test
void givenNothing_whenTryingToLogIn_thenReturnsLogInView() throws Exception {

    mvc.perform(get("/login"))
            .andExpect(status().isOk())
            .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML));
}

 

2. 뷰 디자인

• Bootstrap을 사용하여 간단하게 뷰를 디자인 해볼 것이다.
• Docs로 잘 정리되어 있어서 한번 살펴보면 좋다.

(1) 게시판 페이지

• bootstrap의css(head)와 js(body의 마지막)를 받아오는 코드를 붙여 넣는다.
• 그러면 이제 디자인을 붙여 넣기 할 수 있다.
• 예를 들어 <table> 태그에 class="table"을 붙이면 심플하게 정렬된 테이블 뷰를 볼 수 있다.
• bootdey.com을 통해 snippet 패턴을 참고할 수 있다.
• 스타일을 비교해가면서 적용해보자.
  • table
  • pagnation
  • header
  • footer
• 별도로 추가해주는 css 등은 resources > static 아래 css 폴더를 생성하여 추가해주면 좋다.
  • <link href="/css/search-bar.css" rel="stylesheet">
• 이외 페이지도 마찬가지의 방법으로 원하는 디자인을 찾고 코드를 알맞게 수정하여 적용하면 빠르게 디자인을 할 수 있다.
• 깃허브에 커밋할 때, 참고한 링크를 함께 설명해주면 좋다. 업무 추적에 용이하기 때문이다.

 

---

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/43z0P6S

 

 

#패스트캠퍼스 #포트폴리오 #직장인자기계발 #환급챌린지 #포트폴리오챌린지 #패스트캠퍼스후기 #초격차패키지 #오공완