에이미의 성장기록

https://www.youtube.com/watch?v=FXtooPhupr4 우아한 테크톡의 프론트엔드 에러 핸들링에 대한 영상을 보고, 이 부분에 대해 좀 더 공부해보고 싶었다!! ✨ 오류: 하드웨어의 고장 또는 소프트웨어가 본래의 동작을 할 수 없는 상태 ✨ 소프트웨어의 오류는 컴파일 오류, 런타임 오류로 나뉜다. - 컴파일 오류: 코드가 컴파일 될 때 컴파일러가 해석하지 못해서 발생 - 런타임 오류: 프로그램이 동작할 때 발견할 수 있는 에러 -> 자바스크립트에서 이를 예외라고 부른다. 자바스크립트 언어는 동적 타입 언어이기 때문에 프로그램이 동작할 때 실시간으로 타입이 결정되어서 모든 에러가 컴파일 단계가 아닌 런타임 환경에서 발생한다. 이를 방지하려면 타입스크립트를 사용 ✨ 예외: 런타임 오류..

✨ useEffect dependency에 state로 인한 무한 렌더링을 야기하는 경우*(코드) - 무한루프에 빠지는 경우를 먼저 알아야할 것 같다. 1) 의존성 배열이 없을 경우 2) 의존성 배열이 있으나, useEffect 함수 내에서 의존성 배열 내의 값을 수정하고 있는 경우 3) 의존성 배열이 있으나, useEffect내에서 state의 변경을 야기하는 경우 const obj = { name: "amy", age:28 } const [myInfo, setMyInfo] = useState({...obj}); useEffect(()=>{ setMyInfo({...myInfo, age:22}); },[obj]) obj가 바뀌지 않았는데, 무한 렌더링이 발생한다. 이 이슈를 찾는데 사수님께서 알려주셨다..

자료구조에 대해 공부해보고자 한다. 솔직히 제일 먼저 개념을 정확히 짚고 넘어갔어야 했는데 실무 하려면 꼭 알아야하는 중요 개념!!! 🙂 Object(객체) mdn문서 일단 mdn을 읽고 시작 자바스크립트에서 원시 타입을 제외한 모든 데이터 타입은 객체이다. 객체는 여러가지 값 혹은 함수도 가능하다. 객체가 보유한 값을 "프로퍼티"라고 하며, 객체가 보유한 함수는 "메서드"라고 한다. key, value 구조의 자료구조이다. 객체의 프로퍼티와 메서드들은 "키값"으로 구분된다. 🌼 객체의 생성 1) 객체 리터럴 let obj = {key:value, key2: value2, ...} 변수처럼 객체를 생성하는 방식으로 중괄호 {} 안에 key:value를 쉼표로 구분 2) 생성자 함수 new 연산자를 통해 ..

this와 화살표 함수(arrow function) ES6에서 도입된 화살표함수는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했다. 나는 화살표 함수가 단순히 함수를 "짧게" 쓰기 위한 용도인 줄 알았는데, 화살표 함수와 this는 밀접한 관련이 있다. 화살표 함수는(arrow function expression)은 function 표현에 비해 구문이 짧고, 자신의 this, arguments, super 또는 new.taget을 바인딩하지 않는다. 화살표 함수는 항상 익명이다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합하다. 그래서 생성자로 사용할 수 없다. (mdn) 여기서 우리는 화살표 함수의 arguments와 super, new.target을 바인딩하는 것은 다음에 알아..

실행컨텍스트(EC)는 자바스크립트 코드가 실행되는 환경을 의미한다. 크게 2가지 타입의 EC가 있다. 1) Global Execution context - 자바스크립트 엔진이 처음 코드를 실행할 때 Global Execution context 가 생성이 된다. 생성 과정에서 전역객체인 Window Object를 생성하고, this는 Window 객체를 가리킨다. 즉, 아무런 코드가 없어도 자바스크립트 엔진은 파일을 실행시키는 시점에서 Global Execution context를 생성한다. 2) Function Execution context - 자바스크립트 엔진은 함수가 호출 될 때마다 호출된 함수를 위한 Execution Context를 생성한다. 모든 함수는 호출되는 시점에 자신만의 Executio..

