💡 state의 변화 유무리액트에서는 화면을 리렌더링 할 때 state의 변화를 가지고 판단한다. 즉, 일반 변수값을 화면에 출력한 상태에서 변수 값을 바꾼다고 화면에 출력된 값이 변경되는 것이 아니라 `setState` 를 활용해서 변경해야 적용 된다. 이 때 state의 변화 전, 후 의 `메모리 주소` 를 비교한다. 따라서 `참조 데이터 타입`이 변하게 되면 값은 바뀌지만 메모리 주소는 변함이 없기 때문에 페이지가 리렌더링 되지 않는다. (깊은 복사, 얕은 복사 개념) 📍 참조 데이터 타입(객체, 배열) 업데이트 하는 방법
구조 분해 할당구조 분해 할당(Destructuring)은 객체나 배열의 속성을 분해하여 변수에 값을 쉽게 할당 및 추출할 수 있는 문법이다. 특히 함수의 매개변수가 많아질 때 사용하면 아주 기분이 좋아진다. 가독성과 유지보수가 좋아진다. 기본 문법const obj = { name: "길동", age: 30,}const { name, age } = obj;console.log(name, age); // 길동 30`name`과 `age` 속성이 있는 `obj`객체를 정의'`const {name, age} = obj`': `obj` 속성에 정의된 값들을 `name`과 `age`에 할당이 때 `obj` 의 속성명과 같은 변수에 값을 할당순서는 상관 없음변수가 더 많거나 적어도 상관 없고, 속성명..
yarn을 설치하고 버전 확인을 하려고 하니 보안 오류가 나왔다. 권한이 없어서 나오는 오류이고, 금방 해결 가능하니 겁먹지 않아도 괜찮다. 오류yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\user\AppData\Roaming\npm\yarn.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/ ?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + yarn -v + ~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException 관리자모드로 PowerShell 실행 윈도우키를 누른다.powersh..
💡 Set 완전 100% 리얼 기초 문법 보기 [JS] Set | 배열에서 중복되는 값 지워줘~SetSet은 자바스크립트에서 기본적으로 지원하는 어쩌구 저쩌구 ... 배열에서 중복되는 값을 없애준다. const arr = [1, 2, 2, 2, 2, 2, 2, 2, 3];const set = new Set(arr);console.log(set); // Set(3) { 1, 2, 3 } : 중복은reactjy2.tistory.com이전에 Set을 이용해서 배열의 중복되는 값을 제거하는 방법을 알아봤지만 사실 개발하다보면 저런 단순한 1차원 배열에 값만 띡띡 들어있는 데이터보다 조금 더 복잡한 형태의 데이터를 다루는 일이 많다. (아마도) 예를 들어 .. JSON으로 데이터를 처리할 때 대충 이렇게 생..
SetSet은 자바스크립트에서 기본적으로 지원하는 어쩌구 저쩌구 ... 배열에서 중복되는 값을 없애준다. const arr = [1, 2, 2, 2, 2, 2, 2, 2, 3];const set = new Set(arr);console.log(set); // Set(3) { 1, 2, 3 } : 중복은 제거 되었지만 Set 형태로 반환되었다.console.log([...set]); // [ 1, 2, 3 ] : 전개 연산자를 사용해서 다시 배열로 강제 전환 시켜준다.💡 Set으로 배열 안의 중복된 객체 지우기 [JS] Set | 객체가 들어있는 배열에서 중복되는 값을 지워줘~💡 Set 완전 100% 리얼 기초 문법 보기 [JS] Set | 배열에서 중복되는 값 지워줘~SetSet은 자바스크립트에서..
클래스자바스크립트에서 클래스는 객체 지향 프로그래밍을 구현하는 문법적 구조이다. 클래스를 사용하여, 속성과 메서드를 정의할 수 있다. 클래스 정의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`를 사용하면 안되지 않나? 시스템적으로는 문제가 없겠지만 협업시 다른 개발자가 괜히 헷갈리지는 않을까?" 라는 의문심이 들어서 아주 박학하신 분께 여쭤봤다. => ..