티스토리 뷰
SpringBoot와 Thymeleaf를 이용해서 간단하게 카카오톡 클론 코딩하는 방법에 대해 알아보겠습니다.
- 환경설정 : [SpringBoot] Thymeleaf를 이용한 카카오톡 클론 코딩 - 1
- 서버 소스작성 : [SpringBoot] Thymeleaf를 이용한 카카오톡 클론 코딩 - 2
- 화면 소스작성 : [SpringBoot] Thymeleaf를 이용한 카카오톡 클론 코딩 - 3
- Github : 카카오톡 클론 코딩 Git
1. 개발환경
- SpringBoot
- 버전 : 3.1.5
- JDK : 17
- IDE : IntelliJ
- MariaDB
- 버전 : 11.1.2
- Redis
- 버전 : 3.0.504
2. DB 테이블 생성
CREATE TABLE `ROOM_INFO` (
`ROOM_ID` varchar(100) NOT NULL COMMENT '방번호',
`ROOM_NAME` varchar(100) NOT NULL COMMENT '방이름',
PRIMARY KEY (`ROOM_ID`)
);
CREATE TABLE `ROOM_MEMBER` (
`ROOM_ID` varchar(100) NOT NULL COMMENT '방번호',
`MEMBER_ID` varchar(100) NOT NULL COMMENT '참가자',
PRIMARY KEY (`ROOM_ID`,`MEMBER_ID`)
);
CREATE TABLE `USER_LOGIN_HISTORY` (
`USER_ID` varchar(20) DEFAULT NULL COMMENT '사용자 아이디',
`IP_ADDR` varchar(20) DEFAULT NULL COMMENT '접속IP',
`REG_DT` datetime DEFAULT current_timestamp() COMMENT '등록일'
);
CREATE TABLE `USER_MASTER` (
`USER_ID` varchar(20) NOT NULL COMMENT '사용자ID',
`USER_PW` varchar(32) NOT NULL COMMENT '사용자 비밀번호',
`USER_NAME` varchar(20) DEFAULT NULL COMMENT '사용자명',
`PW_ERR_CNT` int(11) DEFAULT 0 COMMENT '비밀번호 오류 횟수',
`REG_DT` datetime DEFAULT current_timestamp() COMMENT '등록시간',
`MOD_DT` datetime DEFAULT current_timestamp() COMMENT '수정시간',
`PROFILE_PATH` varchar(100) DEFAULT NULL COMMENT '회원프로필 사진 경로',
`STAT_MSG` varchar(100) DEFAULT NULL COMMENT '상태메시지',
PRIMARY KEY (`USER_ID`)
);
CREATE TABLE `USER_FRIEND` (
`USER_ID` varchar(20) NOT NULL COMMENT '사용자ID',
`FRIEND_ID` varchar(20) NOT NULL COMMENT '친구ID',
`BOOKMARK_YN` varchar(1) NOT NULL DEFAULT 'N' COMMENT '즐겨찾기여부',
`REG_DT` datetime NOT NULL DEFAULT current_timestamp() COMMENT '등록일',
PRIMARY KEY (`USER_ID`,`FRIEND_ID`)
);
3. 프로젝트 생성
3.1. build.gradle
plugins {
id 'java'
id 'org.springframework.boot' version '3.1.5'
id 'io.spring.dependency-management' version '1.1.3'
id 'war'
}
apply plugin: 'war'
bootWar {
archiveBaseName = '-'
archiveFileName = 'ROOT.war'
archiveVersion = "1.0.0"
}
group = 'com.myapi'
version = '0.0.1-SNAPSHOT'
java {
sourceCompatibility = '17'
}
repositories {
mavenCentral()
}
dependencies {
// basic
implementation 'org.springframework.boot:spring-boot-starter'
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-aop'
implementation 'org.springframework.boot:spring-boot-starter-validation'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
providedCompile 'javax.servlet:javax.servlet-api:4.0.1'
implementation 'jakarta.servlet:jakarta.servlet-api'
implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.0.2'
annotationProcessor 'org.projectlombok:lombok'
compileOnly 'org.projectlombok:lombok'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
// DB
implementation 'org.springframework.boot:spring-boot-starter-data-redis:3.1.5'
implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:3.0.0'
implementation 'org.mariadb.jdbc:mariadb-java-client:3.0.4'
// websocket
implementation 'org.springframework.boot:spring-boot-starter-websocket'
// util
implementation 'com.google.code.gson:gson:2.9.0'
implementation 'com.fasterxml.jackson.core:jackson-databind:2.12.7.1'
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
}
tasks.named('test') {
useJUnitPlatform()
}
3.2. application.yml
spring:
thymeleaf:
enabled: true
cache: true
prefix: classpath:templates/
suffix: .html
check-template-location: true
server:
port: 32000
servlet:
encoding:
charset: UTF-8
mybatis:
config-location: classpath:config/mybatis-config.xml
mapper-locations: classpath:mapper/*.xml
---
spring:
config:
activate:
on-profile: "local"
datasource:
driver-class-name: org.mariadb.jdbc.Driver
url: jdbc:mariadb://127.0.0.1:3306/mymsg?useUnicode=true&characterEncoding=utf8
username: admin
password: admin
log:
file-path: D:\logs\mymsg\mymsg.log
data:
redis:
port: 6379
host: 127.0.0.1
password: admin
websocket:
path: 127.0.0.1:38080
file:
profile-path: file:///D:/zeroBin/profile/
profile-upload-path: D:/zeroBin/profile/
---
# cafe24 사용
spring:
config:
activate:
on-profile: "prod"
datasource:
driver-class-name: org.mariadb.jdbc.Driver
url: #운영URL#
username: #운영ID#
password: #운영PW#
log:
file-path: /dudqls3kr/logs/mymsg/mymsg.log
data:
redis:
port: 22529
host: dudqls4kr.cafe24.com
password:
websocket:
path: 210.114.6.196:32000
file:
profile-path: /dudqls3kr/image/profile/
profile-upload-path: /dudqls3kr/image/profile/
4. 프로젝트 구조
mymsg-api
└─src
├─main
│ ├─generated
│ ├─java
│ │ └─com
│ │ └─myapi
│ │ └─mymsgapi
│ │ │ MymsgApiApplication.java
│ │ │
│ │ ├─comm
│ │ │ ├─annotation
│ │ │ │ LoginCheck.java
│ │ │ │
│ │ │ ├─aop
│ │ │ │ LogAop.java
│ │ │ │
│ │ │ ├─config
│ │ │ │ CacheConfig.java
│ │ │ │ RedisConfig.java
│ │ │ │ WebConfig.java
│ │ │ │ WebSockConfig.java
│ │ │ │
│ │ │ ├─constants
│ │ │ │ Constants.java
│ │ │ │
│ │ │ ├─exception
│ │ │ │ ApiExceptionAdvice.java
│ │ │ │ ApiExceptionEntity.java
│ │ │ │ ApiResult.java
│ │ │ │ YbBizException.java
│ │ │ │
│ │ │ ├─filter
│ │ │ │ MessageFilter.java
│ │ │ │
│ │ │ ├─fundamental
│ │ │ │ YBMap.java
│ │ │ │
│ │ │ ├─handler
│ │ │ │ ChatHandler.java
│ │ │ │
│ │ │ ├─interceptor
│ │ │ │ HttpSessionInterceptor.java
│ │ │ │ LoginCheckInterceptor.java
│ │ │ │
│ │ │ ├─session
│ │ │ │ SessionAdvice.java
│ │ │ │ SessionKeys.java
│ │ │ │ SessionStore.java
│ │ │ │
│ │ │ ├─types
│ │ │ │ CertType.java
│ │ │ │ ExceptType.java
│ │ │ │
│ │ │ └─utils
│ │ │ CryptoUtil.java
│ │ │ DateUtil.java
│ │ │ HttpRequestUtil.java
│ │ │ ListUtil.java
│ │ │ MapUtil.java
│ │ │ ObjectUtil.java
│ │ │ SessionUtil.java
│ │ │ StringUtil.java
│ │ │ SystemUtil.java
│ │ │
│ │ ├─contoller
│ │ │ ├─chat
│ │ │ │ │ ChatApiController.java
│ │ │ │ │ ChatViewController.java
│ │ │ │ │
│ │ │ │ └─dto
│ │ │ │ ChatUserInfoReq.java
│ │ │ │ ChatUserJoinReq.java
│ │ │ │ ChatUserJoinRes.java
│ │ │ │ RoomNameChangeReq.java
│ │ │ │
│ │ │ ├─comm
│ │ │ │ │ CnstController.java
│ │ │ │ │ ErrorCommController.java
│ │ │ │ │ MainController.java
│ │ │ │ │
│ │ │ │ └─dto
│ │ │ │ BaseRequest.java
│ │ │ │ BaseResponse.java
│ │ │ │ BaseUpdateResponse.java
│ │ │ │ CnstRequest.java
│ │ │ │ CnstResponse.java
│ │ │ │
│ │ │ └─user
│ │ │ │ UserApiController.java
│ │ │ │ UserViewController.java
│ │ │ │
│ │ │ └─dto
│ │ │ AddFriendReq.java
│ │ │ FindFriendReq.java
│ │ │ FindFriendRes.java
│ │ │ UpdateBookmarkReq.java
│ │ │ UpdateStatMsgReq.java
│ │ │ UserLginHistReq.java
│ │ │ UserLginReq.java
│ │ │ UserRegsReq.java
│ │ │
│ │ ├─dao
│ │ │ ├─comm
│ │ │ │ CommDAO.java
│ │ │ │
│ │ │ ├─room
│ │ │ │ RoomDAO.java
│ │ │ │
│ │ │ └─user
│ │ │ UserDAO.java
│ │ │
│ │ ├─model
│ │ │ │ ChatMessage.java
│ │ │ │ MemberInfo.java
│ │ │ │ RoomInfo.java
│ │ │ │ RoomMember.java
│ │ │ │ UserFriendInfo.java
│ │ │ │ UserLginInfo.java
│ │ │ │ UserProfileInfo.java
│ │ │ │ UserRoomInfo.java
│ │ │ │
│ │ │ └─vo
│ │ │ RoomVO.java
│ │ │ UserLginHistVO.java
│ │ │ UserVO.java
│ │ │
│ │ └─service
│ │ ├─chat
│ │ │ ChatService.java
│ │ │
│ │ ├─comm
│ │ │ CnstService.java
│ │ │
│ │ ├─redis
│ │ │ RedisService.java
│ │ │
│ │ └─user
│ │ UserService.java
│ │
│ └─resources
│ │ application.yml
│ │ logback-spring.xml
│ │
│ ├─config
│ │ mybatis-config.xml
│ │
│ ├─mapper
│ │ CommMapper.xml
│ │ RoomMapper.xml
│ │ UserMapper.xml
│ │
│ ├─message
│ │ errorMsg.properties
│ │
│ ├─properties
│ │ constants.properties
│ │
│ ├─static
│ │ │ favicon.ico
│ │ │
│ │ ├─css
│ │ │ bigScreen.css
│ │ │ chat.css
│ │ │ chats.css
│ │ │ find.css
│ │ │ friends.css
│ │ │ globals.css
│ │ │ header.css
│ │ │ login.css
│ │ │ mobile.css
│ │ │ modal.css
│ │ │ more.css
│ │ │ navigation.css
│ │ │ profile.css
│ │ │ reset.css
│ │ │ search-bar.css
│ │ │ styles.css
│ │ │
│ │ ├─images
│ │ │ avatar.png
│ │ │ chatting_room.png
│ │ │ chat_room.png
│ │ │ group.png
│ │ │ kakaoFriends.png
│ │ │ kakaoStory.png
│ │ │ path.png
│ │ │ profile_bg.png
│ │ │
│ │ ├─js
│ │ │ common.js
│ │ │ jquery-3.7.1.min.js
│ │ │
│ │ └─profile
│ └─templates
│ │ index.html
│ │
│ ├─common
│ ├─error
│ │ error.html
│ │
│ ├─layout
│ │ └─fragments
│ │ footer.html
│ │ head.html
│ │ header_top.html
│ │
│ └─views
│ ├─chat
│ │ chat.html
│ │ chats.html
│ │ find.html
│ │ more.html
│ │ roomInfo.html
│ │ userProfile.html
│ │
│ └─user
│ chngPw.html
│ login.html- 참고로 프로젝트 구조는 cmd 창을 열고 tree /f 명령어를 입력하여 추출할 수 있습니다.
주요 코드는 다음 포스팅으로 이어집니다.
감사합니다.
'프레임워크 > SpringBoot' 카테고리의 다른 글
| [SpringBoot] Thymeleaf를 이용한 카카오톡 클론 코딩 - 3 (0) | 2024.08.07 |
|---|---|
| [SpringBoot] Thymeleaf를 이용한 카카오톡 클론 코딩 - 2 (0) | 2024.08.07 |
| [SpringBoot+Next.js] JWT 토큰 인증 예제 (0) | 2024.08.01 |
| [SpringBoot] h2 consloe localhost에서 연결을 거부했습니다. (0) | 2024.07.31 |
| [SpringBoot] GraphQL 간단한 예제 (0) | 2024.06.19 |
최근에 올라온 글
- Total
- Today
- Yesterday