
## Redux Saga

## Async Generator

### Example

- OberserableHQ


Async Generator And Redux Saga


╥━━━━━━━━╭━━┳
╢\ / \ ┣
╢ ) ( ') ┣
╢( / ) ┣
╢ \(\_\_\_)| ┣
╨━━━━━━━━━━━┻


React Debounce and Throttle

## 상대경로 설정 시 문제점

```javascript
import utils from '../../../../utils/my-utils';
```

와 같이 패키지 구조가 깊어질 경우 임포트하기 번거로워지게 된다.

```
import utils from 'utils/my-utils';
```

와 같이 간단하게 임포트할 수 없을까?

## 지정된 절대경로로 임포트하기

#### 상대경로를 지정된 절대경로로 바꾸는 방법은 세가지 정도 있는듯하다.

- Babel
- Webpack, Fusebox, ... ( module bundlers )
- create-react-app, create-react-app-ts

### Babel

- React Native, React 
 - [babel플러그인](https://github.com/tleunen/babel-plugin-module-resolver)을 이용하여 설정을 하면 간단하게 해결할 수 있다. 
 ```
 "plugins": [
 "transform-react-jsx-source",
 [
 "module-resolver",
 {
 "alias": {
 "~/*": "./src"
 },
 "cwd": "babelrc"
 }
 ]
 ]
 ```
 위와같이 .babelrc 설정을 해주면 src폴더 기준 '~/utils/my-utils'가 가능하다. 
 babel을 이용하는 프로젝트라면 리액트가 아니더라도 사용가능하여 가장 간단한 해결방안인듯 싶다.
 - [샘플소스](https://github.com/BoBeenLee/absolute-sample/tree/2-react-native-ts)

### Webpack, Fusebox

- Webpack
 - webpack.config.js 설정
 ```
 resolve: {
 modules: [
 path.join(__dirname, "src"),
 "node_modules"
 ]
 }
 ```
 - [샘플소스](https://github.com/BoBeenLee/absolute-sample/tree/4-webpack)
- Fusebox
 - fuse.js에 homeDir 설정
 ```
 FuseBox.init({
 homeDir: "src",
 ...
 ```
 처럼 homeDir만 지정해주면 homeDirectory기준 '~/utils/my-utils'가 가능하다.
 - [샘플소스](https://github.com/BoBeenLee/absolute-sample/tree/3-fusebox-ts)

### create-react-app, create-react-app-ts

- .env파일에 NODE_PATH=src/ 설정만 하면 끝.
- [샘플소스](https://github.com/BoBeenLee/absolute-sample/tree/1-create-react-app)

## [VSCode path 설정](https://code.visualstudio.com/docs/languages/jsconfig).

자바스크립트일 경우 jsconfig.json 
타입스크립트일 경우 tsconfig.json 설정을 따로 해줘야한다.

```
{
 "compilerOptions": {
 "baseUrl": ".",
 "paths": {
 "*": [
 "*",
 "src/*"
 ]
 }
 }
}
```

### Pitfall

- 스토리북 tsconfig 설정 https://github.com/dividab/tsconfig-paths-webpack-plugin

React 상대경로 -> 절대경로 변경

FaCC(Function as Child Component) 구현시 함수를 넘겨주는 데 PureComponent로 shallow comparing하면은 함수 비교시 원하는대로 동작을 안할 것이다. 

그래서 함수비교 snippet코드를 작성해두려한다.
다만 간단한 가정을 기준으로 비교한다.

- Impure Function이어야한다.
- Input(Parameter)은 동일하게 전달받는다.

### [Reference](https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/template/README.md#adding-custom-environment-variables)

React For pure function compare


list and map.

{
"1" : { ... },
"2" : { ... },
"3" : { ... }
}

vs

[{ id: 1, ... }, { id: 2, ... }, { id: 3, ... }]
차이점.


list-map


Object Oriented Programming
객체 기준의 상호작용.

ex) Typeorm, ...?

Functional Programming
순수함수에 대한 조작, 결합, 매핑, 리듀서, 컴포즈 등등에 쓰임.

ex) FOC, HOC, recompose, lodash

Procedural Programming
Side Effects 일어하는 부분 처리
ex) Redux Saga, async, async function\* ...


oop-ffp-pp


### Proxy

### Decorator

## Reference

-

╥━━━━━━━━╭━━┳
╢\ / \ ┣
╢ ) ( ') ┣
╢( / ) ┣
╢ \(\_\_\_)| ┣
╨━━━━━━━━━━━┻


Proxy Decorator Pattern

요약하면 dotenv 설정 시 crna 를 이용할 경우, .env 파일에 NODE*ENV 환경 설정 가능하고 다른 환경 변수를 설정 시엔 REACT_APP*\* 변수로 지정하면 React 코드 환경에서 환경변수를 불러 올 수 있다. 
:warning: crna 이용하면 [dotenv](https://github.com/motdotla/dotenv)는 따로 인스톨하지 않아도 된다. 
ex) `.env NODE_ENV=production REACT_APP_TOKEN=token` 

- 환경변수는 빌드타임에 값을 세팅한다.
- 런타임으로 환경변수 불러오려면 서버가 필요하다.
 

## More Features

- Referencing Environment Variables in the HTML
 - `<title>%REACT_APP_TOKEN%</title>` 
 이런식으로 환경변수를 HTML 에 직접 접근 가능하다.
- Adding Temporary Environment Variables In Your Shell
 - [cross-env](https://github.com/kentcdodds/cross-env)로 inline 으로 환경설정하여 이용가능하다. 
 `cross-env NODE_ENV=development npm start`
- Adding Development Environment Variables In .env
 - [.env 외 여러 옵션이 가능하다.](https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env)

### [Reference](https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/template/README.md#adding-custom-environment-variables)

React Custom Environment

HOC는 많은 사람들이 이미 알고 있고 자주 사용하기에 따로 설명은 하지 않겠다. 
[공식문서](https://reactjs.org/docs/higher-order-components.html)에도 자세히 설명 되어있다. 
주로 보통 HOC는 공통 기능, 횡단 관심사 분리 위해서 사용해왔었다. 
ex) loading, auth, logging, tracking 등등...

[Render Props](https://reactjs.org/docs/render-props.html)의 예시를 참조하여 구현해보자.

## High Order Component

```javascript
function withMouse(Component) {
 return class extends React.Component {
 constructor(props) {
 super(props);
 this.handleMouseMove = this.handleMouseMove.bind(this);
 this.state = { x: 0, y: 0 };
 }

 handleMouseMove(event) {
 this.setState({
 x: event.clientX,
 y: event.clientY,
 });
 }

 render() {
 return (
 <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 <Component {...this.props} mouse={this.state} />
 </div>
 );
 }
 };
}
```

만일 [Static Methods](https://github.com/mridgway/hoist-non-react-statics)를 카피하기 위해선 별도의 로직도 필요할 것이다.

### Problem

1. Duplication Props 
 Mouse, Touch기능을 같이 사용하고 싶다면
 ```javascript
 withMouse(withTouch(class extends React.Component { ... }));
 or
 @mouse
 @touch
 class Component extends React.Component { ... }
 ```
 로 구현할텐데
 만일 withTouch와 withMouse 둘다 동일한 mouse props를 넘겨줄 경우, withMouse의 mouse props는 원하는 데로 동작을 안할 것이다.
2. 여러개의 HOC를 사용할 경우 props의 복잡도 증가
 ```javascript
 compose(withMouse, withTouch, withUser, withAuth, withLoading)(...)
 or
 @mouse
 @touch
 @user
 @auth
 @loading
 ...
 ```
 여러개의 HOC를 사용할 경우, 어떤 props가 어떤 HOC에서 넘어왔는지 명시적이지 않아 직접 구현체 HOC props를 확인해야하는 경우가 생기게 된다.

### Solution

Function as Child Component으로 1, 2의 이슈를 해결할 수 있다.

## Function as Child Component

```javascript
class Mouse extends React.Component {
 constructor(props) {
 super(props);
 this.handleMouseMove = this.handleMouseMove.bind(this);
 this.state = { x: 0, y: 0 };
 }

 handleMouseMove(event) {
 this.setState({
 x: event.clientX,
 y: event.clientY,
 });
 }

 render() {
 return (
 <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 {this.props.children(this.state)}
 </div>
 );
 }
}
```

```javascript
 // touch, mouse implementation code ...
 render() {
 return (<Touch>
 {this.renderTouch}
 </Touch>);
 }

 renderTouch = (touch) => (<Mouse>
 { (mouse) => <Cat mouse={mouse} touch={touch} /> }
 </Mouse>);
```

위와 같이 Touch FaCC를 renderTouch arrow function으로 작성하고
Mouse는 arrow function을 직접 내부에 구현하였다. 
둘의 차이점은 Touch, Mouse컴포넌트 둘다 PureComponent일 경우, 
Mouse컴포넌트는 랜더링 될때마다 함수를 매번 생성하여 전달해줄 것이고
renderTouch는 한번만 호출되어 랜더링 될 것이다. 
[PureComponent - Shallow Comparison](https://reactjs.org/docs/render-props.html#be-careful-when-using-render-props-with-reactpurecomponent) 
위의 구현으로 HOC의 1,2번 문제가 해결될 수 있음을 확인할 수 있다.

- props를 직접 전달 받지 않기에 속성이 겹치는 문제가 발생하지 않는다.
- props, state, context을 function로 명시적으로 받아 처리하기에 어떤 속성이 어느 컴포넌트에서 넘어왔는지 알기 쉽다.
- FaCC로 HOC구현도 쉽게 가능하다.
 ```javascript
 function withMouse(Component) {
 return class extends React.Component {
 render() {
 return (
 <Mouse>
 {(mouse) => <Component {...this.props} mouse={mouse} />}
 </Mouse>
 );
 }
 };
 }
 ```

그리고 직접적으로 말은 안했지만 Render Prop와 FaCC는 동일한 개념이고 child이냐 render props이냐 차이일뿐 동일하다.

### Problem

[Render Props Caveats](https://reactjs.org/docs/render-props.html#caveats) 예시와 동일하게 Mouse에 PureComponent로 했을 경우, 
MouseTracker가 counter를 증가하는 랜더링을 하면 자식 Cat컴포넌트는 다시 랜더링하지 않는다. 
그 이유는 Mouse컴포넌트가 render props으로 bind된 항상 같은 함수를 받아 Mouse 컴포넌트는 랜더링되지 않는다. 
그래서 counter숫자가 증가되지 않는다.

[![Edit ll2xq45x3q](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ll2xq45x3q)

결국 Render Props나 FaCC를 사용함으로 shouldComponentUpdate로 optimize하기 어려워지는 이슈가 있다. 
(render or child로 함수를 넘겨주고 shouldComponentUpdate로 비교하기에)

## Conclusion

HOC가 만능이 아닌 것처럼 FaCC, HOC를 사용할때 위와 같은 이슈들을 유념하면서 사용하자. 
그리고 기존에 존재하는 라이브러리를 한번 참조해보고 사용해보는 것이 좋을거같다. 
HOC - [React Redux(connect)](https://github.com/reactjs/react-redux), [React Router(withRouter)](https://github.com/ReactTraining/react-router), [Apollo(graphql)](https://github.com/apollographql/react-apollo) 
FaCC, Render Props - [React Motion](https://github.com/chenglou/react-motion), [React Apollo(Query tag)](https://github.com/apollographql/react-apollo), [urql(Query tag)](https://github.com/FormidableLabs/urql), [React Router(render props)](https://github.com/ReactTraining/react-router)

## Reference

[Render Props](https://reactjs.org/docs/render-props.html) 
[Michael Jackson - Never Write Another HoC](https://www.youtube.com/watch?v=BcVAq3YFiuc&index=2&list=PLXB3WIVcnsH1TZxTuF6YaiRV0eVWAJhfC&t=613s)

Function as Child Component And High Order Component

React prod, staging, dev 환경 설정하기

[crn](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables), [crna](https://movie.naver.com/movie/bi/mi/basic.nhn?code=115622)에서 외부 환경 설정을 추가하는 방법에 대해 다룬다.
prod, dev환경 별 환경변수를 받으러면
crn같은 경우 기본적으로 [.env.local, .env.development, .env.production, .env.test](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#what-other-env-files-can-be-used)을 제공해주는거 같고
crna는 각 환경에 따른 환경 설정을 하려면 [react native config](https://github.com/luggit/react-native-config)나 [react native dotenv](https://github.com/zetachang/react-native-dotenv)(.env만 사용가능함)를 이용할 수 있겠다.

만일 staging 환경을 추가하고 싶다라는 고민에서 기본적으로 제공하는 문서로는 다루기가 힘든다라는 것을 알고 다른 방안을 찾아보게 되었다.

- React App

[package.json](https://github.com/BoBeenLee/environment-config-example/blob/react/package.json)

```
...
 "scripts": {
 "start": "cp ./.env.dev ./.env && react-scripts start",
 "start:staging": "cp ./.env.staging ./.env && react-scripts start",
 "start:production": "cp ./.env.prod ./.env && react-scripts start",
 }
...
```

스크립트 단에서 실행방법을 나누고 cp로 .env에 복사 후 각 환경별로 환경변수를 받고 실행하는 방법이다. 
내가 발견한 것들 중에 가장 깔끔한? 방법인거 같고 코드에 영향도도 가장 적고 관리하는데 가장 좋은 방법이라 생각한다.

- React Native App

[package.json](https://github.com/BoBeenLee/environment-config-example/blob/react-native/package.json)

```
...
"scripts": {
 "start": "./scripts/pre-build.sh development && react-native-scripts start",
 "start:staging": "./scripts/pre-build.sh staging && react-native-scripts start",
 "start:production": "./scripts/pre-build.sh production && react-native-scripts start",
 },
...
```

react native는 쉘 스크립트를 이용한 관리 방법이다.
[pre-build.sh](https://github.com/BoBeenLee/environment-config-example/blob/react-native/scripts/pre-build.sh)는 환경별로 REACT_NATIVE_ENV키 값을 생성하여 [config.json](https://github.com/BoBeenLee/environment-config-example/blob/react-native/config.json)에 덮어씌운다.
그리고 [environment.js](https://github.com/BoBeenLee/environment-config-example/blob/react-native/environment.js)을 만들어 환경별 필요한 변수들을 세팅하여 전달한다.

### dotenv나 config라이브러리를 사용하지 않았던 이유

- react native config
 물론 getting started 보고 설정하면 원활히 동작할 수 있겠지만 관리 측면에서 react native config 호환도 유지해야한다는 점에 오히려 불편하다는 걸 알게되었다. 그런 이유로 사용하지 않았던거같다.
- dotenv
 crn은 내부적으로 설정 되어있지만 한정적인 설정밖에 안되어 이용하기 불편했던거같다. (ex) .env.staging 설정) 
 react native dotenv는 [.env만 사용가능](https://github.com/zetachang/react-native-dotenv)하여 제외 대상이었다.
 물론 아래와 같은 식으로 환경변수를 .env에 전달 받는 방법도 있겠다.
 .env

```
REACT_ENV=$REACT_ENV
```

package.json

```
"scripts": {
	"start": "REACT_ENV=staging && react-scripts start"
}
```

다만 react native에는 OS 환경에 환경변수 설정 후 appcenter환경에서 빌드 시엔 정상적으로 인식을 못했던거같다. ( react-native-dotenv의 이슈인지 정확히 모르겠지만 )

환경별 환경변수 설정은 다양한 방법이 존재하겠지만 아직까진 위와 같은 방법이 가장 심플한 경험을 받았다.
각 환경별 환경변수 설정 Example을 공유한다.

React

- https://github.com/BoBeenLee/environment-config-example/tree/react

React Native

- https://github.com/BoBeenLee/environment-config-example/tree/react-native

Node

- https://github.com/BoBeenLee/environment-config-example/tree/node

React prod, staging, dev 환경 설정하기


[Typeorm](http://typeorm.io/#/)을 이용해보면서 예전에 개발하던 JPA와 유사한 느낌을 받았다.
물론 ORM을 다루는 라이브러리가 비슷할테지만 한번 JPA와 비교해보자. ex) [OnePage](https://github.com/OnePageAndroid/OnePageServer)

```java
// Page.java
import javax.persistence.*;
import java.sql.SQLException;

@Getter
@Setter
@Builder
@NoArgsConstructor
@AllArgsConstructor
@EqualsAndHashCode(of = "id")
@Entity
@Table(catalog = "onepage", name = "page")
@Where(clause = "deleted = 0")
public class Page extends Modified {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "pageId")
    private Long id;
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "locationId")
    @Where(clause = "deleted = 0")
    private Location location;
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "userId")
    @Where(clause = "deleted = 0")
    private User user;
    @Column
    private String content;
    @Column
    private boolean deleted;

    public static Page of(Location location, User user, String content) throws SQLException {
        return Page.builder()
            .location(location)
            .user(user)
            .content(content)
            .build();
    }

    public void deleted() {
		this.deleted = true;
	}
}
```

```javascript
// page.js
```

```java
// User.java
import javax.persistence.*;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Pattern;
import javax.validation.constraints.Size;

@Getter
@Setter
@Builder
@NoArgsConstructor
@AllArgsConstructor
@Entity
@Table(catalog = "onepage", name = "user")
@Where(clause = "deleted = 0")
public class User extends Created {
	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	@Column(name = "userId")
	private Long id;
	@Column
	@NotNull
	@Size(min=1,message="이메일을 입력하세요.")
	@Pattern(regexp="^(\\w+)(((\\.?)(\\w+))*)[@](((\\w+)[.])+)(\\w{2,3})$",message="이메일 형식만 가능합니다.")
	private String email;
	@Column
	private boolean deleted;

	public static User of(String email) {
		return User.builder()
			.email(email)
			.build();
	}
}
```

```javascript
// user.js
```

```java
// Location.java
import javax.persistence.*;

@Getter
@Setter
@Builder
@NoArgsConstructor
@AllArgsConstructor
@Entity
@Table(catalog = "onepage", name = "location")
@Where(clause = "deleted = 0")
public class Location extends Created {
	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	@Column(name = "locationId")
	private Long id;
	@Column
	private Double latitude;
	@Column
	private Double longitude;
	@Column
	private String name;
	@Column
	private String engName;
	@Column
	private String address;
	@Column
	private boolean deleted;

	public static Location of(LocationDto locationDto) {
		return Location.builder()
			.latitude(locationDto.getLatitude())
			.longitude(locationDto.getLongitude())
			.name(locationDto.getName())
			.engName(locationDto.getEngName())
			.address(locationDto.getAddress()).build();
	}

	public static Location of(Double latitude, Double longitude, String name, String engName, String address) {
		return Location.builder()
			.latitude(latitude)
			.longitude(longitude)
			.name(name)
			.engName(engName)
			.address(address).build();
	}
}
```

```javascript
// location.js
```

비슷한 점이 많아 흥미로운 점이 많다.


Typeorm like jpa


### lodash 사이트

검색할 시, 검색 결과가 없을 경우 검색 글자 제한을 둠.

### Facebook App

로딩 중일 시 Fake 이미지를 통하여 사용자에게 안정감을 줌.

### Medium

이미지 로딩 시 data:...로 로딩전 이미지를 불러온 후, 이미지 로딩이 완료되면 선명한 이미지를 불러옴.


ui-ux

스크롤 다운 화면 만들시 상단 view 고정 시켜야하는데 보통&nbsp;stickyHeaderIndices={ [ number ] } 로 고정시킨다.다만 ScrollView에서 stickyHeaderIndices로 고정하면서&nbsp;Animated.View로 height, ... 애니메이션 효과 주려할때&nbsp;'stickyHeaderIndices style property height is not supported by native animated module' 에러가 발생하면서 애니메이션 효과를 줄수가 없다.솔루션 코드는 여기에 있다. - https://gist.github.com/BoBinLee/76f13317e135adc16a7eae42fe4aab7e해결방법은 간단하다.View를 한번더 감싸고 감싼 View style={{ height: 1 }}을 주면 끝.원하는 방식대로 동작하는 것을 확인할 수 있다.

Scroll Down 화면 만들기

html, body { height: 100%; }&nbsp;footer { positive: absolute; bottom: 0; }footer감싸고 있는 wrapper { positive: relatvie; min-height: 100%; } &lt;body&gt;&lt;div class="wrapper"&gt;&lt;div class="content"&gt; &lt;/div&gt;&lt;div class="footer"&gt;Footer&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;기본적으로 이렇게하면 적용된다.div 깊이가 있을 경우&lt;div class="depth-2-wrapper"&gt;&lt;div class="wrapper"&gt;...&lt;/div&gt;&lt;/div&gt;depth-2-wrapper height: 100% 로 유지시켜줘야한다.

푸터 하단 고정 시키기

IOS Safari&nbsp;브라우져에서 제공하는&nbsp;minimal-ui 기능 ( 툴바가 쪼그라드는 기능&nbsp;or 툴바 사라짐 기능&nbsp;)을 사용하기 위해 몇가지 수정사항이 존재하였다.경험을 토대로 설명하고자 한다.-&nbsp;&lt;meta name="viewport" content="minimal-ui"&gt;&nbsp;minimal-ui&nbsp;추가한다.&nbsp;- body { height: 100%; overflow: auto 혹은 scroll; }을 명시하여 body에서 스크롤이 가능하면 끝.이때 주의해야할 점은 하의 div들 중 { overflow: auto, scroll; } 이 가능하면 해당 엘리멘트가 스크롤 되기 때문에 위 minimal-ui 기능이 동작하지 않는다.즉,&nbsp;window.addEventListener('scroll', this.onScroll); 추가 시 해당 스크롤이 동작하면 된다.위 두가지 조건이 만족하면 safari에서 툴바가 쪼그라드는걸 볼 수 있다. 참고https://stackoverflow.com/questions/18793072/impossible-to-hide-navigation-bars-in-safari-ios-7-for-iphone-ipod-touch

IOS Safari minimal-ui 적용기

https://github.com/tj/n노드 버젼에 맞게 맞추어 변경할 수 있다.

Node 버전 관리

AS
<pre class="brush: js">import _ from 'lodash';
import { FETCH_READY_COMMENT, FETCH_COMMENT_SUCCESS, FETCH_COMMENT_ERROR,
 ADD_READY_COMMENT, ADD_COMMENT_SUCCESS, ADD_COMMENT_ERROR } from './CommentActions';

const initialState = {
 comments: [],
};

const CommentReducer = (state = initialState, action) =&gt; {
 switch(action.type) {
 case ADD_READY_COMMENT:
 return {
 ...state,
 comments: [...state.comments, action.comment]
 };
 case ADD_COMMENT_SUCCESS:
 return {
 ...state,
 comments: _.map(state.comments, comment =&gt;
 (comment.id === action.id ? { ...comment, id: action.newId } : comment))
 };
 case ADD_COMMENT_ERROR:
 default:
 return state;
 }
};

export default CommentReducer;
</pre>

TO BE
<pre class="brush: js">...

const addCommentReducer = {
 [ADD_READY_COMMENT]: (state, action) =&gt; ({
 ...state,
 comments: [...state.comments, action.comment]
 }),
 [ADD_COMMENT_SUCCESS]: (state, action) =&gt; ({
 ...state,
 comments: _.map(state.comments, comment =&gt;
 (comment.id === action.id ? { ...comment, id: action.newId } : comment))
 }),
 [ADD_COMMENT_ERROR]: (state, action) =&gt; ({
 ...state,
 comments: _.filter(state.comments, comment =&gt; (comment.id !== action.id))
 })
};

function createReducer(initialState, handlers) {
 return function reducer(state = initialState, action) {
 if (handlers.hasOwnProperty(action.type)) {
 return handlers[action.type](state, action);
 } else {
 return state;
 }
 };
}

const CommentReducer = createReducer(initialState, {
 ...addCommentReducer,
});

export default CommentReducer;
</pre>

- createReducer 메소드를 하나 만들어 switch 문이 아닌 객체 속성으로 액션타입에 맞는 리듀서를 찾는다. 
 http://redux.js.org/docs/recipes/ReducingBoilerplate.html#generating-reducers&nbsp;<div>- 타입별 묶음으로 관리하면 리듀서 구분이 쉬워진다.</div>

React Reducer 관리

React Heroku 세팅하는 방법이 아래에 잘 나와있다.http://revelry.media/tech-talk/2016/2/15/getting-a-simple-react-app-on-heroku 보통 리액트 프로젝트에 적용하려면 webpack -p 에서 not found 에러가 발생하는 데 heroku 기본 환경 세팅이 NPM_CONFIG_PRODUCTION=true 라 false로 바꾸어 줘야 devDependency 패키지도 install 하여 webpack -p 가 잘 동작한다. 끝.

React Heroku 초기 세팅.

SOLID

<h3 id="id-소나버그잡기-Useconstructorinjectionforthisfield" style="margin: 0px; padding: 0px; font-size: 16px; line-height: 1.5; font-family: Arial, sans-serif;">Use constructor injection for this field</h3><div class="code panel pdl conf-macro output-block" data-hasbody="true" data-macro-name="code" style="margin: 10px 0px; padding: 0px; color: rgb(51, 51, 51); border: 1px dashed rgb(187, 187, 187); overflow: auto; border-radius: 5px; font-family: Arial, sans-serif; font-size: 14px;"><div class="codeContent panelContent pdl" style="margin: 10px 0px; padding: 0px 10px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; line-height: 20px; overflow: hidden; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;"><div style="margin: 0px; padding: 0px;"><div id="highlighter_986145" class="syntaxhighlighter sh-confluence nogutter java" style="margin: 0px; padding: 0px; width: 934px; position: relative; overflow: auto; font-size: 1em;"><table border="0" cellpadding="0" cellspacing="0" style="color: rgb(51, 51, 51); border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 934px; box-sizing: content-box; font-family: Consolas, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace; font-size: 14px; min-height: inherit;"><tbody style="border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit;"><tr style="border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit;"><td class="code" style="color: rgb(51, 51, 51); border: 0px dashed; background-image: initial; background-position: 0px center; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; overflow: visible; border-radius: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; padding: 0px 0px 0px 15px; position: static; right: auto; top: auto; vertical-align: baseline; width: 919px; box-sizing: content-box; font-family: Consolas, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace; font-size: 14px; min-height: inherit;"><div class="container" title="Hint: double-click to select code" style="margin: 15px 0px 0px; padding: 0px 0px 15px; border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; outline: 0px; overflow: visible; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; white-space: pre-wrap;"><div class="line number1 index0 alt2" style="margin: 0px; padding: 0px 1em 0px 0px; border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; outline: 0px; overflow: visible; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; white-space: nowrap;"><code class="java color1" style="font-family: Consolas, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace; border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(128, 128, 128) !important;">@Inject</code></div><div class="line number2 index1 alt1" style="margin: 0px; padding: 0px 1em 0px 0px; border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; outline: 0px; overflow: visible; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; white-space: nowrap;"><code class="java keyword" style="font-family: Consolas, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace; border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; font-weight: bold !important; color: rgb(51, 102, 153) !important;">private</code>&nbsp;XXX<code class="java plain" style="font-family: Consolas, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace; border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(0, 0, 0) !important;">Service xxxService;</code></div></div></td></tr></tbody></table></div></div></div></div>why?&nbsp;<a href="http://olivergierke.de/2013/11/why-field-injection-is-evil/" class="external-link" rel="nofollow" target="_blank" data-ext-link-init="true" style="color: rgb(50, 108, 166);">http://olivergierke.de/2013/11/why-field-injection-is-evil/</a>Or&nbsp;Inject -&gt; Autowired ( Autowired 와 Inject 차이 -&nbsp;<a href="http://dev-eido.tistory.com/entry/Autowired-Resource-Inject%EC%9D%98-%EC%B0%A8%EC%9D%B4" class="external-link" rel="nofollow" target="_blank" data-ext-link-init="true" style="color: rgb(50, 108, 166);">http://dev-eido.tistory.com/entry/Autowired-Resource-Inject%EC%9D%98-%EC%B0%A8%EC%9D%B4</a>&nbsp;)

소나 버그 잡기

상수 값 넣기<div class="code panel pdl conf-macro output-block" data-hasbody="true" data-macro-name="code" style="margin: 10px 0px; padding: 0px; color: rgb(51, 51, 51); border: 1px dashed rgb(187, 187, 187); overflow: auto; border-radius: 5px; font-family: Arial, sans-serif; font-size: 14px;"><div class="codeContent panelContent pdl" style="margin: 10px 0px; padding: 0px 10px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; line-height: 20px; overflow: hidden; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;"><div style="margin: 0px; padding: 0px;"><div id="highlighter_374001" class="syntaxhighlighter sh-confluence nogutter java" style="margin: 0px; padding: 0px; width: 934px; position: relative; overflow: auto; font-size: 1em;"><table border="0" cellpadding="0" cellspacing="0" style="color: rgb(51, 51, 51); border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 934px; box-sizing: content-box; font-family: Consolas, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace; font-size: 14px; min-height: inherit;"><tbody style="border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit;"><tr style="border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit;"><td class="code" style="color: rgb(51, 51, 51); border: 0px dashed; background-image: initial; background-position: 0px center; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; overflow: visible; border-radius: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; padding: 0px 0px 0px 15px; position: static; right: auto; top: auto; vertical-align: baseline; width: 919px; box-sizing: content-box; font-family: Consolas, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace; font-size: 14px; min-height: inherit;"><div class="container" title="Hint: double-click to select code" style="margin: 15px 0px 0px; padding: 0px 0px 15px; border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; outline: 0px; overflow: visible; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; white-space: pre-wrap;"><div class="line number1 index0 alt2" style="margin: 0px; padding: 0px 1em 0px 0px; border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; outline: 0px; overflow: visible; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; white-space: nowrap;"><code class="java plain" style="font-family: Consolas, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace; border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(0, 0, 0) !important;">NumberTemplate.ZERO.castToNum(BigDecimal.</code><code class="java keyword" style="font-family: Consolas, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace; border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; font-weight: bold !important; color: rgb(51, 102, 153) !important;">class</code><code class="java plain" style="font-family: Consolas, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace; border-radius: 0px; background: 0px center; border: 0px; bottom: auto; float: none; height: auto; left: auto; line-height: 20px; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(0, 0, 0) !important;">)</code></div></div></td></tr></tbody></table></div></div></div></div>

QueryDSL 문서

<div id="main-content" class="wiki-content" style="margin: 1em 0px 0px; padding: 0px; color: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 14px;"><h4 id="id-엑셀SQL구문추출-insert" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.42857;">Insert</h4><div><pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'Menlo';font-size:9.0pt;">import sys from openpyxl import load_workbook reload(sys) sys.setdefaultencoding('utf-8') file_name = sys.argv[1] table_name = sys.argv[2] wb = load_workbook(file_name) ws = wb.active def row_name_value(row_num): row_values = [] for col in ws.columns: row_values.append((col[0].value, col[row_num].value)) return row_values def makeSql(table_name, name_value_list): keymap = set(["now()", "null"]) names = '' values = '' for (name, value) in name_value_list: if not value: value = "0" names = names + '{0},'.format(name) if value not in keymap: values = values + "'{0}',".format(value) else: values = values + "{0},".format(value) if names[-1] == ',': names = names[:-1] if values[-1] == ',': values = values[:-1] return "insert into {0} ({1}) values({2});".format(table_name, names, values) with open('{0}.sql'.format(file_name), 'w') as fw: for idx in range(1, ws.max_row): sql = makeSql(table_name, row_name_value(idx)) + '\n' fw.write(sql)</pre></div></div> Update<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'Menlo';font-size:9.0pt;">import sys from openpyxl import load_workbook reload(sys) sys.setdefaultencoding('utf-8') file_name = sys.argv[1] # test.xlsx table_name = sys.argv[2] # schema.table wb = load_workbook(file_name) ws = wb.active def row_name_value(row_num): row_values = [] for col in ws.columns: row_values.append((col[0].value, col[row_num].value)) return row_values def makeSql(table_name, name_value_list): keymap = set(["now()", "null"]) update_datas = '' where_clause = "{0} = '{1}'".format(name_value_list[0][0], name_value_list[0][1]) for (name, value) in name_value_list[1:]: # print value, name if not value or "*" not in name: continue name = name.replace("*", "") if value not in keymap: update_datas = update_datas + "{0} = '{1}',".format(name, value) else: update_datas = update_datas + "{0} = {1},".format(name, value) if update_datas[-1] == ',': update_datas = update_datas[:-1] return "update {0} set {1} where {2};".format(table_name, update_datas, where_clause) with open('{0}.sql'.format(file_name), 'w') as fw: for idx in range(1, ws.max_row): sql = makeSql(table_name, row_name_value(idx)) + '\n' fw.write(sql) </pre>