이벤트(event)란 애플리케이션에서 발생하는 사용자의 마우스 클릭 click, 키보드 입력 keydown 등과 같은 활동이며, 이벤트 드리븐 프로그래밍(Event-driven Programming)은 이러한 이벤트를 중심으로 프로그램을 제어하는 방식을 일컫는다. 이벤트 핸들러란? 특정한 이벤트가 발생했을 때, 호출되는 코드(대부분의 경우 함수)를 이벤트 핸들러(Event Handler)라 한다. 아래의 코드는 클릭 시 배경 색상을 임의로 바꾸는 이벤트 핸들러를 구현한 것이다. 이벤트 핸들러 추가는 어트리뷰트 방식, 프로퍼티 방식, addEventListener메서드 방식으로 할당할 수 있는데, 오늘날에는 addEventListener 방식을 가장 많이 사용한다 아래 버튼 클릭 시 이벤트 리스너의 cli..

DOM이란 무엇일까? 브라우저의 콘솔 창을 켜고 document라고 입력하면 해당 웹페이지의 HTML 객체가 반환된다. 이번 포스팅에서는 MDN 문서를 바탕으로 DOM의 뜻과 간단한 활용 예시를 정리해 보려고 한다. DOM이란? DOM이란 The Document Object Model의 약자로 HTML 문서(Document) 객체(Object)와 상호작용하는 모델(Model)을 의미한다. 즉, DOM을 통해 HTML 요소를 객체처럼 접근해 다룰 수 있다. document.title // 현재 웹페지의 제목에 접근할 수 있다 document.title = "New Title" // 웹페이지의 제목을 변경할 수 있다! 브라우저와 DOM 브라우저는 HTML 문서를 파싱하여 DOM을 생성한다. 이를 통해 HTM..

자바스크립트를 처음 공부하는 입장에서 가장 난감한 것 중 하나가 용어의 의미를 제대로 이해하기 어렵다는 것이었다. 그 중에서도 한글로 읽으면 어떤 의미인지 알 거 같으나, 정작 프로그래밍 용어로는 정의하기 어려운 용어들이 바로 '값, 표현식, 구문, 리터럴'이었다. 이번 포스팅에서는 해당 용어들을 정리해보려고 한다. (각 용어의 개념 정의는 위키북스 를 참고했다.) 값이란? 값은 표현식의 결과이다. 최대한 쉽게 적어보려 했지만, 개인적으로 상당히 난감한 정의라 생각한다. 표현식의 의미를 아직 모르는 데, 표현식의 결과라는 문장을 어떻게 이해해볼 수 있을까? 우선, 여기서는 다음 예제를 보고 의미를 직관적으로 이해해 보는 것이 좋을 것 같다. 다음이 값이다. 1 30 + 10 표현식이란? 이제 표현식에 대..

Node.js 개념 Node.js는 구글의 V8 자바스크립트 엔진을 사용하는 런타임 환경으로 2009년 라이언 달이 개발했습니다. Node.js는 브라우저 이외의 환경에서 자바스크립트를 실행하기 위해 설치하여 사용합니다. Node.js를 통해 기존에는 브라우저에서만 작동할 수 있었던 자바스크립트를 다양한 곳에서 사용할 수 있게 되었으며, 서버 사이드 애플리케이션 개발 등 백엔드 영역에서도 자바스크립트를 사용할 수 있게 되었습니다. 물론, 기존에 브라우저에서 작동하는 자바스크립트를 동일하게 실행할 수도 있습니다. Node.js는 페이팔, 넷플리스, 링크드인, 네이버 등의 기업에서 실제로 사용되고 있습니다. V8 자바스크립트 엔진의 특징 자바스크립트 엔진(V8)은 자바스크립트를 실행하는 힙과 콜 스택으로 구..

자바스크립트 for... in 구문은 객체의 키 및 속성 값을 반환하는 데 사용할 수 있으며, 다음과 같은 형태로 반복할 객체의 프로퍼티를 받을 변수를 선언하여 사용한다. (예제 출처는 MDN). const object = { a: 1, b: 2, c: 3 }; for (const property in object) { console.log(`${property}: ${object[property]}`); } // 출력값 // "a: 1" // "b: 2" // "c: 3" 한 가지 주의할 점은 for.. in 구문은 임의의 순서로 객체 속성을 반복한다는 것이다. for... in 구문은 특정 순서에 따른 값 반환을 보장하지 않는다. 따라서 배열 반복에는 사용하지 않는 것이 좋으며, 객체의 속성을 확인하..

자바스크립트에는 ||(or), &&(and), !(not) 세 가지의 논리 연산자가 존재한다. 명칭은 논리 연산자지만, 불리언 뿐만이 아닌 모든 데이터 유형에 사용할 수 있다. 참고로 && 연산자가 || 연산자보다 우선 순위가 높아 먼저 실행된다. || (OR) 자바스크립트에서 || 연산자는 비교하는 값 중 최초의 truthy 값을 찾아 리턴한다. result = value1 || value2 || value3; 위의 예시에서 || 연산자는 왼쪽부터 오른쪽으로 차례대로 연산을 수행하며, 결과가 true 일 경우 연산을 멈추고 해당 값을 리턴한다. 만약, 모든 값이 false 일 경우, 가장 마지막 값을 리턴한다. 다음은 MDN에서 소개하고 있는 || 연산자 예시다. o1 = true || true // ..

오랜만에 고등학교 친구를 만나 함께 저녁을 먹었다. 이제는 오래전 이야기가 되어 버린 지난 학창 시절 이야기들을 하나 둘 꺼내 보다, 호숫가를 따라 걸었다. 새롭게 건축되고 있던 아파트들에 둘러 쌓인 가을 골목의 풍경들. 차가운 공기 속에서 서로를 껴안고 있던 연인들. 가맥집 앞에서 전화 통화를 하며 담뱃재를 털어내는 아저씨들. 마스크를 쓴 채 아이들의 손을 잡고 횡단보도를 건너던 가족들을 우리는 지나온 터였다. 어둠을 밝히는 조명을 따라 산책길이 이어졌고, 한 걸음 내딛는 발 아래에서 느껴지는 작은 나무다리의 떨림을 새삼스러워하며 걸었다. 한 걸음, 한 걸음 걷다 보니 어느새 호수를 한 바퀴 다 돌았고, 연꽃잎이 듬성듬성 보이는 호수의 끝자락에서 우리는 좁고 으슥한 길로 들어섰다. 시지푸스의 밤은 어떠..

웹 개발자란 무엇이며 어떤 일을 할까요? 원문보기 20세기 말부터 인터넷은 급격하게 발전해 왔습니다. 오늘날 지구상의 거의 모든 이들이 매일 인터넷을 사용합니다. 웹 개발자는 많은 보수를 받는 흥미로운 직업 중 하나로 부상했습니다. 웹 개발자는 무엇이며, 정확히 어떤 일을 할까요? 이번 글을 통해 우리는 웹 개발자란 무엇이며, 웹 개발자의 유형과 함께, 웹 디자인과 웹 개발 간의 논쟁들을 살펴볼 것입니다. 또한, 웹 개발자들에게 가장 잘 알려진 프로그래밍 언어인 파이썬, 자바스크립트, HTML에 대해서도 이야기 할 것입니다. 웹 개발자의 주된 특징들은 무엇인가요? "웹 개발자란 무엇인가요?"라는 질문에 답하기 위해 우리는 웹 개발자는 어떤 일을 하며, 어떻게 이 일을 하는지 살펴봐야 합니다. 웹 개발자 ..