리엑트 컴포넌트에서 ajax 호출 방법

리엑트에서 모달을 생성해야 하는 경우가 생기는데,

아래 코드로 안드로이드 4.x , iOS 버전별 이상없이 사용할 수 있었습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React, { Component } from 'react'
import './index.scss'

class Modal extends Component {
	constructor (props) {
		super(props)
		this.scrollY = 0
	}

  componentDidMount() {
    this.setScrollFixed()
	}

	componentWillUnmount() {
    this.setScroll()
	}

	setScrollFixed = () => {
    this.scrollY = window.pageYOffset || document.documentElement.scrollTop;
    window.document.body.style.height = 'auto'
    window.document.body.style.overflow = 'hidden'
    window.document.body.style.position = 'fixed'
    window.document.body.style.top = `-${this.scrollY}px`
  }

  setScroll = () => {
    window.document.body.style.height = '100%'
    window.document.body.style.overflow = ''
    window.document.body.style.position = ''
    window.scrollTo(0, this.scrollY)
  }

	render () {

	  const { onClickDim, children } = this.props

    return (
      <React.Fragment>
        <div className={`dim`} onClick={onClickDim}></div>
        <div className={`modal`}>
          {children}
        </div>
      </React.Fragment>
    )
	}
}

export default Modal
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.modal{
  background-color: #ffffff;
  border: 1px solid #b3000000;
  position: fixed;
  margin: 0px 24px;
  overflow-y: scroll;
  height: 250px;
  margin-top: -100px;
  top: 50%;
  right: 0;
  left: 0;
}

.dim {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:#000000;
  opacity:0.7;
}

CSS 셀렉트박스 커스텀

셀렉트박스 커스텀

안드로이드 4.x stock 브라우저에서는 flex 사용 불가로 인해 아래와 같이 구현해야 합니다. 

1
2
3
4
5
<div class="selectbox">
    <div class="selctbox__text">
		셀렉트박스 텍스트
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.selectbox {
    width: 100%;
    height: 56px;
    margin-top: 10px;
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    position: relative;
    padding-left: 16px;

    &__text {
        line-height: 56px;
        width: 90%;
        white-space: nowrap;
        overflow: hidden; 
        text-overflow: ellipsis;
    }

    &:after {
        content: url("../images/arrow_list_02.svg");
        display: inline-block;
        position: absolute;
        right: 16px;
        top: 50%;
        margin-top: -10px;
        height: 16px;
        width: 16px;
    }
}

리엑트 Uncontrolled Components

Controlled components 와 Uncontrolled components

대부분의 경우 controlled components로 forms를 구현 합니다.

하지만 uncontrolled components 방식으로 구현할 수 있는데 차이점은 아래와 같습니다.

  • controlled components: form data를 React Component에 의해 처리

  • uncontrolled components : form data를 DOM에 의해 처리

Uncontrolled components 작성

uncontrelled components를 작성하기 위해서는 모든 state update에 대한 이벤트 핸들러를 작성하는 대신 ref 를 사용해서 DOM에 있는 form values를 가져오면 됩니다.

uncontrolled components를 작성하면 DOM 개발 방식을 유지할 수 있기 때문에 React와 non-React 코드를 같이 작성할 때 사용하면 유용합니다.

defaultValue , defaultChecked

React rendering lifecycle에서 form elements의 value attribute는 DOM안의 값을 대체합니다.

uncontrolled components에서 defaultValue attribute 를 통해 React에서 초기값 설정을 할 수 있습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.input} defaultValue="Bob" />  
        <input type="checkbox" defaultChecked />
        <input type="radio" defaultChecked /> 
       
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

<input type="file" />

리엑트에서 <input type="file" /> 은 언제나 uncontrolled component 입니다. input의 value는 사용자에 의해 할당되기 때문입니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${
        this.fileInput.current.files[0].name
      }`
    );
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input type="file" ref={this.fileInput} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(
  <FileInput />,
  document.getElementById('root')
);

요소별 값 정리

Element Value property Change callback New value in the callback
<input type="text" /> value="string" onChange event.target.value
<input type="checkbox" /> checked={boolean} onChange event.target.checked
<input type="radio" /> checked={boolean} onChange event.target.checked
<textarea /> value="string" onChange event.target.value
<select /> value="option value" onChange event.target.value

resource

자바스크립트 환경

환경 : 변수 관리 Environments: Managing Variables

  • 변수는 프로그램 실행이 자신의 스코프에 진입하면 존재
  • 변수는 저장 공간이 필요하며 변수를 저장하기 위한 자바스크립트에서 제공하는 데이터 구조를 환경 (Envrionments)
  • 환경은 스코프를 벗어난 뒤 에도 존재 하므로 스택이 아닌 힙 에 저장

2가지 변수 전달 방법

동적 크기 : 함수 호출 (Dynamic dimension: invoking functions)

References

git 사용법 정리

You have not concluded your merge (MERGE_HEAD exists). Please, commit your changes before you can merge.

위 에러 메시지가 발생을 하면 아래 명령어를 실행하고 다시 pull 을 받고 작업하면 됩니다. 

1
git merge --abort

리엑트에서 meta viewport 컴포넌트에서 설정

constructor 안에 아래 내용을 추가해 주면 됩니다.

1
2
3
4
const meta = document.createElement('meta');
meta.name = "viewport";
meta.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover";
document.getElementsByTagName('head')[0].appendChild(meta);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { Component } from "react";

class Index extends Component {
  constructor (props) {
    super(props);

    const meta = document.createElement('meta');
    meta.name = "viewport";
    meta.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover";
    document.getElementsByTagName('head')[0].appendChild(meta);
  
  }
 
  render () {
 
    return (
      <div>META</div>
    );
  }
}

export default Index;

iterm zsh 설치방법

iTerm2 설치

https://www.iterm2.com/downloads.html 에서 다운로드 후 설치합니다.

zsh 설치

bash 말고 zsh을 사용하기 위해 설치를 합니다. 

1
2
3
brew install zsh zsh-completions
curl -L http://install.ohmyz.sh | sh
chsh -s `which zsh`

chsh: /usr/local/bin/zsh: non-standard shell 오류 발생할 경우

맨 아래에 which zsh했을때의 결과를 추가 후 저장

1
sudo vim /etc/shells

현재 shell 확인

1
echo $SHELL

zsh 설정 백업

1
2
mv .zshrc ~/OneDrive/settings # 원본 이동
ln -s ~/OneDrive/settings/.zshrc ~/ # 심볼릭 링크 생성

zsh-syntax-highlighting 설치하기

1
2
3
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git

echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

Agnoster 테마 설치하기

.zshrc 파일을 연 후 아래 코드를 변경해 준다

ZSH_THEME=”agnoster”

1
vim ~/.zshrc

username@hostname 없애는 방법

.zshrc 파일을 연 후 마지막 줄에 추가

1
prompt_context () { }

References