실직한김에만들어보자 - 3일차

#실직한김에만들어보자 시리즈

 

오늘은... 지도를 뒤에 배치할까 했었는데, 생각보다 별로인것 같아 화면을 먼저 바꿔볼까 한다.

보통 db 구성하고, 화면설계하고... 뭐 그렇게 하겠지만 개발은 재미로 해야하니까 ㅎ

 

- 기록 1

한 10년전에 찍은 것 같은데, 지금 봐도 이쁜 사진이군...

요상한 글자 배열을 없애고, 이쁜 사진의 위치를 조정했다.

바깥쪽엔 여백을 줘서 미(?) 를 살려보았다.

대문으로는 깔끔하고 괜찮은 것 같다.

나중에는 이미지가 랜덤으로 교체되게 해서 학교의 사진들이 보이게 하면 좋을 것 같다.

 

사진의 크기가 화면을 넘어갈 때는 어떻게 배치해야 하나 정말 곤란하다.

이럴 땐 사진을 잘라서 원하는 위치를 보여줘야 하는데, 아래와 같이 position으로 위치를 조절해주면 된다.

background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;

 

 

- 기록 2

이제 드디어 다음 페이지의 메뉴들을 구현해야 한다.

현재 아래와 같은 구성을 생각하고 있다.

로그인 -> 메뉴 이동...

그러면 다음 페이지를 구현할 것이 아니라 로그인을 구현해야 하지 않을까? 그래서 로그인을 구현해야 하니 스프링 시큐리티를 추가하자.

implementation 'org.springframework.boot:spring-boot-starter-security'

 

gradle에 의존성 추가 후 서버를 재실행 하면, 아래와 같은 화면이 출력된다.

이건 스프링 시큐리티에서 기본적으로 제공하는 로그인 템플릿이기 때문에 다른 설정이 없다면 서버 시작 시 기본 설정이 이 페이지로 잡힌다.

 

의존성 추가 후 db 설정을 추가해주자.

//application.yml
spring:
  datasource:
    url: jdbc:postgresql://localhost:5432/
    username: postgres
    password: 1234
    driver-class-name: org.postgresql.Driver

 

그 다음엔 저 화면에서 사용 될 계정을 연결할 파일을 만들면 된다. 하지만 여기서 먼저, 저 화면을 사용하고 싶지 않은 경우엔? 어떻게 해야 할까? 먼저 해야 할 일은 시큐리티 설정 자바 파일을 만드는 것이다.

//SecurityConfig.java

package cs.club.mojuk.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.authorizeHttpRequests(authorize -> authorize
            .requestMatchers("/assets/**", "/css/**", "/js/**", "img/**").permitAll()
            .anyRequest().authenticated()
        )
        .formLogin(form -> form
            .loginPage("/")
            .permitAll()
            .defaultSuccessUrl("/", true)
        )
        .logout(logout -> logout
            .permitAll()
        );

        return http.build();
    }
}

 

config 패키지 아래 Security.java 파일을 생성 후 위와 같이 추가하면 된다.

간략하게 코드를 설명하자면 아래와 같다.

 

1. @EnableWebSecurity 어노테이션을 추가해 시큐리티 보안 옵션을 활성화 한다고 알려준다.

2. PasswordEncorder는 비밀번호를 암호화 할 때 사용되기 때문에 스프링 빈으로 등록해준다.

3. SecurityFilterChain 으로 페이지 이동과 계정에 관련된 설정을 진행할 수 있는데, 체인처럼 원하는 옵션을 추가한다고 해서 이름이 체인인 것 같다. http.authorizeHttpRequests 옵션은 페이지 이동 시 접근과 관련된 보안이다.

3-1. requestMatchers() : 이후에 페이지가 여러개 추가 되면 코드가 말그대로 체인처럼 주렁주렁 추가 될 예정이지만, 현재 상태에선 resources/static 아래에 존재하는 정적 파일들(css, js, 이미지 등) 을 모두 허용 할 것이기 때문에 정적 파일들이 존재하는 폴더 경로를 넣어준다.

3-2. formLogin() : 로그인 관련 설정을 커스텀 할 수 있는 곳으로, .loginPage() 에 서버 실행 시 보여질 첫 페이지의 경로를 입력하고, .permitAll() 로 이 페이지는 모든 사용자에게 접근을 허용한다고 알려준다.

.defaultSuccessUrl() 은 말 그대로 로그인 성공 시 리다이렉트 할 경로를 입력하면 된다.

3-3. logout() : 이름 그대로 로그아웃 관련 설정을 추가 할 수 있는데, 딱히 현재로썬 로그아웃 설정이 필요 없으니 어떤 사용자에게 접근을 허용 할 것인지만 지정하면 된다.

 

위와 같이 자바 파일을 추가하면 다시 원래의 첫 화면을 볼 수 있다.

짜잔~

 

- 기록 3

시큐리티 옵션 추가 후 가끔 브라우저 개발자 모드 콘솔에서 아래와 같은 에러를 확인 할 수 있다.

MIME가 뭐라고...?

 

이 에러는 여러가지 문제에서 출력되는데, 이 상황에선 접근 경로가 허용되지 않은 파일이 로딩되려고 할 때 출력되는 것이다. 자신이 입력한 경로들이 제대로 된 경로인지 한번 더 확인해보자.

 

* 한가지 예를 들면, 'css 폴더 아래 모든 파일' 을 접근 허용할 때는 "/css/" 가 아닌 "/css/**" 처럼 뒤에 **를 붙여줘야 한다.

 

시큐리티 추가 내용은 다음 날에 계속!