프로젝트 진행 전 초기 구상
프로젝트 진행 전에 생각한 구상
물론 초기 구상이고 달라진것 빠진것도 많다.
프로젝트 초기 셋팅
인텔리제이에서 해당 프로젝트 오픈해서
실행시켜서 localhost:8080 진입해보니
누구세요?…
알고보니 security dependency 의해서 스프링의 기본 보안 인증이 적용되서 로그인폼 화면이 적용되는건데..
콘솔창에
이런식으로 패스워드가 나온다
이제 들어가보자
error page 보니까 기분이 좋지않다(해당 오류 페이지 뜨는게 정상)
방금 나온 시큐리티로 인해 보여지는 로그인 화면을 제거해주고 싶으면
메인 클래스 파일에
@SpringBootApplication(exclude = SecurityAutoConfiguration.class)
public class VintageApplication {
public static void main(String[] args) {
SpringApplication.run(VintageApplication.class, args);
}
}
Java
복사
밑줄 친 부분을 추가해주면 제외시켜준다.
근데 나는 우선 냅두고 진행.
프로젝트랑 깃 허브 연결
이슈에 첫번째로
생성해놨기 때문에 이슈에 따른 브랜치를 생성해주고
(지금 보니까 회원가입이랑 로그인 별도로 이슈 진행할걸 그랬다…)
이제 1브랜치에 올려두고 진행해보자~
이제 인텔리제이에서
VCS - Enable Version Control Integration….클릭
Git으로 변경해주고
Manage Remotes.. 클릭
Clone 해주기 위해서 주소 복사해서
아까 거기에 + 누른 후에 넣어주기
터미널에
git remote update
Shell
복사
1브랜치 만든것도 가지고 오기위해 업데이트 해주자.
그러면 이제 1 브랜치도 가지고온다!!
로컬 마스터만 있던 브랜치가 이제 나머지 브랜치도 가지고 온걸 볼 수 있다.
1브랜치로 checkout하기. 그러면 이제 Local 브랜치가 1이 된게 보인다.
그러고 생성된 초기 셋팅 파일들을 미리 커밋 앤 푸시해서 올려보자
이미 올려버려서 파일이 안뜨지만 위에 Changes에 파일 여러개 뜨면 체크해주고 커밋 내용과 밑에 커밋 앤 푸쉬해주면 된다.
후다닥 1브랜치로 가보면 푸쉬까지 되서 올라온게 보인다!!! 후후후..
계정 도메인 추가
com.zerozone.vintage 패키지에 domain 패키지 추가
Account.java 생성
@Entity
@Getter @Setter @EqualsAndHashCode(of = "id")
@Builder @AllArgsConstructor @NoArgsConstructor
public class Account {
@Id @GeneratedValue
private Long id;
@Column(unique = true)
private String email;
@Column(unique = true)
private String nickname;
private String password;
private boolean emailVerified;
private String emailCheckToken;
private LocalDateTime joinedAt;
private String favoriteCamera;
private String bio;
private String occupation;
private String location;
private String url;
@Lob @Basic(fetch = FetchType.EAGER)
private String profileImage;
}
Java
복사
com.zerozone.vintage.account 패키지 생성하고
AccountController.java 생성
@Controller
public class AccountController {
@GetMapping("/sign-up")
public String signUpForm(Model model){
return "account/sign-up";
}
}
Java
복사
resources.templates에 index.html 생성하고
resources.templates.account 패키지 생성 후
sign-up.html 생성
v0 사이트에서 만든 html 태그 넣어봤다.
그러고 localhost:8080 진입해도 로그인화면 뜨고 주소창에 /sign-up을 쳐도 진입하지 못한다
config 패키지 생성 하고 안에 SecurityConfig.java 파일을 만들어준다
spring security 6.0 부터 WebSecurityConfigurerAdapter를 사용할 수 없게됐다!
@Configuration
@EnableWebSecurity
public class SecurityConfig{
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http
.authorizeHttpRequests((authorizeRequests) ->
authorizeRequests
.requestMatchers("/", "login", "/sign-up").permitAll()
.requestMatchers("/css/**, /js/**, /images/**").permitAll()
.anyRequest().authenticated() // 로그인 해야만 접근 가능
);
return http.build();
}
}
Java
복사
테스트 작성
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.*;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.view;
@SpringBootTest
@AutoConfigureMockMvc
public class AccountControllerTest {
@Autowired private MockMvc mockMvc;
@DisplayName("회원 가입 화면 보이는지 테스트")
@Test
void signUpForm() throws Exception{
mockMvc.perform(get("/sign-up"))
.andExpect(status().isOk())
.andExpect(view().name("account/sign-up"));
}
}
Java
복사
근데 테스트 실행했는데 콘솔에 빨간줄로 뜨길래 찾아봄
OpenJDK 64-Bit Server VM warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended
Java
복사
이 방법을 해도 안되서
build.gradle에
tasks.named('test') {
useJUnitPlatform()
jvmArgs '-Xshare:off' // JVM 아규먼트 설정
}
Java
복사
밑줄 부분만 추가해주니까
빨간 경고가 이제 안뜬다!!
테스트는 성공했는데 실패 케이스도 보고싶으면
@Configuration
@EnableWebSecurity
public class SecurityConfig{
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http
.authorizeHttpRequests((authorizeRequests) ->
authorizeRequests
//.requestMatchers("/", "login", "/sign-up").permitAll()
//.requestMatchers("/css/**, /js/**, /images/**").permitAll()
.anyRequest().authenticated() // 로그인 해야만 접근 가능
);
return http.build();
}
}
Java
복사
주석처리하고 다시 테스트 돌리면
회원가입 뷰 화면 꾸미기 - 부트스트랩 추가
컴파일된 CSS랑 JS 다운하고
폴더 안의 css,js 폴더를 resources/static 폴더에 넣고
build 에서 build project
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link th:href="@{/css/sign-up.css}" href="/css/sign-up.css" rel="stylesheet" />
<link th:href="@{/css/bootstrap.min.css}" href="/css/bootstrap.min.css" rel="stylesheet" />
<link th:href="@{/js/bootstrap.bundle.min.js}" href="/js/bootstrap.bundle.min.js" rel="stylesheet" />
</head>
<body>
<div id="content" class="flex">
<div class="">
<div class="page-content page-container" id="page-content">
<div class="padding">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header"><strong>Login to your account</strong></div>
<div class="card-body">
<form>
<div class="form-group"><label class="text-muted" for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We don't share email with anyone</small></div>
<div class="form-group"><label class="text-muted" for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <small id="passwordHelp" class="form-text text-muted">your password is saved in encrypted form</small></div>
<div class="form-group">
<div class="form-check"><input type="checkbox" class="form-check-input"><label class="form-check-label">Check me out</label></div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML
복사
sign-up 주소들어가니까
sign-up:40 Refused to apply style from 'http://localhost:8080/css/bootstrap.min.css' because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
HTML
복사
콘솔에 해당 오류가 나서 찾아보니까 무슨 시큐리티 허용안해준거랑 경로 잘못이라는데
시큐리티는 css파일 허용해놔서 경로 설정이 문제인거같은데..
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link th:href="@{/css/sign-up.css}" href="/css/sign-up.css" rel="stylesheet" />
<link th:href="@{/css/bootstrap.min.css}" href="/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link th:href="@{/js/bootstrap.bundle.min.js}" href="/js/bootstrap/bootstrap.bundle.min.js" rel="stylesheet" />
<link th:href="@{/js/jquery-3.7.1.min.js}" href="/js/jquery/jquery-3.7.1.min.js" rel="stylesheet" />
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"
-->
</head>
HTML
복사
이상하게 href로 주면 자꾸
콘솔에서 자꾸 못찾는 오류 나오는데 저한테 왜이러세요;;;
시큐리티 설정 문제인가 하고 봤는데
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
return http
.authorizeHttpRequests((authorizeRequests) ->
authorizeRequests
.requestMatchers("/css/**").permitAll()
.requestMatchers("/js/**").permitAll()
.requestMatchers("/img/**").permitAll()
.requestMatchers("/favicon.ico").permitAll()
.requestMatchers("/login").permitAll()
.requestMatchers("/sign-up").permitAll()
.requestMatchers("/").permitAll()
.anyRequest().authenticated() // 로그인 해야만 접근 가능
).build();
}
Java
복사
이미 css랑 js 파일 위치 허용하게 다 해줬는데 왜이러는지 모르겠다..
진짜 이걸로 30분 넘게 잡고 있다가
<head>
<meta charset="UTF-8">
<title>Title</title>
<link th:href="@{/css/sign-up.css}" rel="stylesheet" />
<link th:href="@{/css/bootstrap/bootstrap.min.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{/js/bootstrap/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.7.1.min.js}"></script>
<link rel="shortcut icon" href="#">
</head>
HTML
복사
파워 구글링해서 수정했다. html에서 타임리프 경로를 이용한 부분이 잘못됐었던거 같다..
여기저기 구글링해서 로그인 소스 참고해서 만들었다.
와~ 이제 회원가입 버튼도 달아주고 카카오톡 계정, 구글 계정, 페이스북 계정 달아주고 하면 될거같다
뭔가 백영역보다 프론영역 하느라 시간이 더 걸린거같다.. 역시 프론의 영역은 대단하다
그리고 혼자 다 할려니까 머리아프다..^ㅡ^…..
