본문 바로가기

Develop51

자바스크립트(JavaScript) 셀렉트 박스(select box) 선택된 옵션(selected option)의 값(value), 텍스트(text) 가져오기 jQuery를 이용하면 아래 코드를 활용해서 셀렉트 박스의 옵션을 제어할 수 있습니다. $('#selectbox > option'); // id를 기준으로, selectbox의 모든 옵션 조회 $('#selectbox > option:checked'); // id를 기준으로, selectbox에서 현재 선택된 옵션 조회 $('select[name="selectbox"] > option:checked').val(); // name을 기준으로, selectbox에서 현재 선택된 옵션의 값(value) 조회 $('select[name="selectbox"] > option:checked').text(); // name을 기준으로, selectbox에서 현재 선택된 옵션의 텍스트(text) 조회 아래 코드는 순.. 2023. 5. 30.
자바스크립트(JavaScript) 체크박스(checkbox), 라디오 버튼(radio) 체크 여부(checked) 및 체크된 값(checked value) 가져오기 jQuery를 이용하면 다음과 같이 체크박스 또는 라디오 버튼의 체크 여부와 체크된 값을 알아낼 수 있습니다. $('input[name="checkbox"]').is(':checked'); // 체크박스 체크 여부(checked) $('input[name="radio"]:checked').val(); // 라디오 버튼 체크된 값(checked value) "나는 순수 자바스크립트가 좋아!"라고 하신다면 다음과 같이 처리해 주시면 됩니다. document.querySelector('#checkbox').checked; // 체크박스 체크 여부(checked) document.querySelector('input[name="radio"]:checked').value; // 라디오 버튼 체크된 값(checke.. 2023. 5. 28.
자바스크립트(JavaScript) - 폼 데이터(FormData)에 객체 배열(파일 포함) 여러 개를 담아 컨트롤러로 전송하는 방법 다음과 같이 파일이 포함된 객체(JSON)를 자바스크립트 폼 데이터에 담아 컨트롤러로 전송해야 했었습니다. 여러 가지 방법으로 시도해 보았지만 컨트롤러에서는 파라미터를 수집하지 못하는 상황이었고, 며칠을 헤매다 커뮤니티를 통해 방법을 찾게 되었습니다. 앞의 BoardDTO 객체를 리스트로 전달받으려면 아래와 같이 임시 클래스를 하나 생성한 후 컨트롤러 메서드의 파라미터로 선언해 주면 됩니다. 프론트 단에서 JS 로직은 아래와 같은 형태로 처리되는데요. 우선, 비어있는 FormData와 각 DTO를 담을 배열(boards), 그리고 각 DTO의 멤버를 저장할 리터럴 객체(data)를 선언합니다. for 문의 inputs는 HTML form 태그의 모든 input 엘리먼트를 의미하고, name, value는.. 2023. 5. 28.
[JSP] JSTL(EL) 문자열(String) 연결하기(합치기) apple, delicious, tateless 세 개의 변수가 선언되어 있습니다. JSTL(EL)에서는 ' + ' 연산자를 이용할 수 없기 때문에 단순히 아래와 같이 문자열을 연결할 수 있습니다. 만약 삼항연산자로 처리되어야 하는 상황이라면, 아래와 같이 ' += ' 을 이용하시면 됩니다. 2023. 5. 28.
스프링 부트(Spring Boot) 게시판 - 다중 첨부파일 업로드하기 (다중 파일 업로드 & 다운로드 구현하기 1/3) [Thymeleaf, MariaDB, IntelliJ, Gradle, MyBatis] 본 게시판 프로젝트는 단계별(step by step)로 진행되니, 이전 단계를 진행하시는 것을 권장드립니다. DBMS 툴은 DBeaver를 이용하며, DB는 MariaDB를 이용합니다. (MariaDB 설치하기) 화면 처리는 HTML5 기반의 자바 템플릿 엔진인 타임리프(Thymeleaf)를 사용합니다. 이전 글까지는 게시판에 회원 기능을 구현하고, 인터셉터와 세션을 이용해서 로그인이 되지 않은 회원은 게시판을 이용할 수 없도록 처리해 보았습니다. 지금부터는 본 글을 시작으로 총 세 번에 걸쳐 파일 업로드/다운로드 기능을 구현해 볼 건데요. 단일 파일의 경우에는 게시글(tb_post) 테이블 하나로 처리가 가능하지만, 댓글과 같이 하나의 게시글에서 여러 개의 파일을 관리할 수 있도록 다중으로 파일을 업로.. 2023. 5. 19.
스프링 부트(Spring Boot) 게시판 - 로그인/로그아웃 & 로그인 세션(Login session) 체크 기능 구현하기 [Thymeleaf, MariaDB, IntelliJ, Gradle, MyBatis] 본 게시판 프로젝트는 단계별(step by step)로 진행되니, 이전 단계를 진행하시는 것을 권장드립니다. DBMS 툴은 DBeaver를 이용하며, DB는 MariaDB를 이용합니다. (MariaDB 설치하기) 화면 처리는 HTML5 기반의 자바 템플릿 엔진인 타임리프(Thymeleaf)를 사용합니다. 이전 글에서는 회원 테이블을 생성하고, 레이어 팝업을 이용해 회원가입 기능을 구현해 보았습니다. 이번에는 로그인과 로그아웃 기능을 구현하고, 인터셉터를 이용해서 로그인이 되어있지 않은 경우에는 게시판에 접근할 수 없도록 컨트롤해 보도록 하겠습니다. 1. MemberService - 로그인 메서드 추가하기 먼저 MemberService에 아래 메서드를 추가해 주세요. /** * 로그인 * @param lo.. 2023. 5. 11.
스프링 부트(Spring Boot) 게시판 - 회원가입 기능 구현하기 [Thymeleaf, MariaDB, IntelliJ, Gradle, MyBatis] 본 게시판 프로젝트는 단계별(step by step)로 진행되니, 이전 단계를 진행하시는 것을 권장드립니다. DBMS 툴은 DBeaver를 이용하며, DB는 MariaDB를 이용합니다. (MariaDB 설치하기) 화면 처리는 HTML5 기반의 자바 템플릿 엔진인 타임리프(Thymeleaf)를 사용합니다. 이전 글에서는 History API를 이용해서 비동기(Ajax) 페이징 처리의 새로고침 문제를 해결해 보았습니다. 이번을 포함해서 두 차례예 걸쳐 게시판에 회원 기능을 적용해 볼 건데요. 본 글에서는 DB에 회원 데이터를 관리할 테이블을 생성한 후 회원가입 기능을 구현해 보도록 하겠습니다. 1. 회원 테이블 칼럼 구조 아래 표는 회원 테이블의 전체 칼럼 구조입니다. 칼럼 설명 id 테이블의 PK(Prim.. 2023. 5. 9.
스프링 부트(Spring Boot) 게시판 - Ajax(비동기) 페이징 새로고침 시 페이지 번호 유지하기 [Thymeleaf, MariaDB, IntelliJ, Gradle, MyBatis] 본 게시판 프로젝트는 단계별(step by step)로 진행되니, 이전 단계를 진행하시는 것을 권장드립니다. DBMS 툴은 DBeaver를 이용하며, DB는 MariaDB를 이용합니다. (MariaDB 설치하기) 화면 처리는 HTML5 기반의 자바 템플릿 엔진인 타임리프(Thymeleaf)를 사용합니다. 이전 글에서는 jQuery의 Ajax를 이용해서 REST API 방식으로 댓글에 페이징을 적용해 보았습니다. 하지만 개선해야 할 점이 한 가지 남아있습니다. 게시글과 같은 동기 처리는 페이지를 이동하는 시점에 주소(URL)가 변경되기 때문에 브라우저를 새로고침 해도 페이지 번호와 검색 조건이 유지되지만, Ajax는 페이지 번호에 해당되는 데이터를 조회하되 주소는 변경되지 않기 때문에 브라우저를 새로고침 .. 2023. 5. 1.
스프링 부트(Spring Boot) 게시판 - REST API 방식으로 댓글 페이징(Paging) 처리하기 [Thymeleaf, MariaDB, IntelliJ, Gradle, MyBatis] 본 게시판 프로젝트는 단계별(step by step)로 진행되니, 이전 단계를 진행하시는 것을 권장드립니다. DBMS 툴은 DBeaver를 이용하며, DB는 MariaDB를 이용합니다. (MariaDB 설치하기) 화면 처리는 HTML5 기반의 자바 템플릿 엔진인 타임리프(Thymeleaf)를 사용합니다. 이전 글에서는 댓글 삭제 기능을 구현했고, 이를 끝으로 댓글 CRUD 처리가 모두 완료되었습니다. 이번에는 게시글 페이징과 검색 처리에서 구현한 클래스들을 이용해서 댓글에 페이징을 적용해 볼 건데요. 지금까지와 마찬가지로 jQuery의 Ajax를 이용해서 화면의 움직임 없이 페이지를 이동하도록 처리해 보도록 하겠습니다. 1. 댓글 조회용 DTO 클래스 생성하기 우선 java 디렉터리에 다음의 클래스를 생.. 2023. 4. 25.
스프링 부트(Spring Boot) 게시판 - REST API 방식으로 댓글 삭제 기능 구현하기 [Thymeleaf, MariaDB, IntelliJ, Gradle, MyBatis] 본 게시판 프로젝트는 단계별(step by step)로 진행되니, 이전 단계를 진행하시는 것을 권장드립니다. DBMS 툴은 DBeaver를 이용하며, DB는 MariaDB를 이용합니다. (MariaDB 설치하기) 화면 처리는 HTML5 기반의 자바 템플릿 엔진인 타임리프(Thymeleaf)를 사용합니다. 이전 글에서는 흔히 모달(Modal)이라고 불리는 레이어 팝업(Layer Popup)을 이용해서 기존에 등록된 댓글을 수정하는 기능을 구현해 보았습니다. 이번에는 댓글 CRUD의 마지막 단계인 댓글 삭제 기능을 구현해 보겠습니다. 1. 댓글 API 컨트롤러(Controller) - 메서드 추가하기 우선 CommentApiController에 다음의 메서드를 추가해 주세요. // 댓글 삭제 @DeleteM.. 2023. 4. 24.

티스토리툴바