터미네

안녕하세요. 터미네입니다. 이번 포스팅은 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는 개발에 ..

안녕하세요. 터미네입니다. 이번 포스팅은 jquery ajax 사용법을 소개합니다. 회사에서 ajax를 자주 애용하지만, 소스코드에 잘 코딩되어 있어서 유지보수하는 시스템 혹은 프로젝트 중에 소스를 복사 붙여넣기 한 후 서버 endpoint 및 데이터 주고받는 형식을 정하기만 하는 기계적인 코딩을 하고만 있어서 이번 포스팅을 통해 실속있는 ajax 개념을 정리하려 합니다. ajax의 기본은 아래와 같습니다. $.ajax({ type : "POST",//서버에 요청하는 타입, GET방식도 있음. contentType : "application/json; charset=utf-8", //서버에 전송하는 데이터형식과 인코딩타입 url : "/tra/selectHotPlace.json", //요청할 서버 url..

안녕하세요. 터미네입니다. 이번 포스팅은 jQuery로 부모 자식 요소를 찾는 방법을 소개합니다. $를 활용하면 왠만하면 jQuery를 사용하는 것이죠. 자 우선 이해를 돕기 위해 html 예시 소스를 통해 실습을 해보겠습니다. 사과 오렌지 포도 딸기 자자 body 안에 있는 첫번째 div태그는 id가 firstDiv이고 그 하위 요소는 ul태그와 li태그가 있습니다. ul의 스타일을 적용하려면 어떻게 해야될까요? 방법은 두 가지가 있습니다. 1. div태그의 id인 firstDiv를 활용하여 ul에 css를 적용 $("#firstDiv > ul").css({"border": "1px solid black"}); $("#firstDiv > ul").attr("style", "border:1px solid..

postman으로 nodejs express CRUD 안녕하세요. 터미네입니다. 이번 포스팅은 nodejs express 로컬서버를 구동한 상태에서 포스트맨으로 데이터 CRUD를 실습해보도록 하겠습니다. 실습하기전에 nodejs express가 처음이시거나 프로젝트를 별도로 생성을 안하셨으면 이전 포스팅을 참고하시면 더욱 도움이 됩니다. 아래에 배너링크를 두개 남겨드립니다. nodejs express mysql db 연결하기 안녕하세요. 터미네입니다. 이번 포스팅은 nodejs express에 db를 연결하는 것에 대한 내용입니다. nodejs express 프로젝트 생성하는 방법은 아래 배너를 남겨드리니 해당 포스팅에 가서 프로젝트 생성 danbam.asbai.xyz postman으로 nodejs ex..

안녕하세요. 터미네입니다. 이번 포스팅은 nodejs express 로컬서버를 구동한 상태에서 포스트맨으로 request통신을 하여 응답을 받는 내용을 다루겠습니다. 포스팅을 읽어보시기 전에 postman으로 접속하셔서 회원가입하셔서 로그인 하신 후, pc에 설치하셔서 사용하실 것을 권장드립니다. 무료로 사용 가능하고, 백엔드 개발자라면 충분히 애용 가능한 꿀같은 프로그램입니다. ^^ 설치하신 postman을 실행하셔서 postman 좌측 메뉴에 Collections에 새로운 컬렉션을 만들어 볼게요. name은 nodejs express 로컬 서버 통신으로 해볼게요. 그리고 request를 하나 만들건데, request name은 /public/checkConnectMysqlDB/select 라고 해볼게..