본문 바로가기

2018/12

(13)
letsencrypt 설치하기 / 설치 실패 해결방법 SSL을 사용하기 위해서는 인증서가 필요하다.그 중 유명한 인증서로는 letsencrypt가 있다.90일 주기로 재인증을 해야하지만 무료라는게 가장 큰 장점!(달면서 의외로 고생한건 함정..) SSL을 달아보기로 하자. 1. cerbot 설치> git clone https://github.com/certbot/certbot.git 2. cerbot 실행> cd cerbot> ./certbot-auto certonly --standalone --email 이메일 -d 호스트네임 열심히 y를 눌러주고 하면 된다.(스샷을 못뜨고 지워버렸다... ㅠㅠㅠ) ------------------------------ (참고) 일어날 수 있는 버그 1. 포트 겹침Problem이라는 경고와 port 80 이 적혀 있다면 ..
마크다운... 깃허브에 글을 주로 올리기 때문에올린 글을 기반으로 티스토리에 그대로 가져온다.마크다운 문법을 사용하다보니티스토리에서는 처참하게 깨진다 하.... 날 잡고 하루종일 테마 수정을 해야겠따 ㅠㅠ 참고로 깃 허브 링크https://github.com/KimHunJin 이 링크는 공부한 내용을 적어둔 레포https://github.com/KimHunJin/Study-Book
MobX MobX 4가지 주요 개념을 가지고 있다. Observable State (관찰 받고 잇는 상태) 앱의 상태가 Observable State (관찰 받고 있는 상태) 변화된 부분을 감지 Computed Value (연산된 값) 기존 상태 값과 다른 연산된 값에 기반하여 만들어질 수 있는 값. 바뀐 값 Reactions (반응) Computed Value는 연산해야 될 때에만 처리되지만, Reactions는 값이 바뀔 때 해야 할 일임. ex) Observable State의 내부 값이 바뀔 때 console.log() 호출 Actions (액션; 행동) 상태에 변화를 일으키는 것. autorun 자동으로 그 값을 주시하여 그 값이 바뀔 때 마다 함수가 주시되도록 해줌. 하나하나 observe 해주지 않아..
13. React 라우팅 13. React 라우팅 React는 싱글페이지다. 즉, 앱을 사용하는 과정에서 URL의 변경이 거의 없다. 브라우저 렌더링 덕분에 서버에 연결할 이유가 없어서이다. [ 문제점 ] * 브라우저를 새로고침 하면 읽고 잇던 페이지의 원래 폼으로 돌아간다. * 브라우저의 기록 기능은 접속해 잇던 사이틔의 단일 URL만 기록하므로 브라우저의 뒤로가기 버튼을 눌렀을 때 완전히 다른 사이트로 이동할 수 있다. 페이지의 내용을 변경하면서 URL은 변경되지 않았기 때문이다. * 친구들에게 사이트의 특정 페이지를 공유할 수 없다. * 첫 페이지와 URL을 구분할 수 없으므로 검색 엔진이 사이트를 색인할 수 없다. 13.1 라우터를 처음부터 구현하기 입력된 URL에 따라 맵핑하기 라우터로 재사용성 높이기 라우터와 매핑으로..
8. 확장성을 고려한 React 컴포넌트 8. 확장성을 고려한 React 컴포넌트 8.1 컴포넌트의 기본 속성 defaultProps를 정적 클래스 속성으로 추가 ex) defaultProps 예시 class Datepicker extends React.Component { ... } Datepicker.defaultProps = { currentDate: Date(), rows: 4, locale: 'US' } 8.2 React 속성 타입과 유효성 검사 propTypes 정적 속성을 이용하여 속성 타입 설정 ex) propTypes 예시 class Datepicker extends React.Component { ... } Datepicker.propTypes = { currentdate: PropTypes.string, row..
7. React에서 폼 다루기 7. React에서 폼 다루기 input, textarea, option 같은 다른 폼 요소를 통한 입력 처리 방법 7.1 React에서 폼을 다루기 위한 권장 방법 ex) React에서 폼 다루기 handleChange(event) { this.setState({title: event.target.value}) } render() { return } 단방향 바인딩 이라고 한다. ; 상태가 뷰를 갱신하는 것이 전부이기 때문 7.1.1 React에서 폼과 이벤트 정의하기 onChange : 폼의 입력 요소에 변경이 생기면 발생 onInput : 요소의 값이 변경될 때 발생. (비추천) onSubmit : 폼 제출 시 발생. ex) enter키로 폼 전송하기 ``` handleKeyUp(event) { if..
6. React에서 이벤트 다루기 6. React에서 이벤트 다루기 6.1 React에서 DOM 이벤트 다루기 ex) event Handler class class SaveButton extends React.Component { handleSave(event) { console.log(this, event) } render() { return save } } ex) constructor을 이용한 바인딩 class SaveButton extends React.Component { constructor(props) { super(props) this.handleSave = this.handleSave.bind(this) } handleSave(event) { console.log(this, event) } render() { return ..
5. React 컴포넌트 라이프사이클 이벤트 5. React 컴포넌트 라이프사이클 이벤트 컴포넌트의 세밀한 조정을 위해 사용 5.1 React 컴포넌트 라이프사이클 이벤트 한눈에 살펴보기 React는 라이프사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다. 모든 React 컴포넌트는 라이프사이클 이벤트가 있다. * 마운팅(mounting) 이벤트 : React 엘리먼트(컴포넌트 클래스의 인스턴스)를 DOM 노드에 추가할 때 발생 * 갱신(updating) 이벤트 : 속성이나 상태가 변경되어 React 엘리먼트를 갱신할 때 발생 * 언마운팅(unmounting) 이벤트 : React 엘리먼트를 DOM에서 제거할 때 발생 5.2 이벤트 분류 마운팅 : React가 이벤트를 한 번만 실행한다. 갱신 : React가 이벤트를 ..