ASH_Blog 전체보기
-
react - 5. 상태와 프로퍼티javascript/React 2018. 11. 22. 23:51
책 "모던 자바스크립트 개발자를 위한 리액트 프로그래밍" 의 내용을 복습 차원 에서 정리한 내용입니다. state(상태)컴포넌트의 상태를 나타내며, 변화 할 수 있는 데이터의 집합.상태가 변화 하면 컴포넌트를 다시 랜더링 한다.컴포넌트의 상태를 나타내는 값은 "리스트에서 선택한 값", "체크박스에서 값이 체크됬는지 여부", " 텍스트박스의 텍스트" 등이다. 상태는 직접 변경 할 수 있다.상태는 외부에는 비공개 이며, 컴포넌트 스스로가 관리해야 하는 것상태를 변경 할 때는 this.setState()를 통해 값을 변경 한다. 상태가 변화 하면 다음과 같은 메서드가 자동 호출 된다. shouldComponentUpdate(nextProps, nextState)componentWillUpdate()render..
-
react - 4. 컴포넌트의 라이프 사이클 정리javascript/React 2018. 11. 12. 00:14
책 "모던 자바스크립트 개발자를 위한 리액트 프로그래밍" 의 내용을 복습 차원 에서 정리한 내용입니다. mount: DOM, 혹은 페이지 위에 올라갈 때 unmount: DOM 트리에서 삭제되거나 웹 페이지에서 없어질 때 컴포넌트가 생성되고, DOM에 마운트(추가) 될 때 다음과 같은 순서로 매서드가 호출된다. . constructor(props) - 객체가 생성될 때. componentWillmount() - 컴포넌트가 DOM에 마운트 되기 직전. render() - 컴포넌트가 렌더링될 때. componentDidMount() - 컴포넌트가 DOM에 마운트된 직후 컴포넌트의 프로퍼티가 변경되면 다음과 같은 메서드가 호출된다. . componentWillReceiveProps(nextProps) - 컴포..
-
react - 3. createElementjavascript/React 2018. 10. 28. 00:49
책 "learning React" 의 내용을 복습 차원에서 정리한 내용입니다. React.createElement 로 브라우저 DOM을 표현 할 수 있다. 표현 하는 방법은 다음과 같다.React.createElement("태그", 태그속성, 자식 노드) 2장에서 "안녕~!!" 이라는 텍스트를 출력 할때 의 소스를 보면 다음과 같다,React.createElement("h1", {id: "idarea", className: "classarea"}, "안녕~!!") 콘솔로 찍으면 다음과 같이 나온다. createElement 콘솔로 찍으면 $$typeof, key, props , type등 여러 필드가 나오는 것을 볼 수 있다.
-
반응형 table 정리 (responsive table 정리)html, css/반응형 웹 2018. 10. 25. 17:11
반응형웹 프로젝트를 하게 되면 컬럼이 많은 테이블(responsive table)을 모바일에서 어떻게 표현을 해야 될지 고민을 하게 되는 경우가 있는대,구글에 반응형 테이블을 검색하면 대체로 2가지의 형태로 모바일에서 보여주는 것을 확인 하였는데,나도 다 검색을 통하여서 이 방법을 적용하여 프로젝트 를 한 경험이 있다. 첫번째 방법은 모바일일때는 테이블에 가로 스크롤을 달아 화면보다 열이 많아도 손으로 넘겨서 볼 수 있도록 하는 방법과 두번째 방법은 테이블의 각 열에 해당하는 제목들을 행 마다 다 표현 해 주는 방법이다.말로 풀어쓰면 이해 하기 힘들 수 있으니 아래에 이미지를 보면 이해가 갈 것입니다. 위에 이미지를 보면 PC의 thead 제목이 모바일에서는 각각의 tr에 노출되게 하는 것입니다. 컬럼이..
-
react - 2. ReactDom 으로 그리기javascript/React 2018. 10. 23. 13:19
책 "learning React" 의 내용을 복습 차원에서 정리한 내용입니다. ReactDom에는 리액트 엘리먼트를 브라우저에 렌더링 하는데 필요한 모든 도구들이 들어 있다.리액트 엘리먼트와 그 모든 자식 엘리먼트를 함께 랜더링 하기 위해 ReactDOM.Render 를 사용한다. 아래의 이미지를 보면, ReactDOM.Render 는 첫번째 인자(빨간박스)는 렌더링할 리액트 엘리먼트,두번째 인자(노란박스)는 렌더링이 일어날 대상 DOM 노드다.위에 소스에서 보면 react-container 라는 id를 갖고 있는 div의 h1 태그 및 그 안에 내용이 추가 되어 화면에 렌더링이 되어 진다. 브라우저 화면 모든 DOM 렌더링 기능이 ReactDOM으로 옮겨 졌다.브라우저는 단지 리액트를 사용 할 수 있는..
-
react - 1. SPA, React란? SPA, React 에 대해서javascript/React 2018. 10. 23. 00:21
책 "learning React" 의 내용을 복습 차원에서 정리한 내용입니다. AJAX 가 생기면서 단일페이지 앱(Single-page Application) SPA 가 생겼다.자바스크립트를 사용해 DOM 변경을 효율적으로 처리하는 일은 아주 복잡하고 시간이 오래 걸리는 일이다.이에 대한 해법이 리액트다. React.js는 한가지 문제를 해결하기 위해서 만들어졌다,시시각각으로 변화하는 데이터를 사용하는 큰 규모의 애플리케이션을 만들기 위해서 이다. 리액트는 브라우저 DOM을 갱신 하기 위해 만든 라이브러리다.우리는 DOM API를 직접 조작 하지 않고 리액트 엘리먼트로 이루어진 가상돔을 다루거나 리액트가 UI를 생성하고 브라우저와 상호 작용하기 위해 사용하는 몇가지 명령을 다룬다. 리액트 엘리먼트는 개념..
-
client와 scroll 로 시작하는 프로퍼티 정리javascript 2018. 10. 19. 22:37
모든 html 요소에는 다음의 프로퍼티 들을 가지고 있다고 하는데.그래서 다음의 프로퍼티들을 정리 함 왼쪽 value 에는 mdn의 링크를, 오른쪽 Description 에는 w3schools의 링크를 연결 하였으며 자세한 정보는 링크 연결하여 확인 할 수 있습니다. Value Description offsetWidth 요소의 레이아웃 폭을 정수로 반환. 요소의 border, padding, 세로 스크롤바 를 포함한다. offsetHeight 패딩, 테두리 및 스크롤 막대를 포함한 요소의 높이를 반환합니다. offsetLeft offsetParent 요소를 기준으로 왼쪽 위치(픽셀 단위)를 반환합니다. offsetTop offsetParent 요소의 상단을 기준으로 맨 위 위치(픽셀 단위)를 반환 off..
-
HTML <input> type Attribute 정리html, css/html 2018. 9. 22. 08:41
웹디자이너를 위한 html5 라는 책을 보는데 여기에 내가 모르고 있던 input type 들이 있어서 input type="search" 이런거도 늦게 알게되어서 ;;이번 기회에 어떤 것들이 있는지 한번 훝어보면 좋을 것 같아 이렇게 정리 함. https://www.w3schools.com/tags/att_input_type.asp 위에 사이트의 내용을 그대로 옮겨 정리 한 내용입니다. Value Description button 클릭 가능한 버튼(대부분 스크립트 활성화를 위해 JavaScript와 함께 사용됨)을 정의 checkbox 체크를 할 수 있는것을 정의 color 색상 선택기 정의 date 날짜 제어(년, 월, 일(시간 없음)를 정의 datetime-local 날짜 및 시간 제어(연, 월, ..