웹 > HTML/CSS/JAVASCRIPT

[JAVASCRIPT] jquery 를 이용하여 data 속성을 처리

과거 데이터 처리는 일반적으로 form 을 이용하여 처리하였으나 요즘은 ajax 처리가 많아지면서 사용자로부터 입력이 없는 데이터처리는 form 이 아닌 스크립트로 많이 처리한다. 하지만 스크립트에 PHP로 데이터처리를 하다보면 소스코드가 지저분하게 보여질 수 있고 공통파일 처리도 어려울 수 있기에 각 정보를 특정 태그에 data 속성으로 담아주고 처리하는···

[JAVASCRIPT] JQUERY의 AJAX 를 이용한 데이터 전송

AJAX의 경우 페이지 변경 없이 서버가 데이터 전송을 할 수 있는 수단이다. 사용하는 방법에 따라 퀄러티 높은 개발을 완성할 수 있는 장점이 있는 방면 URI HISTORY 처리와 같은 페이지 갱신에 대한 처리가 번거롭다는 단점도 가지고 있다. 위에서 말한 단점의 경우 페이지 AJAX가 단순 데이터 전송 수단이 아닌 페이지 이동 수단으로 활용할 경우 예를···

JAVASCRIPT&JQUERY 를 이용한 FORM의 submit 제어

작업을 하다보면 FORM 은 입력형태가 있는 페이지에서 많이 사용이된다. 요즘은 AJAX 를 통해 처리하기때문에 FORM 데이터가 흐름도가 기본형태를 많이 벗어나지만아직까지는 기본형태를 통해 많이 사용되기 때문에 반드시 숙지하고 가는게 좋다. 일반 FORM 연결 <form id="form" method="post"> <input type="···

에디터 2차 변경 최종 완료 2/10 - Tinymce 에디터로 변경

이번에 에디터를 또 변경하였다. 변경된 에디터는 Tinymce 5 버전대로 스팩은 현존하는 웹 에디터중 최상급으로 생각한다. 이전에 사용했던 에디터는 다음 에디터였는데 티스토리 블로그와 동기화해볼 목적에서 사용했는데 어느날 티스토리 들어가보니 에디터가 Tinymce 로 변경이 되어있는게 아닌가... 할 수 없이 나도 에디터를 다운로드 후 커스텀까지 해서 3···

[JS&JQUERY] 커스텀 메소드 | serializeObject

스크립트를 이용하여 AJAX처리를 하다보면 Form 데이터들을 추출해야할때가 있다. 물론 각각 뽑아서 써도 되지만, 소스코드 몇타를 더 쳐야하는 불편함이 있는데 나같은 경우 타이핑하는걸 정말 귀찮아 하기 때문에 최소한으로 타이핑을 할 수 있는걸 찾아서 쓰곤한다. 아래는 serializeObject 메소드 예제이니 참고하여 사용하면 된다. $.fn.seria···

[JS&JQUERY] $.postJSON 서포트 메소드

최근 ajax 처리시 json 처리가 99%가 되면서 일반 데이터 처리 시 조금 편리한게 있나 찾아보니 JQUERY 에서 지원해주는 $.getJSON 을 찾았다. 솔직히 $.ajax 나 $.getJSON 이나 차이점은 거의 없지만서도, 그 몇타를 안치기 위해 찾아보긴했다. 그런데 쓰다보니 get 방식으로만 전송이 된다는것을 알게 되어 $.postJSON 을···

[JS] 전체 페이지 스크롤 라이브러리 - 개발중

최근 스크립트를 많이 다루다 보니 라이브러리를 만들고 싶은 욕심이 생겼다. 개인적으로 순수 JAVASCRIPT 는 깊게 들어가면 잘 다루지 못하여 JQUERY 라이브러리를 통해 개발을 진행중이다. 이번에 개발중인 스크립트 같은경우 fullpage 스크립트와 같은 전체 페이지를 스크롤 하는 기능이다. 현존하는 비슷한 스크립트 중에서는 아래의 사이트가 가장 완···

[다음에디터] 다음에디터로 일괄 변경작업 완료!

최근들어 포스팅 쓰기가 너무 힘들어서 기존에 쓰던 에디터 자체를 변경하였다. 기존에 쓰던건 썸머노트(https://summernote.org/) 로 여러가지 커스텀하고 적용하기가 쉬워서 쓰긴했는데, 몇가지 고질적인 문제가 있어 이참에 다음에디터로 갈아타보았다. 솔직히 그나마 많이 만져본 네이버 스마트에디터로 가볼까 고민도 했었지만, 과거 티스토리 블로그 운···

[JAVASCRIPT] 파일 업로드시 이미지를 제어

이미지 파일 업로드는 다방면에서 많이 사용되고 있으며, 기능만 잘 활용한다면 상당히 멋진 이미지 업로드 프로그램을 만들 수 있다. 나같은 경우 이미지 업로드 시 자바스크립트단에서 FileReader 를 통해 투명하게 미리 보여주고 서버단에서 압축 & 리사징 후에 다시 클라이언트단으로 와서 미리보기 이미지의 투명도를 없애는 방식으로 로딩을 구현했었다.···

javascript 를 통한 load 이벤트 등록방법 2가지

기본적으로 자바스크립트를 통해 load 이벤트를 처리하는 방법중 가장 보편적으로 사용되는 방식은 아래와 같이 두가지가 있다. <script> // 방법1 window.addEventListener('load', function() { }); // 방법2 window.addEventListener('DOMContentLoaded', function···