Posis

Equality란? Equality는 동등 연산자를 말하는데 두 개의 피연산자가 동일한지 체크하고 Boolean값인 true와 false를 판별해주는 것을 말합니다. Equality의 문제점 JavaScript는 동적인 언어인데 0과 ''을 비교하면 어떤 값이 출력되는지 아시나요? console.log(0 == ''); // true Number와 String을 비교하는데 왜 true가 나올까요. 이는 JavaScript Equality에서 타입을 비교하지 않고 피연산자를 체크하기 때문입니다. 0과 ''은 둘 다 false로 인지하기 때문에 false == false로 생각하고 true라는 값을 출력하게 됩니다. 이를 보완하기 위해서 Strict Equality(===)가 있습니다. Strict Equa..

var를 지양해야 하는 이유 재선언이 가능하므로 코드에 에러가 생길 수 있다. var은 같은 변수명으로 재선언이 가능합니다. 이로 인해서 코드가 길어졌을 때 의도치 않게 같은 변수명을 선언했을 경우 밑에 선언된 var의 변수의 데이터가 할당되게 됩니다. var age = 22; var age = 23; var age = 24; var age = 25; console.log(age); // 25 만들었던 프로젝트의 코드가 몇천 줄이 넘어갈 때 100번째 줄에서 var age를 선언하고 3500번 줄에서 다시 한번 var age를 선언하게 된다면 3500번 줄에서 재 선언한 age의 데이터가 할당되게 됩니다. 그러면 결괏값이 의도치 않게 다른 값을 출력할 수 있게 되고 이 오류를 찾기 위해서 코드를 다시 한..

이번 포스팅에서는 이벤트 버블링과 캡쳐링에 대해서 다뤄보겠습니다. 이벤트 버블링(Bubbling) 버블링이란 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 계속해서 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하는 것을 말합니다. See the Pen Untitled by MinJaeHong (@jaehong94) on CodePen. 위에 예시를 클릭해보면 P 상자를 클릭할 경우: P -> DIV -> FORM -> Body -> HTML 순으로 알림 창이 뜨는 것을 확인할 수 있습니다. DIV 상자를 클릭할 경우는 DIV 부터 HTML 순으로 알림 창이 뜹니다. 이러한 현상, 클릭한 요소에서 최..

이번 포스팅은 Carousel.js의 공식 Github페이지를 토대로 작성하였습니다. DEMO: https://ryujun.github.io/demos/JavaScript/Carousel/ Github: https://github.com/RyuJun/Carousel.js 지원 chrome, firefox, while 등등의 모던 브라우저 및 ie9 버전 이상에서 지원함 ( ie9 에서는 transition이 적용되지 않아서, Motion 등이 default로 적용됨 ) 설치 및 사용방법 일반 웹 페이지 웹 페이지에서 사용하려면 html파일 ... carousel.js는 es6++문법으로 작성되어 ie에서 작동하지 않습니다. carousel.min.js는 트랜스 파일링이 완료된 파일로써 이를 사용하면 ie..

Ajax(Asynchronous JavaScript and XML) 란? JavaScript를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 새로고침(Reloaded) 하지 않고 필요한 부분만 렌더링 하는 프로그래밍 방식을 말합니다. Ajax의 장단점 장점 페이지 이동 없이 고속으로 화면을 전환할 수 있다. 서버 처리를 기다리지 않고, 비동기 요청이 가능하다. 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다. 플러그인 없이도 인터렉티브 한 웹페이지 구현할 수 있다. 단점 Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다. HTTP 클라이언트의 기능이 한정되어 있다. 페이지 이동없는 통신으로 인한 보안상의 문제 지원..

이번 포스팅은 여러 개 모달창 또는 대화상자같은 창들을 원하는 순서대로 제거하는 것을 구현해보겠습니다. 완성된 화면 HTML Alert1 X Alert2 X Alert3 X Alert4 X CSS .alert-box { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; border-radius: 8px; height: 80px; padding: 20px; box-sizing: border-box; } .alert-box:nth-of-type(1) { background: indianred; } .alert-box:nth-of-type(2) { background: royalblue; } .alert-b..