10분 테코톡 - 5기
1.[10분 테코톡] 합성 컴포넌트 패턴
컴포넌트에서 다른 컴포넌트 담기children을 통해 컴포넌트 주입props를 통해 컴포넌트 주입합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다.단일 책임 원칙 => 관심사의 분리데이터 패칭, 에러 핸들링, 로딩에 대한 처리가 하나의 컴포넌트에서 일어난다
2.[10분 테코톡] 컴포넌트 IoC패턴
API를 사용하는 이에게 내부적으로 어떻게 동작할지에 대한 권한을 부여하는 매커니즘컴포넌트를 사용하는 개발자에게 컴포넌트의 제어권을 넘겨줌필요한 상태를 정의하고, 로직을 구현하고, UI를 그린다음 로직과 연결을 하겠죠?그리고 해당 컴포넌트를 사용할 때는 필요한 opti
3.[10분 테코톡] 리액트 컴포넌트 설계와 SOLID
소프트웨어 설계 5원칙소프트웨워 설계를 이해하기 쉽게 해주는 5가지 원칙단일한 동작만 가지도록 분리? => X사용자나 이해 관계자 등의 변경을 요청하는 사람들을 중심으로 책임을 분리한다.즉, SRP 원칙은 비즈니스 관점에서 책임을 분리하는 원칙으로 볼 수 있습니다.분리
4.[10분 테코톡] 리액트 사이드 이펙트
마무리 Reference [10분 테코톡] 도담의 리액트 사이드 이펙트
5.[10분 테코톡] 서버 컴포넌트
간단합니다! 컴포넌트가 서버에서 렌더링되면 서버 컴포넌트입니다.서버에서 렌더링된 컴포넌트는 클라이언트로 전달되어서 보이게됩니다.리렌더링 되지 않는다.서버 리소스에 접근 가능하다. (파일 시스템, 데이터베이스 등)자바스크립트 번들에 포함되지 않는다. => 제로 번들 사이
6.[10분 테코톡] 상태관리 패턴과 반응형 프로그래밍
"반응형 프로그래밍은 데이터 스트림과 변경 사항의 전파에 관한 선언형 프로그래밍 패러다임이다." 간단한 예시를 들어보자면?그렇다면 앞서 나왔던 표현들에 대해서 간단한 설명을 해보겠습니다.실시간으로 발생하는 이벤트를 시간 순으로 나열한 것값(value) / 에러(erro
7.[10분 테코톡] 번들 사이즈 최적화
초창기 웹 페이지는 정적인 HTML 문서로 이루어져 있었습니다. (사용자의 입력에 따라 변하는 동적인 특성이 거의 없었습니다.)자바스크립트의 등장으로 인해 웹 페이지는 더 동적인 특성을 가질 수 있게 되었습니다. (사용자의 입력에 따라 변하는 UI)이후 앵귤러, 리액트
8.[10분 테코톡] Babel
구형 브라우저나 환경에서 ES6+ 문법을 사용하기 위해 이전 버전의 자바스크립트 문법으로 변환해주는 도구브라우저들은 ES6를 지원하기 위해서 약 1년에서 2년정도의 기간이 걸렸습니다.그렇다면 웹 개발자들은 이 기간동안 ES6 문법들을 사용하지 못했을까요?그렇지 않습니다
9.[10분 테코톡] 모듈 번들러와 빌드 도구
빌드에 필요한 여러가지 과정을 자동화하는 도구현대의 모듈 번들러들은 빌드 도구의 역할까지 수행하고 있습니다.의존성이 있는 여러개의 JS파일을 하나의 JS파일로 합쳐주는 도구번들러 설정에 따라서 CSS나 이미지 파일 같은 것도 같이 취급할 수 있습니다.초기 모듈은 HTM
10.[10분 테코톡] 웹 표준과 웹 접근성
어떤 운영체제나 브라우저에서든 동일한 콘텐츠를 볼 수 있도록 웹페이지를 만들 때 지켜야하는 규칙다양한 브라우저의 등장으로 과도한 경쟁이 나타나고 해당 브라우저에서만 사용 가능한 기능이 나타나기 시작했습니다.이러한 현상은 여러 브라우저를 지원해야 하는 개발자에게 많은 피
11.[10분 테코톡] History API
history 글로벌 오브젝트를 이용브라우저의 세션 히스토리에 대한 접근과 조작 기능을 제공브라우저를 사용할 때 뒤로가기와 앞으로가기 버튼이 있습니다. 이것을 우클릭하면 이전에 방문했던 기록들이 나옵니다.이게 세션 히스토리입니다.history.length: 세션 히스토
12.[10분 테코톡] 커링
커링이란 N개의 파라미터를 받는 함수를 N개의 단항함수(하나의 파라미터만 받는 함수)로 나누는 것기존 함수의 파라미터를 하나씩 체인 형태로 호출하도록 만든다.커링 함수 curridAdd의 첫 번째 인수로 1을 넣어 호출하여 반환된 함수 addWithOne은 클로저가 된
13.[10분 테코톡] React Hooks
2018년 React Conf에서 처음 소개되어 React v16.8에 도입된 기술함수형 컴포넌트에서 state 관리와 Life cycle을 다룰 수 있게 해주는 기술useState()useEffect()useMemo()useContext()useCallback()us
14.[10분 테코톡] 서스펜스와 에러바운더리
컴포넌트 렌더링을 먼저 시작하고, useEffect 혹은 ComponentDidMountemddm 생명주기 메서드를 활용해서 비동기 처리하는 방식직관적이고, 간편하게 사용할 수 있다.현재는 fetch가 한 개밖에 없지만, 여러 데이터를 받는 경우 데이터 상태에 따른 여
15.[10분 테코톡] Virtual DOM
마무리 Reference [10분 테코톡] 엽토의 Virtual DOM
16.[10분 테코톡] 불변성
불변성이라는 추상적인 단어를 이해하기 위해서는 JavaScript에서 Memory Heep과 Call Stack이 어떻게 변화하는지 알아야합니다.Number, String, Boolean, Null, Undefined, SymbolObject, Array, Functi