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..

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개여야 한다. // 정상적인 문법..

NodejsNode.js 는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 실행을 위한 Runtime 환경이다.Javascript 는 일반적으로 크롬과 같은 브라우저에서 내장되어 있는 Javascript 런타임 환경으로 인해실행된다. 이러한 Javascript 를 개발자 로컬 환경에서 실행시키기 위해 사용하는게 Node.js 이다. 런타임이란 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 말한다.Javascript 언어도 독립적인 언어가 아닌 스크립트 언어이다. 스크립트 언어는 특정한 프로그램 안에서동작하는 프로그램이기 때문에 Javascript 런타임 환경이 필요하다. Express공식홈페이지에서 나온 설명을 보면 Express 는 웹 및 모바일 어플리케이션을 위한 일련..

화살표 함수란? 보통 함수를 선언할 때 function 키워드를 사용하지만 ES6 에서 함수를 선언하는 새로운 문법이 등장했다. 바로 화살표 함수이다. 사용하는 방법은 단어 뜻과 같이 " => " 표시를 사용해서 함수를 선언하는 방법이다. // 기존 함수 const obo = function() { console.log('function 을 사용한 기존 함수'); }; // 화살표 함수 const obo = () => { console.log('function 이 제거된 화살표 함수'); }; 위와 같이 function 이라는 키워드를 사용하지 않고 " () => {} " 형식으로 심플한 형태로 사용된다. 하지만 이러한 심플함뿐만 아니라 사용하는 이유와 제약사항도 존재한다. 화살표 함수 제약 사항 무조건..

input type="text" 형식으로 된 input 태그에 전화번호 입력 시 앞자리 숫자에 따른 자동 하이픈 삽입이필요하여 구현하였다. Javascriptconst cellNumHyphen = (target) => { let value = target.value; if (!target.value) { return ""; } value = value.replace(/[^0-9]/g, ""); const result = []; let restNumber = ""; // 시작번호 02 if (value.startsWith("02")) { result.push(value.substr(0, 2)); restNumber = va..

Object Object.values(object)객체의 속성값들만 배열로 만들어준다.let obj = { a: 'obo', b: 'test' };Object.values(obj);// 결과// ['obo', 'test'] Object.entries(object)객체의 속성명과 속성값을 2차원 배열로 만들어준다.let obj = { a: 'obo', b: 'test' };Object.entries(obj);// 결과// [['a', 'obo'], ['b', 'test']] Object.getOwnPropertyDescriptors(object)객체의 모든 속성 설명들을 보여준다.let obj = { a: 'obo', b: 'test' };Object.getOwnPropertyDescriptors(obj)..