일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- CI/CD
- CORS
- dfs
- React
- 타입 좁히기
- TS
- Cypress
- 결정 알고리즘
- 공변성
- RTK Query
- Jest
- Promise
- recoil
- 리터럴 타입
- 인터섹션
- autosize
- async/await
- app router
- 반공변성
- 태그된 유니온
- webpack
- SSR
- map
- 호이스팅
- useAppDispatch
- 투포인터
- 무한 스크롤
- 이분 검색
- ESlint
- tailwind
- Today
- Total
목록JS (34)
짧은코딩
Promise let promise = new Promise(function(resolve, reject) { // executor (제작 코드, '가수') }); new Promise에 전달되는 함수는 excutor라고 부른다. excutor는 new Promise가 만들어질 때, 자동으로 실행된다. resolve와 reject는 js에서 자체 제공하는 콜백이다. executor에선 결과를 즉시 얻든 늦게 얻는 인수로 넘겨준 콜백 중 하나를 반드시 호출해야 한다. resove(vlaue): 일이 성공적으로 끝나면 결과는 value와 함께 호출 reject(error): 에러 발생 시 에러 객체 error와 함께 호출 -Promise는 성공 또는 실패만 한다. let promise = new Promis..
심볼형 자바스크립트는 객체 프로퍼티 키로 문자형과 심볼형만 허용한다. -심볼(symbol) 심볼은 유일한 식별자를 만들고 싶을 때 사용한다. Symbol()을 사용하면 심볼값을 만들 수 있다. // 심볼 id에는 "id"라는 설명이 붙습니다. let id = Symbol("id"); 심볼 이름은 디버깅 시 아주 유용하다. 심볼은 유일성이 보장되는 자료형이라 설명이 같은 심볼이 여러 개라도 각 심볼값은 다르다. let id1 = Symbol("id"); let id2 = Symbol("id"); alert(id1 == id2); // false 따라서 같은 설명이라도 비교하면 false가 나온다. 심볼은 문자형으로 자동 형 변환되지 않는다. let id = Symbol("id"); alert(id); //..
옵셔널 체이닝 옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 접근 가능하다. -옵셔널 체이닝이 필요한 이유 let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 이런 경우에 에러가 발생한다. 과거에 옵셔널 체이닝이 없을 땐 && 연산자를 사용했다. let user = {}; // 주소 정보가 없는 사용자 alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다. 이렇게 AND 연산자를 사용하면 코드가 아주 ..
new 연산자와 생성자 함수 -생성자 함수 생성자 함수와 일반 함수의 기술적인 차이는 없다. 하지만 두 관례가 있다. 함수의 첫 글자는 대문자 반드시 'new' 연산자를 붙여 실행 function User(name) { // this = {}; (빈 객체가 암시적으로 만들어짐) // 새로운 프로퍼티를 this에 추가함 this.name = name; this.isAdmin = false; // return this; (this가 암시적으로 반환됨) } let user = new User("보라"); alert(user.name); // 보라 alert(user.isAdmin); // false 위 코드에 있는 주석은 new User가 실행되면 무슨 일이 일어나는지를 써 놓은 것이다. this 객체가 암시..
메서드와 this -메서드 만들기 let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! 함수 표현식으로 함수를 만들어 객체에 할당할 수 있다. let user = { // ... }; // 함수 선언 function sayHi() { alert("안녕하세요!"); }; // 선언된 함수를 메서드로 등록 user.sayHi = sayHi; user.sayHi(); // 안녕하세요! 이미 선언된 함수로도 객체에 할당 가능 -메서드 단축 // 아래 두 객체는 동일하게 동작합니다. user = { sayHi: function() { alert("Hello"); } }; //..
자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 한다. 더 이상 쓸모 없어진 변수, 함수, 객체 등을 어떻게 처리하는지 알아보겠다. 가비지 컬렉션 기준 도달 가능한 값: 쉽게 말해 어떻게든 접근하거나 사용할 수 있는 값 -태생부터 도달 가능한 값 이 값들은 명백한 이유 없이는 삭제되지 않는다. 1. 현재 함수의 지역 변수, 매개 변수 2. 중첩 함수의 체인에 있는 함수에서 사용되는 변수, 매개 변수 3. 전역 변수 4. 기타 등등 이런 값들은 루트라고 부른다. 자바스크립트 엔진 내에서 가비지 컬렉터가 끊임없이 동작한다. 가비지 컬렉터는 모든 객체를 모니터링하고 도달할 수 없는 객체는 삭제한다. -예시 // user엔 객체 참조 값이 저장됩니다. let user = { name: "John" }; u..
객체와 원시 타입의 근본적인 차이는 참조에 의해(by reference) 저장되고 복사된다는 것이다. 반면에 원시값(문자열, 숫자, 불린 값)은 값 그대로 저장, 할당된다. -객체의 동작방식 변수에 객체가 그대로 저장되지 않는다. 객체는 메모리 내 어디엔가 저장이되고 객체가 저장되어있는 메모리 주소인 객체에 대한 참조값이 저장된다. => 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않는다. let user = { name: 'John' }; let admin = user; admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨 alert(user.name); // 'Pete'가 출력됨. 'user' 참조 값을 이용해 변경사항을 확인함 따라서 객체에 ..
객체 객체형은 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체를 저장할 수 있다. -객체를 만든는 문법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 중괄호 {}를 이용해 객체를 선언하는 것을 객체 리터럴이라고 부른다. -리터럴과 프로퍼티 let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 }; 키:값으로 프로퍼티가 들어간다. delete user.age; delete 연산자로 프로퍼티를 삭제할 수 있다. let user = { name: "John", age: 30, "likes birds": true,..
개발자는 가능한 간결하고 읽기 쉽게 코드를 작성해야 한다. 중괄호 -코드가 짧으면 중괄호 없이 한 줄에 써도 괜찮다. if (n < 0) alert(`Power ${n} is not supported`); -코드 블록 사용 if (n < 0) { alert(`Power ${n} is not supported`); } 대부분의 코드는 코드 블록을 사용하는 것이 가독성이 좋다. 가로 길이 코드의 가로 길이가 길어지면 여러 줄로 나눠서 작성하는게 좋다. // 백틱(`)을 사용하면 문자열을 여러 줄로 쉽게 나눌 수 있습니다. let str = ` ECMA International's TC39 is a group of JavaScript developers, implementers, academics, and m..
디버깅은 스크립트 내 에러를 검출해 제거하는 과정을 의미한다. 디버깅 툴을 사용하면 디버깅이 쉬워지고 단계마다 어떤 일이 일어나는지 코드 단위로 추적할 수 있다. Sources 패널 1. 파일 탐생 영역: 맨 왼쪽이고 페이지를 구성하는데 쓰인 모든 리소스를 트리 형태로 보여준다. Chrom 익스텐션이 나타날 수도 있다. 2. 코드 에디터 영역: 리소스 영역에서 선택한 파일의 소스 코드를 보여주고 편집도 가능하다. 중단점을 선택할 수 있다. 3. 자바스크립트 디버깅 영역: 디버깅에 관련한 기능을 제공 debugger 명령어 function hello(name) { let phrase = `Hello, ${name}!`; debugger; // 중단점을 설정하기 귀찮은데 해당 줄에서 실행을 재개하고 싶을 때..