제작근황
주식 sns 프로젝트를 하느라 velog 글을 쓰는 것이 조금 뜸했었다. 오늘부터 조금씩 작업 내용을 올리려고 한다.
진행상황
대부분이 완성됐고 현재 고객 센터 부분의 디자인만 남아있는 상태이다.
페이지 구성 및 어려웠던점 리뷰
로그인페이지
$(document).ready(function() {
$("#message").slideUp();
$("#loginBtn").click(function() {
var action = $("#loginForm").attr('action');
var form_data = {
id: $("#ID").val(),
password: $("#PASSWORD").val(),
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(Integer) {
if (Integer == 1) {
location.href = "/community/community"
} else if (Integer == 0) {
$("#message").html("<p style='color:red'>아이디 또는 비밀번호가 잘못되었습니다.</p>");
$("#message").slideDown('slow');
}
},
error: function(request, error) {
alert("fail");
alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
return false;
});
});로그인 방식은 ajax를 이용해 데이터를 가져오는 방식을 이용했다. 로그인 실패 시 아래에 작은 글씨로 로그인 실패라는 슬라이드 문자가 나온다.
피드 페이지
$(window).scroll(function(e) {
if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
//문서 크기와 윈도우 크기를 이용해서 스크롤을 끝까지내리면 아래의 ajax 통신을 통해서 글을 불러옴
fpage = fpage + 10;
epage = epage + 10;
ajaxdata = {
"fpage": fpage,
"epage": epage,
"search": search
};
$.ajax({
type: "POST",
url: ajaxurl,
dataType: "json",
data: ajaxdata,
success: function(data) {
for (var i = 0; i < data.length; i++) {
var dynamicTag = null;
if (data[i].user_like == 0) {
dynamicTag = .....'; //내용추가 생략
}
$("#contentList").append(dynamicTag);
if (data[i].img != 0) {
var len = data[i].imglist.length;
for (var j = 0; j < data[i].imglist.length; j++) {
var dyroll = '<li><div style="width:707px"> <img class="im" src="/imggg/' + data[i].imglist[j] + '"></div></li>'
var imgpage = "#r" + data[i].ID + " ul"
$(imgpage).append(dyroll);
var imgwidth = parseInt(len) * 707;
$(imgpage).css('width', imgwidth + "px")
if (len > 1) {
$(imgpage).next().css('visibility', 'visible'); //이미지 다음버튼 보이게
$(imgpage).prev().attr('check_result', len); // 이미지 이전버튼
}
}
}
}
},
error: function(request, error) {
alert("fail");
alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
}
});피드 페이지는 요즘 sns에서 사용하는 방법으로 ajax를 이용해 무한 스크롤 페이지를 구현해보았다. 처음에 10개 그 뒤로 스크롤 할 때마다 10개씩 불러오는 방식이다.
create or replace PROCEDURE insert_content_pr (v_userid IN users.user_id%TYPE,
v_content IN bbs.content%TYPE,
v_hash_title IN VARCHAR2,
v_hash_count IN NUMBER,
v_bbs_id OUT NUMBER)
IS
TYPE va_title IS varray(20) OF VARCHAR2(50);
TYPE va_id IS varray(20) OF NUMBER;
v_check_hash_id hashtag.hash_id%TYPE;
v_check_bbs_id bbs.id%TYPE;
title VA_TITLE := Va_title('', '', '', '', '','', '', '', '', '','', '', '', '', '','', '', '', '', '');
hashid VA_ID := Va_id(0, 0, 0, 0, 0,0, 0, 0, 0, 0,0, 0, 0, 0, 0,0, 0, 0, 0, 0);
BEGIN
IF v_hash_count != 0 THEN
BEGIN
FOR i IN 1..v_hash_count LOOP
Title(i) := Regexp_substr(v_hash_title, '[^#]+', 1, i);
END LOOP;
END;
BEGIN
FOR i IN 1..v_hash_count LOOP
BEGIN
SELECT hash_id
INTO v_check_hash_id
FROM hashtag
WHERE hash_title = Title(i);
Hashid(i) := v_check_hash_id;
EXCEPTION
WHEN no_data_found THEN
v_check_hash_id := hashtag_seq.NEXTVAL;
INSERT INTO hashtag
VALUES (v_check_hash_id,
Title(i));
Hashid(i) := v_check_hash_id;
COMMIT;
END;
END LOOP;
END;
END IF;
BEGIN
v_check_bbs_id := bbs_seq.NEXTVAL;
INSERT INTO bbs
(id,
user_id,
content,
writedate
)
VALUES (v_check_bbs_id,
v_userid,
v_content,
SYSDATE
);
COMMIT;
v_bbs_id:=v_check_bbs_id;
END;
IF v_hash_count != 0 THEN
BEGIN
FOR i IN 1..v_hash_count LOOP
INSERT INTO bbs_hash
(hash_id,
bbs_id,
hash_bbs_id)
VALUES (Hashid(i),
v_check_bbs_id,
bbs_hash_seq.NEXTVAL);
COMMIT;
END LOOP;
COMMIT;
END;
END IF;
COMMIT;
END;해시태그와 글쓰기 부분을 어떻게 할지 고민하다가 두 번에 나누어서 sql 문을 사용하는 방법도 있었지만 oracle 프로시저도 복습할 겸 한 번의 db 통신으로 글과 프로시저를 모두 저장할 수 있도록 프로시저를 만들어보았다
자세히 보기창을 클릭하면 다음과 같이 modal 창이 띄워지면서 댓글과 글의 세부정보가 나온다. 댓글도 마찬가지로 무한 스크롤 방식을 이용했다.
추후 리뷰내용
spring 부분의 컨트롤러 부분을 자세히 리뷰하고 테스트 코드에 대한 리뷰를 할 예정이다
Test로 학습 하기