미니 프로젝트 회고
- JSP, Servlet을 이용한 웹페이지 제작 -
프로젝트 명 : 편마카세
프로젝트 진행 기간 : 23.10.10 ~ 23.10.19 (약 9일)
- 주어진 기간은 9일이지만, 화면 구성 / HTML / CSS 는 미리 만들어서 진행
프로젝트 인원 : 총 4명
내가 맡은 역할 : 게시글 등록/수정/디테일 페이지, 카카오톡 소셜 로그인
깃허브 : https://github.com/Yummsters/pyeonmakase
코드 분석
1. 게시판 등록 및 수정
* 게시판 등록 및 수정은 UI 및 기본적인 기능은 유사하며, 수정 시 기존 게시글에 대한 정보 가져오는 부분만 다름
[체크박스 및 내용 입력 필수 스크립트]
<script>
$(function() {
var store_num = 0;
var food_num = 0;
$("#register").submit(function (e) {
store_num = $("input[name='store']:checked").length;
food_num = $("input[name='food']:checked").length;
// 편의점 카테고리 선택 필수
if(store_num===0){
swal({
//swal 코드 생략
})
e.preventDefault();
return false;
}
// 음식 카테고리 선택 필수
if(food_num===0) {
swal({
// swal 코드 생략
})
e.preventDefault();
return false;
}
// 내용 입력 필수
var content = editor.getHTML();
content=content.replaceAll(' ','');
console.log(content);
if(content == "<p><br></p>"||content == "<p></p>"||content ==""||content == null) {
swal({
// swal 코드 생략
})
e.preventDefault();
return false;
}
$("#editorContent").val(editor.getHTML());
return true;
})
})
</script>- 게시글의 모든 내용을 필수로 입력해야 하야 했기 때문에 스크립트를 통해 각 아이디의 내용 여부를 확인하여, 비어있을 경우 submit이 되지 않도록 e.preventDefault() 설정
[토스트 에디터 코드]
<!-- 토스트 에디터 넣기 -->
<div id="content"></div>
<!-- TUI 에디터 JS CDN -->
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<script>
// 에터 객체 생성
const editor = new toastui.Editor({
el: document.querySelector('#content'), // 에디터를 적용할 요소 (컨테이너)
height: '600px', // 에디터 영역의 높이 값 (OOOpx || auto)
initialEditType: 'wysiwYg', // 최초로 보여줄 에디터 타입 (markdown || wysiwyg)
initialValue: '레시피를 작성해주세요.', // 내용의 초기 값으로, 반드시 마크다운 문자열 형태여야 함
previewStyle: 'vertical'
});
</script>
<!-- 토스트 에디터에 작성한 내용 디비 저장을 위한 div -->
<input type="hidden" name="editorContent" id="editorContent" value="">- 토스트 에디터 라이브러리 사용
(1) div를 통해 해당 div에 토스트 에디터 라이브러리를 적용
(2) 토스트 에디터에서 사용자가 작성한 HTML을 그대로 가져오는 getHTML()을 활용해 input #editorContent를 이용해 서버에 저장
* hooks을 이용하지 못하는 상태였기 때문에 이미지 삽입 시 링크의 길이가 길어져 테이블에서 content의 저장을 MediumText를 이용
[게시글 등록/수정 구현 gif]
https://drive.google.com/file/d/1zUf6fWV2uSbBYLbphYpQJMH_xncIbfkr/view?usp=share_link
https://drive.google.com/file/d/1Eofx8tTkYZg3Moy7MTGoHaXieRKrSmTt/view?usp=share_link
2. 게시판 상세페이지
[추천 및 찜하기 코드]
<script type="text/javascript">
// 추천하기 버튼 클릭
$(function(){
$('#recommand_bnt').click(function (){
// (1)추천하기 Servlet으로 연결
$.ajax({
url : 'recommand',
type : 'post',
dataType : 'json',
data : {'board_id': '<c:out value="${board.board_id}"/>'},
// (2) Servlet 실행 성공 시
success:function (response){
if(response.login === false){
swal({
// swal 코드 생략
}).then((result) => {
if (result) {
location.href = "login";
}
});
return false;
}
// (3) 버튼 이미지 변경
if(response.recommand_select){
$("#recommand_bnt").attr("src", "imgView?file=heart_fill.png")
}else{
$("#recommand_bnt").attr("src", "imgView?file=heart_empty.png")
}
$("#recommand_count").text(response.recommandCount);
},
error:function (error){
console.log(error)
}
})
})
})
</script>
- 추천하기와 찜하기 코드는 태그의 아이디 명 및 Servlet 이동 url만 다를 뿐 안의 로직 및 코드는 유사
- 추천하기 및 찜하기 버튼의 경우 사용자가 클릭할 때마다 새로고침 없이 바로바로 변경되어야 하기 때문에 ajax를 이용
(1) 추천하기/찜하기 버튼 클릭 시 Servlet으로 이동하여, 해당 게시글에 대한 추천/찜 여부를 서버에 저장
(2) Servlet 실행에 성공할 경우 response 값에서 로그인이 되어 있지 않은 경우 로그인 창으로 이동
(3) Servlet 실행에 성공할 경우 response 값에서 로그인이 되어 있던 경우 추천/찜하기 여부에 따른 이미지 변경(채움/비움)
[게시글 수정/삭제 버튼 클릭 코드]
* 게시글 수정의 경우 form 태그의 submit을 활용하여, formaction을 통해 Servlet으로 바로 이동
* 게시글 삭제의 경우 삭제에 대한 사용자의 확인을 받기 위해 스크립트 코드 이용
$(function(){
$("#board_delete").click(function (e){
console.log("삭제 진행");
e.preventDefault(); // (1)
swal({
title: '정말 삭제 하시겠습니까?',
icon: 'warning',
// (2)
buttons: {
confirm: {
// swal 코드 생략
},
cancel: {
// swal 코드 생략
}
}
}).then((result) => {
console.log(result);
if(result){
// (3)
$.ajax({
url : "board_delete",
type : 'get',
data : {'board_id': '<c:out value="${board.board_id}"/>'},
success:function (response){
console.log(response);
location.href="mainlist";
},
error:function (request, status, error){
console.log(error);
alert("code: " + request.status + " message: " + request.responseText + " error: " + error);
}
})
}
});
});
})(1) 삭제 여부에 대한 확인을 먼저 받아야 하기에 e.preventDefault()를 이용하여 submit을 막음
(2) 삭제 여부에 대한 확인/취소에 대한 response 받기
(3) response의 결과에 따라 삭제를 원할 경우 삭제 Servlet으로 이동
3. 카카오톡 소셜 로그인 / 회원 탈퇴
[카카오톡 로그인 코드]
<script type="text/javascript" src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
Kakao.init('${kakao.script.key}');
function kakaoLogin() {
// (1) 카카오톡 로그인 요청
Kakao.Auth.login({
// (2)로그인 요청 성공 시
success: function () {
// 카카오 API 요청
Kakao.API.request({
url: '/v2/user/me',
// (3) API 요청 성공 시
success: function (response2) {
var email = response2.kakao_account.email;
var nickname = response2.kakao_account.profile.nickname;
// (4) API의 정보를 이용해 서버 로그인 시도
$.ajax({
url: 'kakaoLogin',
type: 'post',
data: {'email': email, 'nickname': nickname},
dataType: 'json',
// (5) 서버 로그인 성공 시
success: function (response) {
console.log("로그인 성공")
// (6) 처음 로그인 시도인 경우 회원가입 후 로그인
if (response.signup === true) {
swal({
// swal 코드 생략
}).then((result) => {
if (result) {
location.href = "home";
}
});
return false;
}
// 처음이 아닌 경우 로그인만 진행
if (response.login === true) {
swal({
// swal 코드 생략
}).then((result) => {
if (result) {
location.href = "home";
}
});
return false;
}
},
// (5) 서버 로그인 실패 시
error: function (request, status, error, response) {
// swal 코드 생략
}
})
},
// (3) 카카오 API 요청 실패 시
fail: function (error) {
// swal 코드 생략
},
})
},
// (2)카카오톡 로그인 요청 실패 시
fail: function (error) {
// swal 코드 생략
},
})
}* 코드의 정렬의 경우, 편집으로 들어가면 잘 나오기에 수정 불가
[시연 gif]
카카오톡 소셜 로그인의 경우 크게 어려운 점은 없었는데, 로직을 간단히 설명하면 아래와 같다.
(1) 로그인 요청
(2) 시도에 성공할 경우 key 사용해 Kakao.API.request()에 접근해 로그인을 시도
(3) 로그인에 성공(동의)할 경우 카카오톡 안에 정보가 기록되며, api를 통해 받은 정보를 가져옴
(4) 서버에도 저장하기 위해 ajax를 이용해 내부 회원가입 로직을 거침
(5) 로그인 성공 후 alert 창(swal)을 띄운 후 메인 페이지로 이동
* 회원 탈퇴의 로직 또한 위와 동일
총 회고
1) Eclipse와의 협업의 어려움과 느낀점
: 팀원분들은 Eclipse를, 나는 InteliJ IDE를 사용하여 개발을 진행했는데 Eclipse의 환경을 InteliJ로 가져와 사용하는 것에 대한 설정이 따로 있었지만, Tomcat 설정/라이브러리 설정 및 적용에 대한 방식이 다르다보니 처음 Eclipse의 프로젝트를 가지고 와서 Import 한 이후, InteliJ의 환경으로 변경하는 과정에 대한 힘들었다.
하지만, 그 과정 속에서 톰캣 설정과 라이브러리 설정에 대한 경험을 통해 Eclipse의 개발 환경을 InteliJ로 가져오는 방식과 톰캣 설정에 대한 과정의 이해할 수 있었다.
2) Servlet/JSP의 의해
: 항상 드는 생각이지만 그냥 배울 때 보다는 프로젝트의 과정을 한 번 거치는 것이 새로 배우는 것에 대한 이해도가 높아지는 경험이 되었다.
아직 완벽하지 않고 많이 서툴기는 하지만 이번 프로젝트를 통해 Servlet/JSP의 활용, 서버의 기본적인 구동 방식(MVC 패턴), 스크립트의 사용, html/css의 활용에 대한 이해도가 이전보다는 높아진 경험이었다.
3) 깃허브 .gitIgnore 활용
: 이번 프로젝트에서는 충돌의 상황이 생겼을 때 해결하지 못했던 적이 많았었는데, 아직도 깃에 대한 이해가 헷갈리고 해결 방법에 대한 이해는 되지 않았지만 한 가지 깨달은 점이 존재하는데 그것은 바로 .class 파일에 대한 것이다.
초반, 깃이그노어에 class 파일에 대한 설정을 따로 하지 않아 함께 푸쉬가 된 상황이 발생하였고, 이후 merge하는 과정에서 class 파일에 대한 충돌이 존재했고, 해당 충돌을 해결하지는 못하였다. 그렇기에 class 파일은 커밋하면 안된다는 것과 이그노어 파일 설정에 대한 깨달음을 얻을 수 있었다.
4) 협업
: 프로젝트에서의 가장 중요한 점은 협업이 아닐까 싶은다. 이번 미니 프로젝트의 경우 일주일 프로젝트이기는 했지만 기획 및 html/css를 이용한 UI를 그리는 작업을 조금 일찍 시작하면서 다른 조에 비해 다른 팀원이 짠 코드에 대한 이해, 다양한 기술 구현 및 css에 대한 지속적인 수정이 가능했었다. 이는 팀원들 모두 프로젝트에 대한 열정과 의지가 있었기에 미리 기획하고 다양한 것을 시도해보는 것에 거리낌이 없어 서로가 잘 맞았던 결과가 아닐까 싶다.
* 협업이 잘 되었기에, 최종 프로젝트까지 지금의 조가 함께 가기로 결정!
'Kosta 교육' 카테고리의 다른 글
| [Day20 - DB] FK(FOREIGN KEY), DML : 데이터 조작어 (0) | 2023.09.07 |
|---|---|
| [이론 - DB] 데이터 모델링 (0) | 2023.09.07 |
| [Day19 - DB] 서브쿼리, Structure Query Language(DDL, DML, DCL, TCL) 기본 이론 (0) | 2023.09.06 |
| [Day18 - DB] 날짜 함수, 숫자 함수, GROUP BY, CASE, JOIN (0) | 2023.09.05 |
| [Day17 - DB] SELECT/FROM, WHERE, 문자열 함수 (0) | 2023.09.05 |