프론트엔드 93

[Git] Git Branch Merge 방법

Git에서 브랜치를 병합(merge)하는 방법은 여러 가지가 있으며, 프로젝트의 상황과 요구 사항에 맞게 적절한 방식을 선택하는 것이 중요합니다. 이번 포스팅에서는 Git에서 자주 사용되는 병합 방법들과 그 특징을 정리해보겠습니다.    Git Branch Merge 방법과 특징 목차   1. Fast-forward Merge 2. 3-way Merge 3. Squash and Merge 4. Rebase and Merge마무리추천글  Fast-Forward MergeFast-forward Merge는 현재 브랜치의 HEAD가 대상 브랜치의 HEAD로 옮겨가는 방식입니다. 즉, 새로운 병합 커밋을 생성하지 않고, 병합할 브랜치의 커밋을 이어 붙이는 방식입니다.  master와 dev1이 각각 참조하는..

[Git] Git Branch 전략 - Git Flow vs GitHub Flow

개발에서 Git을 사용한 브랜치 전략은 팀의 협업 방식과 릴리스 주기에 큰 영향을 미칩니다. 이 중에서도 많이 사용되는 두 가지 전략인 Git Flow와 GitHub Flow는 각기 다른 특성과 장점을 가지고 있습니다. 이번 포스팅에서는 두 가지 전략을 비교하고, 각 전략이 언제 적합한지 알아보겠습니다.     Git Branch 전략 비교 목차   1. Git Branch 전략 2. Git Flow 3. GitHub Flow 4. Git Flow vs GitHub Flow: 언제 어떤 전략을 선택할까? 5. 마무리 6. 추천글  Git Branch 전략여러 개발자가 하나의 저장소에 작업을 할 때, 협업을 좀 더 효과적으로 하기 위해 Git Branch 에 대한 규칙을 정하고 저장소를 잘 활용하기 위..

[JS] 자바스크립트 함수 - 스코프

안녕하세요! 이번 포스팅에서는 자바스크립트의 중요한 개념인 스코프(Scope)에 대해 다뤄보겠습니다. 이 두 가지는 자바스크립트를 이해하고 활용하는 데 꼭 알아야 하는 핵심 개념들입니다. 헷갈릴 수 있는 부분이 많아서 자세히 정리해보았습니다.    자바스크립트(JavaScript)의 스코프목차 1. 스코프란? 2. 스코프의 종류 3. 함수 스코프와 블록 스코프 4. 스코프 체인 5. 렉시컬 스코프추천글 스코프 (Scope)란? 스코프 (scope)는 식별자(identifier,변수,함수,클래스의이름)가 유효한범위를 의미합니다.자바스크립트에서 스코프는 크게 전역 스코프와지역 스코프두 가지로 나눌 수 있습니다. 스코프가 필요한 이유스코프가 없다면 같은 이름을 갖는 식별자들끼리 출돌이 발생할 수 있습니다.co..

[JS] 자바스크립트 함수

안녕하세요! 이번 포스팅에서는 자바스크립트의 함수(Function)에 대해 다뤄 보겠습니다. 자바스크립트를 제대로 이해하려면 함수의 개념을 확실히 알고 있어야 합니다. 그럼 함수가 뭔지, 어떻게 쓰는지, 다양한 함수의 형태를 차근차근 알아보도록 하겠습니다.    자바스크립트(JavaScript)의 함수 자바스크립트의 함수  1. 함수란? 2. 함수 선언 방법 3. 다양한 함수 형태 4. 매개변수와 인자 마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 함수란?함수는 하나의 작업을 수행하는 코드의 묶음입니다. 특정 작업을 여러 번 반복하거나 값을 계산할 때 사용하는 도구라고 생각하시면 됩니다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있습니다. 덕분에 코드의 재..

[JS] 자바스크립트의 자료형

안녕하세요! 이번 포스팅에서는 자바스크립트(JavaScript)에서 다루는 자료형에 대해 다뤄 볼게요. 자바스크립트는 동적이고 느슨한 타입의 언어라서 변수에 어떤 값이 들어오느냐에 따라 자료형이 결정됩니다. 개발할 때 엄청 유연하게 쓸 수 있다는 뜻이죠! 하지만 너무 자유로워서 가끔은 예상치 못한 결과가 나올 수도 있어요.     자바스크립트(JavaScript)의 자료형자바스크립트의 자료형  1. 원시 자료형(Primitive Types) 2. 객체 자료형(Object Types) 3. typeof 연산자 4. 마무리   원시 자료형 (Primitive Types)Number자바스크립트의 Number는 정수와 실수를 모두 포함합니다. int나 float으로 나누지 않고 모두 Number로 처리합니다. ..

