친구페이지

1. 친구 누르면 파티 보여주기 - 완료

2. 친구삭제 기능 - 완료

3. findFriend에서 enter 감지해서 함수 처리 - 완료

 

친구추가
1. 상대방이 검색으로  친구요청을 보낸다 -  완료!
-
 1) 친구요청에 이미 요청이 있는지 없는지 확인 - 완료 !
  =(테이블에 값이 있는지 확인)
 2). 친구목록에 있는지 없는지 확인 -완료
    없을경우 테이블에 요청을 저장한다. -완료
. 
2. 상대방이 수락을 누르면 - 완료
. 
수락을 눌렀을 때, 

 

accept 함수에서는 우선 request 값들을 validation을 한다.  
그다음에는 친구목록에 이미 저장되어있는지 아닌지 검증을 위한 작업을 한다.
 
그리고 검증이 끝나면, 

친구 테이블에 저장을 한다. from한 유저와 to받은 유저 두명을 각각 db에 저장시킨다. (서로서로 친구추가 되도록) - 완료

3. 거절을 눌렀을 때, 바로 request_from 받아온 값을 통해서 친구요청 테이블에 있는 요청을 삭제시키고 리프레쉬 - 완료

4. 기존 친구 삭제 가능

 

5. 내가 친구를 요청한 목록도 볼 수 있고, 취소도 할 수 있으면 더 좋을듯! - 완료!

 

OOO님이 참여중인 파티 / OOO님이 참여했던 파티 도 볼 수 있게 함.

 

코드 작성 중 발생한 문제들

 

#1

public interface FriendDAO {

/**
 * 아이디로 친구를 검색한다.
 */
@Select("SELECT * FROM member WHERE mid LIKE '%#{target}%' ")
List<MemberVO> searchId(String target) throws Exception;

 

이렇게 코드를 작성했는데 오류가 났다. MyBatis SQL쿼리는 바인딩을 제대로 해야 한다고 함.

 

#2

/**
 * 내가 보낸 친구 요청을 취소한다.  
 */
@Delete("DELETE FROM friend WHERE ffrom = #{ffrom} AND fto = #{fto} AND YN = 'N'")
int deleteRequest(FriendVO vo) throws Exception;

원래 (int ffrom, int fto) 이렇게 작성했었는데

MyBtis는 arguments를 1개밖에 받지 못한다는 사실을 늦게 기억해버렸습니다. 

VO가 왜 필요한지 알게되는군요.

 

@Param을 이용한 이런 방법도 있다. 

 

#3

partyVO의 날짜 타입이 String 인데 Date 타입으로 변경해서 (yyyy년MM월dd일) 포맷으로 변경해야 했다.

simpledateformat보다 더 쉬운 방법을 찾았다. : 자바스크립트의 Intl API

 

자바스크립트에서는 이러한 데이터 포맷팅 문제를 해결해주기 위해서 Intl API를 제공하고 있습니다. Intl API는 대부분의 모던 브라우저에서 지원되며 Node.js에서도 사용이 가능하기 때문에 다국어 지원을 하는 서비스에서 백엔드나 프론트엔드 가리지 않고 유용하게 사용할 수 있습니다.

 

예시)

 const koDtf = new Intl.DateTimeFormat("ko", { dateStyle: "long" });
undefined
> koDtf.format(new Date())
'2022년 3월 8일'

나는 아래처럼 활용했다,

 

 $(data).each(function(){

 //String을 date로 변환
const startToDate = new Date(this.startDate);
const endToDate = new Date(this.endDate);
// 년월일 포맷으로 변환
const koDF = new Intl.DateTimeFormat("ko", {dateStyle: "long"});
const startDate = koDF.format(startToDate);
const endDate = koDF.format(endToDate);

$("#detailView").empty();
str += "참여중인 파티 <br/>";
str +="<div data-mnum='"+this.pnum+"' class='detailBox'>";
str += "<img src='upload/party/"+this.partyImage1+"' />";
str += "파티이름 : "+this.pname;
str += "날짜 : "+startDate+" ~ "+endDate;
str += "장소 : "+this.sido;
str +="</div>"
$("#detailView").append(str);
});