$$config title: spring boot/gradle 패키지 구성 및 멤버 / 첫째 주 따라잡기 keywords: - JPA 설정 - Member - index - join - font(common.css) - $$ # 달성할 바 - 2022. 1. 13. ~ 2022. 1. 14. - 1 JPA 설정 추가 - application.yml에 JAP 설정 추가(이전 캔에서 설정할 때, 정리함) - 2 패키지 구성 - 루트 디렉토리(자신의 프로젝트 이름이 적힌 폴더 com.jym.ekorean)에 다음의 패키지 만들기 - domain, controller, service, dao, dto 패키지 ★★★★★ - 3 멤버 - 1 JPA 설정 확인하기 - 2 Member Entity 만들기 - 3 Member Controller 만들기 - 4 Member Service 만들기 - 5 Member Repository 만들기 - 6 Member Entity, Service, Dao 구현으로 커밋하기 # 멤버 Entity, Service, Dao 구현 ## Member Entity 만들기 - 1 Member 클래스 만들기 - domain 패키지 안에 Member 클래스 만들고, implements UserDetails하기 - 빨간 줄이 생기면 alt + enter로 implements method하기 - public 윗줄에 @Entity, @Getter, @NoArgsConstructor(access = AccessLevel.PROTECTED) 어노테이션 달기 - 오버라이드 된 메소드들의 필드 만들기 - 2 Member Entity에 입력할 내용 - 1 domain 패키지 안에 Member 클래스 만들기, 클래스 옆에 implements UserDetails 입력하기 - 2 1 이후 빨간 줄이 생기면, alt + Enter로 implement method하기 - 3 public class이름 위에 @Entity, @Getter, @NoArgConstructor(access = AccessLevel.PROTETED) 어노테이션 달기 - 4 오버라이드 된 메소드들의 필드 만들기 ~~~JAVA private String loginId; private String loginPw; private boolean isAccountNonExpired = true; private boolean isAccountNonLocked = true; private boolean isCredentialsNonExpired = true; private boolean isEnabled = true; - DB의 PK에 연결할 id를 만들어준다. @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; - 그 다음 Member로 받을 나머지 값들을 넣어준다. private String name; private String nickname; private String email; - 마지막으로 GrantedAuthority 가 있는 메소드의 필드를 넣어주기 위해 - config 패키지에 Enum으로 Role이라는 이름의 파일을 생성해 준 후 다음과 같이 설정해 준다. @AllArgsConstructor @Getter public enum Role { ADMIN("ROLE_ADMIN"), MEMBER("ROLE_MEMBER"); private String value; } - 다시 Member 클래스로 돌아가 다음과 같이 필드를 만들어 준 후 @Enumerated(EnumType.STRING) private Role authority; - 해당 메소드를 아래와 같이 바꾸어 준다. @Override public Collection getAuthorities() { List authorities = new ArrayList<>(); authorities.add(new SimpleGrantedAuthority(this.authority.getValue())); return authorities; } ~~~ - 3 완성된 Member Entity ~~~JAVA @Entity @Getter @NoArgsConstructor public class Member implements UserDetails { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String loginPw; private String loginId; private String name; private String nickname; private String email; @Enumerated(EnumType.STRING) private Role authority; private boolean isAccountNonExpired = true; private boolean isAccountNonLocked = true; private boolean isCredentialsNonExpired = true; private boolean isEnabled = true; @Override public Collection getAuthorities() { List authorities = new ArrayList<>(); authorities.add(new SimpleGrantedAuthority(this.authority.getValue())); return authorities; } @Override public String getPassword() { return loginPw; } @Override public String getUsername() { return loginId; } @Override public boolean isAccountNonExpired() { return false; } @Override public boolean isAccountNonLocked() { return false; } @Override public boolean isCredentialsNonExpired() { return false; } @Override public boolean isEnabled() { return false; } } ~~~ - 3 Member Controller 만들기 - 1 controller 패키지 만들기, controller 패키지에 MemberController 클래스 만들기 - @Controller, @requiredArgsConstructor 추가하기 - private final MemberService memberService; 추가하기 ♬♬♬♬♬♬♬♬♬♬♬♬♬♬ ~~~JAVA @Controller @RequiredArgsConstructor public class MemberController { private final MemberService memberService; } ~~~ - 4 Member Service 만들기 - 1 Service 패키지 만들기, MemberService 클래스 만들기 - 5 Member Repository 만들기 - 6 5까지 완료한 뒤, Member Entity, Service, Dao 구현'으로 커밋하기 ## 회원가입 로직 만들기 - 7 생성 메소드 만들기 - 8 MemberSaveForm 만들기 - 9 회원가입 로직 만들기 - 10 회원 아이디, 닉네임, 이메일의 중복 체크를 위한 로직 - 11 '회원가입 로직 구현'으로 커밋하기 - 2022년 1월 14일 한 일: MemberService 수정, Member 수정, MemberController(showJoin/doJoin), join.html ## 주말에 할 일 - join.html 디자인 - index.html 페이지 만들기(controller/index.html) - ① MemberService 수정한 내용 - @Transactional 추가 - ② Member 수정한 내용 - 필드에 오버라이드된 메소드에 가서 return 값을 아래의 필드 이름으로 바꾸기 ~~~JAVA private boolean isAccountNonExpired = true; private boolean isAccountNonLocked = true; private boolean isCredentialsNonExpired = true; private boolean isEnabled = true; ~~~ ~~~JAVA @Override public boolean isAccountNonExpired() { return isAccountNonExpired; } @Override public boolean isAccountNonLocked() { return isAccountNonLocked; } @Override public boolean isCredentialsNonExpired() { return isCredentialsNonExpired; } @Override public boolean isEnabled() { return isEnabled; } ~~~ - ③-1 유효성 검사 의존성 주입 / MemberController(doJoin/showJoin) 수정한 내용 - build.gradle에 유효성 검사를 위한 spring-boot-starter-validation 의존성 추가하기 - 의존성 주입 > 코끼리 그림 누르기 > 프로젝트를 다시 빌드하기 ~~~JAVA implementation 'org.springframework.boot:spring-boot-starter-validation' ~~~ - ③-2 MemberController(doJoin/showJoin) 수정한 내용 - 회원가입 버튼을 눌렀을 때, 회원가입 페이지로 이동하는 로직으로 만들기4 ~~~JAVA @GetMapping("/members/join") // 회원가입 페이지(join.html)로 이동하게 함 public String showSignup(Model model) { model.addAttribute("memberSaveForm", new MemberSaveForm()); return "usr/member/join"; // 회원가입 페이지(join.html)로 이동하게 함 } ~~~ - ③-3 MemberController(doJoin/showJoin) 수정한 내용 - 회원가입 로직 만들기 - 회원가입 페이지(join.html)에서 확인을 눌렀을 때, 회원가입이 실제로 이루어지는 로직 만들기 ~~~JAVA @PostMapping("/members/join") public String doSignup(@Validated MemberSaveForm memberSaveForm, BindingResult bindingResult, Model model) { if ( bindingResult.hasErrors() ) { return "usr/member/join"; } try { memberService.save(memberSaveForm); } catch ( Exception e ) { model.addAttribute("err_msg", e.getMessage()); return "usr/member/join"; } return "redirect:/"; } ~~~ - MemberSaveForm.java 수정하기 - MemberSaveForm의 각 필드에 @NotBlank 걸어 주기 ~~~JAVA @Data public class MemberSaveForm { @NotBlank private String loginId; @NotBlank private String loginPw; @NotBlank private String name; @NotBlank private String nickname; @NotBlank private String email; } ~~~ - 2022년 2월 7일 수업에서 @NotBlank 옆에 (message = "메시지 내용")을 입력해서 메시지를 추가함 - ④ join.html - resources/template에 usr/member 디렉토리를 만들고 그 안에 html 파일로 join 만들기 - 타임리프를 불러오기 위해 다음과 같이 넣기 - html 태그 안에 다음을 넣기 ~~~HTML ~~~ - join.html을 위캔에서 하지 말고, 직접 확인해 달라. - 여기까지 오면서 실행하면 에러가 발생하겠고 Bean이 생성되지 못했기 때문이므로 MemberRepository에서 exist로 오타가 났으면 exists로 써 달라. ## join.html, index(index.html, controller) ### join.html - 앞의 ④ 이후 join.html ~~~HTLM 내 코드 자리 ~~~~ ### index 페이지 만들기 - 1 controller 패키지에 HomeController.java 만들기 - 2 public 클래스명 위에 @Controller 어노테이션 추가하기 - 3 index.html로 리턴해주는 로직 작성하기 ~~~JAVA @Controller // 어노테이션 추가함 public class HomeController { @GetMapping("/") public String showIndex(){ return "index"; // index.html로 리턴하게 함 } } ~~~ - 3 index.html 만들기 - /resources/templates에 index.html 만들기 - git에서 코드 확인하기 ~~~HTML 나의 index.html 코드 자리 ~~~~ - 4 SecurityConfig에게 index.html의 url 알려 주기 ~~~JAVA - SecurityConfig에서 url을 관리해주는 메소드에 index의 url인 "/"를 넣어준다. @Override protected void configure(HttpSecurity http) throws Exception { http .authorizeRequests( authorize -> authorize // URL 에 따른 권한 설정 .mvcMatchers( "/members/join" ) .anonymous() .mvcMatchers( "/articles/**", "/" <- 이 부분이 추가된 부분입니다. (위에 , 를 하고 사용해 주세요) ) .permitAll() .mvcMatchers( "/adm/**" ) .hasRole("ADMIN") .anyRequest() .denyAll() ) ~~~ - 질문??? index의 url인 / 가 localhost:8085/하면 index가 나오는 걸 의미하는 건가? ### 로그인 구현 - 1 MemberLoginForm 만들기 - dto 패키지에 MemberLoginForm 클래스 만들기 - 로그인할 때 받아야 하는 값 '아이디', '비밀번호' 넣기 - @Data 어노테이션 추가하기 ~~~JAVA @Data public class MemberLoginForm { private String loginId; private String loginPw; } ~~~ - 2 Login 페이지로 이동하는 로직 만들기 - MemberController에 회원가입 로직이 있고, 그 아래애 login 페이지로 이동하는 로직 만들기 ~~~JAVA @GetMapping("/members/login") public String showLogin(Model model){ model.addAttribute("memberLoginForm", new MemberLoginForm()); return "usr/member/login"; } ~~~ - 3 login.html 파일 만들기 - usr/member에 login.html 만들기 - 로직은 깃허브 참고 - 4 SecurityConfig에 - Config 패키지 > SecurityConfig.java에 /members/login 추가하기 ~~~JAVA @Override protected void configure(HttpSecurity http) throws Exception { http .authorizeRequests( authorize -> authorize // URL 에 따른 권한 설정 .mvcMatchers( "/members/join", "/members/login" <- 이 부분을 추가해 줍니다. ) .anonymous() .mvcMatchers( "/articles/**", "/" ) .permitAll() .mvcMatchers( "/adm/**" ) .hasRole("ADMIN") .anyRequest() .denyAll() ) - 다음으로 SecurityConfig에 loginProcessingUrl 을 ("/doLogin") -> ("/members/doLogin") 로 수정해 줍니다. .formLogin() // 폼기반 선언 .loginPage("/members/login") .loginProcessingUrl("/members/doLogin") .usernameParameter("loginId") .passwordParameter("loginPw") .defaultSuccessUrl("/") ~~~ ### 타임리프 layout / fragment - 1 build.gradle에 thymeleaf 의존성 주입 - 프로젝트 생성 시, spring initializr에서 추가한 것 spring-boot-starter-thymeleaf - 이곳에서 추가한 것 thymeleaf-layout-dialect ~~~JAVA dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-security' implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5' compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' runtimeOnly 'mysql:mysql-connector-java' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' testImplementation 'org.springframework.security:spring-security-test' implementation 'org.springframework.boot:spring-boot-starter-validation' implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' <- 추가해준 부분 입니다. } - 추가하셨으면 오른쪽 상단의 코끼리를 눌러줍니다. ~~~ - 2 resources/templates에 디렉토리 두 개 만들기 - 디렉토리 이름: layout, fragments - 3 디렉토리에 파일 만들기 - layouts 디렉토리에 layout.html 만들기 - fragments디렉토리에 header.html 만들기 - 4 header.html과 layout.html를 만들어 주는데 코드는 깃을 확인해 줍니다. - 5 join.html, login.html의 body에 div 태그를 그 안에 아래 내용 입력하기 ~~~HTML