1.3.2 클래스가 구체적인 데이터를 지니지 않게 하는 방법 - 클래스(prototype)가 구체적인 데이터를 지니지 않게 하는 방법 => 프로퍼티를 일일이 지우고 더는 새로운 프로퍼티를 추가할 수 없게 한다. delete Square.prototype.width; delete Square.prototype.height; Object.freeze(Square.prototype); 왼쪽에서 Square의 prototype은 height와 width가 있지만, 오른쪽에서 width와 height가 삭제되었다. ✨Object.freeze() - 객체를 동결한다. 동결된 객체는 더 이상 변경될 수 없다. 즉 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며, 존재하는 속성의 값이 변..

1. 고차 컴포넌트란? (Higher-Order Components) 고차 컴포넌트는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수입니다. 즉 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수 (●'◡'●) 컴포넌트 로직을 재사용하기 위한 아주 고오급 리액트 기술입니다 const HOC = ReactComponent => EnhancedReactComponent; 여기에서 EnhancedReactComponent는 ReactComponent의 props를 변경 한다거나, ReactComponent에 새로운 props를 추가하여 전달한다거나 아예 새로운 컴포넌트를 return 할 수 있다. 2. 네이밍 팁 Container HOC를 제외하고, 보통 HOC를 통해 새로운 prop을 ..

1.1 클래스의 개념 - 자바스크립트는 프로토타입 기반 언어라 "상속" 개념이 존재하지 않는다. 클래스와 비슷하게 흉내내는 여러 기법(프로토타입) 등을 사용하다 결국 🔥ES6에서 클래스 문법이 추가 되었다. - 클래스는 공통 요소를 지니는 집단을 분류하기 위한 개념이다. - 클래스의 속성을 지니는 실존하는 개체를 인스턴스(instance)라고 한다. 어떤 클래스에 속한 개체는 그 클래스의 조건을 모두 만족하므로 그 클래스의 구체적인 예시, 즉 인스턴스가 된다. - 프로그래밍에서는 클래스를 바탕으로 인스턴스를 만들 때, 비로소 어떤 개체가 클래스의 속성을 지니게 된다. 또한 한 인스턴스는 하나의 클래스만을 바탕으로 만들어진다. * 즉 클래스가 먼저 정의돼야만 그로부터 공통적인 요소를 지니는 개체를 생성할 ..

- 바벨이란? 🍀자바스크립트 컴파일러 바벨은 입력과 출력이 모두 자바스크립트 코드인 컴파일러다. 초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 일만 했지만, 현재는 리액트의 JSX 문법, 타입스크립트, 코드 압축, Proposal 까지 처리 🍀 왜 필요할까? 자바스크립트가 실행되는 환경은 웹 브라우저, NodeJS, Deno 등 다양하게 실행되고, 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 코드를 읽는다. 환경 버전에도 JS는 영향을 받는다(특정 버전 이상에만 실행되는 코드, 특정 브라우저에는 실행되지 않는 코드 등 → 인터넷 익스플로러는 프라미스를 이해하지 못한다!!) 🍀 리액트에서는 왜 써야하나? 브라우저에서 JSX문법을 읽을 수 없기 때문에 필요하다! 즉, 모든 실행 환경에서 정..

2.1 메서드 오버라이드 - prototype 객체를 참조하는 __proto__를 생략하면 인스턴스는 prototype에 정의된 프로퍼티나 메서드를 마치 자신의 것처럼 사용할 수 있다. 만약 인스턴스가 동일한 이름의 프로퍼티 또는 메서드를 가지고 있다면 원본이 그대로 있는 상태에서 다른 대상을 그 위에 얹는다(덮어씌운다). 이것이 메서드 오버라이드! - 자바스크립트 엔진이 getName이라는 메서드를 찾는 방식은 가장 가까운 대상인 자기 자신의 프로퍼티를 검색하고, 없으면 그 다음 가까운 대상인 __proto__를 검색하는 순서로 진행된다. __proto__에 있는 메서드는 검색 순서에서 밀려 호출되지 않는다. let Person = function(name) { this.name = name; }; P..