namerong 님의 블로그

[TIL]JavaScript DOM 조작 완벽 정리

1. DOM(Document Object Model)이란?DOM은 HTML 문서를 트리 구조의 객체로 표현한 것으로, 자바스크립트를 통해 웹 페이지의 요소를 선택하고 수정할 수 있게 해준다.이를 통해 동적인 사용자 인터페이스를 구현할 수 있다.2. DOM 요소 선택2.1 querySelector와 querySelectorAllCSS 선택자를 사용하여 요소를 선택하는 가장 현대적이고 일관성 있는 방법이다.const $apple = document.querySelector('#apple'); // 첫 번째 요소 선택const $firstFruit = document.querySelector('.fruit'); // 클래스가 fruit인 첫 요소const $fruits = document.querySelect..

[TIL]JavaScript ES6 핵심 문법 정리

1. 클래스 (Class)ES6에서 도입된 객체 생성 문법으로, 기존 생성자 함수보다 더 직관적이고 구조적으로 객체를 설계할 수 있다.기본 개념클래스는 객체를 만들기 위한 설계도new 키워드를 통해 인스턴스 생성constructor는 객체 생성 시 1번 실행되는 초기화 함수메서드는 prototype에 저장되어 모든 인스턴스가 공유특징메서드는 인스턴스마다 생성되지 않고 공유됨 → 메모리 효율new 없이 호출 시 에러 발생코드 흐름class Student { constructor(name, group) { this.name = name; this.group = group; } introduce() { console.log(`안녕하세요! ${this.group}반 ${this.name}입..

1. 생성자 함수 (Constructor Function)객체를 반복해서 만들 때 사용하는 함수이다.기존 방식은 같은 구조의 객체를 계속 작성해야 하는 비효율이 있다.특징함수 이름은 대문자로 시작this는 생성될 객체를 가리킴new 키워드와 함께 사용기본 구조function Student(name, age) { this.name = name; this.age = age; this.getInfo = function() { return `${this.name}은 ${this.age}세 입니다.`; }}const student = new Student('판다', 5);2. new 키워드 동작 원리new는 단순히 객체 생성이 아니라 내부적으로 여러 단계를 수행한다.동작 과정빈 객체 생성 {}this..

1. 반복문 (Loop)for문반복 횟수가 명확할 때 사용구조: 초기화 → 조건 → 증감for (let i = 1; i 예시: 짝수 출력for (let i = 1; i 특징가장 많이 사용되는 반복문인덱스 기반 반복에 적합while문조건이 참인 동안 반복 실행let count = 3;while (count > 0) { console.log(count); count--;}특징반복 횟수가 불명확할 때 사용do-while문최소 1번은 무조건 실행됨do { console.log("실행");} while (조건);continue & breakcontinue: 현재 반복 건너뛰고 다음 반복break: 반복문 즉시 종료for (let i = 1; i for (let i = 1; i 5) break; conso..

1. 변수 선언: var, let, const자바스크립트에서 변수는 데이터를 저장하는 공간이다.예전에는 var를 많이 사용했지만, 요즘은 let과 const를 사용하는 것이 기본이다.let값을 변경할 수 있는 변수를 선언할 때 사용한다.let greeting = 'Hello, node.js!';greeting = 'Welcome to JavaScript!';const한 번 값을 넣으면 재할당이 불가능한 변수를 선언할 때 사용한다.const num = 1;// num = 2; // 오류 발생var과거에 사용하던 변수 선언 방식이다.지금은 특별한 이유가 없다면 let, const를 사용하는 것이 좋다.2. 변수 이름 작성 규칙변수 이름은 자유롭게 만들 수 있지만 몇 가지 규칙이 있다.알파벳, 숫자, _, $..

1. CSS란?CSS는 HTML 구조에 디자인(스타일)을 적용하는 언어이다.핵심은 어떤 요소를 선택해서 어떻게 꾸밀지이다.2. CSS 기본 문법선택자 { 속성1: 값1; 속성2: 값2;}선택자: 꾸밀 대상속성: 무엇을 바꿀지값: 어떻게 바꿀지3. CSS 적용 방식1) 내부 스타일 시트HTML 안에 2) 외부 스타일 시트CSS 파일을 따로 분리해서 사용실무에서 가장 많이 사용됨3) 인라인 스타일HTML 태그에 직접 작성텍스트유지보수에 불리해서 거의 사용하지 않음4. 선택자 (Selector)1) 태그 선택자h2 { color: red;}2) 클래스 선택자.highlight { background-color: yellow;}여러 요소에 사용 가능3) 아이디 선택자#main { color: blue..

1. HTML이란HTML은 웹페이지의 구조를 만드는 마크업 언어이다.웹페이지의 제목, 문단, 목록, 표, 이미지, 링크, 입력창 같은 요소를 태그로 표현한다.2. 제목 태그 ~ 제목을 나타내는 태그이다.숫자가 작을수록 더 큰 제목이다.숫자가 커질수록 더 작은 제목이다.문서의 계층 구조를 표현할 때 사용한다.예시가장 큰 제목중간 제목더 작은 제목정리은 보통 페이지의 가장 큰 제목는 큰 주제는 안의 세부 주제3. 문단과 줄바꿈 태그문단을 나타내는 태그이다.하나의 문단을 묶을 때 사용한다. 태그 자체만으로는 작성한 줄바꿈이 그대로 적용되지 않는다.예시이것은 하나의 문단입니다.줄바꿈 태그이다.문단 안에서 한 줄만 바꾸고 싶을 때 사용한다.닫는 태그가 없다.예시첫 번째 줄입니다.두 번째 줄입니다.가로 구분선을 ..

Git이란?Git은 파일의 변경 이력을 기록하고 관리하는 버전 관리 시스템이다.코드를 수정하다 보면 이전 상태로 돌아가야 하거나, 여러 작업을 나눠서 관리해야 하는 경우가 생긴다.Git을 사용하면 이런 변경 사항을 체계적으로 관리할 수 있다.GitHub란?GitHub는 Git으로 관리한 프로젝트를 올려두는 원격 저장소 호스팅 서비스이다.Git: 버전 관리 도구GitHub: Git 저장소를 올려두는 사이트내 컴퓨터에서 Git으로 작업하고, GitHub에 업로드해서 백업하거나 협업할 수 있다.Git의 기본 구조Git은 보통 아래 흐름으로 동작한다.작업 디렉토리 → 스테이징 영역 → 저장소1. 작업 디렉토리(Working Directory)내가 실제로 파일을 만들고 수정하는 공간이다.→ 현재 작업 중인 프로젝..