클래스자바스크립트에서 클래스는 객체 지향 프로그래밍을 구현하는 문법적 구조이다. 클래스를 사용하여, 속성과 메서드를 정의할 수 있다. 클래스 정의class Person { constructor(name, age) { this.name = name; this.age = age; } printName() { console.log(`반갑다, 내 이름은 ${this.name} 그리고 나이는 비밀이야`); }}`class Person`: Person이라는 클래스를 생성함. 클래스 명은 PascalCase로 작명함 (국룰임 안지키면 혼남)`constructor(속성1, 속성2 ...)`: 클래스의 `인스턴스` (뒤에 설명) 를 생성할 때 자동으로 호출되는..
this`this`는 자신이 속한 객체를 참조하는 변수이다. (자기 자신(객체)을 참조한다.) 상황에 따라 참조하는 객체가 달라지는데 호출하는 주체가 있을 경우 해당 주체를 가리키게 되고, 호출하는 주체가 없다면 전역객체를 가리킨다. 호출하는 주체?설명하기 귀찮 어려우니 예시를 보도록 해요.// 메서드(객체 안의 함수)로서의 호출은 this 바인딩 OK const obj = { name:"길동", age:30, print: function(){ console.log(this.name, this.age); }}obj.print(); // 길동, 30 출력`obj`의 `print` 속성에는 함수가 저장되어 있다.`print` 를 호출하려면 어떻게 해야하나? => obj..
개인 프로젝트 진행중 내가 짠 코드가 너무나도 마음에 들지 않아서 코드 수정을 해보았다.(이번에도 박학하신 튜터님께 많은 도움을 받았음) 어쨋든 이번 글은 100% 기록 목적이고 수정한 영역에 대해서 아직 완전히 이해를 한게 아니기 때문에정리가 아주 중구난방일 것이다는 예고 (대충 정리하겠다는 소리 맞음)기존 코드// api 데이터 가져오는 함수 (fetchData)async function fetchData(searchCriteria, searchKey, processData) { const data = await fetch(.......) // api 데이터 받아옴 processData(data) // 받은 데이터를 콜백함수로 다시 전달}// 호출한 부분 (순서대로 인기, 장르, 개봉예정 영화 ..
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를 구하는법..