바닥코딩

Ajax? 이전에 node.js 웹 실시간 데이터 데시보드 만들기에 포스팅 했던 내용과 유사합니다 https://dkkim2318.tistory.com/25?category=784731 node.js 웹서버 프로젝트 실시간 데이터 dashboard 만들기 3(ejs & Ajax) ejs? ejs란 Embedded JavaScript의 약자로 쉽게 말하자면 자바스크립트가 내장 되어 있는 html 파일을 의미한다 html 에서 코딩을 해본 사람들은 알겠지만 html 문서 자체에서도 javascript 문장은 ajax는 Asynchronous Javascript and XML 의 약자로 자바스크립트를 활용해 서버와 비동기적으로 통신하는 방식인데 이때 XML로 데이터를 던져 준다 하지만 최근에는 XML 보다는 ..

엘리먼트 제어 jQuery는 엘리먼트를 제어하는 풍부한 기능을을 제공합니다. 여기서 엘리먼트를 제어한다는 말의 의미는 html로 구성이 되어 있는 정적인 테그에 꼭 html 테그를 통해서만 새로운 테그를 만든다거나 삭제를 하거나 치환할 필요없이 jQuery 를 통해 테그를 script코드로 제어하는 것을 의미하게 됩니다 . http://api.jquery.com/category/manipulation/ 엘리먼트 제어 예제 예를 들어 after를 사용해 특정 엘리먼트 뒤에 내용 삽입을 가능하게 할 수 있습니다. 첫번째 줄입니다 위와 같이 after라는 엘리먼트 제어를 통해 새로운 테그를 삽입 했습니다. 하나만 더 예시를 들어 버튼을 클릭했을 때 버튼이 사라지는 로직을 구현해보겠습니다. 첫번째 줄입니다 re..

이벤트란? 이벤트란 시스템에서 일어나는 사건을 의미합니다. 예를 들어 클릭을 한다던가 마우스를 이동한다던가 타이핑을 친다던가 페이지를 새로 로딩한다는 이런 상황들이 이벤트 입니다. 이런 이벤트가 발생했을 경우 작동할 로직을 미리 시스템에 알려준다면 그 시스템은 이벤트가 발생할 때 이 로직을 호출하게 됩니다. 간단하게 button을 클릭했을 때 alert 창을 띄우는 로직을 만든다면 버튼을 클릭했을때 function으로 설정해 놓은 로직의 내용을 수행하는 것을 확인할 수 있습니다. 지금은 간단하게 click으로만 예를 들어지만 여러 이벤트에 대한 정의가 많으니 필요에따라 찾아 로직을 매핑해 주면 됩니다. event 종류 ◆ jQuery 마우스 이벤트 이벤트 설명 click 노드(elements)를 마우스 ..

chain? jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있습니다. 이를 이용하면 한번 선택한 대상에 새 대해 단기적인 제어 뿐만아니라 마치 체인으로 연결된 것 처럼 연속적인 제어를 할 수 있습니다. Chain 의 장단점 - 장점 코드의 간결성(연속적인 제어를 할 수 있기 때문에 코드가 간결해 진다) 인간의 언어방식과 유사해 자연스러운 사고과정으로 이해하기가 편함 -단점 너무 복잡한 chain일 경우 코드의 가독성을 떨어 뜨릴 수 있음 개발의 편의가 있을 수 있지만 유지/보수 단게에서 비 효율적인 방식 chain 활용 예를 들어 div 테그에 css스타일로 가로 300px 세로 300px 그리고 배경색을 빨강으로 지정하려고 한다면 일반적으로 jQuery로 엘리먼트를 매칭..

선택자 이전 포스팅 내용으로부터 알 수 있듯 jQuery는 $()안에 속성을 넣고 css 나 html 테그 데이터 같은 것을 매칭해서 특정엘리먼트를 선택해 그것에 대한 지정을 할 수 있습니다. 선택자에는 여러 종류가 있는데 하나씩 알아보겠습니다. 전체 선택자 전체 선택자 hello! world hello! world hello! world 위와 같이 "*"을 지정해주면 모든 영역에 선택해 적용이 가능하다 2.id 선택자 id 는 # 을 통해 가능 합니다 Id 선택자 id 는 #으로 검색합니다 3.class 선택자 class 는 .을통해 매핑이 가능합니다 Class 선택자 id 는 .으로 검색합니다 4. 태그 선택자 태그명을 지정하면 해당 태그 내용을 적용 시킵니다 태그 선택자 row1 row2 row3 ..

Sublime Text3 sublime Text3는 개발 언어를 위한 에디터라기 보단 주로 front-end 개발자들을 위해 개발이 되었고 현재 웹 퍼블리셔 들에게 가장 hot한 에디터입니다.무료 에디터라고 착각하는 사람이 많은데 정식 라이센스는 유료입니다. sublimeText3가 인기가 있는 이유를 살펴보자면 물론 지금도 많이 사용하지만 과거에 주로 많이 사용했던 울트라에디트, 에디트 플러스, notepad++등에 비해 설치하면 화면 구성이 너무 심플하고 딱 코드 작성에판 필요한 기능만이 존재하기 때문에 이런 심플한 관점에서 많은 사랑을 받게 되었고, 두 번째는 키보드 단축키 만으로 모든 조작이 가능 하기 때문에 와 세 번쨰 이유인 다양한 패키지를 추가 설치할 수 있고 패키지 관리의 간편함이 개발자들..

jQuery란? 개발을 하다보면 라이브러리라는 말을 많이 들어봤을 것입니다. 라이브러리는 쉽게 설명하자면 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효울을 높여주는 코드들의 집합? 이라고 생각하면 되는데 우리가 다룰 Jquery도 라이브러리에 해당합니다. jQuery는 언어가 아닙니다. 구분 하자면 자바스크립트로 이루어진 내장 라이브러리입니다. 가끔 jQury가 많이 사용되어 지면서 언어로 오해를 하는 경우가 있는데 이는 맞지 않으며, jQuery의 가장 핵심적인 것을 기준으로 요약하자면 3가지로 들 수 있다. 엘리먼트를 선택하는 강력한 방법 선택하는 엘리먼트들을 효과적인 수단을 제공 자바스크립트 라이브러리 일단 가장 처음으로 jQuery 의 구조를 알아보겠습니다. 그전에 jQu..