티스토리

nono

검색하기

블로그 홈

nono

today-sy-learned.tistory.com/m

no

구독자: 0

방명록 방문하기

주요 글 목록

8.4 프로토타입 메서드와 __proto__가 없는 객체 프로토타입 메서드 ◾️ __proto__ 대신 사용 할 수 있는 모던한 메서드 Object.create(proto, [descriptors]) : [[Prototype]]이 proto를 참조하는 빈 객체를 만든다. 이 때, 프로퍼티 설명자를 추가로 넘길 수 있다. Object.getPrototypeOf(obj) : obj의 [[Prototype]]을 반환한다. Object.setPrototypeOf(obj, proto) : obj의 [[Prototype]]이 proto가 되도록 설정한다. let animal = { eats: true }; // 프로토타입이 animal인 새로운 객체를 생성 let rabbit = Object.create(animal); console.log(rabbit.eats); //.. 공감수 0 댓글수 0 2020. 9. 23.
8.3 네이티브 프로토타입 ◾️ 모든 내장 생성자 함수에서 prototype을 프로퍼티로 사용한다. Object.prototype let obj = {}; alert( obj ); // "[object Object]" ◾️ obj는 비어 있는데도 [object Object] 문자열을 출력한다. ◾️ obj = new Object()를 줄이면 obj = {}가 된다. ◾️ Object는 내장 객체 생성자 함수인데, 이 생성자 함수의 prototype은 toString을 비롯한 다양한 메서드가 구현되어있는 거대한 객체를 참조한다. ◾️ new Object()를 호출하거나 리터럴 문법 { ... }을 사용해 객체를 만들 때, 새롭게 정의된 객체의 [[Prototype]]은 Object.prototype을 참조한다. ◾️ obj.toSt.. 공감수 0 댓글수 0 2020. 9. 17.
Webpack Webpack_생할코딩을 보고 정리한 내용입니다. Webpack 수업소개 여러개의 리소스 파일(js, css, jpg)을 하나의 js 파일로 묶어주는 도구인 웹팩의 사용법을 소개해드리는 수업입니다. 웹팩은 이런 점에서 좋습니다. 여러개의 파일을 하나로 묶어주기 �� www.opentutorials.org 1. Webpack ➡️ 여러개의 리소스 파일을 하나의 js파일로 묶어주는 도구. static module bundler Webpack의 장점 1. 여러개의 파일을 하나로 묶어주기 때문에 네트워크 접속의 부담을 줄일 수 있다. (더 빠른 서비스 제공) 2. 여러개의 서로 다른 패키지들이 서로 같은 이름의 전역 변수를 사용하면 프로그램은 오동작을 하게 된다. 이런 문제를 극복하기 위해서 등장한 것이 모듈이.. 공감수 0 댓글수 0 2020. 9. 17.
8.2 함수의 prototype 프로퍼티 함수의 prototype 프로퍼티 ◾️ new F()와 같은 생성자 함수를 이용하면 새로운 객체를 만들 수 있다. ◾️ F.prototype이 객체면 new 연산자는 F.prototype을 사용해 새롭게 생성된 객체의 [[Prototype]]을 설정한다. ⚠️ 자바스크립트가 만들어졌을 때는 프로토타입 기반 상속이 주요 기능중 하나였다. 과거에는 프로토타입에 직접 접근할 방법이 없었다. 생성자 함수의 prototype프로퍼티를 이용하는 방법을 이용했다. ◾️ F.prototype에서 prototype은 F에 정의된 일반 프로퍼티이다. 프로토타입 객체와는 다르다. let animal = { eats: true }; function Rabbit(name) { this.name = name; } Rabbit.p.. 공감수 0 댓글수 0 2020. 9. 10.
8.1 프로토타입 상속 📢 기존에 있는 기능을 가져와 확장해야 하는 경우 사람에 관한 프로퍼티와 메서드를 가진 user라는 객체가 있는데, user와 상당히 유사하지만 약간의 차이가 있는 admin과 guest 객체를 만들어야 한다고 할 때, user의 메서드를 복사하거나 다시 구현하지 않고 프로토타입 상속(prototypal inheritance)을 이용하면 user에 약간의 기능을 얹어 admin과 guest객체를 만들 수 있다. [[Prototype]] ◾️ 자바스크립트 객체는 명세서에서 명명한 [[Prototype]]이라는 숨김 프로퍼티를 가진다. ◾️ 숨김 프로퍼티 값은 null이거나 다른 객체에 대한 참조가 되는데, 다른 객체를 참조하는 경우 참조 대상을 프로토타입(prototype)이라고 한다. ◾️ 프로토타입 상.. 공감수 0 댓글수 0 2020. 9. 9.
Level1_비밀지도 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 (" 벽#") 두 종류로 이루어져 있다. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 과 라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다. 지도 1과 는 각각 정수 배열로 암호화되어 있다. 암호화된 배열은 지도의 각 가로줄에서 벽 부분을 1, 공백 부분을 0으로 부호화했을 때 얻어지는 이진.. 공감수 0 댓글수 0 2020. 9. 3.
화살표 함수 구문 화살표 함수에서 혼란스러운 중괄호 주로 react에서 map메소드를 사용할 때 자주 에러가 나는 부분이기 때문에 간단히 정리해보자 Statements와 Expressions 1. Expression (표현식) ◾️ 단일 값을 생성하는 코드 console.log(2 + 2 * 3 / 2); // 5 2. Statements (문장) ◾️ 작업을 수행하는 코드 ◾️ 반복문, 조건문 등 for(let i = 0; i { statements } (param1, param2, …, paramN) => expression // { return expression; } -> return과 중괄호.. 공감수 0 댓글수 0 2020. 9. 2.
6.10 화살표 함수 다시 살펴보기 📢 화살표 함수는 단순히 함수를 짧게 쓰기 위한 용도로 사용되지 않는다. 독특하고 유용한 기능을 제공한다. ◾️ 멀리 떨어진 곳에서 실행될 작은 함수를 작성해야 하는 상황 ◾️ 예시 arr.forEach(func) - func는 forEach가 호출될 때 배열 arr의 요소 전체를 대상으로 실행된다. setTimeout(func) - func는 내장 스케줄러에 의해 실행된다. ◾️ 함수를 어딘가에 전달하게 되면 함수의 컨텍스트를 읽을 수 있다. ➡️ 화살표 함수를 사용하면 현재 컨텍스트를 잃지 않는다. 화살표 함수에는 'this'가 없다 ◾️ 화살표 함수 본문에서 this에 접근하면, 외부에서 값을 가져온다. let group = { title: '1모둠', students: [ '시목', '여진', '.. 공감수 0 댓글수 0 2020. 9. 2.
6.10 함수 바인딩 📢 객체 메서드를 콜백으로 전달할 때 this 정보가 사라지는 문제가 생긴다. 사라진 'this' ◾️ 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라진다. let user = { firstName: 'suzu', sayHi() { console.log(`Hello! ${this.firstName}!`); } }; setTimeout(user.sayHi, 1000); // Hello, undefined! ◾️ setTimeout에 객체에서 분리된 함수인 user.sayHi가 전달되기 때문에 undefined가 출력된다. let f = user.sayHi; setTimeout(f, 1000); // user context를 잃어버림 ◾️ 브라우저 환경에서 setTimeout메서.. 공감수 0 댓글수 0 2020. 9. 1.
Level1_가장 큰 수 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 입출력 예 설명 [1, 5, 2, 6, 3,.. 공감수 0 댓글수 0 2020. 8. 31.
6.9 call/apply와 데코레이터, 포워딩 📢 자바스크립트는 함수를 다룰 때 탁월한 유연성을 제공한다. 함수는 이곳저곳 전달될 수도 있고, 객체로도 사용될수 있다. 코드 변경 없이 캐싱 기능 추가하기 ◾️ CPU를 많이 잡아먹지만 결과는 안정적(x 가 같으면 호출결과도 같다)인 함수 slow(x) ◾️ slow(x)가 자주 호출된다면, 결과를 어딘가에 저장(캐싱)해 재연산에 걸리는 시간을 줄일 수 있다. ◾️ 래퍼 함수를 만들어 캐싱 기능을 추가한다. function slow(x) { // CPU 집약적인 작업 console.log(`slow(${x})을 호출`); return x; } function cachingDecorator (func) { let cache = new Map(); return function(x) { if (cache.h.. 공감수 0 댓글수 0 2020. 8. 31.
6.8 setTimeout과 setInterval을 이용한 호출 스케줄링 📢 호출 스케줄링(scheduling a call) : 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출) 할 수있게 하는 것 호출 스케줄링 구현 방법 ◾️ setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 ◾️ setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 setTimeout ◾️ setTimeout 문법 let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...) ◾️ 매개변수 func|code : 실행하고자 하는 코드. (함수 또는 문자열 형태. 대개 함수가 들어간다) delay : 실행 전 대기 시간. 단위는 밀리초(millisecond, 1000밀리초 = 1초) 기본값 = 0 arg1.. 공감수 0 댓글수 0 2020. 8. 26.
6.7 new Function 문법 📢 함수를 만들 수 있는 방법 중 하나 문법 ◾️ new Function 문법을 사용하면 함수를 만들 수 있다. let func = new Function ([arg1, arg2, ...argN], functionBody); ◾️ 두개의 인수를 가진 함수 let sum = new Function('a', 'b', 'return a + b'); console.log( sum(1, 2) ); // 3 ◾️ 인수가 없고 함수 본문만 있는 함수 let sayHi = new Function('console.log("Hello")'); sayHi(); // Hello ◾️ new Function을 사용해 함수를 만드는 방법의 가장 큰 차이는 런타임에 받은 문자열을 사용해 함수를 만들 수 있다. ◾️ 함수 표현식과 .. 공감수 0 댓글수 0 2020. 8. 25.
6.6 객체로서의 함수와 기명 함수 표현식 📢 자바스크립트에서 함수는 값으로 취급된다. ◾️ 함수의 자료형은 객체이다. ◾️ 함수는 호출이 가능한(callable) 행동 객체이다. ◾️ 함수를 호출할 수도 있고, 객체처럼 함수에 프로퍼티를 추가, 제거하거나 참조를 통해 전달할 수도 있다. name 프로퍼티 ◾️ name 프로퍼티를 사용하면 함수 이름을 가져올 수 있다. function sayHi() { console.log("Hi"); } console.log(sayHi.name); //sayHi ◾️ 함수 객체에 이름을 할당해주는 로직은 익명 함수라도 자동으로 이름이 할당된다. let sayHi = function () { console.log("Hi"); } console.log(sayHi.name); // sayHi ◾️ 기본값을 사용해 이.. 공감수 0 댓글수 0 2020. 8. 24.
6.5 전역 객체 📢 전역 객체를 사용하면 어디서나 사용 가능한 변수나 함수를 만들 수 있다. ◾️ 전역 객체는 언어 자체나 호스트 환경에 기본 내장되어 있는 경우가 많다. ◾️ 브라우저 환경 → window ◾️ Node.js 환경 → global ◾️ 전역 객체 이름의 표준화 → globalThis ◾️ 전역 객체의 모든 프로퍼티는 직접 접근할 수 있다. console.log('Hello'); // Hello window.console.log('Hello'); // Hello ◾️ 브라우저에서 let이나 const가 아닌 var로 선언한 전역 함수나 전역 변수는 전역 객체의 프로퍼티가 된다. ◾️ 권장하는 방법은 아님 var gVar = 5; console.log(window.gVar); // 5 ◾️ let을 사용하.. 공감수 0 댓글수 0 2020. 8. 22.
6.4 오래된 'var' ⚠️ 오래된 스크립트를 읽는 데 도움을 주는 글입니다. ◾️ 변수 선언 방법 let const var ◾️ let과 const는 렉시컬 환경 측면에서 정확히 같은 방식으로 동작한다. ◾️ var는 초기 자바스크립트 구현 방식 때문에 전혀 다른 방식으로 동작한다. function sayHi () { var phrase = "Hello"; // 'let'대신 'var'를 사용해 지역 변수를 선언 console.log(phrase); //Hello } sayHi(); // Hello console.log(phrase); // Error, phrase is not defined var는 블록 스코프가 없다. ◾️ var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프이다. ◾️ 블록 기준으로 스코프가 생.. 공감수 0 댓글수 0 2020. 8. 21.
6.3 변수의 스코프 📢 자바스크립트는 함수 지향 언어이다. 코드 블록 ◾️ 코드 블록 {...} 안에서 선언한 변수는 블록안에서만 사용할 수 있다. { let message = 'Hello'; console.log(message); // Hello } console.log(message); // ReferenceError: message is not defined ◾️ 고유한 작업을 수행하는 코드를 한데 묶는 용도로 활용할 수 있다. { let message = 'Hi'; console.log(message); // Hi } { let message = 'Hello'; console.log(message); // Hello } ⚠️ 블록이 없으면 에러가 발생할 수 있다. ◾️ 이미 선언된 변수와 동일한 이름을 가진 변수를 .. 공감수 0 댓글수 0 2020. 8. 20.
6.2 나머지 매개변수와 전개 문법 📢 많은 자바스크립트의 내장 함수는 인수의 개수에 제약을 두지 않는다. ◾️ 임의의 수의 인수를 받는 방법 ◾️ 함수의 매개변수에 배열을 전달하는 방법 나머지 매개변수 ... ◾️ 함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수엔 제약이 없다. ◾️ 함수를 정의할 땐 인수를 두 개만 받도록 하고, 실제 함수를 호출할 땐 이보다 더 많은 인수를 전달했지만 에러가 발생하지 않는다. ◾️ 반환 값은 처음 두 개의 인수만을 사용해 계산된다. function sum(a, b) { return a + b; } console.log( sum(1, 2, 3, 4, 5) ); // 3 ◾️ 여분의 매개변수는 그 값들을 담을 배열 이름을 마침표 세 개 뒤에 ...붙여주면 함수 선언부에 포함시킬 수 있다. ◾️ .... 공감수 0 댓글수 0 2020. 8. 19.
6.1 재귀와 스택 재귀(recursion) 📢 함수가 자기 자신을 호출하는 것 ◾️ 큰 목표 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 유용한 프로그래밍 패턴이다. ◾️ 목표 작업을 간단한 동작 하나와 목표 작업을 변형한 작업으로 단순화 시킬 때도 재귀를 사용 ◾️ 특정 자료구조를 다뤄야 할 때도 재귀가 사용 두 가지 사고방식 ◾️ x를 n 제곱해 주는 함수 pow(x, n)을 만들어 보자 // pow 예시 pow(2, 2) = 4 pow(2, 3) = 8 pos(2, 4) = 16 1. 반복적인 사고를 통한 방법 : 🔎 for loop function pow(x, n) { let result = 1; for (let i = 0; i < n; i++) { result *= x; } return res.. 공감수 0 댓글수 0 2020. 8. 15.
4.8 객체를 원시형으로 변환하기 1. 객체는 논리 평가 시 true를 반환한다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다. 2. 숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 일어난다. (객체 Date끼리 차감하면 두 날짜의 시간 차이가 반환된다.) 3. 문자형으로의 형 변환은 대게 alert(obj)같이 객체를 출력하려고 할 때 일어난다. ToPrimitive 📢 특수 객체 메서드를 사용하면 숫자형이나 문자형으로의 형 변환을 원하는 대로 조절 할 수 있다. ◾️ 객체 형 변환은 'hint'라 불리는 값을 기준으로 세 종류로 구분된다. ⚠️ hint : 목표로 하는 자료형 ◾️ hint가 string일 때 : 문자열을 기대하는 연산을 수행할 때(객체 - 문자형 변환) // 객체를 출력.. 공감수 0 댓글수 0 2020. 8. 13.
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 ⚠️ 심볼은 문자형으로 자동 형 변환되지 않는다. ◾️ 자바스크립트에선 문자형으로의 암시적 형 변환이 비교.. 공감수 0 댓글수 0 2020. 8. 12.
4.6 옵셔널 체이닝 '?.' ⚠️ 최근에 추가됨 📢 옵셔널 체이닝(optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체에도 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 등장 배경 ◾️ 사용자가 여러 명 있을 때, 그 중 몇명은 주소 정보를 가지고 있지 않다고 가정한다. ◾️ 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined ◾️ 브라우저에서 동작하는 코드를 개발 할 때 ◾️ 페이지에 있는 특정 요소에 담긴 정보에 접근하려 하는데, 요.. 공감수 0 댓글수 0 2020. 8. 11.
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.. 공감수 0 댓글수 0 2020. 8. 10.
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) 객체를 사용하여 개체를 .. 공감수 0 댓글수 0 2020. 8. 8.
4.3 가비지 컬렉션 📢 메모리 관리 방법 중 하나. 객체가 생성되었을 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 자동으로 해제한다. 가비지 컬렉션 기준 ◾️ 도달 가능성(reachability)라는 개념을 사용해 메모리 관리를 수행한다. ◾️ 어떻게든 접근하거나 사용할 수 있는 값. 도달 가능한 값은 메모리에서 삭제되지 않는다. ◾️ 루트(root) 값의 예시 (생성 되었을 때부터 도달 가능한 값) 1. 현재 함수의 지역 변수와 매개변수 2. 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 3. 전역 변수 ◾️ 루트가 참조하는 값이나 체이닝으로 루트에서 참조할 수 있는 값은 도달 가능한 값이 된다. ◾️ 자바스크립트 엔진 내에선 가비지 컬렉터가 끊임없이 동작한다. 모든 객체를 모니터링 하고, 도달 할 수 없.. 공감수 0 댓글수 0 2020. 8. 6.
4.2 객체 - 참조에 의한 객체 복사 참조에 의한 객체 복사 📢 객체는 참조에 의해(by reference) 저장되고 복사된다. ◾️ 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장 되어 있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장된다. ◾️ 객체는 메모리 내 어딘가에 저장되고, 변수에는 객체를 '참조❗️'할 수 있는 값이 저장된다. ◾️ 객체가 할당된 변수를 복사할 땐 객체의 참조 값만 복사되고 객체는 복사되지 않는다. ◾️ 변수는 두 개 이지만 각 변수엔 동일 객체에 대한 참조값이 저장된다. let user = { name: "suzu" }; let admin = user; admin.name = 'ruru'; console.log(user.name); // ruru 참조에 의한 비교 📢 객체 비교 시 피연산자인 두 .. 공감수 0 댓글수 0 2020. 8. 5.
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.. 공감수 0 댓글수 0 2020. 8. 4.
모던 JavaScript 정독하기 ✳️ 객체 : 기초 ✔️ 객체 - 객체 ✔️ 객체 - 참조에 의한 객체 복사 ✔️ 객체 - 가비지 컬렉션 ✔️ 객체 - 메서드와 'this' ✔️ 객체 - 'new' 연산자와 생성자 함수 ✔️ 객체 - 옵셔널 체이닝 '?.' ✔️ 객체 - 심볼형 ✔️ 객체 - 객체를 원시형으로 변환하기 ✳️ 자료구조와 자료형 ◼️ 원시값의 메서드 ◻️ 숫자형 ◼️ 문자열 ◻️ 배열 ◼️ 배열과 메서드 ◻️ iterable 객체 ◼️ 맵과 셋 ◻️ 위크맵과 위크셋 ◼️ Object.keys, values, entries ◻️ 구조 분해 할당 ◼️ Date 객체와 날짜 ◻️ JSON과 메서드 ✳️ 함수 심화학습 ✔️ 재귀와 스택 ✔️ 나머지 매개변수와 전개 문법 ✔️ 변수의 스코프 ✔️ 오래된 'var' ✔️ 전역 객체 ✔.. 공감수 0 댓글수 0 2020. 8. 4.
Step4. useReducer, edit, reset, checkMessage 지난번 check리스트 ✔️ 시작 날짜는 가져오지만, 수정은 못하게 하기... ✔️ reset 버튼 만들기 ✔️ 셀 클릭했을때 참 잘했어요 같은 메세지창이랑, 취소했을 때 경고창 만들기 ◻️ 30일 지났을 때 종료창 만들기 1. useReducer 관리할 state가 많아질 땐 useReducer를 사용하는 편이 좋다고 해서 사용해 봤다. 상태관리도 상태관리지만 개인적으론 action type을 정해서 state별로 관리하니깐 여기 저기 props로 안 해도 되고 좀 더 직관적이어서 더 편리했던거 같다. 아 근데 엄청 삽질했다. react는 불변성이 엄청 중요한데... switch문 쓸 때 ...state, 하나 빠뜨려서...........undefined투성이었지.... 초기 상태를 설정해준다. use.. 공감수 0 댓글수 0 2020. 7. 9.
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 감소하면서 색도 지워진다. .. 공감수 0 댓글수 0 2020. 7. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.