Yung_Developer

1. Redux / React Redux / Redux Thunk 1-1. Redux Redux는 전역 상태 관리를 위한 라이브러리이다. 기존에는 하나의 상태를 여러 곳에서 사용하기 위해서는 최상단의 부모 컴포넌트에서 자식 컴포넌트에게 Props로 상태를 전달해줘야했다. 만약 자식 컴포넌트가 부모 컴포넌트로부터 깊은 곳에 위치해있다면 중간에 상태를 사용하지 않는 컴포넌트에게도 Props를 전달해야하는 Prop drilling이 발생하게 된다. 리액트가 아무리 바닐라 자바스크립트보다 편하다고 해도 이렇게 수고스러운 작업이 반가울리 없다. 따라서 사람들은 모든 컴포넌트에서 전역으로 상태에 접근하기 위한 도구의 필요성을 느꼈고 여러 전역 상태 관리 라이브러리들이 등장하게 됐다. Redux 기본 개념 - 액션(..

with 크리스 (소요시간: 1시간) 워밍업 - 변수 네이밍 kettanaito/naming-cheatsheet 내 질문 Q1. 화살표 함수는 왜 프로토타입 객체를 가지지 않을까요? A. 화살표 함수는 contstructor를 가지지 않기 때문에 생성자 함수가 아니다. 프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다. 따라서 화살표 함수는 프로토타입 객체를 가지지 않는다. Q2. 왜 객체 전용 메서드들은 Object.someMethod(instance) 이런 식으로 써야할까요? instance.someMethod() 이런 식으로 사용할 수 있으면 편할텐데 말이죠 🤔 (ex. Array.forEach([1, 2]) (x) / [1, 2].forEach (o)) A. 어떤 생성자 함수이든 prot..

1. Redux / React Redux / Redux Thunk 1-1. Redux Redux는 전역 상태 관리를 위한 라이브러리이다. 기존에는 하나의 상태를 여러 곳에서 사용하기 위해서는 최상단의 부모 컴포넌트에서 자식 컴포넌트에게 Props로 상태를 전달해줘야했다. 만약 자식 컴포넌트가 부모 컴포넌트로부터 깊은 곳에 위치해있다면 중간에 상태를 사용하지 않는 컴포넌트에게도 Props를 전달해야하는 Prop drilling이 발생하게 된다. 리액트가 아무리 바닐라 자바스크립트보다 편하다고 해도 이렇게 수고스러운 작업이 반가울리 없다. 따라서 사람들은 모든 컴포넌트에서 전역으로 상태에 접근하기 위한 도구의 필요성을 느꼈고 여러 전역 상태 관리 라이브러리들이 등장하게 됐다. 처음 리덕스를 배우는 입장에서 ..

Q1. 왜 비동기 예외처리에서 await을 하지 않으면 try/catch문에서 에러 처리가 불가능할까요? function sleep(time) { return new Promise((resolve, reject) => { setTimeout(() => { reject('더 잘래') }) }) } try { sleep(0) // 프로그램 다운 } catch (error) { console.log(error) } function sleep(time) { return new Promise((resolve, reject) => { setTimeout(() => { reject('더 잘래') }) }) } (async () => { try { await sleep(0) } catch (error) { consol..

미션 PR - https://github.com/woowacourse/react-payments/pull/27 1. React.memo React.memo는 고차 컴포넌트(Higher Order Component) 이다. 말그대로 memo의 인자로 컴포넌트를 넘겨 사용할 수 있다. memo를 사용하면 메모이징을 이용하여 기존과 props가 다른 경우에만 리렌더링이 일어나도록 할 수 있다. 보통 성능최적화를 위해 많이 사용된다. 페이먼츠 미션 중 카드정보를 입력 받는 페이지는 카드 번호, 만료일 등 다양한 인풋을 처리하기 위해 그만큼의 상태를 가져야했다. 때문에 하나의 인풋만 변경되어도 페이지의 모든 요소들이 리렌더링 됐다. 당시에는 이를 불필요한 리렌더링이라고 판단하여 memo로 컴포넌트를 래핑하여 리렌..

with 하루 내 질문에 대한 내용 정리 Q1. 스코프와 스코프 체인은 언제 결정되는 것 일까요? 상위 스코프(외부 렉시컬 환경에 대한 참조)는 함수 정의가 평가되는 시점에 함수가 정의된 위치에 의해 결정된다. Q2. 자바스크립트에서 지역 스코프를 가지는 키워드들은 무엇이 있을까요? (ex. function 등) 전역 스코프 function, class if, for, while, try / catch 📌 주의) 객체 리터럴은 지역 스코프를 가지지 않는다. (코드 블록이 아니기 때문) Q3. 내부 함수는 무조건 클로저라고 할 수 있을까요? 자바스크립트의 모든 함수는 상위 스코프를 기억하므로 이론적으로 모든 함수는 클로저이다. 하지만 일반적으로 모든 함수를 클로저라고 하지는 않는다. 클로저는 내부 함수가 ..

총 소요시간 90분 with 체프 내 질문에 대한 내용 정리 Q1. 콜백 함수 호출 시 this는 왜 window 혹은 global을 가리킬까요? 항상 그렇지는 않다. 콜백 함수 내부에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역객체를 참조한다. const obj = { handleClick() { console.log(this); }, }; obj.handleClick(); // obj setTimeout(() => { obj.handleClick(); }, 1000); // obj setTimeout(obj.handleClick, 1000); // window $('#btn').addEventListener('click', () => { ..

props는 읽기 전용입니다. 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안 됩니다. (리액트 공식문서 중) 리액트에서는 왜 props를 변경하지 못하게 하는 걸까? 리액트에서 컴포넌트는 다음과 같은 총 네 가지의 경우에 업데이트된다. props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 기본적으로 리액트에서는 setState만을 사용하여 state를 변경하게 한다. 이는 상태가 변경될 때 리액트에게 리렌더링을 하라는 명령을 요청하기 위함이다. 즉, setState는 리액트에게 상태가 변경되었으니 리렌더링을 하라는 트리거이다. 하지만 props를 단순하게 할당연산자로 변경하는 경우 setS..