DOMDOM은 HTML 문서를 구조화 해놓은 객체이다. 자바스크립트로 HTML의 요소에 접근해서 읽기, 쓰기, 수정, 삭제 등의 행동을 할 때 직접 HTML 요소에 접근하는 것이 아니라 DOM에 접근해서 다루는 것이다. 대충 이론은 여기까지 하고 몇 번쓰다보면 개념은 충분히 이해 되지만 메서드같은게 너무 많기 때문에 쓸 때마다 뭐였지? 하고 다시 검색해서 쓰게 되는 친구이다. DOM 으로 뭐시기어쩌구DOM에 대한 설명DOM에 대한 설명222222 아이템 1 아이템 2 아이템 3 문자열 변경대충 HMTL 코드 예시문서 탐색 및 가져오기 #idconst header1 = document.getElementById('header');const header2 = document.query..
나는 자바스크립트를 대~충 배워 대~충 쓰고 있었다. 아직도 배우는 단계인데 모르는 지식이 굉장히 많고 대충 사용하면 안되겠구나라는걸 느끼게 된 것 중 하나인 객체의 얕은 복사와 깊은 복사를 정리한 글. (얕은 지식으로 정리하였음) 객체JS에서는 데이터 타입을 크게 원시 데이터 타입(Primitive Data Types)과 참조 데이터 타입(Reference Data Types) 두 가지로 나눌 수 있다. 객체는 둘 중 참조 데이터 타입 이다. 객체는 변수에 직접 값을 저장하지 않고 값이 저장된 메모리 주소(참조)를 저장한다. 객체의 속성에 접근해서 데이터를 변경하면 `데이터를 가리키는 주소값이` 변경 된다.(데이터가 변경되면 데이터의 주소값이 바뀌기 때문)메모리에는 데이터가 저장되는 주소가 있다. ..
Property Shorthand (단축 속성명)ES6부터 무려..! 단축 속성명을 사용할 수가 있다. 단축 속성명을 쓰면 변수를 객체의 `속성/값` 으로 바로 할당할 수가 있다. 보통 객체에 데이터를 저장할 때 변수를 사용할 것이다. 그리고 객체의 속성명은 변수명과 동일하게 짓는 경우가 많은데 `변수명`과 `속성명`이 동일하다 는 조건에 한해서 단축 속성명을 사용할 수가 있다. 예시더 이상 설명 못하겠으니 예시를 보도록 하자.let name = "길동";let age = "30";let obj = { name: name, age: age};가장 기본적인 객체에 데이터를 할당하는 문법이다. {`속성`: `값`, `속성`: `값` ....} 그리고 보통 변수명과 속성명을 동일하게 많이들 ..
constJavaScript에서 `const`는 상수를 선언하는데 사용되는 키워드이다. `const`로 선언된 변수는 값의 "재할당이 불가능"하다. 이를 통해 변수의 "불변성을 보장"할 수 있다. 원시타입과 참조타입`const`로 선언된 원시타입변수는 더 이상 어떠한 변경도 불가능하다. `const`로 선언된 참조타입변수도 마찬가지로 변수 자체를 변경하는 행위는 불가능하다. 하지만 참조타입변수의 `속성값`들은 변경이 가능하다. 여기서 의문점이 하나 생겼다. "참조형변수 자체를 변경할 일은 없겠지만 속성을 변경할 경우가 생기면 `const`를 사용하면 안되지 않나? 시스템적으로는 문제가 없겠지만 협업시 다른 개발자가 괜히 헷갈리지는 않을까?" 라는 의문심이 들어서 아주 박학하신 분께 여쭤봤다. => ..
동등 비교(equality)와 일치 비교(identity)JavaScript는 두 값끼리 비교할 때 "동등 비교(==)"와 "일치 비교(===)"의 개념이 있다. 동등연산자(equality operator)동등연산자(`'=='`) 를 사용하면 두 값이 같은 값으로 변환 될 수 있는지를 검사한다. ex) `"3"` == `3` = `true``null`과 `undefined` 는 둘 다 "값이 없음" 을 나타내는 것으로 취급한다.고로 동등연산자를 사용하면 `true`가 나온다. 일치연산자(identity operator)일치연산자(`'==='`) 는 타입과 값을 모두 비교한다. ex) `"3"` === `3` = `false``null`과 `undefined` 는 타입은 다르기 때문에 `false` ..
PromisePromise는 비동기 작업을 보다 효율적으로 처리하기 위한 객체로 네트워크 요청을 보내거나 파일을 읽는 등의 비동기 작업을 처리할 때 사용된다. 이름이 Promise인 이유는 작업이 성공/실패 했을때 특정한 동작을 약속했기 때문에..? 사실 잘 모르겠다. Promise의 세 가지 상태`pending`(진행중): 작업이 진행중인 상태 `fulfilled`(완료): 작업이 완료된 상태 (성공)`rejected`(실패): 작업이 실패한 상태 Promise 객체 생성const promise = new Promise((resolve, reject) => { // 비동기 작업을 수행 const data = fetch('url 대충'); if (/* 작업 성공 조건 */) { reso..
코드의 변경점을 저장하려면 우선 `git` 초기화부터 해야한다. 💡 깃 초기화 방법 [git] 깃 초기화 | 소스 코드를 잘 관리하자gitgit은 소스코드의 변경 사항을 추적 및 관리하는데에 사용된다. 코드의 변경 사항들이 전부 기록된다. 개인 프로젝트 및 팀 프로젝트를 관리 할 때 아주 요긴하게 사용된다. git 설치1. git을reactjy2.tistory.com git add - 변경된 파일 추가깃으로 관리되는 디렉토리내의 변경 사항들을 스테이징 영역에 추가할 때 `git add` 명령어를 사용한다. 오직 스테이징 영역에 추가하기 위해서 사용되는 명령어이다. (변경 이력을 저장하려면 스테이징 영역에 있는 대상을 커밋해주어야함. 뒤에 나옴) 대충 `new_file.js`라는 파일을 추가하고..
객체끼리의 비교`변수`끼리는 데이터를 비교하여 값이 같거나 다르면 `true/false`를 리턴해준다. 하지만 `객체`끼리 비교하게 되면 값이 같아도 `false`를 리턴하는데 이유는 메모리에 `값` 자체를 저장하는게 아니고 객체가 저장된 `주소값`을 저장하기 때문이다. 따라서 같은 데이터를 가지고 있더라도 다른 주소를 참조 하기 때문에 `false`가 나오게 된다. 그럼 어떻게 비교하는데?`JSON.stringify()`를 사용해서 객체를 ` 문자열로 변환 `하고 비교하면 된다. 객체를 문자열로 변환 | JSON.stringify()let person = { name: "홍길동", age: 30, gender: "남자",}console.log(JSON.stringify(person)..
Object (객체)여러가지 {`Key`:`Value`} 를 하나의 변수에 저장할 수 있는 데이터 타입을 `객체(Object)` 라고 한다. 간단한 객체 예시let person = { name: "홍길동", age: 30, gender: "남자",} 각각의 `Key`로 데이터에 접근할 수 있고, `Key`자체를 구할수도 있다. Key를 구하는법 | Object.Keys()let keys = Object.keys(person);console.log("keys => ", keys);// 출력: keys => [ 'name', 'age', 'gender' ] `Object.keys()` : 인자로 객체를 넣어주면 해당 객체의 `Key`들을 배열 형태로 반환한다. Value를 구하는법..
단일 데이터 가져오기 getDoc() 컬렉션 '문서' 가져오기 (문서 참조)const docRef = doc(collection(db, "{collection}"), "{id}");"{`collection`}" : 참조할 컬렉션 명을 넣으면 된다. "{`id`}": 해당 컬렉션에서 찾을 문서`id`를 넣으면 된다.그럼 컬렉션의 id에 맞는 문서를 `docRef` 변수에서 참조할 수 있다. 문서의 데이터 가져오기const docSnap = await getDoc(docRef);docSnap.data();`getDoc()`: 문서를 참조했던 `docRef` 변수 전달문서의 `고유id`를 넣어 놨기 때문에 단일 데이터 가져옴 (조건에 맞는)`docSnap` 변수에 데이터를 포함한 각종 정보 저장`doc..
gitgit은 소스코드의 변경 사항을 추적 및 관리하는데에 사용된다. 코드의 변경 사항들이 전부 기록된다. 개인 프로젝트 및 팀 프로젝트를 관리 할 때 아주 요긴하게 사용된다. git 설치1. git을 사용하려면 설치를 해야한다. 아래 주소에서 잘 다운받고 대충 설치하면 된다. (전부 기본값으로 설치했음) Git git-scm.com git 초기화프로젝트를 `git`으로 관리하기 위해서는 초기화를 최초 1회 진행해야 한다. `git`으로 관리할 프로젝트 폴더로 이동한다. 터미널에서 `git init` 명령어를 입력한다. (최초 1회만)입력 후 폴더 내에 `.git` 이 생성된걸 확인한다.여기까지만 하면 이제부터 이 폴더는 git으로 관리되는 폴더가 되는 것이다. 💡 초기화를 했으면 코드를 저장 ..
문제명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다.명함 번호가로 길이세로 길이16050230703603048040가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때의 지갑 크기는 4000(=80 x ..