Development Vlog

옵셔널 체이닝(Optional Chaining)이란?중첩된 객체에서 프로퍼티에 안전하게 접근할 수 있게 해주는 방법입니다. 객체가 `null`이나 `undefined`일 때 오류 없이 `undefined`를 반환합니다.Error 예시 function printName(user) { console.log(user.dog.name);}const user1 = { name: 'hwichul', dog: { name: 'dal', }}printName(user1); // dalconst user2 = { name: 'shin',}console.log(user2.dog); // undefinedprintName(user2); // TypeError: Cannot read property 'name'..

구글 애널리틱스(Google Analytics)란?구글 애널리틱스(Google Analytics)는 구글이 제공하는 무료 웹 분석 서비스로, 웹사이트나 애플리케이션의 트래픽, 사용자 행동, 전환율 등을 추적하고 분석할 수 있습니다. 이 도구는 웹사이트 소유자, 마케터, 개발자들이 방문자 수, 페이지 조회 수, 방문 시간, 유입 경로 등 다양한 데이터를 실시간으로 모니터링할 수 있도록 도와줍니다.1. 가입하기 Google Analytics 접속하여 데이터 수집을 위해 가입을 먼저 진행합니다.2. 설치가입을 완료하고 데이터 수집을 하기 위해 설치를 먼저 진행해야 합니다.3. 수집된 데이터 확인설치와 배포가 완료되었다면, 수집된 데이터를 확인할 수 있습니다. 여기까지 잘 따라오셨다면 수집된 데이터 확인까지 가..

콜백 함수(Callback)란?콜백 함수란 다른 함수의 인수로 사용하는 함수는 가리킨다. 함수에 파라미터로 들어가는 함수이며, 순차적으로 실행하고 싶을 때 사용한다.함수 이름 사용해 콜백 함수 실행const btn = document.querySelector('button');function display () { alert('click!');}btn.addEventListener('click', display); // 버튼을 클릭하면 display 함수 실행addEventListener() 함수 안에 display() 함수를 넣을 때 소괄호는 없다는 것에 주의해야 한다. `addEventListener()` 함수에서 미리 선언한 `display()` 함수를 인수로 사용하고 있다.이렇게 다른 함수의 인수..

파라미터 (Parameter)함수 선언 부분에서 소괄호 안에 작성된 것이 파라미터, 함수 호출하는 부분에서 파라미터로 전달하는 값을 아규먼트라고 한다.function Func (파라미터) { console.log(파라미터);}Func(아규먼트);파라미터의 기본값기본값이 있는 파라미터는 함수를 호출할 때 아규먼트를 전달하지 않으면, 함수 내부의 파라미터의 기본값을 가지고 동작하게 된다.function Hello (name = 'hwichul') { console.log(`Hi! ${name}`);}Hello('eunju'); // Hi! eunjuHello(); // Hi! hwichularguments 객체arguments 객체는 함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 배열 객체..

Boolean true? false?False(Falsy) - `false`, `null`, `undefined`, `NaN`, `0`, `""`Ture(Truthy) - 나머지 값들 ! `{}`, `[]` 빈 객체, 배열도 포함AND 연산자왼쪽 값이 ture이면 오른쪽 값을 리턴하고, 왼쪽 값이 false이면 왼쪽 값을 리턴console.log(true && true) // true (오른쪽 값 리턴)console.log(true && false) // false (오른쪽 값 리턴)console.log(false && true) // false (왼쪽 값 리턴)console.log(false && false) // false (왼쪽 값 리턴) OR 연산자왼쪽 값이 ture이면 왼쪽 값을, 왼쪽 값이 f..

