[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

[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

[유니티] Unity 클린하게 모두 제거하고 재설치하기

유니티 여러 버전들을 설치하고 개발하다보면서로 충돌나고 사소한 거에서부터 오류가 크게크게 나는 경우가 있다.그럴 경우 단순히 사용하고 있는 버전의 에디터만 삭제하지 말고유니티 허브와 설치 폴더까지 싸그리 클린 삭제해주고 다시 설치하는 게 훨씬 깔끔하다. 1. 유니티 허브에서 에디터 모두 제거  진행이 막히거나 너무 오래 걸린다고 생각된다면작업 관리자를 열어(Ctrl + Shift + Esc) Unity Hub프로세스를 모두 종료하고 다시 틀어보자(근데 안타깝게도 난 여기서부터 제대로 삭제가 들어먹질 않아서;;유니티 허브에 나와있는 프로그램 파일 경로로 들어가서 폴더를 직접 삭제했다)  2. 윈도우 설정 - 앱 - 설치된 앱 - 유니티 허브 및 잔여 에디터 삭제   3. 잔여 파일 및 폴더 모두 삭제 Un..

• format_list_bulleted 👩‍💻 개발
• · 2025. 1. 19.
• textsms

[Git] 깃허브 자체에서 폴더 추가, 폴더 이름 변경 하는 법

살라몬이다.팀원들이 공통으로 사용하는 Develop 브랜치에 적용될 간단한 파일을 깃허브 상에서 Add file로 추가하는데, 대상 경로인 새로운 폴더가 필요했다. 폴더 하나 만들기 위해서 다시 Pull하고 파일 만들고 push하고 PR하기가 귀찮았는데, 깃허브 자체적으로 폴더를 만드는 방법이 있었다. 생각 이상으로 매우 간단했다.     1. 깃허브 자체에서 폴더 추가하는 법    1. 추가하려는 장소에서 Add file - create new file 을 선택한다.     2. 만들고자 하는 새로운 폴더명을 입력하고 /(슬래시)를 입력하면 바로 해당 장소에 파일을 만들 수 있다.3. 파일을 만들어서 Commit을 클릭하고 나면 폴더가 생성되어 있다.    2. 깃허브 자체에서 폴더 이름 변경하는 법 ..

• format_list_bulleted 👩‍💻 개발
• · 2024. 8. 7.
• textsms

[Unity] 비주얼스튜디오 연동 오류 해결 방법 총정리 (Unity - Visual Studio)

살라몬이다.유니티 스크립트를 수정하다 많이들 겪는 현상에 나도 예외는 없었다.바로 아래와 같은 현상이다.    1. Vector와 같은 기본적인 단어에도 자동완성이 나오지 않음(자동완성 목록 보기: Ctrl+space)   2. 'Unity에 연결' 이라고 뜨던 버튼이 그냥 '연결'으로만 나옴 이러한 문제는 비주얼스튜디오-유니티 연동이 끊긴 것인데, 해당 문제를 해결하기 위한 방법을 정리해보았다.나의 경우 Unity 2022.3.16f1, Visual Studio 2022를 기준으로 작성하였다.       방법 1. 유니티에서 Edit > Preferences > External Tools 설정  1-1)  External Script Editor를 Visual Studio로 선택하거나,1-2) Brow..

• format_list_bulleted 👩‍💻 개발
• · 2024. 8. 7.
• textsms