게시판 만들어보기 1일차

둘이서 spring boot를 이용해서 게시판 프로젝트를 진행해 보기로 했다
깃허브를 사용해서 서로의 코드를 확인하고 Merge 하는 방식으로 진행

개발환경

• IDE: IntelliJ IDEA Community
• Spring Boot 2.7.12
• JDK 1.8
• Mysql
• Spring Data JPA
• Thymeleaf
• Spring Web
• Spring Security
• Lombok

application.yml 설정

# 서버 포트 설정
server:
  port: 8080
  servlet:
    context-path: /
    encoding:
      charset: UTF-8
      enabled: true
      force: true

# database 연동 설정
spring:
  mvc:
#    view:
#      prefix: WEB-INF/views/
#      suffix: .html

  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/blogproject?serverTimezone=Asia/Seoul&characterEncoding=UTF-8
    username: root
    password: qkrtprjs0505
  thymeleaf:
    cache: false

  # spring data jpa 설정
  jpa:
    open-in-view: true
    hibernate:
      ddl-auto: create
      naming:
        physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
        #DB컬럼에 저장될 이름의 전략을 설정(<- 이것은 java로 씌여져있는그대로 설정)
      use-new-id-generator-mappings: false  #JPA에서 기본적으로 제공하는 전략을 따라가지 않겠다
    #show-sql: true  #테이블이 만들어지는 sql이 보여진다
    properties:
      hibernate.format_sql: true  #sql이 깔끔하게 보여진다
#cos:
#  key: cos1234
#  jackson:
#    serialization:
#      fail-on-empty-beans: false

게시판 주요기능

• 회원가입
• 로그인(+카카오로그인)
• 게시글 작성
• 게시글 수정
• 게시글 삭제
• 댓글 작성
• 댓글 삭제
• 댓글 수정
• 게시글 검색
• 게시글 페이징 처리
• 관리자 기능

기본적인 기능들을 완성한뒤에 여러가지 기능을 추가할 예정

회원가입

 <form action="/userJoin" method="post">
        <div class="form-group">
            <label for="loginId"> 아이디 : </label>
            <input type="text" class="form-control" id="loginId" placeholder="Enter ID" name="loginId">
        </div>
        <div class="form-group">
            <label for="password"> 비밀번호 : </label>
            <input type="password" class="form-control" id="password" placeholder="Enter password" name="password">
        </div>
        <div class="form-group">
            <label for="name"> 이름 : </label>
            <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
        </div>
        <div class="form-group">
            <label for="phoneNumber"> 휴대폰 번호 : </label>
            <input type="text" class="form-control" id="phoneNumber" placeholder="Enter phonenumber" name="phoneNumber">
        </div>
        <div class="form-group">
            <label for="userName"> 닉네임 : </label>
            <input type="text" class="form-control" id="userName" placeholder="Enter username" name="userName">
        </div>
        </br></br>
        <button type="submit" class="btn btn-primary"  >회원가입</button>
    </form>

에러 발생

form태그를 활용해서 해당 action주소로 넘겨주고 컨트롤러에서 @PostMapping으로 받아준다.
UserJoinDto로 받아주는 부분에서 @RequestBody를 사용해서 받아주려고했지만 오류가 발생했고
오류에 대해서 알아보니 Content type 'application/x-www-form-rlencoded;charset=UTF-8' not supported라는 에러가 발생했습니다.
구글 검색을 해보니 @RequestBody : body 에 있는 json 데이터를 파싱해주는 역할을 하고,
스프링은 'application/x-www-form-urlencoded'를 이해하지 못한다고 합니다.
html form 태그를 사용하여 post 방식으로 요청하거나, jQuery의 ajax 등의 요청을 할때 default Content-Type은 'application/json'이 아니라 'application/x-www-form-urlencoded'다. 라는 것을 알게되었고 앞에 아무런 어노테이션도 안붙이고 UserJoinDto userJoinDto 으로 선언하면 @ModelAttribute가 암묵적으로 사용된다. 라는 것도 알게되었다.
따라서 @ModelAttribute 를 사용하거나 어노테이션을 붙이지 않는다면 오류를 해결할 수 있었다.
참조

@Controller
public class UserApiController {

    @Autowired
    private UserService userService;

    @PostMapping("/userJoin")
    public String userJoin(UserJoinDto userJoinDto) {
        userService.join(userJoinDto);
        //System.out.println(userJoinDto);
        return "redirect:/";
    }
}

빌더 패턴을 사용해서 repository에 저장

@Transactional
    public void join(UserJoinDto userJoinDto) {
        User user = User.builder()
                .loginId(userJoinDto.getLoginId())
                .password(userJoinDto.getPassword())
                .name(userJoinDto.getName())
                .phoneNumber(userJoinDto.getPhoneNumber())
                .userName(userJoinDto.getUserName())
                .role(RoleType.USER)
                .build();
        userRepository.save(user);
    }