분류 전체보기 (39) 썸네일형 리스트형 4.7 심볼형 📢 자바스크립트는 객체 프로퍼티 키로 문자형과 심볼형만을 허용한다. 심볼(Symbol) 📢 유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다. let id = Symbol(); ◾️ 심볼을 만들 때 심볼 이름이라 불리는 설명을 붙일 수도 있다. ✅ 디버깅시 아주 유용 let id = Symbol('id'); ◾️ 심볼은 유일성이 보장되는 자료형이기 때문에, 설명이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다르다. let suzu = Symbol('name'); let ruru = Symbol('name'); console.log(suzu == ruru); // false ⚠️ 심볼은 문자형으로 자동 형 변환되지 않는다. ◾️ 자바스크립트에선 문자형으로의 암시적 형 변환이 비교.. 4.6 옵셔널 체이닝 '?.' ⚠️ 최근에 추가됨 📢 옵셔널 체이닝(optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체에도 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 등장 배경 ◾️ 사용자가 여러 명 있을 때, 그 중 몇명은 주소 정보를 가지고 있지 않다고 가정한다. ◾️ 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined ◾️ 브라우저에서 동작하는 코드를 개발 할 때 ◾️ 페이지에 있는 특정 요소에 담긴 정보에 접근하려 하는데, 요.. 4.5 'new' 연산자와 생성자 함수 📢 "new" 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다. 생성자 함수(constructor function) 재사용할 수 있는 객체 생성 코드를 구현한다. 📢 생성자 함수 ◾️ 함수 이름의 첫 글자는 대문자로 시작한다. ◾️ 반드시 'new' 연산자를 붙여 실행한다. ◾️ new User() 함수의 실행 알고리즘 1. 빈 객체를 만들어 this에 할당한다. 2. 함수 본문을 실행한다. this에 새로운 프로퍼티를 추가해 this를 수정한다. 3. this를 반환한다. function User (name) { // 1. this = {}; // 2. 새로운 프로퍼티를 this에 추가 this.name = name; this.isAdmin = false; // 3. retu.. 4.4 메서드와 'this' 📢 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성된다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해준다. 메서드(method) 만들기 📢 객체 프로퍼티에 할당된 함수 ◾️ 함수 표현식으로 함수를 만들고, 객체 프로퍼티 user.sayHi에 함수를 할당해 준다. ◾️ 이미 정의된 함수를 이용해서 만들 수도 있다. let user = { name: 'suzu', age: 30 }; user.sayHi = function () { alert('Hi!'); } user.sayHi(); // Hi! 객체 지향 프로그래밍(object-oriented programming, OOP) 객체를 사용하여 개체를 .. 4.3 가비지 컬렉션 📢 메모리 관리 방법 중 하나. 객체가 생성되었을 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 자동으로 해제한다. 가비지 컬렉션 기준 ◾️ 도달 가능성(reachability)라는 개념을 사용해 메모리 관리를 수행한다. ◾️ 어떻게든 접근하거나 사용할 수 있는 값. 도달 가능한 값은 메모리에서 삭제되지 않는다. ◾️ 루트(root) 값의 예시 (생성 되었을 때부터 도달 가능한 값) 1. 현재 함수의 지역 변수와 매개변수 2. 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 3. 전역 변수 ◾️ 루트가 참조하는 값이나 체이닝으로 루트에서 참조할 수 있는 값은 도달 가능한 값이 된다. ◾️ 자바스크립트 엔진 내에선 가비지 컬렉터가 끊임없이 동작한다. 모든 객체를 모니터링 하고, 도달 할 수 없.. 4.2 객체 - 참조에 의한 객체 복사 참조에 의한 객체 복사 📢 객체는 참조에 의해(by reference) 저장되고 복사된다. ◾️ 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장 되어 있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장된다. ◾️ 객체는 메모리 내 어딘가에 저장되고, 변수에는 객체를 '참조❗️'할 수 있는 값이 저장된다. ◾️ 객체가 할당된 변수를 복사할 땐 객체의 참조 값만 복사되고 객체는 복사되지 않는다. ◾️ 변수는 두 개 이지만 각 변수엔 동일 객체에 대한 참조값이 저장된다. let user = { name: "suzu" }; let admin = user; admin.name = 'ruru'; console.log(user.name); // ruru 참조에 의한 비교 📢 객체 비교 시 피연산자인 두 .. 4.1 객체 - 객체 객체 📢 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다. 객체의 생성 ◾️ 객체생성자 let user = new Object(); ◾️ 객체 리터럴 let user = {}; 리터럴과 프로퍼티 ◾️ Property → 키(key) : 값(value)로 구성 ◾️ Property를 추가, 삭제할 수 있다. ◾️ Property의 값(value)엔 모든 자료형 가능 ◾️ 여러 단어를 조합해 Property 이름을 만든 경우에는 따옴표로 묶어줘야 한다. ◾️ 마지막 Property 끝은 쉼표로 끝날 수 있다. (trailing, hanging쉼표) let user = { name: "suzu", age: 25, "one two": 12, }; delete user.age; // pr.. 모던 JavaScript 정독하기 ✳️ 객체 : 기초 ✔️ 객체 - 객체 ✔️ 객체 - 참조에 의한 객체 복사 ✔️ 객체 - 가비지 컬렉션 ✔️ 객체 - 메서드와 'this' ✔️ 객체 - 'new' 연산자와 생성자 함수 ✔️ 객체 - 옵셔널 체이닝 '?.' ✔️ 객체 - 심볼형 ✔️ 객체 - 객체를 원시형으로 변환하기 ✳️ 자료구조와 자료형 ◼️ 원시값의 메서드 ◻️ 숫자형 ◼️ 문자열 ◻️ 배열 ◼️ 배열과 메서드 ◻️ iterable 객체 ◼️ 맵과 셋 ◻️ 위크맵과 위크셋 ◼️ Object.keys, values, entries ◻️ 구조 분해 할당 ◼️ Date 객체와 날짜 ◻️ JSON과 메서드 ✳️ 함수 심화학습 ✔️ 재귀와 스택 ✔️ 나머지 매개변수와 전개 문법 ✔️ 변수의 스코프 ✔️ 오래된 'var' ✔️ 전역 객체 ✔.. Step4. useReducer, edit, reset, checkMessage 지난번 check리스트 ✔️ 시작 날짜는 가져오지만, 수정은 못하게 하기... ✔️ reset 버튼 만들기 ✔️ 셀 클릭했을때 참 잘했어요 같은 메세지창이랑, 취소했을 때 경고창 만들기 ◻️ 30일 지났을 때 종료창 만들기 1. useReducer 관리할 state가 많아질 땐 useReducer를 사용하는 편이 좋다고 해서 사용해 봤다. 상태관리도 상태관리지만 개인적으론 action type을 정해서 state별로 관리하니깐 여기 저기 props로 안 해도 되고 좀 더 직관적이어서 더 편리했던거 같다. 아 근데 엄청 삽질했다. react는 불변성이 엄청 중요한데... switch문 쓸 때 ...state, 하나 빠뜨려서...........undefined투성이었지.... 초기 상태를 설정해준다. use.. step3. Cell Table + Counter 1. Cell click 이벤트 cell Component에서 Toggle기능을 구현했다. Cell을 클릭하면 done의 상태를 바꿔주고 App Component로 전달한다. const Cell = memo(({ days, onCountCell }) => { const [done, setDone] = useState(false); const onClickCircle = () => { setDone(prev => !prev) onCountCell(done); }; return ( {days} ) }); App 컴포넌트에서는 받아온 done을 가지고 counter 기능을 구현한다. 조건에 맞으면 대시보드의 카운터가 1씩 증가하고, 아니면 경고창이 뜨고, 확인을 누르면 카운터가 1 감소하면서 색도 지워진다. .. 이전 1 2 3 4 다음
