🐯[TIL] 250708-027

byo·2025년 7월 9일

[TIL] 🐯멋쟁이사자처럼

목록 보기

27/42

💫 JAVA

🏁 To-do-list with DTO

🌿 to_do_list_with_dto.git

일단 사용자부터...

➕ ADD 사용자는 일단 add만! 회원 편집/탈퇴는 일단 나중에.. 조회는 필요없다

🧠 User.java

@Data
@Builder
public class User {
    private Integer id;
    private String username;
    private String password;
}

평범한 사용자 엔티티의 모습이다.
여기서 username이 unique 하다면? 회원가입/로그인 할 때 id는 필요없다.

🗄️ UserRepository.java

@Repository
@RequiredArgsConstructor
public class UserRepository {
    private final JdbcTemplate jdbcTemplate;

    private final RowMapper<User> userRowMapper = (resultSet, rowNum) -> {
        User user = User.builder()
                .id(resultSet.getInt("id"))
                .username(resultSet.getString("username"))
                .password(resultSet.getString("password"))
                .build();
        return user;
    };

    public User findByUsername(String username) {
        String sql = "SELECT * FROM users WHERE username = ?";
        try {
            return jdbcTemplate.queryForObject(sql, userRowMapper, username);
        } catch (EmptyResultDataAccessException e) {
            return null;
        }
    }

    public int save(User user) {
        String sql = "INSERT INTO users (username, password) VALUES (?, ?)";
        return jdbcTemplate.update(sql, user.getUsername(), user.getPassword());
    }
}

일단 save 기능만 작성해도 되는데, 회원가입 시 이미 존재하는 username을 입력하면 에러처리를 하기 위해 findByUsername이랑 jdbc 사용을 위한 mapper 까지 만들어둔다. repository는 dto랑 관계없이 하던대로 crud를 작성을 일단 하면된다.

💫 회원가입 기능
🚚 SignupDto.java

@Getter
@Setter
public class SignupDto {
    @NotBlank(message = "아이디를 입력하세요")
    @Size(min=3, max=10, message = "아이디는 3~10자여야 합니다")
    private String username;

    @NotBlank(message = "비밀번호를 입력하세요")
    @Size(min=6, max=20, message = "비밀번호는 6~20자여야 합니다")
    private String password;
}

회원가입 dto의 모습이다..
엔티티에서 필요한 값만 떼올수있다.. 마치 테이블의 뷰같다..
근데 이제 데이터없고 틀만 있는 뷰..는 내뇌피셜이다..
✅ validation
자카르타 밸리데이션이 어노테이션만 달면 알아서 빈칸이랑 문자열 길이까지 체크해준다. wow 거의 마법. 근데 이제 갑자기 마주치니깐 아직 익숙하진 않다..

📡 SignupController.java

@Controller
@RequiredArgsConstructor
public class SignupController {
    private final UserRepository userRepository;

    @GetMapping("/signup")
    public String showSingup(Model model) {
        model.addAttribute("signupDto", new SignupDto());
        return "signup";
    }

    @PostMapping("/signup")
    public String doSignup(
            @Valid @ModelAttribute("signupDto") SignupDto signupDTO,
            BindingResult bindingResult,
            Model model
    ) {
        if (bindingResult.hasErrors()) {
            return "signup";
        }

        // 중복 가입 여부 체크
        if (userRepository.findByUsername((signupDTO.getUsername())) != null) {
            model.addAttribute("error", "이미 사용중인 아이디입니다");
            return "signup";
        }

        User user = User.builder()
                .username(signupDTO.getUsername())
                .password(signupDTO.getPassword())
                .build();

        userRepository.save(user);
        System.out.println("signupDto is null? " + (signupDTO == null));

        return "redirect:/login?registered";
    }
}

