전체 글
깃랩 사용법 (4) 브랜치 및 커밋, 머지 명령어 설명
깃랩 사용법 마지막 포스팅입니다. 이번 포스팅에서는 브랜치의 개념과 사용 방법에 대해 알아보도록 하겠습니다. 깃랩 홈페이지에서 제공하는 브랜칭 개념을 정리한 것입니다. 원문은 이곳에서 확인하실 수 있습니다. 브랜치 또는 브랜칭이란? 프로젝트에 코드를 추가하고 싶지만, 작업이 제대로 되었는지 확신할 수 없거나 다른 이들과 협업을 진행하고 있다면, 서로 다른 브랜치(branch)에서 작업하는 게 좋습니다. 브랜칭(branching)은 이러한 브랜치와 관련한 작업을 의미합니다. (기본이 되는 프로젝트를 메인 브랜치 또는 나무라 생각하시면 됩니다.) 깃 리포지토리에 브랜치를 생성하면, 브랜칭 되는 시점에 파일이 복사됩니다. 브랜치에서 하는 작업은 메인 브랜치 또는 다른 브랜치에 아무런 영향을 주지 않습니다. 이..
깃랩 사용법 (3) 기본 명령어 정리
이번 포스팅에서는 기본적인 깃 명령어를 살펴보도록 하겠습니다. 이 포스팅은 깃랩의 샘플 프로젝트(https://gitlab.com/gitlab-tests/sample-project/) 를 기반으로 작성되었습니다. 보다 많은 명령어는 깃랩 홈페이지와 깃랩 치트 시트에서 확인할 수 있습니다. 깃랩 홈페이지에서 제공하는 명령어를 정리한 것입니다. 원문은 이곳에서 확인하실 수 있습니다. 리포지토리 클론하기 리포트 리포지토리를 로컬에서 작업하려면, git clone 명령어를 통해 클론을 진행합니다. 각 페이지의 랜딩 페이지에서 Clone 탭을 이용할 수 있습니다. HTTPS 방식을 예로 들어보겠습니다. 터미널을 실행하고, git clone 명령어를 통해 다음과 같이 리포지토리를 클론할 수 있습니다. git clo..
깃랩 사용법 (2) 깃 기본 용어 정리
이번 포스팅에서는 깃에서 사용되는 기본 용어들인 네임스페이스(namespace), 리포지토리(repository), 포크(fork) 등을 정리해보도록 하겠습니다. 깃랩 홈페이지에서 제공하는 용어를 정리한 것입니다. 원문은 이곳에서 확인하실 수 있습니다. 네임스페이스 네임스페이스(namespace)는 사용자 또는 그룹의 이름입니다. 예를 들어, GitLab.com에서 jo 라는 이름을 사용하는 사용자가 있다면, https://gitlab.com/jo에서 프로파일을 확인할 수 있습니다. 여기서 jo 가 바로 네임스페이스입니다. Jo가 test-group 에 참여하면, https://gitlab.com/test-group 에서 그룹 프로필에 접근할 수 있으며, test-group 이 네임스페이스입니다. 리포지..
깃랩 사용법 (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 표현식이란? 이제 표현식에 대..
