728x90
반응형

2023/02 7

백틱 활용하여 자체 grid를 만들어보기

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

jqgrid를 ajax와 같이 사용하기

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

jQuery jqgrid post, get 방식 사용

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

mocky를 사용하여 API처럼 활용해보기

안녕하세요. 터미네입니다. 이번 포스팅은 mocky 서비스에 대해 소개합니다. mocky는 데이터 응답값을 미리 정해서 사용할 수 있는 서버 서비스입니다. 보통 Front-End 개발자 분들이 실제 데이터가 DB에 저장되어 API서버가 구축되기전에 화면 개발한 것을 확인하기 위해 애용하는 서비스입니다. 이것저것 볼 것들이 있겠지만, 요즘 주로 사용하는 json 타입의 데이터를 미리 만들어 크롬 브라우저에서 url request를 해보도록 하겠습니다. mocky 서비스는 아래 url로 들어가면 됩니다. https://designer.mocky.io/ 위 링크로 들어가서 우측 상단에 "NEW MOCK"이라는 버튼이 있습니다. 클릭해주세요. 그러면 mock을 만들 수 있는 화면이 뜹니다. 아래 화면 내에서 모..

jQuery jqgrid 기본사용법 정리 local 방식

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

자바스크립트 백틱(backtick) 사용

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

728x90
반응형