로이팩토리

Usually, the load on the screen is often longer because once a webpage is floated, it fetches all the content within the page. Therefore, even if it is not the screen that the user wants to see (if you simply click on the menu on that page to go to another page, or if you want to click on the content on the current screen without scrolling down), it is often traffic-related because you have to s..

기본 개발을 크롬에서 하다 보니 가끔 간과하고 넘어가는 부분이 있는데, 그중에 하나가 ie에서의 사용을 고려하지 않은 경우가 있습니다. 최근에 그 중에서 하나가 바로 아래의 에러였는데, 이는 FormData를 ajax로 전달할 때 (주로 첨부파일을 포함한 multipart) 전송 시에 chrome에서는 정상적으로 진행되지만, ie버전에서 오류가 발생하는 현상입니다. 이때 여러가지 방법들이 오갔지만, 그냥 아래 한 줄을 더 추가해주면 정상적으로 수행이 됩니다. (이유는 아직.... 단순 버그로 보고 있음) let url = "Rest URL"; let param = new FormData($("#FormID")[0]); $.ajax({ async:false , url: url , type:"POST" , ..

Json을 다룰 때 string to json 또는 json to string이 필요할 때가 종종 있을 겁니다. let params = { key1:"내용1", key2:"내용2", key3:10000 } 만약 다음과 같이 Json을 가지고 예시를 들면 parse : String to json → 문자열(string) 형태의 값을 Json형태로 변환 let params = '{"key1":"내용1", "key2":"내용2", "key3":10000 }'; console.log("parse 전 > ") console.log(params); console.log("parse 후 > ") console.log(JSON.parse(params)); 만약 다음과 같이 문자열로 이루어진 string이 key-val..

웹 개발을 하다 보면 여러 개의 input의 값을 합산하거나 체크해야 하는 경우가 발생합니다. 보통 이런 경우 두 가지 방식을 활용 가능합니다. 만약 아래와 같이 html이 구성되어있다면 값1: 값2: 값3: 값4: 합계 합계: 비슷한 name으로 합산하는 방법 → $("input[name*='키값']") function doSum(){ let sum = 0; $('input[name*="type"]').each(function(){ // type으로 시작하는 input을 순차적으로 loop if(!isNaN($(this).val())){ // CASE 값에 문자가 없는 경우 (숫자인 경우만 합산) sum += parseInt($(this).val()); } }); // 합산한 값을 name="sum"인..

html에서 form을 만들때 가장 쉽게 실수 하는 부분이 submit에 대한 것입니다. 모든 전처리를 서버에서 하는 경우에는 문제가 되지 않지만, javascript내에서 전처리르 하게 하는 경우에는 이 부분이 오작동을 일으키기도 합니다. 다음과 같이 html소스가 되어있다고 가정하고, 해당 파일이 http://localhost:8080/main.html 이라고 가정하였을 때, 다음과 같은 입력창이 하나 생성됩니다. 여기에 아무 텍스트나 입력하고 엔터를 치게 되면, 어떻게 될까요? 결론부터 말하면 아래와 같이 호출되게 됩니다. http://localhost:8080/main.html?keyword= 두 가지 방법이 있는데 javascript에서 막는 방법 (jQuery 기준) $("[name=editF..

웹 화면에서 날짜 선택을 위한 캘린더를 구현하는 것은 매우 번거로운 일입니다. 때문에 API를 쓰는 경우가 많은데요, jQuery UI에서는 보통 이런 기능을 기본으로 제공하기 때문에 script에 jquery를 import 했다면, 그냥 datepicker의 대상만 지정해주면 쉽게 사용할 수 있습니다. 기본 사용법 Date: 기본적으로 $("대상").datepicker();를 사용해주면, 대상 Element를 클릭 시에 바로 아래 날짜 선택이 가능한 Calendar가 호출됩니다. 이 캘린더를 커스터마이즈 하고 싶은 경우엔 옵션을 추가해줄 수 있는데, datepicker({옵션명1:옵션값1, 옵션명2:옵션값2})와 같은 형태로 추가 가능합니다. 해당 옵션은 아래의 사이트에서 세부적으로 확인 가능합니다. ..

보통 웹페이지를 한번 띄우면 페이지 내의 모든 콘텐츠를 가져오기 때문에 화면의 로드가 길어지는 경우가 많습니다. 때문에 실제로 사용자가 보고 싶은 화면이 아닌 경우에도 (단순히 해당 페이지에 보이는 메뉴를 클릭해서 다른 페이지를 가고 싶은 경우나 스크롤을 내리지 않고 현재 화면에서의 콘텐츠를 클릭하고 싶을 때) 페이지를 기다리게 되고, 또 서버 측면에서는 사용자가 보지 않는 콘텐츠까지 전송해야 하므로 트래픽적으로도 문제가 되는 경우가 많습니다. 특히나 웹보다 저용량으로 제공되어야 하는 모바일에서는 특히나 고려해야 할 대상입니다. 그중에서도 가장 많은 비중을 차지하는게 이미지인데, 이 이미지의 트래픽량을 줄여줄 방안 중 하나가 LazyLoad입니다. 이는 이미지가 현재 화면에 노출되어야 하는 경우에만 서버..