터미네

안녕하세요. 터미네입니다. 이번 포스팅은 백틱으로 jqgrid처럼 만드는 것을 소개합니다. jqgrid가 무엇인지 모르시는 분들은 아래에 배너 클릭하셔서 꼭 한 번 봐주시면 되겠습니다. * jqgrid 기본사용법 * jQuery jqgrid 기본사용법 정리 local 방식 안녕하세요. 터미네입니다. 이번 포스팅은 jQuery로 jqgrid를 사용하는 방법을 소개합니다. jqgrid는 엑셀처럼 표모양의 테이블을 쉽게 그려주는 라이브러리입니다. jqgrid를 사용하기위해서는 최소한 danbam.asbai.xyz 백틱에 대해 잘 모르시는 분들은 아래 배너로 들어가셔서 한 번 확인해주세요. * 자바스크립트 백틱 사용 * 자바스크립트 백틱(backtick) 사용 안녕하세요. 터미네입니다. 이번 포스팅은 자바스크립..

안녕하세요. 터미네입니다. 이번 포스팅은 jqgrid를 ajax와 같이 사용하는 방법을 소개합니다. jqGrid에서 mtype을 활용하여 POST 혹은 GET방식을 선택할 수 있고, postData에 매개변수를 넣어서 서버에 전달할 수 있는데, 굳이 ajax를 같이 쓰는 이유는 무엇일까요? 그 이유는 jqGrid를 활용하지 않고 자체적으로 event 옵션을 개발하기 위함입니다. 이 포스팅을 읽으시기 전에 jqgrid 및 jquery가 세팅이 안되신 분들은 아래 배너를 통해 확인하시면 많은 도움이 되실거에요! * jqgrid 세팅 및 jquery 세팅 * jQuery jqgrid 기본사용법 정리 local 방식 안녕하세요. 터미네입니다. 이번 포스팅은 jQuery로 jqgrid를 사용하는 방법을 소개합니다..

안녕하세요. 터미네입니다. 이번 포스팅은 jqgrid의 post 방식 및 get 방식을 소개합니다. 해당 포스팅을 보시기 전에 mocky를 처음 사용해보신 분들이 계시면 아래 배너를 클릭하셔서 사용법을 보시고 오시면 도움이 될거에요. mocky를 사용하여 API처럼 활용해보기 안녕하세요. 터미네입니다. 이번 포스팅은 mocky 서비스에 대해 소개합니다. mocky는 데이터 응답값을 미리 정해서 사용할 수 있는 서버 서비스입니다. 보통 Front-End 개발자 분들이 실제 데이터가 DB danbam.asbai.xyz 자 본론으로 돌아와서 jqgrid post방식을 보여드리겠습니다. 예제 실습소스는 아래와 같습니다. 이전 포스팅에서 mocky 서비스에서 response data를 미리 만들었습니다. url에..

안녕하세요. 터미네입니다. 이번 포스팅은 jQuery로 jqgrid를 사용하는 방법을 소개합니다. jqgrid는 엑셀처럼 표모양의 테이블을 쉽게 그려주는 라이브러리입니다. jqgrid를 사용하기위해서는 최소한 크게 두개의 부분을 손대시면 됩니다. 자바스크립트 소스 부분과 html소스 부분입니다. 예제를 살펴보기 전에 jQuery의 js, css파일과 jqGrid와 관련된 js 및 css파일을 먼저 다운받으시기 바랍니다. * jQuery 자바스크립트 다운로드 * https://jquery.com/download Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are availa..

안녕하세요. 터미네입니다. 이번 포스팅은 json 배열화 하는 방법을 소개합니다. 소개하기 앞서 json의 데이터의 조건을 말씀드릴게요 json안에는 key값과 value가 있으며 n개가 있다고 가정하겠습니다. 즉 예시로 말씀드리자면, {"key1":"value1", "key2":"value2" ... "keyn":"valuen"} 이렇게 되어있다고 가정하겠습니다. 위 json으로 된 것을 어떻게 배열화할 수 있는지 소스를 통해 소개알려드리겠습니다. json 테스트 위 결과는 메모장으로 작성 후, 확장자를 html로 저장한 뒤에 크롬 브라우저로 열어서 확인이 가능합니다. 결과를 캡처해보면 아래 이미지처럼 나옵니다. 키값을 배열화 한 뒤에 for문을 돌려서 json데이터 안의 value들을 push를 통해..

