[JS 기초] DOM의 개념과 주요 DOM API 정리

1. DOM (Document Object Model)이란?📌 HTML 문서를 자바스크립트가 다룰 수 있게 만든 구조DOM은 우리가 작성한 HTML 문서를 브라우저가 트리처럼 분해해서 객체(노드)로 만들어 놓은 것입니다.마치 웹페이지를 레고 블록처럼 쪼개서 하나하나 조작할 수 있게 만든 구조라고 보면 돼요. 2. DOM은 왜 중요할까?HTML은 정적인 문서지만, DOM 덕분에 자바스크립트를 사용해 HTML을 실시간으로 바꾸거나 조작할 수 있어요.예를 들어:버튼을 클릭하면 글자가 바뀌고,새로운 내용을 동적으로 추가하거나,이미지를 숨기거나 보여줄 수도 있어요. 3. DOM을 다루는 방법: DOM API 정리 DOM은 자바스크립트로 조작하기 위한 다양한 함수(메서드)와 속성들을 제공합니다. 이것들을 ..

• format_list_bulleted 👩‍💻 개발
• · 2025. 5. 6.
• textsms

[JS 기초] 원시형 vs 참조형 타입, 얕은 복사와 깊은 복사

"참조형 데이터는 값을 직접 가지지 않고, 해당 값이 저장된 메모리 주소를 가리킨다" 1. 원시형(Primitive) vs 참조형(Reference)원시형 데이터 (숫자, 문자열, 불리언, null, undefined, symbol, bigint)은 값 자체를 변수에 저장합니다.참조형 데이터 (객체, 배열, 함수)는 값이 저장된 메모리 주소를 변수에 저장합니다.즉, 참조형 변수는 실제 값을 가지고 있는 게 아니라 그 값이 어디 있는지를 가리키는 포인터(주소)를 가지고 있는 것!let a = { name: 'Sallamon' };let b = a;b.name = 'Lemon';console.log(a.name); // ❓ 무엇이 출력될까요? Lemon 출력a와 b는 서로 다른 객체를 갖고 있는 게 아..

• format_list_bulleted 👩‍💻 개발
• · 2025. 5. 6.
• textsms

[PC] 컴퓨터 자동으로 종료 예약하는 법 (간단함, 작업 스케줄러 중독 방지)

컴퓨터 중독을 방지하거나, 아니면 자동화된 작업 등을 방지하기 위해 사용할 수 있는 좋은 팁이 있습니다.바로 윈도우 상에서 '컴퓨터를 자동으로 종료하도록 예약'하는 것인데요.생각보다 꽤나 간단하니 아래 내용을 따라하시면 됩니다.(전 이걸 몰랐을 때 스마트 콘센트를 이용해 자동 꺼짐 예약을 해놨어서 하드웨어에 손상이...) 1. 작업 스케줄러를 실행한다. (시작 - 검색을 이용) 2. 오른쪽 '작업 만들기' 클릭 3. '일반' 탭 설정 - 일반 탭에서 본인이 알기 쉽게 이름과 설명을 입력사용자가 로그온 할 때만 종료하면 되므로, 보안 옵션은 따로 건들지 않음 4. '트리거' 탭 설정 - 새로 만들기를 클릭 후, 본인이 만들고 싶은 주기마다 설정- 나는 매일 밤 12시에 꺼지길 원했으므로, ..

• format_list_bulleted 🖥️ 컴퓨터
• · 2025. 5. 6.
• textsms

[JS 기초] 자바스크립트 배열 메서드 필수 정리

자바스크립트에서 배열은 매우 자주 사용하는 데이터 구조입니다. 배열을 다룰 때 유용하게 쓸 수 있는 배열 메서드(Array Methods)들을 정리해보겠습니다. 1. 기본 배열 선언let fruits = ['사과', '바나나']; 2. 배열 조작 메서드1. push()let fruits = ['사과', '바나나'];fruits.push('포도');console.log(fruits); // ['사과', '바나나', '포도']개념: 배열 끝에 요소를 추가합니다.원본 변경 여부: 변경됨 2. pop()let fruits = ['사과', '바나나', '포도'];fruits.pop();console.log(fruits); // ['사과', '바나나']개념: 배열 끝의 요소를 제거합니다.원본 변경 여부: 변경됨..

• format_list_bulleted 👩‍💻 개발
• · 2025. 5. 5.
• textsms

[JS 기초] Promise란 무엇일까? + 비동기 작업 (then, catch VS async, await)

자바스크립트를 공부하는 당신! Promise가 이해되지 않는다면, 비동기 작업을 좀 더 쉽게 생각해볼 수 있는 예시를 들어 설명해볼게요. 비동기 작업이란?비동기 작업은 시간이 오래 걸리는 작업입니다. 예를 들어, 서버에서 데이터를 받아오는 작업이라든지, 파일을 읽는 작업이 해당됩니다. 이러한 작업들은 시간이 걸릴 수 있기 때문에, 완료까지 기다리지 않고 다른 일을 할 수 있도록 비동기적으로 처리됩니다. Promise란?Promise는 말 그대로 "약속"과 비슷합니다. 예를 들어, 누군가에게 "나는 5분 뒤에 너에게 돈을 줄게"라고 약속을 한다고 할 때, 그 사람은 약속을 지킬 수 있는 상태가 되기 전까지 기다려야 하죠. 그런데 이 약속을 Promise라고 생각할 수 있습니다. Promise의 3..

• format_list_bulleted 👩‍💻 개발
• · 2025. 5. 5.
• textsms

[창업일지] 2025년 창업중심대학 발표평가 후기

발표 평가를 앞두고예창, 창중대, 경기도 기술창업. 총 3개의 발표평가 그 중에서 발표 첫 스타트를 끊은 건 창중대였다. 며칠간 저어어엉말 진절머리 날 정도로 연습했다. 15분 발표를 수십번도 넘게 반복 하고 예상 질문도 100개는 넘도록 준비하고 답변해봤다. 나중되니 더 이상 연습할 게 없어서 그냥 빨리 끝났으면 좋겠다는 마음 뿐이었다. 발표 평가가 3시쯤이었는데 근처에서 아침 11시부터 계속 똑같은 발표, 똑같은 대본 눈 감고도 외워질 정도로 반복 하고 읊조렸던 것 같다. (실제론 PPT나 사계서 보고 하지만, 계속 연습하면 허공에 대고 말할 정도로 외워지더라) 대기실로 가니 많은 사람들이 연습중이고그러다 'ㅇㅇㅇ대표님, 발표평가장으로 이동하시겠습니다' 라는 말과 함께, 리모콘 작동 법을 잠깐 듣고 ..

• format_list_bulleted 개인적인 이야기
• · 2025. 4. 26.
• textsms