[JS] Input 이벤트

안녕하세요! 오늘은 JavaScript에서 Input 요소와 관련된 이벤트들에 대해 알아보려고 해요. 우리가 웹 페이지에서 사용자가 입력하는 부분, 즉 텍스트 필드나 검색창 등을 다룰 때 이 이벤트들이 정말 중요해요. 사용자가 값을 입력하거나, 수정할 때 즉시 반응하는 기능을 구현할 때 주로 쓰이는 이벤트들이에요.   JavaScript Input 관련 이벤트 Input 관련 이벤트  1. 자주 쓰는 Input 관련 이벤트 2. Input 이벤트 관련 Tip 3. 실전 코딩해보기 4. 마무리추천글  자주 쓰는 Input 관련 이벤트inputinput 이벤트는 사용자가 입력 필드에 값을 입력할 때마다 발생하는 이벤트입니다. 값이 바뀔 때마다 실시간으로 발생하므로, 검색창에서 입력한 값에 맞춰 바로 결과를 ..

[JS] 키보드 이벤트

안녕하세요! 이번 포스팅에서는 JavaScript 키보드 이벤트에 대해 알아보려고 해요. 키보드 이벤트는 사용자가 키보드를 통해 입력하거나 조작할 때 발생하는 이벤트를 의미해요. 우리가 로그인할 때 비밀번호를 입력하거나, 어떤 텍스트 필드를 작성할 때 모두 키보드 이벤트가 발생하는 거죠! 그럼 JavaScript에서 키보드 이벤트를 어떻게 다루는지 알아보겠습니다.   JavaScript 키보드 이벤트  키보드 이벤트  1. 자주 쓰는 키보드 이벤트 2. 키보드 이벤트 속성 3. 실전 코딩해보기마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 자주 쓰는 키보드 이벤트keydownkeydown 이벤트는 사용자가 키보드의 키를 눌렀을 때 발생하는 이벤트입니다. 키를 눌렀을 때 바로 이벤트가 발생하..

[JS] 마우스 이벤트

안녕하세요! 이번 포스팅에서는 웹 개발에서 정말 자주 쓰이는 JavaScript 마우스 이벤트에 대해 알아볼게요. 우리가 웹 페이지에서 마우스를 클릭하거나 움직일 때, 다양한 이벤트가 발생하는데요, 이 이벤트들을 잘 활용하면 훨씬 더 인터랙티브한 웹 페이지를 만들 수 있어요. 그럼 이제 하나씩 쉽게 설명해 드릴게요!   JavaScript 마우스 이벤트  javaScript 마우스 이벤트  1. 자주 쓰이는 마우스 이벤트 2. 이벤트 객체 3. 실전 코딩 해보기 4. 마무리추천글  자주 쓰이는 마우스 이벤트clickclick 이벤트는 대상을 클릭했을 때 발생하는 이벤트입니다.document.querySelector('.element').addEventListener('click', function() {..

[JS] 이벤트 버블링과 캡처링

자바스크립트에서 버블링과 캡처링 개념은 초보 개발자들 이벤트를 이해하는데 어려움을 겪는 주요 원인입니다. 이 글에서는 자바스크립트의 버블링과 캡처링의 개념을 소개하고 추가적으로 이벤트 위임에 대해서 설명 드리겠습니다. 버블링 & 캡처링 이벤트 버블링과 캡처링  1. 버블링 2. 캡처링 3. 이벤트 위임추천글 버블링버블링의 원리는 간단합니다. 이벤트가 발생한 요소부터 점점 상위 요소로 거슬러 올라가 window까지 이벤트를 전파하는 것입니다. 거품(Bubble)이 물 아래에서부터 위로 올라가는 것 같다고 해서  버블링이라는 이름이 붙었다고 합니다.  See the Pen Untitled by sumin (@hp2580) on CodePen." data-ke-type="html">HTML 삽입미리보기..

[JS] 자바스크립트로 HTML 속성 및 스타일 다루기

HTML 속성 다루기element.hasAttribute('속성'): 속성이 존재하는지 확인합니다.element.getAttribute('속성'): 속성값을 반환합니다. 속성값이 없다면 null을 반환합니다.element.setAttribute('속성', '값'): 속성을 추가합니다. 속성이 존재한다면 기존 값을 새로 추가하는 값으로 수정합니다.element.removeAttribute('속성'): 속성을 삭제합니다.HTML 비표준 속성 다루기비표준 속성을 다룰 때는 dataset 프로퍼티( data-* 속성)을 사용합니다.dataset testconst content = document.querySelector('.content');console.log(content.dataset.status) // ..