안녕하세요. 터미네입니다. 이번 포스팅은 자바스크립트에 백틱 을 소개합니다. 백틱이란? 기호는 ` 를 말한다. 윈도우 키보드에서는 1 왼쪽에 ~ 모양이 있는데 Shift키를 누르면 백틱을 칠 수 있어요. 맥북 키보드에서는 윈도우 키보드의 위치와 동일한데, 한글타입일 경우 ₩를 칠 수 있지만 영문타입으로 바꾼뒤에 누르면 `을 칠 수 있습니다~ 백틱으로 템플릿 리터럴을 사용할 수 있는데, 템플릿 리터럴을 왜 사용할까요? 백틱을 사용한 것과 사용하지 않은것의 차이를 예제로 살펴보겠습니다. * 템플릿 리터럴을 사용한 예제 * let fruit = `과일`;//백틱으로 템플릿리터럴 사용 let apple = `사과`; let peach = `복숭아`; //사과와 복숭아는 과일이다. console.log(`${ap..

안녕하세요. 터미네입니다. 이번 포스팅은 jQuery change함수를 소개합니다. 해당 포스팅을 읽기전에 앞서 포스팅한 세 개를 먼저 읽어보시면 이해에 큰 도움이 될 수 있습니다~ ^^ jQuery 라디오버튼 체크박스 사용하기 안녕하세요. 터미네입니다. 이번 포스팅은 jQuery로 라디오버튼 및 체크박스를 사용하는것을 소개합니다. 코드와 함께 설명 드리겠습니다. 우선 아래 html 코드 기반으로 jQuery 활용예제를 살펴볼 danbam.asbai.xyz jQuery each문 사용법 안녕하세요. 터미네입니다. 이번 포스팅은 jQuery each문 사용을 소개합니다. each문 사용은 언제쓰냐면, 해당요소에 대해 여러개의 요소들을 처리할 때 사용합니다. 제가 요소라고 부르는 곳에는 id danbam.a..

안녕하세요. 터미네입니다. 이번 포스팅은 jQuery로 라디오버튼 및 체크박스를 사용하는것을 소개합니다. 코드와 함께 설명 드리겠습니다. 우선 아래 html 코드 기반으로 jQuery 활용예제를 살펴볼게요. 사과 배 수박 축구 야구 배구 jQuery radio버튼 활용 radio버튼은 name이 동일할 경우 무조건 하나만 선택이 가능합니다. 사과를 선택하면 라디오버튼이 체크될텐데, 이때 배를 또 선택하면 사과에 체크된 것이 사라집니다. 사과, 배, 수박 중 하나를 선택 후에 "값확인" 버튼은 눌러 값을 확인하는 function을 구현해보겠습니다. function checkRadioValue(){ console.log($("input[name=fruit]:checked").val()); //alert($(..

안녕하세요. 터미네입니다. 이번 포스팅은 jQuery each문 사용을 소개합니다. each문 사용은 언제쓰냐면, 해당요소에 대해 여러개의 요소들을 처리할 때 사용합니다. 제가 요소라고 부르는 곳에는 id(#id) , class(.class), 태그명(div, ul, li) 등등이 있습니다 $(요소).each(function (index, item) { ~~ 중략 ~~ }); 그럼, html과 같이 사용해보도록 하겠습니다. html에 div의 class명 fruit로 해보겠습니다. 사과 바나나 딸기 땅콩 class가 fruit인 div는 세 개이고 div는 네 개입니다. jQuery each문 두 개를 작성해보면 아래와 같습니다. 1) class fruit 요소에 대한 each문 2) div 네 개에 대..

안녕하세요. 터미네입니다. 이번 포스팅은 jQuery에서 사용시 활용하는 this를 소개합니다. this의 의미는 무엇일까요? 번역하자면 '이것'이라는 의미죠. jQuery에서의 this는 $안의 요소에 대해 기능을 정의했을 경우 $안의 요소를 가리키는 것입니다. 사과선택 배선택 오렌지선택 위 예제 코드에서 $(this)에서 this는 무엇일까요? 바로 select[name=fruit]를 가리킵니다. $(~~~)에 대한 jQuery함수가 실행할 때, this라는 것을 써서 이것에 대해 기능을 활용하는 것이겠죠. 자바 언어에서도 this라는 것을 사용하는데, 자바에서의 this는 해당 클래스를 의미합니다. 코드 문법 자체가 다르더라도 의미가 비슷하다고 볼 수 있겠네요. jQuery에서의 this는 개발에 ..