1️⃣ Git에서 Branch Merge 방법들과 각 방법의 특징을 설명해 주세요. 1. Fast-forward Merge브랜치 간에 새로운 커밋이 없을 때, 단순히 브랜치 포인터를 병합할 브랜치로 이동시키는 방식입니다. 특징브랜치 히스토리가 깔끔하게 유지됩니다.커밋이 추가되지 않으며, 브랜치 간에 충돌이 발생하지 않습니다.병합 커밋이 생성되지 않으므로 병합 이력이 명확하지 않을 수 있습니다. 2. 3-way-Merge (Recursive Merge)브랜치들이 각각 독립적인 커밋을 포함하고 있을 때, 공통 조상(commit)을 기준으로 병합을 시도하는 방식입니다. 특징공통 조상(commit)을 기준으로 두 브랜치의 변경 사항을 비교하고 병합합니다.병합 커밋이 생성되며, 이를 통해 병합된 히스토리를 추적할..

이벤트 핸들러 등록HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에 `Element.addElementListener('type', 'handler')`를 통해서 이벤트 핸들러를 등록 가능하다.// HTML 속성 사용 예시Click// DOM 프로퍼티 사용 예시Click이벤트 핸들러 삭제`addEventListener` 메소드를 활용하여 이벤트 핸들러를 등록했다면, `Element.removeEventListener('type', 'handler')`를 통해서 이벤트 핸들러 삭제 가능하다.브라우저 기본 동작브라우저 기본 동작인 마우스 오른쪽을 클릭하면 상황에 맞는 메뉴 창이 뜨거나, `input`태그에 커서를 두고 키보드 키를 누르면 해당 값이 입력되는 것을 `preventDefa..

window 객체`window` 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체이다.어느 곳에서나 항상 접근할 수 있는 객체이기에 전역 객체, Global Object라 하며, 어떤 프로퍼티나 메소드를 사용하든 전역 객체 내부의 것이기 때문에 앞에 `window.` 생략할 수 있다.DOMDOM이란 Document Object Model의 약자로 문서 객체 모델이다.웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이며, 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분된다.자바스크립트로 태그 선택 방법메소드결과`document.getElementById('id')`id에 해당하는 태그 하나`document.getElementByCl..

1️⃣  시맨틱 태그를 사용하면 좋은 점을 설명해 주세요. 우선 시맨틱 태그란 태그 내용에 의미를 부여하는 태그라고 할 수 있고, ``, ``, ``, ``, ``, `` 등의 태그들이 존재합니다.시맨틱 태그를 사용함에 따라 오는 이점은 세 가지로 접근성, SEO 검색엔진최적화, 가독성 향상입니다.시멘틱 태그는 웹 콘텐츠의 구조를 명확하게 정의해 주므로, 스크린 리더와 같은 보조 기술을 사용하는 시각장애인들에게 큰 도움이 되며, 보조 기술이 페이지의 구조와 내용을 더욱 정확하게 이해할 수 있고, 사용자가 페이지의 특정 부분으로 쉽게 이동할 수 있도록 돕습니다.SEO는 시맨틱 태그를 사용한 웹 사이트를 더 정확하게 크롤링하고, 관련성 높은 결과로 평가하게 되어 웹 사이트 순위 상승과 더 많은 트래픽 유도에..

flex grow`flex-grow`는 요소가 남는 공간을 얼마나 차지할지 결정합니다. `flex-grow: 0`은 확장되지 않고 원래 크기를 유지합니다. `flex-grow: 1`은 남은 공간을 전부 차지합니다. 두 박스에 동일하게 `flex-grow: 1`을 적용하면 남은 공간을 나눠가지고 동일한 비율로 확장됩니다. `flex-grow: 2`를 적용한 박스가 `flex-grow: 1`을 적용한 박스보다 2배 많이 확장됩니다.flex shrink`flex-shrink`는 요소가 공간이 부족할 때 얼마나 줄어들 수 있는지를 결정합니다. `flex-shrink: 0`은 줄어들지 않음. 공간이 부족해도 요소 크기가 그대로 유지됩니다. `flex-shrink: 1`은 기본 값이며, 요소가 공간에 맞게 비율대로..