전체 글
자바스크립트 this 의 개념과 바인딩 설명
자바스크립트 this란 대체 무엇일까요? 그리고 this를 이해하는 일은 유독 어려운 것일까요? 이번 포스팅에서는this의 정의와 바인딩에 대해 살펴보도록 하겠습니다. this의 정의 this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수'다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. 이웅모 저 정의를 자세히 살펴보면 중간에 '또는'이라는 표현이 사용된 것을 볼 수 있습니다. 이는 this가 고정된 값에 바인딩되지 않기 떄문입니다. this는 '함수가 호출되는 방식'에 따라 '동적'으로 결정됩니다. this라는 대명사를 키워드로 사용한 것도 이러한 맥락에서 이해해볼 수 있습니다. this 의 이해 그렇다면 이러한 ..
자바스크립트 객체 생성자 함수란?
객체 생성자 함수란? 객체 생성자 함수란 객체의 인스턴스를 생성하는 함수입니다. new 연산자를 사용해 다음과 같이 빈 객체를 생성할 수 있습니다. const car = new Object();이처럼 생성자 함수를 통해 생성한 객체를 인스턴스라 합니다. 다음과 같이 생성한 인스턴스에 프로퍼티나 메소드를 추가할 수도 있습니다. car.name = 'K5'; car.start = function () { console.log('Starting up the engine'); }; console.log(car.start()); // Starting up the engine.자바스크립트에는 객체 뿐만 아니라 문자열, 숫자, 불리언, 함수 등을 생성자 함수를 통해 생성할 수 있습니다. ..
div 요소 화면 중앙 정렬하는 방법 ✔️
HTML에서 div 요소를 중앙 정렬해야 할 때가 있습니다. div 내 콘텐츠는 text-align 을 통해 정렬할 수 있지만, div 자체를 페이지 내 중앙으로 정렬하려면 약간의 트릭이 필요합니다다. 1. 다음과 같이 position: abosulte와 left, top 및 transform 속성을 사용하면 요소를 화면 가운데로 정렬할 수 있습니다. See the Pen Div Element Align Center by Jeong (@jeongKR) on CodePen. 2. flex 속성을 이용한 중앙 정렬도 가능합니다. flex 속성에 대한 자세한 내용은 이곳에 정리해보았습니다. .container { display: flex; justify-content: center; align-items: c..
HTML 라디오 버튼 설명
라디오 버튼은 여러 선택지들 중에서 하나를 선택해야 할 때 사용합니다. 라디오 버튼은 보통 여러 개의 라디오 버튼이 존재하는 라디오 그룹을 구성하며 태그에 type="radio" 속성을 부여해 생성합니다. Please select your favorite food: Orange Banana Tomato Submit 이러한 라디오 그룹을 구분하는 기준은 name 속성입니다. 동일한 name인 경우, 같은 라디오 그룹에 속합니다. 라디오 버튼은 하나만 선택할 수 있으며, value 속성을 통해 선택된 라디오 버튼 값을 저장할 수 있습니다. 그러나 위 태그와 속성은 사용자 화면에는 표시되지 않습니다. 따라서 다음과 같이 id와 태그의 for 속성을 사용해야 합니다. Orange 이를 활용해 다음과 같은 라디오..
Ajax란 무엇일까?
Ajax란? Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 통해 브라우저에서 서버로 데이터를 비동기 방식으로 요청하고, 해당 데이터를 사용해 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 의미합니다. Ajax 방식을 사용하면 웹페이지를 새로고침 하지 않고도 필요한 데이터를 갱신할 수 있습니다. 비동기 방식이란? 일반적으로 요청에는 동기(synchronous)와 비동기(asynchronous)가 존재합니다. 동기식 요청은 하나의 프로세스를 마치면 다음 프로세스가 실행되는 순차적인 진행 방식을 의미합니다. 이는 하나의 프로세스가 진행중일 때, 다른 프로세스가 실행될 수 없다는 의미이기도 합니다. 이와 달리 비동기식 요청은 서버와 통신하는 동안 여러 프로세스를 동시에 처리..
자바스크립트 세미콜론은 언제 사용할까?
세미콜론은 언제 사용할까? 자바스크립트에서는 문(statement)의 마지막에 세미콜론 ; 을 원칙적으로 적는다. 자바스크립트 엔진은 이러한 세미콜론을 기반으로 각 문의 종료 위치를 파악한다. 그러나 코드 블록 {...} 뒤에는 세미콜론을 붙이지 않는다. 코드 블록문은 자체적인 종결성을 갖고 있기 때문이다. 따라서 if문, for문, 함수 문 등의 코드 블록 뒤에는 세미콜론을 붙이지 않는다. 반면, 객체를 선언한 중괄호 {} 뒤에는 세미콜론을 붙인다. 이는 코드 블록이 아니라, 객체를 표현하는 리터럴 방식의 값 할당이기 때문이다. 대다수의 개발자들이 세미콜론을 원칙에 맞게 붙이는 것을 지향하지만, 이를 생략해도 무방하다는 주장도 있다. 자바스크립트 엔진에는 각 문의 종료 시점을 판단해 자동으로 이를 삽입..
깃랩 사용법 (4) 브랜치 및 커밋, 머지 명령어 설명
깃랩 사용법 마지막 포스팅입니다. 이번 포스팅에서는 브랜치의 개념과 사용 방법에 대해 알아보도록 하겠습니다. 깃랩 홈페이지에서 제공하는 브랜칭 개념을 정리한 것입니다. 원문은 이곳에서 확인하실 수 있습니다. 브랜치 또는 브랜칭이란? 프로젝트에 코드를 추가하고 싶지만, 작업이 제대로 되었는지 확신할 수 없거나 다른 이들과 협업을 진행하고 있다면, 서로 다른 브랜치(branch)에서 작업하는 게 좋습니다. 브랜칭(branching)은 이러한 브랜치와 관련한 작업을 의미합니다. (기본이 되는 프로젝트를 메인 브랜치 또는 나무라 생각하시면 됩니다.) 깃 리포지토리에 브랜치를 생성하면, 브랜칭 되는 시점에 파일이 복사됩니다. 브랜치에서 하는 작업은 메인 브랜치 또는 다른 브랜치에 아무런 영향을 주지 않습니다. 이..
깃랩 사용법 (3) 기본 명령어 정리
이번 포스팅에서는 기본적인 깃 명령어를 살펴보도록 하겠습니다. 이 포스팅은 깃랩의 샘플 프로젝트(https://gitlab.com/gitlab-tests/sample-project/) 를 기반으로 작성되었습니다. 보다 많은 명령어는 깃랩 홈페이지와 깃랩 치트 시트에서 확인할 수 있습니다. 깃랩 홈페이지에서 제공하는 명령어를 정리한 것입니다. 원문은 이곳에서 확인하실 수 있습니다. 리포지토리 클론하기 리포트 리포지토리를 로컬에서 작업하려면, git clone 명령어를 통해 클론을 진행합니다. 각 페이지의 랜딩 페이지에서 Clone 탭을 이용할 수 있습니다. HTTPS 방식을 예로 들어보겠습니다. 터미널을 실행하고, git clone 명령어를 통해 다음과 같이 리포지토리를 클론할 수 있습니다. git clo..