구문	설명
showSingup	클라이언트(웹서버)가 get 요청을 했을때 = 주소창에 /signup 주소로 들어왔을 때 일단 회원가입 dto를 모델에 담아서 보내면 된다.
doSignup	클라이언트가 form[method=post]을 통해 model에 `th:object="${signupDto}"` 이렇게 dto를 담아 보내줄것이기 때문에, dto를 받아주는 `@Valid @ModelAttribute("signupDto") SignupDto signupDTO` 추가한다. 그러면 알아서 데이터가 dto에 받아지면서 validation 체크를 해준다. 와!
if (bindingResult.hasErrors())	`@Valid`의 결과 에러 메시지는 `bindingResult`에 담기기 때문에 선언을 해주어야 한다.. 그리고 에러 메시지를 화면에 출력을 해줘야 하기때문에 어쨌든 signup 화면을 다시 띄워준다.
중복 가입 여부 체크	지금 단계에선 Repository에 findByUsername 쿼리가 없기때문에 일단 패스
User user = User.builder() ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ	전에 할땐 클라이언트에서 던진 엔티티 자체를 그대로 리포지토리에 저장하면 되었기 때문에 컨트롤러에서 new로 생성해줄 필요가 없었는데 이젠 save 하기 위해선 dto로 받은 내용을 entity로 변환해서 저장해 주어야 한다..

🖼️ Signup.html

<body>
<h1>📝 회원가입</h1>
<div th:if="${error}" class="error" th:text="${error}"></div>
<form th:action="@{/signup}" th:object="${signupDto}" method="post" class="form-container">
    <p>
        <label>
            아이디:
            <input type="text" th:field="*{username}"/>
            <div th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></div>
        </label>
    </p>
    <p>
        <label>
            패스워드:
            <input type="password" th:field="*{password}"/>
            <div th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></div>
        </label>
    </p>
    <button type="submit">가입하기</button>
    <a th:href="@{/login}" class="cancel">로그인</a>
</form>
</body>

새로운 문법 :
<div th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></div>

로그인 기능 구현 전 세션에 관해 알아보기

💡 세션

stateless html : 상태가 없다. 서버가 들어오는 사람의 상태를 기억하지 않는다.

만약 기억을 하면은???
statefull -> 서버: A유저가 들어왔군, 회원가입을 하고 투두를 생성했군,, 알고있다.
상태가 없다는건???
stateless -> 서버: A인지 아닌지 매번 모른다. 무엇을 하건간에 계속해서 password를 받아 A임을 판별해야 한다.

🔓 근데 계속해서 비번을 네트워크에 태우는것은??? 너무 보안에 취약하다.

이거슬 해결하기 위해

세션 방식이 있다 :
서버가 인증된 사용자에게 네트워크에 태울 새로운 열쇠를 주는 방식 :
로그인 시 비번을 받고, 서버 메모리에 id, token 을 생성하여 이것을 쿠키 같은것에 담아서 사용자에게 보내준다. 사용자(클라이언트)는 이 쿠키 안의 토큰을 항상 갖고 서비스를 요청한다. 서버는 클라이언트의 네트워크 요청을 계속 듣고 있다가 일정 시간 이상 접속이 없으면 세션을 끊는다. 이때 세션은 만료만 되기 때문에 세션아이디가 그대로 남아 있어도 더이상 같은 세션으로는 연결할 수 없다.

HttpSession httpSession,
httpSession.setAttribute("user", user);

💫 로그인 기능

🚚 LoginDto

@Getter
@Setter
public class SignupDto {
    @NotBlank(message = "아이디를 입력하세요")
    @Size(min=3, max=10, message = "아이디는 3~10자여야 합니다")
    private String username;

    @NotBlank(message = "비밀번호를 입력하세요")
    @Size(min=6, max=20, message = "비밀번호는 6~20자여야 합니다")
    private String password;
}

📡 Controller

@Controller
@RequiredArgsConstructor
public class LoginController {
    private final UserRepository userRepository;

