커뮤니티토픽게시판

1. 대댓글 이동 없이 작성하기

ajax로 불러올 수 없는 xe 스킨 구조상, 

include 된 파일을 이용해서 마치 ajax인 것처럼,

돔 구조를 소ㅑ라락 바꿔버리는 건,

참 개발자의 센스가 탁월한 거 같습니다.

 

기존 대댓글 쓰기가 페이지 이동 후 작성하는 방식이었는데

이걸 마치 ajax를 쓴것같이 include된 코멘트쓰기창에

돔 구조를 단순히 위치를 바꾸고 변수값을 바꿔주는 식으로 

이동없이 대댓글 쓰기를 만드셨더군요.

(어제 밤새 이거 분석했습니다. ㅠㅠ 스케치북 개발자님에 비하면 정말 제 실력이 한참 하수...)

 

비교해서 studio02님의 대댓글 쓰기의 경우 단순히 미리 폼값을 다 작성해놓고

단순히 디스플레이 해주는 식이었습니다. 이 정도는 그냥 보통 스킨 제작하는 방식이죠. (__);;

저도 여기까지 밖에 생각을 못해서 과연 이게 최선인가 싶어서 스케치북 소스를 뒤져봤습니다.. ㅠ

 

2. textarea의 자동 br 추가.

정말 스케치북님의 자바스크립트 코딩 실력은 대단한거 같아요.

카톡 형식으로 단순하게 가다보니 저도 댓글 입력창을 textarea로 구현했는데

문제가 띄어쓰기가 안된다는 거였죠. 정말 이걸 어떻게 구현하나 미루고 있었는데

1.을 구현하려고 코드를 찬찬히 보다보니깐..

 

input hidden name=content를 별도로 숨겨두고,

html 쓰기 기능도 y로 자동으로 해준 다음에,

textarea에 글을 쓰고 입력을 누르면

 

editorStartTextarea(1,"content","document_srl");

 

위 함수가 comment_form.html 에서 자동으로 실행되서

해당 함수 부분에서 

function editorStartTextarea(a, b, e) {
   var c = xGetElementById("editor_" + a), d = xGetElementById("htm_" + a).value;
   c.form.setAttribute("editor_sequence", a);
   c.style.width = "100%";
   editorRelKeys[a] = [];
   editorRelKeys[a].primary = c.form[e];
   editorRelKeys[a].content = c.form[b];
   editorRelKeys[a].func = editorGetContentTextarea;
   a = c.form[b].value;
   d && (a = a.replace(/<br([^>]*)>/ig, "\n"), "br" != d && (a = a.replace(/&lt;/g, "<"), a = a.replace(/&gt;/g, ">"), a = a.replace(/&quot;/g, '"'), a = a.replace(/&amp;/g, "&")));
   c.value = a
}

function editorGetContentTextarea(a) {
   var b = xGetElementById("editor_" + a), a = xGetElementById("htm_" + a).value, b = b.value.trim();
   a && ("br" != a && (b = b.replace(/&/g, "&amp;"), b = b.replace(/</g, "&lt;"), b = b.replace(/>/g, "&gt;"), b = b.replace(/\"/g, "&quot;")), b = b.replace(/(\r\n|\n)/g, "<br />"));
   return b
};

이렇게 자동으로 textarea의 내용을 띄어쓰기를 찾아서 자동으로 br을 붙여서 content에 실어보내더군요...

 

자바스크립트 고수라는게 참 -_-; 대단한 거 같습니다..

전 그동안 이런게 당연한 XE의 결과물일거라 생각했었는데요.

프론트엔드 분야가 중요해지면서, 새삼 너무 당연하다고 생각하고 사용했었었네요.

 

사실 이런 UI 적인 부분은 프론트엔드 영역인데, 

그동안 개발이란 것이 서버 백단에서만 이뤄지는 거라고 생각이 사실 컸었는데

프론트엔드 개발영역이 정말 진짜 중요하다는걸 스케치북 게시판이 만들어진지 7년이 지난 뒤에야 

쪼끔이나마 다시금 더 깨닫네요. ㅠ

 

프론트엔드 개발한다고 명함 낸건 폐기처분각이네요 ㅠㅠ

 

https://kpopbloging.tistory.com/59

https://ifuwanna.tistory.com/203

 

세상의 언어는 많이 바뀌고 생겨나고 하지만,

여전히 PHP와 JAVASCRIPT의 그늘에서 못 벗어나고

아직 그걸 제대로 못 해내고 있으니 저는 프로그래밍에는 재능이 없나보네요 ㅠ

 

 

글쓴이 eondcom

profile
이온디는 웹솔루션제작전문회사로써, 웹에 대한 전문적인 지식을 바탕으로 고객님들의 비즈니스를 브랜딩해드립니다. CMS(Contents Management System) 설치부터 사용까지 XpressEngine와 WordPress를 통해서 손쉽게 웹사이를 구축할 수 있게 도와드리고 있습니다. SEO, 반응형웹, 적응형웹 등 고객의 니즈를 반영한 다양한 웹솔루션 기술과 노하우로 온라인 비즈니스를 효율적으로 운영할 수 있습니다.

http://eond.com

#워드프레스 #XE #그누보드 #제로보드 #카페24 쇼핑몰 #우커머스 #Shopify #영카트 #누리고 #가비아퍼스트몰
#홈페이지제작의뢰상담전문.
  • profile
    잘하고 계시는데요 ㅎㅎ
    보고 배우려고 해도 넘 늦은건가 머리가 안 돌아가네요 ㅠㅠ
    지금까지 레이아웃 딱 3개 정도 만들어보고 더 이상 진전이 없어요 ㅠㅠ
  • ?

    충분히 잘하고 계십니다. 그리고 잘하실거라 생각하고 있구요. ^^