layout:fragment="content" - 또한 상단에 html태그 안에 타임리프와 레이아웃을 불로온 밑에 다음과 같이 적어 레이아웃을 불러올 파일의 경로를 적어준다. - layout:decorate="~{layouts/layout}"

~~~ - 관련해서 자세한 코드는 깃을 확인해 주시기 바랍니다. ~~~HTML 위 코드 자리 ~~~ ## 2022년 1월 18일 - 2022년 1월 19일 ### 테일윈드 ### 부트스트랩 ### 폰트어썸 - free 아이콘 이야기함 ### 패키지 domain에 Member 클래스에 Article에 넣어준 것과 같이 회원가입일과 수정일 넣기 ### 게시물 작성 테스트 ### 회원정보 수정 ### SecurityConfig ### 게시판(2022년 1월 20일 ~)은 다음 글에서 ## 2022년 1월 18일 ### layout.html, fragment.html 수정하기 - 1 latout.html, fragment.html 수정하기 - 1 build.gradle에 thymeleaf 의존성 주입하기 - implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' - 2 layout.html - layout.html의 html 태그 안에 - 질문할 부분 ~~~HTML 질문한 뒤에 파일 찾아서 입력할 부분 layout.html에 추가하면 되는 것인지 확인하고 추가한 뒤에 입력하기 ~~~ - 2 layout.html의 head 태그 안에 common.css를 불러오기 위한 내용 추가하기 - layouts/layout.html, fragment/header/html, boards/detail.html, list.html, ...... - layout.html의

