JavaScript
-
datatables 를 사용하면서 각 컬럼마다 검색 기능이 필요하여 구현하게 되었다. // html = 0){ $(cell).html(''); } $('input',$('.filters th').eq($(api.column(colIdx).header()).index())) .off('keyup change') .on('change', function(e){ $(this).attr('title', $(this).val()); var cursorPosition = this.selectionStart; api.column(colIdx).search(this.value != '' ? this.value : '').draw(); }) .on('keyup', function(e){ e.stopPropagation(..
DataTables columns search 기능 구현datatables 를 사용하면서 각 컬럼마다 검색 기능이 필요하여 구현하게 되었다. // html = 0){ $(cell).html(''); } $('input',$('.filters th').eq($(api.column(colIdx).header()).index())) .off('keyup change') .on('change', function(e){ $(this).attr('title', $(this).val()); var cursorPosition = this.selectionStart; api.column(colIdx).search(this.value != '' ? this.value : '').draw(); }) .on('keyup', function(e){ e.stopPropagation(..
2024.03.20 -
e.preventDefault() 와 e.stopPropagation() 는 이벤트 관련 동작에서 많이 사용되는 코드이다. e.preventDefault() e.preventDefault() 는 a 태그나 submit 처럼 페이지를 이동시키거나 form 태그의 submit 하는 동작을 중지시킨다. // javascript $("a").click(function(e){ e.preventDefault(); alert('prevnetDefault 로 인해 이벤트 중지'); }); // html 네이버 페이지 이동 위처럼 "네이버 페이지 이동" 이라는 a 태그의 링크를 클릭하면 click 이벤트 함수가 발생하고 e.preventDefault() 로 인해 이벤트가 중지된다. e.stopPropagation() e..
e.preventDefault() 와 e.stopPropagation() 의 차이e.preventDefault() 와 e.stopPropagation() 는 이벤트 관련 동작에서 많이 사용되는 코드이다. e.preventDefault() e.preventDefault() 는 a 태그나 submit 처럼 페이지를 이동시키거나 form 태그의 submit 하는 동작을 중지시킨다. // javascript $("a").click(function(e){ e.preventDefault(); alert('prevnetDefault 로 인해 이벤트 중지'); }); // html 네이버 페이지 이동 위처럼 "네이버 페이지 이동" 이라는 a 태그의 링크를 클릭하면 click 이벤트 함수가 발생하고 e.preventDefault() 로 인해 이벤트가 중지된다. e.stopPropagation() e..
2024.03.20 -
JSX(Javascript Syntax eXtension) 문법이란? JSX 는 Javascript 를 확장한 문법이다. JSX 는 React 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다. 브라우저에서 babel 을 사용하여 일반 Javascript 문법으로 변환된다. // JSX 문법 사용 function App() { return( 안녕하세요? ) } // babel 을 사용한 문법 변환 function App() { return React.createElement("h1", null, "안녕하세요?"); } JSX 문법은 Javascript 파일에 HTML 코드를 작성한다. JSX 문법 1. JSX 문법에서 return 시 반드시 부모요소는 1개여야 한다. // 정상적인 문법..
JSX(Javascript Syntax eXtension) 문법JSX(Javascript Syntax eXtension) 문법이란? JSX 는 Javascript 를 확장한 문법이다. JSX 는 React 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다. 브라우저에서 babel 을 사용하여 일반 Javascript 문법으로 변환된다. // JSX 문법 사용 function App() { return( 안녕하세요? ) } // babel 을 사용한 문법 변환 function App() { return React.createElement("h1", null, "안녕하세요?"); } JSX 문법은 Javascript 파일에 HTML 코드를 작성한다. JSX 문법 1. JSX 문법에서 return 시 반드시 부모요소는 1개여야 한다. // 정상적인 문법..
2024.01.29 -
react 프로젝트 생성을 위해 "npx create-react-app 프로젝트명" 명령어를 사용해 생성했다. 생성된 폴더 구조는 아래와 같다. 해당 구조를 알기 전에 NPM(Node Package Manager) 에 대해 알아야한다. NPM(Node Package Manager) npm 은 node.js 를 위한 패키지 관리 매니저이자 node.js 를 위한 오픈소스 생태계이다. npm 은 node.js 에서 사용하는 모듈들을 패키지로 만들어 의존성, 필요한 라이브러리 등 관리해준다. package.json package.json 파일은 프로젝트 라이브러리 버전 및 의존성을 관리하기 위한 JSON 파일이다. 기본적으로 "npm init" 명령어를 통해 생성할 수 있다. // package.json { ..
react create-react-app 프로젝트 생성 시 구조react 프로젝트 생성을 위해 "npx create-react-app 프로젝트명" 명령어를 사용해 생성했다. 생성된 폴더 구조는 아래와 같다. 해당 구조를 알기 전에 NPM(Node Package Manager) 에 대해 알아야한다. NPM(Node Package Manager) npm 은 node.js 를 위한 패키지 관리 매니저이자 node.js 를 위한 오픈소스 생태계이다. npm 은 node.js 에서 사용하는 모듈들을 패키지로 만들어 의존성, 필요한 라이브러리 등 관리해준다. package.json package.json 파일은 프로젝트 라이브러리 버전 및 의존성을 관리하기 위한 JSON 파일이다. 기본적으로 "npm init" 명령어를 통해 생성할 수 있다. // package.json { ..
2024.01.26 -
Nodejs Node.js 는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 실행을 위한 Runtime 환경이다. Javascript 는 일반적으로 크롬과 같은 브라우저에서 내장되어 있는 Javascript 런타임 환경으로 인해 실행된다. 이러한 Javascript 를 개발자 로컬 환경에서 실행시키기 위해 사용하는게 Node.js 이다. 런타임이란 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 말한다. Javascript 언어도 독립적인 언어가 아닌 스크립트 언어이다. 스크립트 언어는 특정한 프로그램 안에서 동작하는 프로그램이기 때문에 Javascript 런타임 환경이 필요하다. Express 공식홈페이지에서 나온 설명을 보면 Express 는 웹 및 모바일 어플리케이션을..
Javascript 실행을 위한 Runtime 환경 만들기(nodejs, Express, react)Nodejs Node.js 는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 실행을 위한 Runtime 환경이다. Javascript 는 일반적으로 크롬과 같은 브라우저에서 내장되어 있는 Javascript 런타임 환경으로 인해 실행된다. 이러한 Javascript 를 개발자 로컬 환경에서 실행시키기 위해 사용하는게 Node.js 이다. 런타임이란 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 말한다. Javascript 언어도 독립적인 언어가 아닌 스크립트 언어이다. 스크립트 언어는 특정한 프로그램 안에서 동작하는 프로그램이기 때문에 Javascript 런타임 환경이 필요하다. Express 공식홈페이지에서 나온 설명을 보면 Express 는 웹 및 모바일 어플리케이션을..
2023.12.18 -
화살표 함수란? 보통 함수를 선언할 때 function 키워드를 사용하지만 ES6 에서 함수를 선언하는 새로운 문법이 등장했다. 바로 화살표 함수이다. 사용하는 방법은 단어 뜻과 같이 " => " 표시를 사용해서 함수를 선언하는 방법이다. // 기존 함수 const obo = function() { console.log('function 을 사용한 기존 함수'); }; // 화살표 함수 const obo = () => { console.log('function 이 제거된 화살표 함수'); }; 위와 같이 function 이라는 키워드를 사용하지 않고 " () => {} " 형식으로 심플한 형태로 사용된다. 하지만 이러한 심플함뿐만 아니라 사용하는 이유와 제약사항도 존재한다. 화살표 함수 제약 사항 무조건..
Javascript 화살표 함수와 this화살표 함수란? 보통 함수를 선언할 때 function 키워드를 사용하지만 ES6 에서 함수를 선언하는 새로운 문법이 등장했다. 바로 화살표 함수이다. 사용하는 방법은 단어 뜻과 같이 " => " 표시를 사용해서 함수를 선언하는 방법이다. // 기존 함수 const obo = function() { console.log('function 을 사용한 기존 함수'); }; // 화살표 함수 const obo = () => { console.log('function 이 제거된 화살표 함수'); }; 위와 같이 function 이라는 키워드를 사용하지 않고 " () => {} " 형식으로 심플한 형태로 사용된다. 하지만 이러한 심플함뿐만 아니라 사용하는 이유와 제약사항도 존재한다. 화살표 함수 제약 사항 무조건..
2023.11.29