1. React Modal은 리액트에서 Modal을 사용하기 편리하도록 기능을 제공한다. 1-1 Modal을 사실 index.html의 독립적인 요소에 붙어 메인 프로그램과 병열적으로 작동해야 한다. 1-2 이런 개별적인 작업을 개발자가 쉽게 할 수 있도록 도와 주는 것이 React Modal 라이브러리이다. 2. 설치한다. npm install react-modal로 설치한다. 3. React Modal은 Modal이라는 객체를 제공하여 Modal기능을 제공한다. 3-1 Modal을 사용하기 위해서는 import으로 Modal을 가지고 와야 한다. 3-2 Modal은 Children으로 내부 template을 전달하는 형식으로 동작한다. 3-2-1 아래처럼 template을 사이에 넣는다. h3에 제목..
1. 인생에서 가장 중요한 것들 중 하나가 목표이다. 2. 목표라는 게 단순히 행복하고 싶다 이런 것이 아니다. 진짜 내가 추구하는 삶이라고 할 수 있을 것 같다. 3. 어떤 것을 좋은 것으로 다른 것을 부정적으로 보는 관점은 삶을 불행하고 방황하게 만든다. 4. 내가 좋아하는 것에 집중할 수 있는 것이 삶에서 가장 중요한 요소인 만큼 내가 가진 소중한 것들에 감사하고 함께 하는 것에 집중하는 것도 중요하다. 5. 자녀가 있고 아내가 있는 것에 감사하고 그들에게 집중하고 더 많은 것을 공유하는 것이 중요한 이유다. 6. 내 삶을 불행하게 여기고 결핍이 있는 것처럼 생각하는 한 인생에 행복이란 있을 수 없고 계속 무엇인가를 찾아다닐 수 밖에 없다. 그 무엇은 결코 찾아 지지 않는대도 말이다.
1. 예전에는 이 내용이 @babel/preset-stage-2에 있던 것들인데 모두 deprecated되어 별도로 지정해서 사용해야 한다. 1-1 아래의 링크가 바벨 홈페이지 proposal-class-properties에 관련된 내용이다. Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 2 이 syntax는 2가지의 편리한 기능을 제공한다. 2-1 첫 번째는 class 내에서 instance 변수를 선언할 수 있게 해준다. 2-1-1 아래의 소스를 보면 생성자 위에 state = {} 형식으로 변수를 선언하고 있다. 2-1-2 이 구문은 객체 지향 언어에서는 ..
1. 지금까지는 모든 파일을 app.js 파일 하나에 다 몰아서 사용했다. 1-1 이 큰 파일을 각 컴포넌트 별로 파일에 넣으면 좀 더 깔끔하게 프로그램을 관리할 수 있다. import React from 'react' import ReactDOM from 'react-dom' class TodoApp extends React.Component { constructor(props) { super(props) this.onRemoveAllClicked = this.onRemoveAllClicked.bind(this) this.onNextTodoClicked = this.onNextTodoClicked.bind(this) this.handleAddTodo = this.handleAddTodo.bind(thi..
1. 지금까지 live-server를 사용하여 react를 기동하였다. 1-1 webpack은 개발용으로 사용할 수 있는 다양한 기능을 가진 서버를 지원하고 있다. 1-2 이 서버를 사용하면 내부적으로 babel을 연결하여 컴파일하고 메모리를 활용하여 빠르게 재기동도 가능하다. 1-2-1 소스가 변경된 경우 변경 될 때 마다 bundle.js를 만드는 것이 아니라 메모리로 바로 로딩해버린다. 1-3 아래는 지난 포스트와 동일한 webpack.config.js파일이다. { "name": "react-basic", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack --watch", "serve": ..
1. 지금까지는 index.html파일에 script 테그로 CDN 링크를 사용하여 React를 사용하였다. 2. 보통 React 프로그램은 React를 내장으로 사용하므로 npm으로 React, React-dom 설치한다. 3. webpack은 npm으로 설치한 외장 라이브러리와 사용자가 작성한 코드를 하나의 파일로 만들어 준다. 3-1 webpack을 아래와 같이 설치한다. 3-2 srcipts 속성에 build라는 이름으로 webpack 명령어를 추가하면 다음과 같다. { "name": "react-basic", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack --watch", "serv..
1. live-server, babel 같은 범용적으로 많이 사용하는 라이브러리는 npm으로 설치 시에 global로 사용하면 편하다. 1-1 문제는 이런 실행형 프로그램들은 버전이 자주 바뀌고 이 프로그램이 실행하는 소스와 호환성 문제도 생기기 쉽다. 1-2 요즘에는 이런 호환성 문제로 global 설치는 권장하지 않고, 1회성 실행형의 경우 npx로 실행을 많이 하고 1-3 작성한 프로그램과 밀접하게 연관되어 계속 실행해야 하는 webpack, babel같은 프로그램은 내장형으로 설치한다. 1-4 예를 들면 지난 번까지 실행한 프로젝트의 package.json의 경우 모두 내장형으로 설치되었다. { "name": "react-basic", "version": "1.0.0", "description":..
1. 리액트 컴포넌트를 상속한 리액트 클래스는 리액트 컴포넌트의 라이프 사이클을 그대로 사용할 수 있게 된다. 1-1 라이프 사이클은 클래스가 생성되어 삭제될 때까지 리액트가 내부적으로 호출하는 컴포넌트의 메소드들이다. 1-2 가장 많이 사용되는 메소드는 componentDidMount, componentDidUpdate, componentWillUnmount 정도 이다. 1-3 3가지의 단계로 나눌 수 있는데 1-3-1 Mounting 1-3-1-1 constructor, getDerivedStateFromProps, render, componentDidMount 순서로 호출된다. 1-3-2 Updating 1-3-2-1 getDerivedStateFromProps, shouldComponentUpda..
- Total
- Today
- Yesterday
- 도커 개발환경 참고
- AWS ARN 구조
- Immuability에 관한 설명
- 자바스크립트 멀티 비동기 함수 호출 참고
- WSDL 참고
- SOAP 컨슈머 참고
- MySql dump 사용법
- AWS Lambda with Addon
- NFC 드라이버 linux 설치
- electron IPC
- mifare classic 강의
- go module 관련 상세한 정보
- C 메모리 찍어보기
- C++ Addon 마이그레이션
- JAX WS Header 관련 stackoverflow
- SOAP Custom Header 설정 참고
- SOAP Custom Header
- SOAP BindingProvider
- dispatcher 사용하여 설정
- vagrant kvm으로 사용하기
- git fork, pull request to the …
- vagrant libvirt bridge network
- python, js의 async, await의 차이
- go JSON struct 생성
- Netflix Kinesis 활용 분석
- docker credential problem
- private subnet에서 outbound IP 확…
- 안드로이드 coroutine
- kotlin with, apply, also 등
- 안드로이드 초기로딩이 안되는 경우
- navigation 데이터 보내기
- 레이스 컨디션 navController
- raylib