Page 28

javascript browser
javascript event bubbling & capturing
![image](https://miro.medium.com/max/1200/1*Et5UjVPGLfF1L43T7ErrxQ.png) ## Javascript Event Capturing https://codepen.io/yceffort/pen/GbVaaY Event Capturing은 특정 요소에서 이벤트가 발생했을 때, 최상위 요소에서 부터 이벤트를 탐...
2019-07-172분
javascript
javascript class
# Class 클래스는 기본적으로 이렇게 생겼다. ```javascript class Member { getName() { return "이름"; } } let obj = new Member(); console.log(obj.getName()); ``` ## 특징 ### 1. strict 모드에서 실행 딱히 `'use strict'...
2019-07-103분
browser web-performance javascript
Intersection Observer
## Intersection Observer Intersection Observer는 엘리먼트가 viewport에 노출되고 있는지 여부를 확인해주는 API다. 간단히 말해 브라우저의 어떤 요소가 화면에 노출되고 있는지 안되고 있는지를 확인해주는 라이브러리라고 생각하면 될 것 같다. 이 라이브러리가 없이 엘리먼트가 노출중인지 확인하려면 어떻게 해야할까? 이...
2019-06-244분
nextjs frontend typescript
Typescript, React, NextJs, Koa, Styled Component 로 프론트엔드 환경 만들기
이 문서는 더 이상 업데이트 하지 않을 생각이다. 대신 https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate 여기에서 계속 해서 만들어 가고 있다. ## 사용한 오픈소스 ### React 자세한 설명은 생략 한다 ### Nextjs [NextJs](https://nextjs.org...
2019-06-214분
typescript
Typescript Type, Enum, Partial, Record로 글로벌 변수 관리하기
## 고민지점 - Global 로 관리하는 Colorset Red, Blue, Green, Black이 있다. - 이 색들은 각각 지정된 칼라코드가 있다 - 그러나 때로는 그 컬러코드에 맞게 안쓰는 경우도 있다 - 그러나 때로는 저 네개를 다 안쓰고 1~3개만 쓰는 경우가 있다. ## Union types [Union Type](https://www....
2019-06-185분
react
React 공부하기 7 - 컴포넌트 라이프 사이클
## React Component Life Cycle 라이프 사이클은 총 10가지다. `Will`접두사는 어떤 작업을 작동하기전에 실행하는 메소드가, `Did`는 어떤 작업을 한 후에 실해오디는 메서드다. 이 메서드들은 컴포넌트 클래스에서 덮어써서 선언하여 사용할 수 있다. 라이프사이클은 총 3가지 카테고리로 나눌 수 있는데, `mount`, `unm...
2019-05-215분
react
React 공부하기 8 - 함수형 컴포넌트
### 함수형 컴포넌트 ```javascript import React from 'react'; function Hello(props) { return ( <div>hello {props.name}</div> ) } ``` 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등의 기능을 제거한 상태이므로 메모리 사용량이...
2019-05-211분
react
React 공부하기 6 - 컴포넌트 반복
## 컴포넌트 반복해서 쓰기 ```javascript import React, {Component} from 'react'; class IterationSample extends Component { render () { const names = ['눈사람', '얼음', '눈', '바람'] const nameList ...
2019-05-212분
javascript
Javascript - Promise
## Promise ```javascript new Promise(executor) ``` `executor`는 `resolve`및 `reject` 인수를 전달할 실행함수를 의미한다. 실행함수는 `resolve`와 `reject`를 받아 즉시 실행된다. 실행함수는 보통 비동기 작업을 시작한 후, 모든 작업을 끝내면 `resolve`를 호출해서 `Prom...
2019-05-212분
javascript
Javascript - Destructuring Assignment
## 구조 분해 할당 구조 분해 할당은 배열이나 객체의 속성을 말그대로 분해하여, 분해 한 값을 개별변수에 담을 수 있게 도와주는 표현식이다. ```javascript let a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 // rest 패턴을 이용하여 나머지를 모두...
2019-05-213분
javascript
Javascript - Closure
자바스크립트의 클로져
2019-05-098분
react
React 공부하기 5 - Reference
## Reference (Ref) 특정 DOM요소에 작업을 하기 위해서 id를 부여하는 것 처럼, React에서 DOM에 이름을 다는 방식이 있는데 이것이 바로 ref (Reference)다. 반드시, `DOM에 직접적으로 접근하여 조작이 필요할 때 만 이용해야 한다.` ### 컴퍼넌트 내부에서 사용 ```javascript import React, ...
2019-05-092분

Page 27 ←

Page 29 →