웹개발 저장소

https://ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org 결국 다음 세 가지로 귀결될 수 있다 1. 상태와 관련된 로직을 추상화하여 `컴포넌트와의 관계`를 없앤다 2. 이를 통해 컴포넌트의 `복잡성`을 낮춘다 3. `함수형 컴포넌트`가 클래스 컴포넌트를 완전히 대체할 수 있도록 한다

코드스피츠76 - CSS Rendering 1회차 1/2 Inline 요소 기본적으로 width와 height는 요소의 cotents만큼 차지한다 기본적으로 새 줄에 나타나지 않고 부모 block level 요소의 너비 안에 공간이 있는 한 같은 줄에 나타난다 너비와 높이를 설정할 수 없다 Block level 요소 기본적으로 width는 부모 요소 너비를 모두 차지한다. 100% 기본적으로 height는 요소 contents의 높이이다 마지막 요소 아래의 새 줄에 나타난다 block level 요소는 너비와 높이를 설정할 수 있다 Example inline1 inline2 block1 block2 이 결과를 잘 살펴보면 inline과 block 요소의 특징을 이해할 수 있다 div안의 text cont..

아래 포스팅들을 보고 나서 `함수형 컴포넌트`로 개발하기로 결정했다 클래스 컴포넌트는 `props`를 재사용하여 개발자의 예상과 다른 동작이 일어날 수 있다 함수형 컴포넌트가 `가독성`이 더욱 뛰어나다 클래스 컴포넌트는 컴포넌트내의 로직 `재사용`이 어렵다 함수형 컴포넌트가 `성능`이 더 뛰어나다 리액트 개발팀이 함수형 컴포넌트를 권장한다 https://codingbroker.tistory.com/23 [react] 리액트 훅(react hook)이란? - 클래스형 컴포넌트와 비교 오늘은 React 16.8버전부터 정식으로 릴리즈 된 Hook에 대해서 살펴보겠습니다. 등장 배경 리액트 컴포넌트는 클래스형 컴포넌트(Class Component)와 함수형 컴포넌트(Functional Component)로 나..

원문 https://ko.reactjs.org/docs/typechecking-with-proptypes.html PropTypes와 함께 하는 타입 확인 – React A JavaScript library for building user interfaces ko.reactjs.org 특정 애플리케이션에서는 전체 애플리케이션의 타입 확인을 위하여 Flow 또는 TypeScript와 같은 JavaScript 도구(Extensions)를 사용할 수 있습니다. 당신이 이러한 것들을 사용하지 않더라도 React는 내장된 타입 확인 기능들을 가지고 있습니다. 컴포넌트의 `props`에 타입 확인을 하려면 다음과 같이 특별한 프로퍼티인 `propTypes`를 선언할 수 있습니다. import PropTypes fr..

Create React App 미리 설정된 리액트앱을 빠르게 생성할 수 있다 Create React App · Set up a modern web app by running one command. Set up a modern web app by running one command. create-react-app.dev 철학 단일 종속성 No 설정 No 잠금 실행방법 $ yarn create react-app my-app 생성된 폴더구조 my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App...

`create-*` 시작 키트로 새 프로젝트를 생성한다 yarn create [] 이 명령어는 다음의 두 가지 작업을 해준다 `create-`를 전역으로 설치하거나 업데이트한다 시작 키트 `package.json`의 `bin` 필드에 있는 실행파일을 ``를 전달하여 실행한다 예를 들어, `yarn create react-app my-app`은 다음과 같다 $ yarn global add create-react-app $ create-react-app my-app

새 프로젝트 시작 yarn init 종속성 추가 yarn add [package] yarn add [package]@[version] yarn add [package]@[tag] 서로 다른 종속성 카테고리에 종속성 추가 `devDependencies`, `peerDependencies`, `optionalDependencies` yarn add [package] --dev yarn add [package] --peer yarn add [package] --optional 종속성 업그레이드 yarn upgrade [package] yarn upgrade [package]@[version] yarn upgrade [package]@[tag] 종속성 제거 yarn remove [package] 프로젝트의 모든..

이번 장에서는 학습을 잠시 쉬어 가죠 대신 지금까지 배운 것에 대해 생각을 좀 해 봅시다 전가산기를 하나의 기호로 표시하면서 내부적인 구조는 모두 숨기고 장치의 기능에 집중할 수 있게 되었습니다 하지만 우리는 내부 구조가 얼마나 복잡한지 꼭 기억해야 합니다 그러한 통찰이 기술에 대한 깊은 이해를 이끌어 냅니다 AND 게이트 -> 릴레이 2개 OR 게이트 -> 릴레이 2개 NAND 게이트 -> 릴레이 3개 (인버터도 릴레이로 취급) XOR 게이트 -> NAND + OR + AND -> 릴레이 7개 반가산기 -> XOR + AND -> 릴레이 9개 전가산기 -> 반가산기 2개 + OR -> 릴레이 20개 단순히 두 개의 이진수를 더하기 위해 무려 20개의 릴레이를 복잡하게 연결해야 합니다 지금 우리가 누리고..