본문 바로가기

이것저것 스터디📚

 (107)
React 공식문서 - Thinking in React JSON API와 디자이너의 목업이 있다고 가정을 했을 때, React로 검색 가능한 제품 데이터 테이블을 구축하는 사고 과정을 안내하는 챕터. React에서 UI를 구현하려면 일반적으로 동일한 5단계를 따른다. Step 1: Break the UI into a component hierarchy(UI를 컴포넌트 계층 구조로 나누기) 목업의 모든 컴포넌트와 하위 컴포넌트 주위에 상자 그리고 이름을 정한다. 컴포넌트는 단일 책임 원칙(single responsibility principle) 기법에 따라 이상적으로 한 가지 일만 수행해야 한다. 만약 컴포넌트가 늘어나게 되면 더 작은 하위 컴포넌트로 분해해야한다. 목업에서 컴포넌트를 식별했다면, 계층 구조로 정렬한다. Step 2: Build a stati..
React 공식문서 - Quick Start Creating and nesting components(컴포넌트 생성 및 중첩하기) React 앱은 컴포넌트로 만들어진다. React 컴포넌트는 마크업을 반환하는 JavaScript 함수로써, 고유한 로직과 모양을 가진 UI(사용자 인터페이스)의 일부이며, 버튼만큼 작을 수도 있고 전체 페이지만큼 클수도 있다. * MyButton이라는 컴포넌트 선언 function MyButton () { return ( I'm a button ); } * 선언된 MyButton 컴포넌트를 다른 컴포넌트에 중첩 export default function MyApp() { return ( Welcome to my app ); } 위의 예제와 같이 React 컴포넌트는 대문자로 시작하고, HTML 태그는 소문자로 시작한다..
DeepDive - 20장.strict mode 20.1 strict mode란? function foo() { x = 10; } foo() console.log(x) 위의 예제의 실행 결과는 ReferenceError가 아닌, 10이 출력되는데, 이는 자바스크립트 엔진이 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성하기 때문이다. 이러한 현상을 암묵적 전역(implicit global)이라고 한다. 하지만, 암묵적 전역은 오류를 발생시키는 원인이 될 가능성이 크기 때문에 ES5부터는 strict mode가 추가되었다. strict mode(엄격 모드) : 자바스크립트의 문법을 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적 에러를 발생시킨다. * strict mode 대신..

티스토리툴바