제로초님 강의 정리 https://www.inflearn.com/course/next-react-query-sns Next 프로젝트 시작하기 x (twitter) 클론코딩 - 홈, 탐색하기, 쪽지, 프로필 url을 그대로 가져가기 새로고침 시 다르게 동작하는 것 확인 반응형 설치 npx create-next-app@latest 설치옵션 ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you like ..

제로초님 강의 정리 https://www.inflearn.com/course/next-react-query-sns 리액트 압축 요약 강좌 React 현재 점유율 1위 라이브러리 경쟁자 : vue, angular, svelte 등 역사 : jQuery -> Angular -> React -> Vue -> Svelte 왜 나왔나 페이지 전환없이 앱같은 느낌을 원함 ->한 페이지에서 다하는 SPA(Single Page Application) 방식의 유행 프론트의 비중이 점점 높아짐(데이터를 많이 다룸) -> MVC등의 개발 방식은 대규모 개발에 적합치 않음 -> 대안 필요 Angular의 등장 Gmail(AJAX) -> SPA SPA으로 MVC 구현 앱같은 느낌은 성공함 MVC라서 동일한 문제 -> 프론트에서..

20.1 strict mode란? 암묵적 전역 // 'use strict'를 사용하지 않은 예제 function foo() { x = 10; } foo(); console.log(x); // 10 /* - foo 함수가 실행 - foo 함수 내부에서 x를 선언한 것은 없기 때문에, 스코프 체인에 의해 변수 x를 검색한다. - 전역 스코프까지와 왔지만, x는 존재하지 않는다. -> 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. - 생성된 전역 객체에 x 프로퍼티에 10을 할당한다. - foo 함수의 실행이 끝나고, console 에 암묵적으로 생성된 x를 참조하여 10이 출력된다. */ strict mode 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성..

프로토타입 자바스크립트는 프로토타입prototype을 기반으로 상속을 구현한다. // 생성자 함수 function Circle(radius) { this.radius = radius; } // Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를 // 공유해서 사용할 수 있도록 프로토타입에 추가한다. // 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다. Circle.prototype.getArea = function () { return Math.PI * this.radius ** 2; }; // 인스턴스 생성 const circle1 = new Circle(1); const circle2 = new Circle(2); // Circle 생성자 함..

함수와 일급 객체 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 위의 조건을 모두 만족하므로 일급 객체다. arguments 객체 function sum() { let res = 0; // arguments 객체는 length 프로퍼티가 있는 유사 배열 객체이므로 for 문으로 순회할 수 있다. (배열 메서드는 불가) for (let i = 0; i < arguments.length; i++) { res += arguments[i]; } return res; } console.log(sum()); // 0 console.log(sum(1, ..

생성자 함수에 의한 객체 생성 프로퍼티 구조가 동일 객체 여러개를 간편하게 생성가능 // 생성자 함수 function Circle(radius) { // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다. this.radius = radius; this.getDiameter = function () { return 2 * this.radius; }; } // 인스턴스의 생성 const circle1 = new Circle(5); // 반지름이 5인 Circle 객체를 생성 const circle2 = new Circle(10); // 반지름이 10인 Circle 객체를 생성 console.log(circle1.getDiameter()); // 10 console.log(circle2..

16.1 내부 슬롯과 내부 메서드 JS엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드임 ECMAScript 사양에서 이중 대괄호 [[ ... ]]로 감싼 이름들이 내부 슬롯과 내부 메서드임 내부 슬롯과 내부 메서드는 JS 엔진 내부 로직이므로 원칙적으로 접근 불가능 Prototype의 경우만 __proto__를 통해 간접적으로 접근 가능 16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 JS엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의함. 프로퍼티 상태 👉 프로퍼티의 값, 값의 갱신여부, 열거 가능 여부, 재정의 가능 여부 프로퍼티 어트리뷰트 👉 Value, Writable, Enumerabl..

15.1 var 키워드로 선언한 변수의 문제점 15.1.1 변수 중복 선언 허용 var로 선언한 변수는 중복 선언이 가능 중복 시 의도치 않게 먼저 선언된 변수의 값이 변경되는 부작용이 발생됨 var x = 1; var x = 405; console.log(x); // 405 15.1.2 함수 레벨 스코프 var로 선언한 변수는 함수의 코드 블록만을 지역 스코프로 인정 var로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 됨(if, for 등) var x = 1; if(true) { var x = 10; } console.log(x); // 10 15.1.3 변수 호이스팅 var로 선언한 변수는 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작함. 변수 선언문 이전에 ..

14.1 변수의 생명 주기 14.1.1 지역 변수의 생명 주기 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료되면 소멸함. 지역 변수는 함수가 호출된 직후에 선언되고 undefined로 초기화되고, 함수 문들이 순차적으로 실행되면서 변수 할당문이 실행될때 값이 할당된다. 함수가 종료되면 지역변수도 소멸되어 생명주기가 종료된다. 호이스팅은 스코프 단위로 동작함 14.1.2 전역 변수의 생명 주기 전역 변수의 생명 주기는 전역 객체와 같다. 브라우저 환경에서 전역 객체는 window이므로 전역 변수의 생명주기는 전역 객체인 window와 동일함. 전역 객체 코드가 실행되기 이전 JS엔진에 의해 어떠한 객체보다도 먼저 생성되는 특수한 객체. 브라우저에서는 window객체를 의미함. no..

13.1 스코프란 스코프 : 식별자가 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위 JS엔진이 식별자를 검색할때 사용하는 규칙이라고도 할 수 있음 13.2 스코프의 종류 구분 설명 스코프 변수 전역 코드의 가장 바깥 영역 전역 스코프 전역 변수 지역 함수 몸체 내부 지역 스코프 지역 변수 13.2.1 전역과 전역 스코프 전역이란 코드의 가장 바깥 영역을 이야기함. 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 됨. 전역 변수는 어디서든지 참조할 수 있음. 13.2.2 지역과 지역 스코프 지역이란 함수 몸체 내부를 말함. 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 됨. 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효함. 13.3 스코프 체인..