웹개발자의 기지개

상기 화면과 같이 2개의 에디터를 다중으로 설치하고자 한다. [글쓰기] 韓 中 상기 화면과 같이 2개의 에디터를 동시에 적용하는 소스이다. 녹색 색깔의 소스 부분을 중점적으로 살펴 보면 어렵지 않을 것이다. [글수정]

앞전 글쓰기파일의 포스팅 글을 같이 비교하면서 살펴 보기 바란다. 지금은 글 수정 파일의 소스이다.

이번에는 많이들 사용하는 네이버 스마트에디터2를 달아 보도록 한다. 공개된 관련 소스 링크 주소는 https://github.com/naver/smarteditor2/releases/tag/v2.8.2.3 이다. 내용중에 zip로 압축된 Source code(zip) 항목을 클릭하여 다운받으면 된다. 압축을 풀고, 파일을 올려보자. 나의 경우 /smarteditor2/폴더를 root에 만들고 이안에 옮겨놓았다. 그리고, 위 화면의 upload 폴더에 chmod 707 쓰기 권한을 두도록 하자. 이 upload는 사진 첨부할때 업로드되는 폴더이다. 그리고 아래 화면과 같이 /smarteditor2/sample/photo_uploader/ 폴더내 소스확인 및 수정이 필요한 부분을 살펴보자. 화면과 같이 fi..

이번에는 다음지도 api 를 이용해서, navigator.geolocation 를 통하여 현재 GPS 좌표 정보를 지도 그래픽을 이용해서확인해 보도록 하자. 일단 먼저, https 보안서버 주소가 되어야 한다. Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다. 참고해주세요.

javascript 상의 navigator.geolocation 으로 현재 GPS 좌표값 얻는 소스를 다시 한번 살펴봤다. 실행시키면, 태그안에 alert("첫번째로 실행"); 부분이 실행된다. 주의할점은 태그내 navigator.geolocation.getCurrentPosition 함수가 먼저 나옴에도 불구하고, 태그내 alert() 내용부터 먼저 실행된다는 점이다. 태그안의 navigator.geolocation.getCurrentPosition 의 함수가 실행된다. 태그내 본문의 내용이 로딩된다.

자바스크립트 자체 객체인 navigator.geolocation 으로 웹브라우저상으로도 직접 현재 GPS 좌표값을 얻을 수가 있다.다만, 과거엔 같은 이 객체녀석으로 좀더 손쉽게 좌표값을 무난하게 알 수 가 있었는데, 지금은 보안기능 강화, 개인정보 등등해서 보다 엄격해진 덕분인지 그 좌표값을 얻는 방법이 조금더 까다로워졌다. 일단 우선적으로는 http 기본 80 프로토콜으로는 이 객체를 이용해서 열람을 할 수가 없다. 무조건 https 보안서버를 주소여야 하고, 크롬 브라이져의 경우 GPS 위치정보 허용 기능을 켜야 정상적으로 좌표값을 볼 수 가 있다. 위 소스상에서 enableHighAccuracy: false 를 두고, timeout: 10000, 10초정도로 딜레이를 넉넉하게 주면 현재 GPS 좌..

상기 이미지 예제중에 왼쪽에 체크 박스가 있다. 그리고, 이를 삭제하는 휴지통 아이콘이 있는데 체크한것만 해당 자료를 삭제하고 싶다.위의 소스를 대략적으로 중요 부분만 간추리면 아래와 같다. 위 소스를 보면 document.getElementByName("chk[]") 요놈이 핵심이다.적어도 하나는 체크하면 boo 값을 true 로 주고, 정상적으로 삭제 처리 페이지로 post 값 넘겨 주면 된다. 그리고, name 값을을 chk[] 라면 형태로 준 이유는 php의 경우 chk[] 라고 name 입력값을 여러개 주면다음 처리페이지에서 체크박스에 체크한것만, chk 배열값으로 넘어온 값들을 모을 수 있다. (*) 처리 페이지 내용 소스 [ php 의 경우 ] $delArr = $_POST[chk]; for..

다음지도를 바탕으로 현재 GPS 위치상에서 반경 2km이내에 업체들 마커를 화면에 찍고, 현재 위치에서 각각의 거리를 구하고, 도보 및 자전거로 이동거리를 구하는 소스를 작업해 봤다. 이 소스는 실무에서 참 유용하게 쓰일것으로 생각된당 ^^ 다음지도 - 현재 GPS 상에서 반경 2km 이내의 업체들 거리, 도보/자전거 이동시간 구하기 [ 결과화면 ]