JavaScript
-
Javascript 에서 물음표(?), 느낌표(!) 등 다양한 연산자를 통해 코드의 간결하고 가독성 있게 바꿔준다. 물음표 1개(?)물음표 한개 연산자는 "삼항연산자", "옵셔널 체이닝 연산자" 에서 사용된다. 삼항연산자// 조건식 ? 참값 : 거짓값let a = 11;a > 10 ? 'a가 10보다 큽니다.' : 'a가 10보다 작습니다.' 삼항연산자는 조건식이 참과 거짓일 때 콜론(:)을 기준으로 각각 다른 값을 반환한다. 옵셔널 체이닝 연산자(?.)// 사용법 = (?.)let card = {};// undefined, 객체의 존재하지 않는 요소에 접근해 정보를 가져오려고 할 경우 에러가 발생한다.console.log(card && card.name && card.name.number);// u..
Javascript 유용한 연산자Javascript 에서 물음표(?), 느낌표(!) 등 다양한 연산자를 통해 코드의 간결하고 가독성 있게 바꿔준다. 물음표 1개(?)물음표 한개 연산자는 "삼항연산자", "옵셔널 체이닝 연산자" 에서 사용된다. 삼항연산자// 조건식 ? 참값 : 거짓값let a = 11;a > 10 ? 'a가 10보다 큽니다.' : 'a가 10보다 작습니다.' 삼항연산자는 조건식이 참과 거짓일 때 콜론(:)을 기준으로 각각 다른 값을 반환한다. 옵셔널 체이닝 연산자(?.)// 사용법 = (?.)let card = {};// undefined, 객체의 존재하지 않는 요소에 접근해 정보를 가져오려고 할 경우 에러가 발생한다.console.log(card && card.name && card.name.number);// u..
2024.06.25 -
개발 환경 : Jquery, datepicker datepicker 를 사용해 시작날짜와 종료날짜를 선택하는데 최대 10일까지 선택할 수 있도록기능 구현이 필요했다.시작 날짜를 선택했을 때 종료날짜와 비교해 10일을 초과했을 경우 시작날짜 기준으로 종료날짜를시작날짜 + 10일로 변경하도록 기능 구현했다. HTML시작날짜 : 종료날짜 : javascript $('.callflow-date-start').datepicker({ changeMonth: true, changeYear: true, selectOtherMonths: true, showButtonPanel: true, yearRange: "c-50:c+50", dateFormat: "yy-mm-dd", onSelec..
Javascript DatePicker 사용법(시작날짜와 종료날짜 날짜 제한)개발 환경 : Jquery, datepicker datepicker 를 사용해 시작날짜와 종료날짜를 선택하는데 최대 10일까지 선택할 수 있도록기능 구현이 필요했다.시작 날짜를 선택했을 때 종료날짜와 비교해 10일을 초과했을 경우 시작날짜 기준으로 종료날짜를시작날짜 + 10일로 변경하도록 기능 구현했다. HTML시작날짜 : 종료날짜 : javascript $('.callflow-date-start').datepicker({ changeMonth: true, changeYear: true, selectOtherMonths: true, showButtonPanel: true, yearRange: "c-50:c+50", dateFormat: "yy-mm-dd", onSelec..
2024.05.14 -
datatables 를 사용하면서 각 컬럼마다 검색 기능이 필요하여 구현하게 되었다.// html// javascript$('#manager-mst-view-table').DataTable({ searching : true, initComplete: function() { let api = this.api(); $('#manager-mst-view-table thead tr') .clone(true) .addClass('filters') .appendTo('#manager-mst-view-table thead'); //columns 들의 eq(0) 인 head 들만 반복한다. api...
DataTables columns search 기능 구현datatables 를 사용하면서 각 컬럼마다 검색 기능이 필요하여 구현하게 되었다.// html// javascript$('#manager-mst-view-table').DataTable({ searching : true, initComplete: function() { let api = this.api(); $('#manager-mst-view-table thead tr') .clone(true) .addClass('filters') .appendTo('#manager-mst-view-table thead'); //columns 들의 eq(0) 인 head 들만 반복한다. api...
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.st..
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.st..
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.jsonpackage.json 파일은 프로젝트 라이브러리 버전 및 의존성을 관리하기 위한 JSON 파일이다.기본적으로 "npm init" 명령어를 통해 생성할 수 있다. // package.json{ "nam..
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.jsonpackage.json 파일은 프로젝트 라이브러리 버전 및 의존성을 관리하기 위한 JSON 파일이다.기본적으로 "npm init" 명령어를 통해 생성할 수 있다. // package.json{ "nam..
2024.01.26