Spring 6

[Spring + Javascript] 게시물 목록 페이지네이션 구현하기(6)

해당 게시물에서는 게시물목록을 출력할 때, 페이지를 구분해서 게시물 n개씩 나눠서 보여줄 수 있도록 하는페이지네이션 기능에 대해서 알아보자 일단 페이지네이션이 어떤식으로 구현되는지 확인하기 위해서 티스토리 블로그 목록을 참조하였다. 해당 페이지는 내 티스토리 게시물 목록의 페이지 네이션이다. 내 티스토리 테마에서는 10개의 게시물씩 페이지를 나눠 놓았고,총 22개의 게시물을 3개의 페이지에 10개 / 10개 / 2개 나누어서 페이지가 구성 되어있다. 일단 가장 최근에 적었던 게시물이 1페이지 상단에 오도록 되어있으므로, DB에 게시물이 저장될 때, 고유키 글 번호가 1씩 오르는 시퀀스로 구성되어있다면, 글번호 값을 내림차순으로 정렬해서 게시물을 사용자에게 보여주면 된다. 2페이지를 눌렀을때, 10개..

Spring 2025.06.27

[Spring + Javascript] fetch()를 활용한 프로필 사진 설정하기(5)

요놈은 내 블로그 우측상단에 있는 아이콘으로 웹페이지 헤더로 설정되어 내 닉네임과 설정했던 프로필 사진을 보여주는 공간이다. 웬만해서 거의 모든 홈페이지에 계정이 있는 경우에 프로필 사진을 등록하고 사용하는 경우가 많다. 그래서 해당 게시물에서는 웹페이지에 계정이 등록될 때, 계정 정보와 더불어 프로필 사진에 대해 처리하고 웹페이지에 출력되는 기능을 알아보자. [기능]1. 회원가입 시, 계정 프로필 등록가능2. 티스토리 블로그와 동일하게 fixed 형태의 헤더 우측상단위에 로그인된 계정닉네임과 프로필 사진 보이도록 하기 MemberApiController 회원가입 요청 처리 메서드를 살펴보자. 해당 메서드는 api/board 요청에 대해서 POST 방식으로 왔을 때, 실행되는 join() 메서드이다. 일..

Spring 2025.06.25

[Spring + Javascript] fetch()를 활용한 api방식 웹페이지 파일처리 (4)

해당 게시물에서는 자바스크립트 fetch() 함수를 통한 비동기 api 웹페이지 파일처리 방식에 대해서 알아보겠다. [페이지 포워딩을 위한 BoardController 클래스] 해당 클래스에서는 board/insert 그리고 board/detail/*에 대해서 페이지 포워딩을 진행하는 클래스이다. 게시물 등록을 위한 페이지는 board/insert 요청이 들어왔을때 insert.jsp를 포워딩해줄 것이고,게시물 상세페이지는 board/detail/* 요청이 들어왔을때 detail.jsp를 포워딩 해준다. 일단 게시물 내용과 파일등록을 위한 jsp 파일코드를 살펴보자.[게시물 내용과 파일 첨부를 위한 insert.jsp] 해당 코드에서는 브라우저에서 서버로 데이터를 보내기 위한 형식의 태그가 존재한다...

Spring 2025.06.23

[Spring + Javascript] fetch()를 활용한 api방식 웹페이지 기초 (3)

해당 게시물에서는 게시판 CRUD 작업과 게시판에 각각의 게시물 페이지 포워딩 방식에 대해서 설명하려고 한다. [클래스 구성]BoardApiController - 자바스크립트에 fetch() 함수 요청에 대한 CRUD 작업 및 응답을 담당BoardController - 단순하게 페이지 포워딩을 위한 컨트롤러BoardService - Mapper에서 다룰 mybatis sql 구문 들의 트랜잭션 처리를 담당BoardMapper - mybatis를 활용한 sql 구문 실행BoardVo - DB 테이블에 담긴 컬럼형식을 필드로 담고있고, lombok을 통해 캡슐화가 진행될 클래스 해당 클래스에서는 @RestController 어노테이션으로 @Controller + @ResponseBody 기능을 합친 어노..

Spring 2025.06.19

[Spring + Javascript] fetch()를 활용한 api방식 웹페이지 기초 (2)

API 란?[Application Programming InterFace] 의 약어로 서버와 클라이언트 (웹 브라우저)가 데이터를 주고받기 위한 약속된 방법에 일종이다. 예를들어 웹사이트에서 날씨를 보려고 할 때, 브라우저가 서버에게 날씨데이터를 요청하게 된다. (API 요청)요청을 받은 서버는 브라우저에게 날씨데이터를 응답하게 된다. (API 응답) fetch() 함수란? JavaScript에서 API에 요청을 보내기 위한 함수로 해당 함수에 인자로는 첫번째로 http://@@?board=2 같은 요청과 두번째 파라미터로 어떤 방식으로 요청을 보낼지에 대한 옵션을 담는다. 두번째 파라미터가 비어있다면 기본적으로 header와 body가 비어잇는 GET 방식의 요청을 보내게 된다. 여기서 JSON이라는 ..

Spring 2025.06.17

[Spring] Spring Initializr를 통한 기초 예제 다루기

[Spring]스프링(Spring)은 자바 기반의 가장 인기 있는 오픈 소스 프레임워크 중 하나로, 기업용 웹 애플리케이션을 쉽고 효율적으로 개발할 수 있도록 도와준다. [Spring framework]POJO(Plain Old Java Object) 기반의 프로그래밍을 지원웹, 데이터 보안, 메시징 등 다양한 모듈을 제공경량 컨테이너 기반의 자바 프레임 워크 [Spring Boot]스프링을 더 쉽게 사용할 수 있게만든 프로젝트복잡한 XML 설정 없이 어노테이션 기반으로 구성된다.내장 톰캣 서버로 바로 실행이 가능(main() 함수 사용)의존성 관리, 자동 설정 등 지원 해당 게시물에서는 회원가입의 JDBC 구조중에서 Controller에 해당하는 jsp 응답 및 사용자 요청(데이터) 처리를스프링 프레..

Spring 2025.06.11