개발블로그

HTML, CSS, JavaScript + Spring Boot + MyBatis + MySQL 으로 게시판 만들기 (6)안녕하세요! 이번 포스트에서는 게시판 애플리케이션에 추가적인 기능을 구현하고 최적화를 다루겠습니다.1. 게시글 검색 기능 추가게시글을 검색할 수 있는 기능을 추가하여 사용자가 원하는 게시글을 쉽게 찾을 수 있도록 하겠습니다.1.1 index.html 수정검색 입력 필드를 추가합니다. 게시판 게시글 작성 검색 1.2 scripts.js 수정검색 기능을 구현합니다.document.addEventListener("DOMCon..

HTML, CSS, JavaScript + Spring Boot + MyBatis + MySQL 으로 게시판 만들기 (5) 안녕하세요! 이번 포스트에서는 프론트엔드 디자인을 개선하고 추가 기능을 구현하는 과정을 다뤄보겠습니다. 1. 프론트엔드 디자인 개선 기존의 간단한 디자인을 개선하여 사용자 경험을 향상시키겠습니다. 스타일을 더욱 세련되게 만들고, 사용자 인터페이스를 향상시키기 위해 추가적인 CSS를 작성합니다. 1.1 styles.css 수정 기존의 CSS를 수정하여 더 나은 디자인을 구현합니다. body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0;}.contain..

HTML, CSS, JavaScript + Spring Boot + MyBatis + MySQL 으로 게시판 만들기 (4) 안녕하세요! 이번 포스트에서는 서버와의 통신을 개선하고 추가 기능을 구현하는 과정을 다뤄보겠습니다. 1. 게시글 수정 기능 추가 게시글 수정 기능을 추가하기 위해 HTML에 수정 버튼을 추가하고, JavaScript에 수정 기능을 구현합니다. 1.1 index.html 수정 게시글마다 수정 버튼을 추가합니다. 게시판 게시글 작성 1.2 scripts.js 수정 게시글 수정 기능을 구현합니다. document.addEventL..

HTML, CSS, JavaScript + Spring Boot + MyBatis + MySQL 으로 게시판 만들기 (3) 안녕하세요! 이번 포스트에서는 프론트엔드 개발을 시작하여 게시글을 작성하고 조회할 수 있는 화면을 구현하는 과정을 다뤄보겠습니다. 1. 프로젝트 구조 프론트엔드를 위한 HTML, CSS, JavaScript 파일을 프로젝트에 추가합니다. 기본적인 디렉토리 구조는 다음과 같습니다: src/├── main/│ ├── java/│ │ └── com/│ │ └── example/│ │ └── myboard/│ │ ├── MyboardApplication.java│ │ ├── con..

HTML, CSS, JavaScript + Spring Boot + MyBatis + MySQL 으로 게시판 만들기 (2)안녕하세요! 이번 포스트에서는 MySQL 데이터베이스 설정과 테이블 생성에 대해 다뤄보겠습니다. 이를 통해 게시판 애플리케이션이 데이터를 저장할 수 있는 환경을 마련할 것입니다.1. MySQL 데이터베이스 설정먼저, MySQL을 설치하지 않으셨다면 설치해주시기 바랍니다. 설치가 완료되면 MySQL을 실행하고, 데이터베이스와 테이블을 생성하겠습니다.2. MySQL 데이터베이스 생성MySQL 클라이언트나 MySQL Workbench와 같은 도구를 사용하여 MySQL 서버에 접속합니다. 접속 후, my_board라는 데이터베이스를 생성합니다.CREATE DATABASE my_board; ..

HTML, CSS, JavaScript + Spring Boot + MyBatis + MySQL 으로 게시판 만들기 (1)안녕하세요! 이번 포스트에서는 HTML, CSS, JavaScript, Spring Boot 3.3.1, MyBatis, MySQL을 사용하여 간단한 게시판 애플리케이션을 만드는 방법을 다뤄보겠습니다. 첫 번째 포스트에서는 프로젝트 설정과 기본 구조를 설정하는 과정을 설명하겠습니다.1. 프로젝트 개요우리는 Spring Boot와 MyBatis를 사용하여 백엔드를 구축하고, HTML, CSS, JavaScript를 사용하여 프론트엔드를 만들 것입니다. MySQL을 데이터베이스로 사용하여 게시글 데이터를 저장합니다.2. 개발 환경 설정2.1 Java 및 IDE 설치먼저 Java와 개발에 ..