개발
깃랩 사용법 (1) 터미널을 통해 설치하고 시작하기
깃(Git)은 오픈소스 버전 컨트롤 시스템으로, 크고 작은 프로젝트를 빠르고 효율적으로 관리하기 위한 것입니다. 깃랩(GitLab)은 깃 위에서 구축되었습니다. 깃랩은 훌륭한 인터페이스를 제공하지만, 보다 복잡한 작업을 처리하기 위해서는 커맨드 라인을 통해 깃을 사용해야 합니다. 깃랩의 깃 치트 시트는 이곳에서 다운로드 할 수 있습니다. 깃랩 홈페이지에서 제공하는 사용법을 정리한 것입니다. 원문은 이곳에서 확인하실 수 있습니다. 시작하기 깃 커맨드를 시작하기 위해서는 커맨드 셸(터미널)을 실행해야 합니다. 자체 내장된 터미널을 사용하거나 통해 열거나, 맥 사용자의 경우 iTerms2와 같은 프로그램을 사용할 수 있습니다. 깃 설치하기 커맨드 셸에서 다음 명령어를 입력해 깃이 설치되어 있는지 확인합니다. ..
자바스크립트 DOM 타겟 이벤트 메소드 활용하기
자바스크립트 DOM에서는 target 이벤트 메소드를 사용하여 이벤트가 발생하는 요소에 접근할 수 있습니다. 아래의 코드는 클릭 시 해당 이벤트를 수신한 클래스 이름을 출력합니다. document.addEventListener('click', function myFunction(e) { console.log(e.target.getAttribute('class')); }) 또는 아래와 같이 target.nodeName을 통해 노드의 이름에 접근할 수도 있습니다. 이외에도 부모 노드(parentNode), 자식 노드 리스트(childNodes), 첫 번째 자식 노드(firstChild), 마지막 자식 노드(lastChild) 등에도 접근할 수 있습니다. document.addEventListener('cli..
[JavaScript] ⑦ 자바스크립트 DOM 이벤트 핸들링
이벤트(event)란 애플리케이션에서 발생하는 사용자의 마우스 클릭 click, 키보드 입력 keydown 등과 같은 활동이며, 이벤트 드리븐 프로그래밍(Event-driven Programming)은 이러한 이벤트를 중심으로 프로그램을 제어하는 방식을 일컫는다. 이벤트 핸들러란? 특정한 이벤트가 발생했을 때, 호출되는 코드(대부분의 경우 함수)를 이벤트 핸들러(Event Handler)라 한다. 아래의 코드는 클릭 시 배경 색상을 임의로 바꾸는 이벤트 핸들러를 구현한 것이다. 이벤트 핸들러 추가는 어트리뷰트 방식, 프로퍼티 방식, addEventListener메서드 방식으로 할당할 수 있는데, 오늘날에는 addEventListener 방식을 가장 많이 사용한다 아래 버튼 클릭 시 이벤트 리스너의 cli..
[JavaScript] ⑥ 자바스크립트 DOM 뜻과 활용 방법
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 개념 Node.js는 구글의 V8 자바스크립트 엔진을 사용하는 런타임 환경으로 2009년 라이언 달이 개발했습니다. Node.js는 브라우저 이외의 환경에서 자바스크립트를 실행하기 위해 설치하여 사용합니다. Node.js를 통해 기존에는 브라우저에서만 작동할 수 있었던 자바스크립트를 다양한 곳에서 사용할 수 있게 되었으며, 서버 사이드 애플리케이션 개발 등 백엔드 영역에서도 자바스크립트를 사용할 수 있게 되었습니다. 물론, 기존에 브라우저에서 작동하는 자바스크립트를 동일하게 실행할 수도 있습니다. Node.js는 페이팔, 넷플리스, 링크드인, 네이버 등의 기업에서 실제로 사용되고 있습니다. V8 자바스크립트 엔진의 특징 자바스크립트 엔진(V8)은 자바스크립트를 실행하는 힙과 콜 스택으로 구..
자바스크립트 for... in 구문 정리
자바스크립트 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 // ..