    @GetMapping({"/", "/login"})
    public String showLogin(Model model) {
        model.addAttribute("loginDto", new LoginDto());
        return "login";
    }

    @PostMapping("/login")
    public String doLogin(@Valid @ModelAttribute("loginDto") LoginDto loginDto, BindingResult bindingResult, HttpSession httpSession, Model model) {
        if (bindingResult.hasErrors()) {
            return "login";
        }
        try {
            User user = userRepository.findByUsername(loginDto.getUsername());

            if (!user.getPassword().equals(loginDto.getPassword())) {
                model.addAttribute("error", "비밀번호가 올바르지 않습니다");

                return "login";
            }
            httpSession.setAttribute("user", user);

            return "redirect:/todos";
        } catch (Exception e) {
            model.addAttribute("error", "존재하지 않는 사용자입니다.");

            return "login";
        }
    }

    @GetMapping("/logout")
    public String logout(HttpSession session) {
        session.invalidate();
        return "redirect:/login";
    }
}

회원가입과 비슷하게 만들면 된다..
로그아웃은 세션을 만료시키면 된다.

🖼️ login.html

<body>
<h1>🔑 로그인</h1>
<div th:if="${param.registered}" class="success">
    🎉 회원가입이 완료되었습니다! 로그인 해주세요.
</div>
<div th:if="${error}" class="error" th:text="${error}"></div>
<form th:action="@{/login}" th:object="${loginDto}" method="post" class="form-container">
    <p>
        <label>
            아이디:
            <input type="text" th:field="*{username}" />
        </label>
    <div th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></div>
    </p>
    <p>
        <label>
            패스워드:
            <input type="password" th:field="*{password}" />
        </label>
    <div th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></div>
    </p>
    <button type="submit">로그인</button>
    <a th:href="@{/signup}" class="cancel">회원가입</a>
</form>
</body>

왠지 signup 폼이랑 같이쓸수 있을듯한 느낌이긴한데 그럼 dto 쓰는 부분 포함해서 삼항연산자가 엄청 늘어날듯.. 걍 분리되어 있는게 이해하긴 편하다

Todo

🧠 Todo.java

@Data
@Builder
public class Todo {
    private Integer id;
    private String title;
    private boolean completed;
    private Integer userId;
}

🗄️ TodoRepository

@Repository
@RequiredArgsConstructor
public class TodoRepository {
    private final JdbcTemplate jdbcTemplate;

    // 🎯 ResultSet → Todo 객체로 변환해주는 RowMapper 정의
    private final RowMapper<Todo> todoRowMapper = (resultSet, rowNum) -> {
        return Todo.builder()
                .id(resultSet.getInt("id"))
                .title(resultSet.getString("title"))
                .completed(resultSet.getBoolean("completed"))
                .userId(resultSet.getInt("user_id"))
                .build();
    };

    // ✅ 로그인한 사용자의 todo 목록만 조회 (보안 중요)
    public List<Todo> findAllByUserId(int userId) {
        String sql = "SELECT * FROM todo WHERE user_id = ? ORDER BY id";
        return jdbcTemplate.query(sql, todoRowMapper, userId);
    }

    // ✅ 로그인한 사용자의 특정 todo 1개 조회
    // ⚠️ userId 조건을 함께 걸어야 다른 사용자의 todo 접근 차단 가능
    public Todo findByIdAndUserId(int id, int userId) {
        String sql = "SELECT * FROM todo WHERE id = ? AND user_id = ?";
        return jdbcTemplate.queryForObject(sql, todoRowMapper, id, userId);
    }

    // ✅ 새 todo 등록 (로그인한 사용자의 userId를 함께 저장)
    public int save(Todo todo) {
        String sql = "INSERT INTO todo (user_id, title, completed) VALUES (?, ?, ?)";
        return jdbcTemplate.update(sql, todo.getUserId(), todo.getTitle(), todo.isCompleted());
    }

