도룩이의 개발일기

preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 1번은 직관적이니까 예시는 생략하고 2번을 예시로 들자면 예시 이러한 구구단의 정답을 받는 form 이 있고, 거기에 EventListener 를 추가해주었습니다. 정답 form 밑에는 resultDiv 가 있어서 정답 여부를 출력하게끔 하였습니다. 이 함수를 실행하면 밑에 정답! 혹은 땡! 이..

방법 1. function 함수이름 {} function fun1() { return true; } function fun1(a,b) { return a+b; } 파싱하는 단계에서 함수가 정의된다. 방법 2. var a = 함수 (익명함수) var fun2_1 = function() { return true; } var fun2_2 = function(a,b) { return a+b; } 변수에 함수를 할당한다. 런타임 단계에서 함수가 정의된다. 그렇기 때문에, 방법 1과 다르게 함수 선언 순서에 따라 함수가 잘 작동하지 않을 수 있다! 방법3. Function을 이용한 객체로서의 선언 var fun3 = new Function("a", "b", "a+b"); 잘 안쓰인다고 한다. 방법4. 화살표함수 v..

화살표함수(Arrow function)는 ES6부터 쓸 수 있는 일종의 익명 함수이다. 일반적인 화살표함수의 모습은 이러하다. const fun1 = () => { return true; } 화살표 함수와 기존 함수의 차이점은? 왜 화살표 함수가 생겼을까? 1. this의 차이. 기존 함수는 this 가 호출시에 동적으로 결정되고, 화살표함수는 선언시에 정적으로 this가 결정된다. 기존 함수 (동적인 this) var obj = { state: 0, addState: function(){ btn.addEventListener('click', function(){ this.state += 1; }); } }; 화살표 함수 (정적인 this) var obj = { state: 0, addState: fun..

Document document도 윈도우 객체의 속성이기 때문에 window.document 이렇게 접근해야합니다. 하지만 window는 생략 가능(전역 객체)하기 때문에 그냥 document로 접근하면 되겠습니다. 역시 콘솔에 document하고 점을 쳐보면 수 많은 속성과 메소드들을 보실 수 있습니다. window 객체 때 했던 것처럼 document 객체에서도 자주 쓰이는 것만 집어드리겠습니다. document는 html에 관한 것들을 담당하는 객체이니만큼 대부분의 것들이 태그를 선택하고 조작하는 데 사용됩니다. document.getElementById(아이디) html에서 해당 아이디를 가진 태그를 선택합니다. document.getElementById('app-root'); // ... doc..

1. 대표적인 내장 함수 ( console.log ) 예시 1. console.log(console)한 결과. 이 때 console은 Object이고, log는 함수이다. t { log: [Function], error: [Function], info: [Function], warn: [Function], dir: [Function], time: [Function], timeEnd: [Function], trace: [Function], assert: [Function], clear: [Function], stdout: { [Function] clear: [Function] }, _times: {} ... } 예시 2. 함수 호출하기. 이 때 `(백틱)을 사용하여 깔끔한 문장을 구사하였다. functio..

정보로서의 HTML 시대가 변하면서 HTML 역시 빠르게 변하면서 시맨틱 웹이 등장하였다. 이제 HTML은 단순하게 표현형식 뿐만 아니라, 더 가치있는 '정보'로서의 HTML을 추구하게 되었다. 정보의 의미가 퇴색되어 버리는 태그는 버리고, 구체적으로 구조화하는 등의 다양한 변화를 겪고 있다. 1) 버리고 : 온전히 정보만을 나타내도록, 글꼴 태그인 font 태그는 퇴출되었다. 이를 CSS가 대신 처리한다. 2) 의미는 명확하게 : meta 태그는 명확한 의미가 있는 정보가 되기 위해 명시한다. 3) 보다 의미론적으로 : semantic 태그들은 HTML5 부터 등장하였다. 특별한 기능은 없으나 보다 가치있는 정보가 되기 위해, 유지보수를 위해, CSS에서 편하게 모양을 잡기 위해 사용한다. 시맨틱 태그..

1. Array(배열) 1) 배열에 데이터를 보관하고 조작하는 기본 방법 const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; console.log(daysOfWeek); // [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ] console.log(daysOfWeek[2]); // Wed console.log(daysOfWeek[100]); // undefined //배열 선언, new Array()로도 가능하지만, []가 간단하고 성능 상 차이도 없어서 []를 많이 쓴다. var a = []; //배열 안에는 함수, 배열, 객체 등 모든 타입이 다 들어갈 수 있다. var a = [1,2,..

Javascript 데이터 타입 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 말한다. JavaScript의 데이터 타입 종류 원시 타입 (Primitive data type) : 원시 타입의 값은 변경 불가능한 값 (immutable value)이며 pass-by-value(값에 의한 전달) 이다. Number String Boolean null undefined symbol (ES6에서 추가됨) 객체 타입 (object / reference type) * object 1. Number (숫자형) 프로그래밍 언어에서의 숫자는 우리가 일반적으로 알고 있는 숫자와 그 성격이 사실상 동일하다. 우리는 숫자를 이용하여 덧셈(+)/뺄셈(-)/곱셈(*)/나눗셈(/..