자바스크립트로 특정 오브젝트의 display속성을 none이나 block으로 바꿔줌에 따라서 페이지를 리프레쉬하지 않고도 내용을 숨기거나 보여줄 수가 있습니다. 많은 블로그에서 지금도 사용하고 있는 방식이죠.
저도 옛날부터 네코보드에서 <hdn>이라는 자체태그를 만들어서 클릭으로 게시물 내용을 숨기고 보여주는 기능을 이용했었죠. 근데 문제는 이게 크롬에서 써보니까 먹통이란거였습니다.
[1] 해결방법 시도
여기저기 찾아봤지만 대부분의 사람들은 이 경우 갖는 문제가 tr태그의 사용인데 저는 span을 사용하기 때문에 여기에 해당하지 않고, 그 외의 경우도 document.getElementById 를 이용함으로써 해결되는 것 같지만 저는 해당되지 않는 문제인듯해서 결국 실패했습니다.
[2] 추론
사실 저는 자바스크립트를 제대로 배운적도 공부한적도 없고 대략 경험과 다른 언어에서의 지식으로 쓰는 것이라서 여러가지 시도를 못해본다는 게 안타깝습니다만.
일단 이래저래 부딪혀보다가 발견한 건 특정한 용도에서만 먹통이 된다는 거였습니다.
네코보드는 자바스크립트를 이용한 display속성 조정을 두 가지 용도로 사용하는데,
하나는 관리자모드의 글쓰기 폼에서 예약글쓰기 모드를 체크할 경우이고
또 하나는 게시물 본문에서 <hdn>태그를 이용한 보이기-감추기 기능입니다.
크롬에서는 신기한 게 전자에서는 작동이 되고 후자는 작동이 안 됩니다.
여기서 두 개의 함수를 보면
전자의 경우는
function check_chckBox()
{
var confirmChecked = document.getElementsByName("reserve_check");
if(confirmChecked[0].checked == true)
{
reserve_form.style.display = 'block';
} // end if(confirmChecked[0].checked == true)
else
{
reserve_form.style.display = 'none';
} // end else
} // end function check_chckBox()
이고,
후자의 경우는
function hidden(hdn)
{
if(hdn.style.display == 'none')
{
hdn.style.display = 'block';
} // end if(hdn.style.display == 'none')
else
{
hdn.style.display = 'none';
} // end else
} // end function hidden(hdn)
입니다. 전 두 가지 함수가 별로 다르지 않다고 생각하기는 합니다만 음.
생각해볼 수 있는 원인은
첫 번쨰로 크롬브라우저 및 자바스크립트에서 특정 객체로 접근하는 방법을 확실하게 모른다.
인데 음...이건 솔직히 자바스크립트를 잘 몰라서 확실히 모르겠군요. 경험상 틀린 건 없는 것 같은데-_-;
두 번쨰 원인은 우연하게 찾아낸건데 우습게도 후자의 함수의 내용을 간단하게
function hidden(hdn)
{
alert("확인");
} // end function hidden(hdn)
이렇게 바꾸어도 onclick이벤트에서 경고창이 안뜬다는 것이지요.
(참고로 IE에선 잘 돌아가지요)
그래서 크롬브라우져에서 자바스크립트의 onclick 이벤트가 안 먹히거나 혹은 작동방식이 바뀌었나도 고민해봤지만 다른 부분의 이벤트는 잘 돌아가기 때문에 아닌 것 같고...
그래서 생각을 해본 게 게시물이 브라우저에 출력되는 과정에서 자바스크립트 함수를 인식하는 순서가 인터넷 익스플로러와 크롬이 다른 것이 아닌가 하는겁니다.
네코보드는 <hdn>태그를 아래와 같이 인식합니다.
<hdn>타이틀명</hdn><hidden>내용</hidden>
이건 아래와 같죠.
<a href='#hdn' onclick='javascript:hidden(태그번호);return false;' style='text-decoration:underline;'>타이틀명</a><span name=태그번호 id=태그번호 style='display:none;'>내용</span>
DB에는 위의 형태로 저장이 되어있다가 브라우저에 뿌려줄 때 DB에서 읽어온 후 아래 형태로 변환이 됩니다.
참고로 작동하는 전자의 경우는
<input type='checkbox' name='reserve_check' onclick='javascript:check_chckBox();'>
그냥 이렇게 되어있지요.
저기 있는 태그번호란건 글 번호와 hdn태그와 함께 써준 숫자등을 통해서 만들어진 화면에 보이는 hdn태그의 고유번호를 말하는건데 따로 저장이 되는 게 아니라 DB에서 읽어온 후 브라우저에 보여질 때 만들어지는 변수입니다.
전자가 작동을 하고 후자가 (아주 간단한 함수로 바꾸어도) 작동을 안 한다는 것은 호출자체가 안 된다는 것 같은데요. 똑같은 onclick이벤트인데 작동자체가 안 된다는 것은 DB에서 읽어온 시점에서 문장이 완성이 되어있는 것과 DB에서 읽어온 후에 변수나 이벤트를 다시 변환해서 만들어주는 것의 차이가 아닐까!!! 싶기도 합니다만...
...제가 갖고 있는 상식선에서는 DB에서 읽어온 후에 그걸 그냥 뿌려주나 약간의 변환 후에 뿌려주나 결국에 뿌리는 시점에서는 같기 때문에 차이가 없어보이는데 대체 뭐가 문제인거야ㅠ_ㅠ
이 후에 귀찮기도 하고 2년만에 보는 PHP라 (역시 귀찮아서) 테스트도 안 해보고 그냥 암튼 안 되네요. 후...그냥 답답하군요. 나중에 시간이 있으면 다시 파봐야죠.
이번 사태에서 특정 브라우저 등에 적응이 되어있는 것이 프로그램 개발에서 얼마나 위험한 것인가를 잘 알 수 있었습니다. IE에 적응할 데로 적응해버리니 그냥 모든 지식이 IE에서 통하는 걸로만 되어있군요. 그나마 웬만하면 표준에 맞춰서 코딩을 해서인지 아니면 단순해서인지 암튼 다른 문제가 없다는 게 다행입니다.
--------------------------
[새로운 사실 발견 후 메모]
카테고리 쪽으로 가서 단일 게시물 출력을 한 후 hdn태그를 작동시켜보면 작동됨.
단, 확장모드인 hdn+번호 는 작동을 안 할 뿐만 아니라 하이퍼링크 자체가 없어졌음.
이는 아마도 메인에서 보여주는 게시물 리스트와 카테고리 단일 게시물 출력 시 귀찮아서 대충 해놓은 컨텐츠 내 스트링 변환조건의 차이인 것 같은데 나중에 다시 파보자.
근데 왜 익스플로러에선 되고 크롬은 안 되지?-_-
---------------------------
버그 잡았습니다.
근데 제가 잘 모르는 부분이라서 찾아봐야할듯...
우선 문제가 뭐였냐면 <a>태그의 사용에 있었던 것 같은데요.
기존에
a href='#hdn' onclick='javascript:hidden(태그번호);return false;'
로 되어있던 것이 익스플로러에서는 문제 없이 돌아갔는데
크롬에서는 아래의 에러메시지가 뜹니다.(크롬 디버거를 뒤늦게라도 안 것에 감사를....)
Uncaught TypeError: boolean is not a function
솔직히 정확히 어떤 에러인지도 모르겠고 어떤 원리로 에러가 발생했는지는 아직 모르겠습니다만,
기존의 a href='#hdn' onclick='javascript:hidden(태그번호);return false;' 를
a href='javascript:hidden(태그번호);' 이렇게 고치니 에러가 잡히는군요.
작동도 잘 하구요.
우연히 다른 파일에서 딱 한 라인만 위와 같이 다르게 쓴 것이 해결의 실마리가 되었네요.
온클릭이벤트로 호출을 안하고 href뒤에 바로 붙이니 해결이 되었는데,
사실 저게 href뒤의 #hdn가 태그번호가 와야하는데 옛날에 귀찮아서 제대로 안 만들었는데 그것때문인가 싶어서 고쳐보았습니다만.
a href='태그번호' onclick='javascript:hidden(태그번호);return false;'
이렇게 href의 위치를 제대로 고쳐줘도 작동안하는군요.
결국 온클릭이벤트가 아니라 href로 자바스크립트를 직접 호출하라는건데 왜 그런거지?-_-;;;
---------------------
추가메모 : 그 동안 거의 쓰는 일이 없어서 무시했었는데 다음에 고치거나 혹은 다시 만들게 되면 게시기능에 꼭 태그 사용 체크박스를 넣자. 태그 사용 안할 때 하나하나 lt;gt;쳐주는 것도 짜증난다-_-
----------------------
일단 현재까지 알아낸 것으로는 태그가 동적으로 생성되는 것과 연관이 있는듯한데.
jquery를 사용하면 금방 해결이 될 듯도 한데 새로 공부하긴 싫고 음...
라이브러리화 되어있더라도 그냥도 만들 수 있을텐데 음...
현재의 슈도프로토콜 방식은 표준이 아니기 때문에 가능하면 바꾸고 싶음.
고등학교 때부터 참 좋아하는 노래인 우토쿠 케이코(宇徳敬子)씨의 '빛과 그림자의 로망(光と影のロマン)입니다.
대게의 이런 느린 템포의 이런 류의 멜로디를 가진 노래는 좋아할 때 잠깐 반짝 좋고나서 다음에 들을 때면 그냥 '전에 좋아했었지'하고 넘어가는 게 대부분인데, 이 노래는 다시 들어도 '아 역시 정말 좋은 노래야'라고 생각하게 되는 곡인 것 같습니다. 개인적으로 정말 좋아하는 노래입니다. 원래 일본에 가면 종종 가라오케에서 불렀는데 이젠 마네키네코 노래방에 있어서 너무 좋아요>_<;; 여자보컬이라 높다는 것만 빼면(...)
안타깝게도 국내에는 별로 알려지지 않는 것 같더군요.
그러고보니 명탐정 코난의 언젠가의 엔딩테마로도 쓰인 듯 합니다.
사실 꼭 리뉴얼을 하려고 했던 것은 아니고 그냥 기능적인 부분을 좀 바꾸려고 한건데 어쩌다보니까 이렇게 되었네요. 이번에 바꾼 대부분은 입대하기 한참 전부터 생각하던 것이었는데 이제야 하게 되었군요.
프로필에도 쓴 것처럼 원래는 홈페이지를 이제 닫을까 고민을 많이 했습니다.
여기 오시는 분들께
'큰 사고가 있거나 제가 전과 많이 다르게 변하지 않는 한 홈페이지는 언제까지나 계속 운영할 것이다.'
라고 한 번씩은 말씀을 드렸던 것 같습니다.
그리고 이번에 나와서 계속 생각을 해봤는데 전이랑 많이 변한 것 같아서 이래저래 홈페이지를 비롯한 여러가지를 그만두려고도 했습니다만. 다들 꾸준히 관심을 가져주셔서 다시 해 볼 마음이 생겼군요:)
새로 바꾼 이름인 '추억의 상자'는 몇 년전부터 생각하던 이름입니다.
너무 흔해서 좀 더 괜찮은 게 없나 계속 생각을 했는데 무난하게 가는 게 좋을 것도 같더군요.
앞으로 시간을 조금씩 들이면서 이 곳에 그 동안의 기억이나 추억을 담아두고 싶습니다.
정문에도 써놓았지만 배너와 정문은 현재 임시 날림공사 상태입니다.
좀 괜찮게 바꾸려고 마음먹기도 했지만 스캐너 프린터에 이어서 타블렛님도 사망하신 것을 확인하고서 그냥 포기... 왜인지는 모르지만2년 동안 3종 셋이 다 끝장났군요.
BBS는 2년 전의 상태로 부활시켰습니다. 완벽한 일체형 홈페이지를 위해서 BBS도 만들기는 해야하는데 너무 귀찮네요. 뭐 5년 안에는 만들겠죠(??)
이번 리뉴얼에서 크게 바뀐 점이 있다면 게시물의 카테고리 분류입니다.
사실 글을 쓸 때 분류가 가능했던 것은 이걸 만든 초기부터 가능했는데 언제까지고 독립적인 게시판으로 쓰려고 하다보니까 메뉴에 포함은 안 시켰었죠. 근데 뭐 이래저래 홈페이지 일체형을 그냥 쓸까해서 초기부터 계속 유지해오던 프레임을 과감하게 버렸습니다.
이게 겉보기에는 별 거 안 변해보이지만 내부로 들어가면 원래 안 하려던 짓을 한거라서 소스는 더욱 누더기처럼 변하고 버그도 이것저것 생긴듯도 하고 2년만에 소스 다시 보느라고 후...
그리고 이번에 검색로봇 거부태그를 다 없앴습니다.
홈페이지가 검색이 가능해진다는 것인데 뭐 어떤 변화가 있을지는 저도 솔직히 잘 모르겠습니다. 그냥 더 이상 검색엔진을 거부하고 있는 것도 별로 생산적인 것 같지는 않아서 해봤네요.
오랫동안 자리를 비웠었는데 꾸준히 방문해주셔서 감사드립니다.
이제 다시 예전 정도 수준으로는 홈페이지를 돌려봐야겠네요.
블로그와 SNS가 판치는 이 세상에서 언제까지 살아남을지 모르겠습니다만@_@
덧. 아 그리고 카테고리 메뉴는 일부러 목록에 페이지를 안 나눠둔건데 혹시 쓰다가 불편하시면 말씀주세요. 참고하겠습니다.