    // ✅ 기존 todo 수정 (해당 사용자의 todo인지 검증하기 위해 userId 조건 포함)
    public int update(Todo todo) {
        String sql = "UPDATE todo SET title = ?, completed = ? WHERE id = ? AND user_id = ?";
        return jdbcTemplate.update(sql, todo.getTitle(), todo.isCompleted(), todo.getId(), todo.getUserId());
    }

    // ✅ todo 삭제 (사용자 본인의 todo인지 확인 위해 userId 포함)
    public int deleteByIdAndUserId(int id, int userId) {
        String sql = "DELETE FROM todo WHERE id = ? AND user_id = ?";
        return jdbcTemplate.update(sql, id, userId);
    }
}

사용자가 로그인한 후 다른 사람의 todo에 접근하거나 삭제하지 못하도록 하기 위해 userId로 명확히 식별한다.
이렇게 하면 쿼리 조건에서 권한 체크를 자연스럽게 수행하게 되어, 컨트롤러에서 실수로 인증을 빠뜨려도 안전장치 역할을 하게 된다.

📡 ToDoController

// TodoController는 사용자의 To-do 리스트를 관리하는 컨트롤러입니다.
@Controller
@RequestMapping("/todos") // /todos로 시작하는 URL을 처리합니다.
@RequiredArgsConstructor // final 필드를 자동으로 생성자 주입합니다.
public class TodoController {

    // Todo 데이터를 처리할 Repository 주입
    private final TodoRepository todoRepository;

    // 현재 로그인한 사용자를 세션에서 가져오는 유틸리티 메서드
    private User getCurrentUser(HttpSession session) {
        return (User) session.getAttribute("user");
    }

    // 전체 To-do 리스트를 보여주는 메서드
    @GetMapping
    public String list(HttpSession session, Model model) {
        User user = getCurrentUser(session); // 현재 사용자 조회
        System.out.println(getCurrentUser(session));
        if(user == null) {
            return "redirect:/login"; // 로그인 안했으면 로그인 페이지로 리다이렉트
        }

        // 현재 사용자 ID로 할 일 목록 조회
        List<Todo> list = todoRepository.findAllByUserId(user.getId());

        // 뷰에 할 일 목록 전달
        model.addAttribute("todos", list);

        return "todo-list"; // todo-list.html 뷰 렌더링
    }

    // 할 일 추가 폼 요청 처리
    @GetMapping("/add")
    public String addForm(HttpSession httpSession, Model model) {
        if (getCurrentUser(httpSession) == null) return "redirect:/login"; // 로그인 확인
        model.addAttribute("todoDto", new TodoDto()); // 빈 폼 객체 전달
        return "todo-form"; // todo-form.html 뷰 렌더링
    }

    // 할 일 추가 요청 처리
    @PostMapping("/add")
    public String add(
            @Valid @ModelAttribute TodoDto todoDto, // 입력값 유효성 검사
            BindingResult bindingResult, // 검사 결과 저장
            HttpSession httpSession
    ) {
        if(bindingResult.hasErrors()) return "todo-form"; // 에러가 있으면 다시 폼으로
        User user = getCurrentUser(httpSession); // 로그인 사용자 조회

        // Todo 객체 생성 및 저장
        Todo todo = Todo.builder()
                .userId(user.getId())
                .title(todoDto.getTitle())
                .completed(todoDto.isCompleted())
                .build();

        todoRepository.save(todo); // DB에 저장

        return "redirect:/todos"; // 목록 페이지로 리다이렉트
    }

