1. Numpy >>> import numpy as np >>> a = np.array([[1,2], [3,4]]) >>> b = np.array([10, 20]) >>> a*b array([[10,40],[30,80]]) # 마치 [[1,2], [3,4]]와 [[10, 20], [10,20]]의 component-wise product >>> x = np.array([[51,55], [14,19], [0,4]]) >>> x = x.flatten() >>> print(x) [51, 55, 14, 19, 0, 4]
16.1 SPA spa란 single page application 리액트 같은 라이브러리 또는 프레임워크를 사용해서 뷰 렌더링을 유저의 웹 브라우저가 담당하도록, 애플리케이션을 우선 웹 브라우저에 로드시킨 후 필요한 데이터만 전달받아 보여 주는 것 SPA는 서버에서 제공되는 페이지가 하나이지만, 로딩을 한 번 하고 나면 웹 브라우저에서 나머지 페이지들을 정의한다. 페이지에 들어온 후 다른 페이지로 이동할 때는 서버에 새로운 페이지를 요청하는 것이 아니라, 새 페이지에 필요한 데이터만 받아 와 그에 따라 웹 브라우저가 다른 종류의 뷰를 만들어 주는 것 주소에 따라 다른 뷰를 보여주는 것을 Routing이라고 한다. react-router를 사용해서 구현할 수 있다. react-router는 third-p..
Intro 데이터를 연동하려면 일반적으로 서버에 구현된 REST API에 ajax를 요청하여 데이터를 가져오거나 입력 서버의 API를 호출할 때는 세 가지 상태를 관리 1) 요청 시 : [로딩] 2) 응답 시 : [성공] or [실패] 위 세 상태에 대한 처리를 해야 한다. 위 작업을 react component의 state만 사용해도 관리할 순 있다. but 리덕스, 리덕스 미들웨어를 사용하면 간편하게 관리할 수 있다고 합니다. 15.1 미들웨어 이해 미들웨어 : action의 dispatch 발생 시, reducer에서 이를 처리하기 전에 사전에 지정된 작업을 실행하는 영역? 미들웨어 : action과 reducer 사이의 중간자 갑자기 궁금한 것 버튼이 하나 있다. 그 옆에 숫자가 하나 있다. 버튼..
note 프로젝트 디렉터리로 들어가서 yarn eject 명령어를 실행하면 node_modules/react-scripts 경로에 내장된 리액트 프로젝트의 환경설정 파일들을 프로젝트 루트 경로로 이동시킨다. 9.1 CSS Module CSS Module은 css를 모듈화하여 사용하는 방식 세 가지 로더를 사용했다 1) style-loader는 스타일을 불러와 웹 페이지에서 활성화하는 역할 2) css-loader는 css 파일에서 import와 url(...) 문을 webpack의 require 기능으로 처리하는 기능 3) postcss-loader는 모든 웹 브라우저에서 입력한 css 구문이 제대로 작동할 수 있도록 자동으로 -webkit, -mos, -ms 접두사를 붙여주는 역할 흠 이상하게 책에서 ..
7.1 Introduction Lifecycle related method는 총 10가지 어떤 작업 전에 실행되는 메서드 : Will-접두사가 붙고, 작업 후에 실행되는 메서드 : Did-접두사가 붙는다. 3개의 카테고리로 나눈다. mount, update, unmount mount DOM이 생성되고 web browser에 나타나는 것 method 호출 흐름 constructor : 말 그대로 생성자 getDerivedStateFromProps : props에 있는 값을 state에 동기화하는 메서드 render : UI 렌더링 componentDidMount : web browser에 나타난 후 호출하는 메서드 update 업데이트 하는 경우는 4가지 props changed state changed ..
6.1 JS 배열의 map()함수 문법 arr.map(callback, [thisArg]); callback : 새로운 배열의 요소를 생성하는 함수, 다음은 callback 함수의 params currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index array : 현재 처리하고 있는 원본 배열 thisArg (선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 예제 ES6 이전 문법 var numbers =[1,2,3,4,5]; var result = numbers.map(function(e){return e*e;}); console.log(result); ES6 문법 const numbers = [1,2,3,4,5]; const resul..
Introduction 일반 HTML에서 DOM 요소에 이름을 달 때, id를 사용 특정 DOM 요소에 어떤 작업을 해야 할 때 이렇게 요소에 id를 달면 css에서 특정 id에 특정 스타일을 적용하거나 js에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. HTML과 비슷하게, react project 내부에서 dom에 이름을 다는 방법 : 이를 ref 개념이라고 한다. 5.1 when to use the "ref" 우선 HTML에서 getElementById()가 어떻게 사용되는지 봅시다 JS Bin react에서는 굳이 dom에 접근하지 않아도 state로 구현할 수 있다. 구현 순서 컴포넌트 만들기 > input에 ref 달기 > button onClick 마다 input에 focus 주기 ...
introduction event : user가 browser에서 dom 요소들과 상호 작용하는 것 4.1 리액트의 이벤트 시스템 HTML 이벤트와 인터페이스가 동일하므로 꽤 비슷하다. 주의 사항 camelCase로 작성해야합니다. 이벤트에서 실행할 js코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 화살표 함수 문법으로 함수를 만들어 전달한다. dom 요소에만 이벤트를 설정할 수 있다. div, button, input, form, span 등 dom 요소에는 이벤트 설정 가능 사용자가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다! 이벤트 종류 Clipboard Composition Keyboard Focus Form Mouse Selection Touch UI Image Wheel..