dev-hpk 님의 블로그

JavaScript에서 this 키워드는 가장 혼란스러우면서도 중요한 개념 중 하나입니다. this는 함수가 호출되는 맥락(context)에 따라 값이 달라지며, 이를 올바르게 이해하고 사용하는 것이 JavaScript 코드를 작성할 때 매우 중요합니다.이번 포스팅에서는 this가 무엇인지, 다양한 상황에서 어떻게 동작하는지, 그리고 그 사용법을 명확히 이해하기 위한 실전 예시들을 함께 알아보겠습니다.   JavaScript - this 목차 1. this란? 2. this의 다양한 동작 상황 3. 화살표 함수와 this 4. 주의 사항 - 콜백 함수에서 this 5. this의 명시적 바인딩마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. this란? this는 함수가 어디서 어떻게 호출되..

JavaScript에서 spread 구문(...)은 배열과 객체를 복사하거나 병합하는데 매우 유용한 문법입니다. 특히 간결한 코드로 데이터를 다룰 수 있어 자주 사용됩니다. 하지만, spread 구문이 항상 얕은 복사(shallow copy)를 수행한다는 점을 이해하는 것이 중요합니다. 이 글에서는 얕은 복사와 깊은 복사의 차이점을 설명하고, 어떤 경우에 spread 구문이 적합한지, 그리고 깊은 복사가 필요한 경우 어떻게 처리해야 하는지 알아보겠습니다.    자바스크립트의 얕은 복사와 깊은 복사 목차   1. 얕은 복사 2. 깊은 복사 3. 적절한 사용법 4. 얕은 복사의 위험성마무리추천글 얕은 복사얕은 복사는 객체나 배열의 참조값을 복사하는 것을 의미합니다. 즉, 배열이나 객체의 각 요소가 원시형(P..

JavaScript에서 배열(Array)은 데이터를 순서대로 저장하는 데 사용되는 매우 중요한 자료형 중 하나입니다. 배열은 숫자, 문자열, 객체 등 다양한 타입의 데이터를 저장할 수 있으며, 이를 다루기 위해 다양한 메소드(함수)를 제공합니다. 이번 포스팅에서는 JavaScript 배열과 배열을 다루는 주요 메소드들에 대해 살펴보겠습니다.    자바스크립트의 배열과 주요 메소드 목차   1. 배열이란? 2. 배열 메소드 3. 배열 메소드 사용 시 주의사항 마무리 추천글  배열배열은 객체(object)의 일종으로, 인덱스를 기반으로 여러 데이터를 저장하는 자료구조입니다. 배열의 길이는 동적으로 변하며, 배열 안에 모든 타입의 데이터를 혼합하여 저장할 수 있습니다.// 빈 배열 선언let arr = [];..

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 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 에 대한 규칙을 정하고 저장소를 잘 활용하기 위..

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

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

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

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

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