Frontend

React가 데이터 변경에 따라 렌더링을 변화시키는 과정은 다음과 같다. 1. Props를 전달받음 2. shouldComponentUpdate 함수 호출 3. 가상 DOM과 실제 DOM을 비교해 변경된 부분만 다시 렌더링 State의 특징은 '불변성'이다. 가상 DOM과 실제 DOM을 비교하여 변경된 부분만 리렌더링한다고 할 때, 해당 컴포넌트가 달라졌음을 판단하는 것은 값을 가지고 판단을 한다. 만약, {key: 1, name: 이름1}의 형태인 데이터를 {key: 1, name: 이름2}로 변경했다고 해보자. 데이터는 결국 같은 객체이나, 그 내부의 속성이 변한 것으로 이 둘을 같은 객체, 같은 상태로 여겨 리렌더링해주지 않을 수 있다. 불변성이란, 값을 변경시키지 않고 새로 만드는 것이다. 때문에..

SPA Application인 회사 프로그램을 개발하면서 JqGrid를 통해 그리드를 생성하는 일이 다수 있었다. JqGrid는 jQuery에서 제공하는 라이브러리로 페이저, 셀 수정, 멀티 체크 등의 기능을 위해 주로 사용하게 되었다. 내 경우에는 주로 서버에서 가져온 데이터를 여러 방향으로 사용하면서 가공한 데이터로 그리드를 초기화하다보니 ajax로 바로 가져온 JSON 형태의 데이터를 사용하는 것이 아니라 가져온 로컬 데이터를 사용했다. 기본 구조 pager 그리드를 pagination하고자할 때 pager로 사용할 해당 element를 줄 수 있다. div를 전달하면 된다. colModel 각 컬럼의 속성을 정의한다. const colModel = [ { name: '컬럼명', index: '보여..

1. $scope 함수로 정의 시 이를 호출하여 내부에서 스코프 변수값을 변경한 경우 바로 변경되나, 일반 함수(function)로 정의한 경우 값이 바로 변경되지 않는다. 2. 타 컨트롤러의 함수를 호출하거나 변수 값을 변경할 때는 다음과 같이 접근할 수 있다. 물론 타 컨트롤러의 스코프 함수/변수에 한해서 가능하다. const otherCtrl = $("[data-ng-controller=otherCtrl]").scope(); $scope.apply(function(scope) { scope.otherCtrlFunction(); scope.otherCtrlVar = ''; }) 3. Apply하는 방식은 아래 두 가지 방법 모두 가능하다. $scope.$apply(function() { $scope...

1. 이미지 캡쳐할 영역 지정 첫 번째 인자로는 캡쳐할 영역의 element를, 두번째 인자로는 옵션을 전달할 수 있다. 아래와 같이 제이쿼리 선택자를 이용할 경우에는 '[0]'을 붙여주어야 한다. 또한, 캡쳐되는 영역에서 일부 요소들은 제외하고 싶다면 ignoreElements 옵션을 사용하여 특정 조건에 맞으면 return true(참이면 제외) 하여 제외시킬 수 있다. html2canvas($("#imgDiv")[0], { ignoreElements: (element) => { if (element.className === "ignoreElemId") { return true; } }, }).then(function (canvas) { var img = canvas.toDataURL("image/p..

아래 예제에서는 obj2가 빈 객체와 obj를 합친 것으로, 실상은 obj 객체를 복사한 것으로 볼 수 있다. let obj = { name: "이름", age: 22, company: "회사명" } let obj2 = $.extend({}, obj);

State 이전 글에서 소개한 리액트의 props는 props를 사용하는 컴포넌트를 호출하는 부모 컴포넌트에서 그 값을 전달해주고, 해당 컴포넌트는 그 값을 변경할 수 없다. 반면에 state는 컴포넌트 내부에서 변경될 수 있는 값을 의미한다. 2021.11.11 - [React] - React) props란? React) props란? props란 properties의 약어로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있고, 해당 컴포넌트 자신은 이를 변경할 수 u-u002.tistory.com 리액트에서는 컴포넌트를 생성하는 방식이 두 가지 존재한다. 컴포넌트 종류에 따라 클래스형 컴포넌트에서는 state 그대로, 함수형..

props란 properties의 약어로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있고, 해당 컴포넌트 자신은 이를 변경할 수 없다. props는 컴포넌트의 JSX를 리턴하는 부분에서 클래스형 컴포넌트의 경우에는 'this.props.props명', 함수형 컴포넌트의 경우에는 'props.props명'의 형태로 사용할 수 있다. 1) defaultProps props 값을 따로 설정하지 않았을 때 보여줄 기본값을 설정하는 것으로, defaultProps는 해당 컴포넌트 자신의 파일에서 설정할 수 있다. 2) children props의 종류 중에 부모 컴포넌트에서 해당 컴포넌트 태그 사이에 전달하는 내용을 값으로 삼는 것을..

화살표 함수는 ES6의 문법에서 함수를 표현하는 새로운 방식이다. 하지만 화살표 함수는 완전히 기존의 function을 대체하는 것은 아니니 유의하자. 사용 용도가 다른데, 일반적으로 화살표 함수는 파라미터로 함수를 전달할 때 유용하게 사용된다. 형태적으로는 일반 함수는 'function 함수명( ) { ... }'의 형태를 지니지만 화살표 함수는 'const 함수명( ) { ... }'의 형태를 가진다. 일반 함수는 자기 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다고 한다. Javascript에서의 객체가 Java에서의 인스턴스, Javascript에서의 인스턴스가 Java에서의 클래스의 느낌으로 다가오는데 이 부분에 대해서는 다시 확인해봐야 겠다.

1. 컴포넌트 생성 방식 // 함수형 생성 방식 (1) function ComponentName() { return ( // HTML 삽입 ) } // 함수형 생성 방식 (2) const ComponentName = () => ( // HTML 삽입 ); // 클래스형 생성 방식 class ComponentName extends Component { // 이 때 상속받는 Component는 react.Component render() { return( // HTML 삽입 ) } } export default ComponentName; App.js 생성한 컴포넌트들을 최상위 컴포넌트인 App에 추가함으로써 원하는 위치에 렌더링할 수 있다. index.js ReactDOM.render함수는 컴포넌트를 페이지..

1. 빌드(빌드 파일 생성) 빌드 시 build 디렉토리 내부에 compressed 형태의 파일들이 생성된다. 기본적으로 개발이 진행되는 리액트 프로젝트는 제법 큰 용량을 지니는데, 이 용량을 그대로 사용자가 사용하게 될 경우 프로그램이 지나치게 무거워진다. 이를 대비해 빌드 시에는 압축된 형태의 파일들로 생성되게 된다. 이 build 디렉토리 내부(웹 서버가 document를 찾는 경로)에 파일들을 위치시키면 실 서버 환경 구축은 완료되는 것이다. npm run build 2. 웹 서버 다운로드 serve는 npm을 통해 설치할 수 있는 간단한 웹 서버이다. 'create-react-app'을 통해 리액트 프로젝트를 생성할 때 'create-react-app .' 명령어를 사용했던 것 처럼 serve ..