궁금한게 많은 코린이의 Developer 노트

오늘은 제가 놓쳤던 부분에 대해 기록해볼까 합니다. '버튼'을 클릭하면 동적으로 알림창을 만들어주고 '닫기'를 클릭하면 동적으로 알림창을 꺼주는 간단한 코드 입니다. Html 알림창임 //'버튼' 클릭 시 알림창 열기 버튼 //'닫기' 클릭 시 알림창 닫기 닫기 Css .alert-box{ display: none; width:500px; padding:20px; border-radius: 10px; background-color: rgb(167, 255, 255); } 보통 이벤트 경우 script 태그 안에 많이 적어서, Html 상에서 이벤트를 작성하는 것은 되게 오랜만이여서 신선하게 다가오네요 ㅎㅎ 원리는 div 박스를 display:none;으로 처리를 해놓았다가 '버튼'을 클릭하면 displa..

안녕하세요! 어제 지리산 등반을 하고 온 기념으로(?) Destructuring 문법에 대해 정리해 보겠습니다. Destructuring의 사전적 의미는 무엇일까? 궁금해서 찾아보았습니다. 별거없다. 그냥 구조분해라는 뜻을 가지고 있습니다.(...) 구조분해 할당 Destructuring = '패턴 매칭' : 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게하는 ES6문법이다. => 직관적으로 변수를 만들어 사용할 수 있음. 구조 분해 할당은 할당문의 좌변에서 사용하여 원래 변수에서 어떤 값을 분해해 할당할지 정의한다. Destructuring 문법은 크게 배열구조분해와 객체 구조분해로 나눌 수 있다. 배열 구조 분해 예시- var x = [1, 2, 3, 4, 5]; var [y,z] = ..

가끔 코드를 치다가 매개변수가 뭐였지..? 할때가 발생해서 개념에 대해 간략히 정리해 놓으려고 한다. 매개변수란? : 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 말한다. 인수란(arguments)? : 함수가 호출할 때 함수로 값을 전달해주는 값을 말합니다. 자바스크립트에서는 함수로 정의할 때 매개변수의 타입을 따로 정의하지 않는다고 한다. 함수를 호출할 때도 인수로 전달된 값에 어떠한 타입 검사도 하지 않는다. 함수를 호출할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와는 달리 오류를 발생시키지 않는다. ※ 자바스크립트는 전달되지 않은 나머지 매개변수에 자동으로 'undefined' 값을 설정한다. 매개변수를 가지는 함수에 각각 다른 수의 인자를 전달하..

코드에서 간간히 보이는 백틱.. 어떤 경우에 사용하는 걸까? 사용하면 어떤 점이 좋을까 등등의 궁금증을 가지고 검색해보았습니다. 1. 템플릿 리터럴이란 ES6부터 새로 도입된 문자열의 표기법입니다. 문자열 생성 시 따옴표 대신 백틱(`)을 사용합니다. 그래서 왜 사용하는 거냐고? 백틱으로 템플릿 리터럴을 사용하면, 줄바꿈 등을 쉽게 표현할 수 있습니다. var a = ` Hello, I want to be front-end developer! `; 기존 따옴표를 사용할 때는 줄바꿈이 허용되지 않아, 백슬러시로 시작하는 이스케이프 시퀸스를 사용했지만,(\n, \t 등등..) 백틱을 사용하면서 간편해진 것..!

함수의 종류에는 세가지로 분류할 수 있다. 익명함수: 말 그대로 이름이 없는 함수이다. 익명 함수 let 함수 = function() { console.log("오늘은 햄버거를 먹고 싶다."); }; 선언적 함수: 이름을 선언하여 선언적 함수! 선언적 함수 function 함수() { console.log("안녕하세요."); } 화살표 함수: ( ) => { } 화살표 함수 let 함수 = () => { console.log("안녕하세요."); } 그렇다면 이것들엔 어떤 차이점이 있을까? 익명함수와 선언적 함수의 차이(호이스팅 순서) 호이스팅 순서: 선언적함수 > 익명함수 자바스크립트에서 호이스팅을 할 때 선언적함수가 익명함수보다 먼저 호출되어진다. 이름을 명시한 함수를 먼저 실행하기 때문이다. 익명함수..

공부하면서 BOM DOM과 같은 개념에 대한 이해가 깊지 않은 것 같아 정리해 본다. DOM(문서 객체 모델)이란? : 객체 지향 모델로서 구조화된 문서를 표현하는 형식이다. 모든 요소들과의 관계를 부자관계로 표현할 수 있는 트리 구조로 구성한 것. 자바스크립트를 통해 동적으로 변경할 수 있다. 이미지 제어를 위해 이미지 태그를 가져올 수 있다. 'getElememtByTagname'은 document 객체에 있는 메서드이다. 해당 메서드를 통해 이미지를 제어할 수 있다. **여기서 getElement 's' 복수형으로 쓰여있는 것은 모든 img태그를 선택한다는 의미이다. 리턴값은 배열이 된다. DOM은 Window객체의 하위객체이기 때문에 개발자 도구에서 Window.document 로 접근이 가능하다..

사용자 정의 함수 개념: - 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미. - 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행하기 때문에 코드를 재활용할 수 있다.(사용이 유동적이다.) 사용자 함수란 두가지로 나눌 수 있습니다, 선언적 함수와 익명 함수 인데요, *선언적 함수 : 함수의 앞 또는 뒤에서 호출이 가능합니다. *익명함수 : 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 합니다.

자바스크립트 마우스 이벤트는 2종류로 나눌 수 있다. HTML 삽입 미리보기할 수 없는 소스 기본 형태 1. 마우스 클릭/ 2.마우스 움직임 1. 마우스 클릭 관련 이벤트 onclick = onmouseup + onmousedown 마우스를 클릭했을 때 이벤트 발생. onmouseup = 마우스 커서를 누른 후에 떼었을 때 이벤트 발생. onmousedown = 마우스 커서를 눌렀을 때 이벤트 발생. ondbclick = 더블클릭 했을 때 이벤트 발생. 2. 마우스 움직임 관련 이벤트 onmousemove = 마우스가 움직일 때 마다 이벤트 발생. onmouseover = 마우스가 특정 공간 위에 올려져 있을 때 이벤트 발생. onmouseout = 마우스가 특정 공간에 있다가 나왔을 때 이벤트 발생.