중 content에 들어가는 파일의 예: boards/detail.html, list.hml, ...에 아래의 코드를 추가한다. - ① layout.html에 적용되는 파일들에 추가할 코드 ~~~HTML // layouts 디렉토리의 layout.html과 연결된다는 의미이다. ~~~ - ② layouts/layout.html에 적용되는 파일 중 fragment/header.html에 들어갈 부분 ~~~HTML ~~~ - ③ layouts/layout.html ~~~HTML

~~~ ### 정적 콘텐츠 연결 - 1 resources/static에 디렉토리 두 개 만들기 - 디렉토리 이름: js, css - 2 css 폴더에 common.css 파일 만들기 - 3 눈누(https://nonnu.cc/)에서 사용할(가독성이 좋은) 폰트 고르기, '웹 폰트로 사용'을 누른 후 복사해 common.css에 복사 + 붙여넣기 - static/css/common.css ~~~CSS common.css 코드 자리 /* ===== 이 부분을 눈누 등 폰트 사이트에서 가져오기 ===== */ @font-face { font-family: 'GowunDodum-Regular'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } /* ===== 이 부분은 직접 입력하기 ===== */ body { font-family: 'GowunDodum-Regular'; } ~~~ - 4 common.css와 layouts/layout.html 연결하기 위해 layout.html에 아래 내용 추가하기 ~~~HTML ~~~ ### 게시물 작성부터 정리하기(2022년 1월 18일 수업) ### 게시물 작성 - 1 'Article' Entity 만들기 - domain 패키지에 Article 클래스 하나 만들기 - Member 클래스에 Article 연결하기 - Article에 생성 메소드 추가하기 - Article에 연관관계 메소드 추가하기 - 2 ArticleSaveForm (dto 만들기) - dto/dto/ArticleSaveform.java 클래스 만들기 - 3 ArticleRepository(dao 만들기) - dao/ArticleRepository.java 인터페이스 만들기 - JpaRepository 인터페이스 상속받기 - 4 ArticleService(service 만들기) - service/ArticleService 클래스 만들기 - ArticleRepository 주입받기 - 로직(게시물 저장 save 로직) 만들기 - 5 ArticleController(controller 만들기) - ArticleService 주입받기 - 로직(게시물 생성페이지로 이동하는 로직) 만들기 - 로직(실제 게시물이 저장되는 로직) 만들기 - 1 MemberService에서 로직(로그인 아이디로 회원 찾기 로직) 구현 - 2 - 6 write.html 만들기 - 1 usr/article디렉토리/write.html 만들기 - 1 타임리프, 레이아웃 불러오기 - 2 body 태그 안에 div 태그, div 태그에 layout:fragment="content" 넣기 ### 공부해야 하는 내용 ## 연관관계, 연관관계 메소드 - 1 연관관계 ## 영속성 - 1 영속성 # 테일윈드부터 다음 캔에서 정리