바닥코딩

JS의 변수 선언 방식 먼저 블로그 바닐라 js 포스팅에서는 별도의 문법(일반적인 조건문 , 반목문, 객체 예외처리 ... 등등) 에 대한 내용은 다루지 않을 것입니다. js 의 문법체계는 다른 언어와 큰 차이가 없습니다 (물론 다른 언어도 마찬가지 이긴 하지만요) 하지만 다른 언어와 차별이 되는 독작적인 특성들과 같은 경우에는 특정 언어를 사용하는데 있어 중요한 요소로 작용하기 떄문에 이와 같은 내용들에 대해선 내용을 다뤄보려고 합니다. 보통 우리가 알고 있는 익숙한 언어들과 같은경우 변수를 선언하는데 있어 자료형으로 변수의 특성을 구분해 줍니다 예를 들어 정수형은 int , 문자열은 String 이런식으로 말이죠 그렇지만 JS와 같은 경우 변수를 선언하는데 있어 비교적 익숙하지 않은 자료형을 선언합니..

바닐라 JS ? 이전 포스팅 내용중에 자바스크립트에 대한 포스팅을 작성한 적이 있었습니다 https://dkkim2318.tistory.com/64?category=819644 자바 스크립트 자바 스크립트? 자바스크립트를 한마디로 정의하자면 브라우저 내에서 동작하는 언어라고 할 수 있습니다. 웹 개발자들에게는 브라우저에서 동작하는 언어기 때문에 완벽하게는 아니여도 필� dkkim2318.tistory.com 자바스크립트는 포스팅한 내용과 같이 프론트 사이드에서 절대적으로 사용되는 언어이면서 동시에 서버사이드 개발이 가능한 언어 입니다. 특히 프론트 영역에서의 사용이 절대적이기 때문에 자바스크립트를 기반으로한 프레임워크들이 현재 대세로 자리잡고 있습니다. 개발에 관심이 있는 학생들이나 개발자라면 모두들 많..

컴파일 언어 개발을 하거나 공부를 하답면 다들 컴파일이라는 말을 많이 들어 봤을 것입니다 컴파일은 사전적인 의미로는 프로그밍 언어로 작성된 문서를 다른 프로그래밍 언어로 바꾸는 과정이라는 뜻을 가지고 있습니다. 어렵게 생각하지 말고 쉽게 생각해 프로그래밍 언어로 작성된 코드를 기계가 이해할 수 있는 코드로 전환해주는 과정을 말합니다 . 우리가 많이 얘기하는 컴파일러 ( ex) visual studio , eclipse ) 는 이 컴파일을 진행해주는 프로그램 입니다. 컴파일은 위와 같은 과정을 거쳐 이루어 집니다. 코드를 작성한 다음 이것을 컴파일 시키면 컴퓨터가 이해할 수 있는 언어의 형식으로 번역을 해줍니다 쉽게 생각해 구글 번역기와 같이 문서를 번역해준다고 생각하면 됩니다. 대표적으로 c/c++, c..

자바 스크립트? 자바스크립트를 한마디로 정의하자면 브라우저 내에서 동작하는 언어라고 할 수 있습니다. 웹 개발자들에게는 브라우저에서 동작하는 언어기 때문에 완벽하게는 아니여도 필수로 익혀야 하는 언어라고 볼 수 있습니다. 자바스크립트라는 언어는 브라우저 내에서 동작하는 언어이기 때문에 브라우저에서 가장 가볍게 사용할 수 있는 언어입니다 또한 인터프리터 방식의 언어이기 때문에 컴파일과 링크 과정이 생략되어 배우기 쉽고(이 내용에 대해서는 따로 포스팅 하겠습니다) 최근에는 노드JS가 등장하면서 서버 사이드 또한 자바스크립트를 통해 개발이 가능해졌습니다 또한 브라우저에 종속되어 있는 언어이기 때문에 web 프론트 사이드에서 많이 쓰이는 언어 이기도 합니다. 대표적으로 요즘 프로트사이드에서 많이 사용하는 프레임..

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로 엘리먼트를 매칭..