    // 할 일 수정 폼 요청 처리
    @GetMapping("/edit/{id}")
    public String editForm(
            @PathVariable int id, // 수정할 To-do의 ID
            Model model,
            HttpSession httpSession
    ){
        User user = getCurrentUser(httpSession);
        if (user == null) return "redirect:/login";

        // 해당 ID와 사용자 ID로 할 일 조회
        Todo todo = todoRepository.findByIdAndUserId(id, user.getId());

        // DTO로 변환하여 폼에 전달
        TodoDto dto = new TodoDto();
        dto.setId(todo.getId());
        dto.setTitle(todo.getTitle());
        dto.setCompleted(todo.isCompleted());

        model.addAttribute("todoDto", dto);
        return "todo-form"; // 같은 폼을 재사용
    }

    // 할 일 수정 요청 처리
    @PostMapping("/edit")
    public String edit(
            @Valid @ModelAttribute TodoDto todoDto,
            BindingResult bindingResult,
            HttpSession httpSession
    ) {
        if(bindingResult.hasErrors()) return "todo-form"; // 에러 시 폼으로

        User user = getCurrentUser(httpSession);

        // 수정된 내용으로 Todo 객체 생성
        Todo todo = Todo.builder()
                .id(todoDto.getId())
                .title(todoDto.getTitle())
                .completed(todoDto.isCompleted())
                .userId(user.getId())
                .build();

        todoRepository.update(todo); // 업데이트 실행
        return "redirect:/todos";
    }

    // 할 일 삭제 요청 처리
    @PostMapping("/delete/{id}")
    public String delete(
            @PathVariable int id,
            HttpSession httpSession
    ) {
        User user = getCurrentUser(httpSession);
        // 사용자 ID와 함께 삭제 (보안상 필요)
        todoRepository.deleteByIdAndUserId(id, user.getId());
        return "redirect:/todos";
    }
}

💡핵심 요약

✅ `@Valid @ModelAttribute`와 `BindingResult`는 반드시 연달아 사용해야 한다.

@ModelAttribute로 바인딩된 객체에 대해 유효성 검사를 적용할 때 @Valid를 붙임
BindingResult는 검사 결과를 담는 객체이며, @Valid 바로 뒤에 선언해야 오류를 감지할 수 있음

올바른 예시:

public String submit(@Valid @ModelAttribute FormDto formDto, BindingResult result)
🔁 등록과 수정 폼을 하나의 템플릿(todo-form)으로 재사용
@GetMapping("/add") → 빈 DTO 전달

@GetMapping("/edit/{id}") → 기존 엔티티를 DTO로 변환하여 전달

둘 다 같은 폼을 사용하므로 todo-form.html을 재활용할 수 있음

🔐 삭제는 @PostMapping으로 처리하는 것이 보안상 안전하다.

@GetMapping("/delete/{id}")처럼 GET 요청으로 삭제하지 않도록 주의
@PostMapping을 사용하면 CSRF 방어가 가능하고, 실수로 링크를 클릭해서 삭제되는 사고를 방지할 수 있다.

더 추가할 사항 : 비밀번호 저장 기능 달아보기

byo

🗂️ hamstern

이전 포스트

🐯[TIL] 250707-026

다음 포스트

🐯[TIL] 250708-027

[TIL] 🐯멋쟁이사자처럼

💫 JAVA

🏁 To-do-list with DTO

💡핵심 요약

✅ `@Valid @ModelAttribute`와 `BindingResult`는 반드시 연달아 사용해야 한다.

🔐 삭제는 @PostMapping으로 처리하는 것이 보안상 안전하다.

🐯[TIL] 250707-026

🐯[TIL] 250709-028

0개의 댓글

🐯[TIL] 250708-027

[TIL] 🐯멋쟁이사자처럼

💫 JAVA

🏁 To-do-list with DTO

💡핵심 요약

✅ @Valid @ModelAttribute와 BindingResult는 반드시 연달아 사용해야 한다.

🔐 삭제는 @PostMapping으로 처리하는 것이 보안상 안전하다.

🐯[TIL] 250707-026

🐯[TIL] 250709-028

0개의 댓글

✅ `@Valid @ModelAttribute`와 `BindingResult`는 반드시 연달아 사용해야 한다.