javascript event bubbling & capturing
 ## Javascript Event Capturing https://codepen.io/yceffort/pen/GbVaaY Event Capturing은 특정 요소에서 이벤트가 발생했을 때, 최상위 요소에서 부터 이벤트를 탐...
20 POSTS
Page 18
javascript class
# Class 클래스는 기본적으로 이렇게 생겼다. ```javascript class Member { getName() { return "이름"; } } let obj = new Member(); console.log(obj.getName()); ``` ## 특징 ### 1. strict 모드에서 실행 딱히 `'use strict'...
Intersection Observer
## Intersection Observer Intersection Observer는 엘리먼트가 viewport에 노출되고 있는지 여부를 확인해주는 API다. 간단히 말해 브라우저의 어떤 요소가 화면에 노출되고 있는지 안되고 있는지를 확인해주는 라이브러리라고 생각하면 될 것 같다. 이 라이브러리가 없이 엘리먼트가 노출중인지 확인하려면 어떻게 해야할까? 이...
Typescript, React, NextJs, Koa, Styled Component 로 프론트엔드 환경 만들기
이 문서는 더 이상 업데이트 하지 않을 생각이다. 대신 https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate 여기에서 계속 해서 만들어 가고 있다. ## 사용한 오픈소스 ### React 자세한 설명은 생략 한다 ### Nextjs [NextJs](https://nextjs.org...
Typescript Type, Enum, Partial, Record로 글로벌 변수 관리하기
## 고민지점 - Global 로 관리하는 Colorset Red, Blue, Green, Black이 있다. - 이 색들은 각각 지정된 칼라코드가 있다 - 그러나 때로는 그 컬러코드에 맞게 안쓰는 경우도 있다 - 그러나 때로는 저 네개를 다 안쓰고 1~3개만 쓰는 경우가 있다. ## Union types [Union Type](https://www....
React 공부하기 7 - 컴포넌트 라이프 사이클
## React Component Life Cycle 라이프 사이클은 총 10가지다. `Will`접두사는 어떤 작업을 작동하기전에 실행하는 메소드가, `Did`는 어떤 작업을 한 후에 실해오디는 메서드다. 이 메서드들은 컴포넌트 클래스에서 덮어써서 선언하여 사용할 수 있다. 라이프사이클은 총 3가지 카테고리로 나눌 수 있는데, `mount`, `unm...
React 공부하기 8 - 함수형 컴포넌트
### 함수형 컴포넌트 ```javascript import React from 'react'; function Hello(props) { return ( <div>hello {props.name}</div> ) } ``` 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등의 기능을 제거한 상태이므로 메모리 사용량이...
React 공부하기 6 - 컴포넌트 반복
## 컴포넌트 반복해서 쓰기 ```javascript import React, {Component} from 'react'; class IterationSample extends Component { render () { const names = ['눈사람', '얼음', '눈', '바람'] const nameList ...
Javascript - Promise
## Promise ```javascript new Promise(executor) ``` `executor`는 `resolve`및 `reject` 인수를 전달할 실행함수를 의미한다. 실행함수는 `resolve`와 `reject`를 받아 즉시 실행된다. 실행함수는 보통 비동기 작업을 시작한 후, 모든 작업을 끝내면 `resolve`를 호출해서 `Prom...
Javascript - Destructuring Assignment
## 구조 분해 할당 구조 분해 할당은 배열이나 객체의 속성을 말그대로 분해하여, 분해 한 값을 개별변수에 담을 수 있게 도와주는 표현식이다. ```javascript let a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 // rest 패턴을 이용하여 나머지를 모두...
Javascript - Closure
자바스크립트의 클로져
React 공부하기 5 - Reference
## Reference (Ref) 특정 DOM요소에 작업을 하기 위해서 id를 부여하는 것 처럼, React에서 DOM에 이름을 다는 방식이 있는데 이것이 바로 ref (Reference)다. 반드시, `DOM에 직접적으로 접근하여 조작이 필요할 때 만 이용해야 한다.` ### 컴퍼넌트 내부에서 사용 ```javascript import React, ...
React 공부하기 4 - Event
## 이벤트 리액트의 이벤트는 기본적으로 HTML의 이벤트와 비슷하지만, 주의사항이 몇가지 있습니다. 1. 이벤트 명은 카멜 케이스로 작성해야 한다. `onclick` → `onClick` 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니고, 함수형태의 값을 전달해야 한다. 3. DOM요소에만 설정할 수 있다. Custom Component는...
React 공부하기 3 - Component
## 컴포넌트 기본적인 컴포넌트를 만들어 보자. ```javascript import React, {Component} from 'react'; class MyComponent extends Component{ render() { return ( <div className='hello'> ...
React 공부하기 2 - JSX
## Create-react-app 라이브러리로 시작 ``` yarn global add create-react-app create-react-app hello-react cd hello-react yarn start ``` ### app.js의 구조 ```javascript import React from 'react'; import logo fr...
React 공부하기 1 - background
## 리액트 요약 기존에 많은 자바스크립트 기반 프레임워크들이 있었는데, 대부분의 프레임워크들은 MVC (Model-View-Controller), MVVM(Model-View-View Model), MVW(Model-View-Whatever) 아키텍쳐를 사용하여 개발되었다.  - Image Representation
## Image Representation & Classification ### Images as Grids of Pixels ```python import numpy as np from skimage import io import matplotlib.image as mpimg import matplotlib.pyplot as plt import cv...
업무 자동화 (1) - 구글 스프레드 시트 API 활용하기
구글 스프레드 시트를 파이썬에서 조작해보자. 내가 할일은 1. 스프레드시트를 읽고 2. 스프레드시트에 쓰는 두가지 작업이다. ```python import pickle import os.path from googleapiclient.discovery import build from google_auth_oauthlib.flow import Installe...
초보를 위한 웹크롤링: 네이버 영화 댓글 크롤링하기
e 파이썬과 파이썬 라이브러리 (beatifulSoup)를 활용하여 네이버 영화 댓글 크롤링 해보기 ## 1. 크롤링하려는 웹페이지의 구조를 살펴보기 인크레더블 평점 댓글 페이지를 먼저 살펴보겠습니다. [여기](https://movie.naver.com/movie/bi/mi/point.nhn?code=136990&onlyActualPointYn=Y#po...