모던리액트 DeepDive [개인 학습용]

👨🏻‍💻 며칠 전 모던 리액트 Deep Dive 책을 출판했다는 소식을 듣고 눈여겨보고 있다가 충동구매를 했다.모던자바스크립트는 스터디용이라면 모던 리액트는 복습용으로 구매를했다.

1.1.1 자바스크립트의 데이터 타입Symbol Symbol은 ES6에 새롭게 추가된 7번째 타입이다.중복되지 않는 고유한 값을 나타내기 위해 만들어졌다.심벌은 함수를 이용해서만 만들 수 있다.ex : Symbol()을 사용해야만 한다.객체 타입 객체 타입을 간단하게

📆 날짜 : 2023/12/05(화) 👨🏻‍💻 학습 내용 : 원시타입과 객체타입의 특징 및 값을 저장하는 방식의 차이 🎯 학습 내용 원시 타입과 객체 타입의 가장 큰 차이점은 값을 저장하는 방식이다. 값을 어떻게 저장하냐에 따라 동등 비교를 할 때 차이를

📆 날짜 2023/12/06(수) 📚 챕터 비교 공식 Object.is 👨🏻‍💻 학습내용 Object.is는 Object.is(1,2); 처럼 두 개의 인수를 받으며,이 인수 두 개가 동일한지 확인하고 반환하는 메서드다. Object.is는 동등비교연산자(

2023/12/07(목)리액트에서의 동등 비교Object.is로 먼저 비교를 수행 -> 객체 간 얕은 비교를 한 번 더 수행 객체 간 얕은 비교첫 번째 깊이에 존재하는 값만 비교Object.is는 ES6에서 제공하는 기능이기 때문에 리액트에서는 이를 구현한 폴리필(P

2023/12/08(금)함수함수란?작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은것예제코드를 보며 살펴보자함수는 function으로 시작하여 }로 끝나는 부분까지가 함수다.function 뒤에 오는 resul

2023/12/09(토)함수를 정의하는 방법함수 선언문은 표현식이 아닌 일반 문(statement)으로 분류된다.표현식이란 무언가 값을 산출하는 구문을 의미한다.즉,앞선 함수 선언으로는 어떠한 값도 표현되지 않았으므로 표현식이 아닌 문으로 분류된다.함수 선언문은 말 그

2023/12/11(월)리액트에 자주 쓰이는 다양한 함수 살펴보기함수를 정의하고 그 순간 즉시 실행되는 함수를 의미한다.단 한번만 호출되고, 다시금 호출할 수 없는 함수다.즉시 실행함수는 단 한번만 호출 되기 때문에 일반적으로 즉시 실행 함수에 이름을 붙이지 않는다.즉

2023/12/12(화)함수를 만들 때 주의해야 할 사항함수의 부수 효과(side-effect)란 함수 내의 작동으로 인해 함수가 아닌 함수 외부에 영향을 끼치는 것을 의미한다.이러한 부수 효과가 없는 함수를 순수 함수라하고, 부수 효과가 존재하는 함수를 비순수 함수라

2023/12/13(수)클래스란 무엇인가클래스는 특정한 객체를 만들기 위한 일종의 템플릿과 같은 개념으로 볼 수 있다.즉 , 특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것이 바로 클래스다.클래스를 활용하면 객체를 만드는 데 필요한 데이터나 이를 조작하는 코드

📆 날짜 2023/12/13(수) 📚 챕터 클래스와 함수의 관계 👨🏻‍💻 학습 내용 🎯 클래스와 함수의 관계 클래스는 ES6에서 나온 개념으로,ES6 이전에는 프로토타입을 활용해 클래스의 작동 방식을 동일하게 구현할 수 있었다. 클래스가 작동하는 방식은

2023/12/15(금)클래스와 함수의 관계리액트의 클래스형 컴포넌틍 대한 이해가 자바스크립트 클래스, 프로토타입, this에 달려있다면,함수형 컴포넌트에 대한 이해느느 클로저에 달려 있다.함수형 컴포넌트의 구조와 작동 방식,훅의 원리,의존성 배열 등 함수형 컴포넌트의

2023/12/16(토)변수의 유효 범위, 스코프에 관하여앞서 클로저를 이해하기 위해서는 변수의 유효 범위에 따라서 어휘적 환경이 결정된다고 언급했다. 이러한 변수의 유효 범위를스코프(scope)라고 하는데,자바스크립트에는 다양한 스코프가 존재한다.전역 레벨에 선언하는

📆 날짜 2023/12/18(월) 📚 챕터 클로저는 어떻게 활용하는가 👨🏻‍💻학습 내용 🎯클로저는 어떻게 활용할까? 전역 스코프는 어디서든 원하는 값을 꺼내올 수 있다는 장점이있다. 하지만 누구든 접근할 수 있고 수정할 수 있다는 단점이 있다. 위 예제

📆 날짜 2023/12/18(월) 📚 챕터 클로저는 어떻게 활용하는가 👨🏻‍💻학습 내용 🎯클로저는 어떻게 활용할까? 전역 스코프는 어디서든 원하는 값을 꺼내올 수 있다는 장점이있다. 하지만 누구든 접근할 수 있고 수정할 수 있다는 단점이 있다. var

2023/12/20(수)이벤트 루프와 비동기 통신의 이해자바스크립트는 기본적으로 한번에 하나의 작업만 동기 방식으로만 처리 할 수 있다.동기(synchronous)는 직렬 방식으로 작업을 처리하는 것을 의미한다.동기 요청이 시작된 이후에는 무조건 응답을 받은 이후에 다

2023/12/21(목)싱글 스레드 자바스크립트자바스크립트는 싱글 스레드 언어라는 말을 많이 들어봤을 것이다(?금시초문)이것이 사실인지 확인하기 위해서는 먼저 스레드에 대해 알아야 한다.과거에는 프로그램을 실행하는 단위가 오직 프로세스 뿐이였다고 한다.프로세스(proc

이벤트 루프란 무엇인가? 2023 / 12 / 22 (금)이벤트 루프란 자바스크립트 런타임 외부에서 자바스크립트의 비동기 실행을 돕기 위해 만들어진 장치라고한다.호출 스택(call stack)은 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택이라고한

태스크 큐와 마이크로 태스크 큐2023 / 12 / 23 (토)태스크 큐와 다르게, 마이크로 태스크 큐라는 것도 있다.이벤트 루프는 하나의 마이크로 태스크 큐를 갖고 있는데, 기존의 태스크 큐와는 다른 태스크를 처리한다고한다. 여기에 들어가는 마이크로 태스크에는 대표적

리액트에서 자주 사용하는 자바스크립트 문법2023 / 12 / 27 (수)이러한 독특함은 JSX 구문 내부에서 객체를 조작하거나 객체의 얕은 동등 비교 문제를 피하기 위해 객체 분해 할당을 하는 등 리액트의 몇 가지 독특한 특징에서 비롯된다. 리액트의 독특한 특징을 이

📚 챕터 구조 분해 할당이란 무엇인가 📆 학습 날짜 2023 / 12 / 28 (목) 👨🏻‍💻 학습 내용 🎯 구조 분해 할당이란? 📌 배열 구조 분해 할당 📌 객체 구조 분해 할당 >➡️ 다음 글에서는 전개 구문에 대해 살펴보자.

전개 구문이란 무엇인가2023 / 12 / 29 (금)전개 구문(Spread Syntax)은 구조 분해 할당과는 다르게 배열이나 객체,문자열과 같이 순회할수 있는 값에 말 그대로 전개해 간결하게 사용할 수 있는 구문이라고한다.ES6 이전에는 배열 간에 합성을 하려면 p

객체 초기자란 무엇인가2023 / 12 / 30 (토)객체 초기자(object shorthand assignment)는 ES5에 도입된 기능이며,객체를 선언할 때 객체에 넣고자 하는 키와 값을 가지고 있는 변수가 이미 존재한다면 해당 값을 간결하게 넣어 줄 수 있는 방

Array 프로토타입의 메서드들 정리2024 / 01 / 01 (월)새해 복 많이 받으세요 🙇🏻‍♂️JSX 내부에서 배열을 조작해 바로 원하는 JSX를 반환하는 특성상map filter reduce 이 3개의 메서드가 자주 쓰인다.그리고 이 메서드는 기존 배열의 값

리액트에서의 삼항 조건 연산자?2024 / 01 / 02 (화)삼항 조건 연산자는 JS에서 유일하게 3개의 피연산자를 취할 수 있는 문법이다.삼항 조건 연산자는 기존 if 조건문을 간략하게 쓸 수 있다는 점에서 리액트에서 자주 활용하는데, 특히 JSX 내부에서 조건부로

TypeScript 기본 개념들에 대하여2024 / 01 / 03 (수)요즘 프론트엔드 트렌드는 타입스크립트는 선택이 아닌 필수과정인것 같다.어딜가나 타입스크립트기반으로 프로젝트를 코딩하였는가 , 다른 개발자가 코딩한 코드들을 살펴보기전에 "제발 타입스크립트 선언 되

리액트 코드를 효과적으로 작성하기 위한 타입스크립트 기본 활용법2024 / 01 / 04 (목)타입스크립트를 활용할 때 타입을 엄격하게,그리고 적극적으로 활용한다면 자바스크립트에서 발견하기 어려웠던 버그를 쉽게 찾을 수도 있고,코드의 품질도 한층 올릴 수 있을 것이다.