본문 바로가기

전체 글151

03 Ext JS 동작의 기본 위젯 화면을 구성하는 집합으로 목적에 맞는 다양한 기능과 외형을 갖음 각 컴포넌트는 xtype을 이용하여 정의 xtype사용하는 이유 : Ext.create문을 이용하는 것 보다 짧고 간결하기 때문에 위젯의 실시간 추가 child widget을 실시간으로 추가하려면 add메소드를 사용 add메소드는 일반적으로 Ext.create문을 이용하여 생성하고 사용 쿼리 Ext.ComponentQuery.query 여러 건인 경우 : 배열 형태의 인덱스 값을 추가하여 처리 ex) Ext.ComponentQuery.query('datafield')[0]; ex) name속성이 추가되었을 경우 Ext.ComponentQuery.query('datafield[name=myDateField1]')[0]; Ext JS 6에.. 2023. 8. 31.
02 클래스 디버깅 console.log(’…’) MVVM 아키텍처 사용 시, F12-Network 탭에서 requires한 파일이 정상적으로 로딩되었는지 확인 클래스 정의 객체 정의 → Ext.define(’클래스명’, {…}); 클래스는 일반속성과 config 속성을 가질 수 있음 config 속성 : 설정과 같은 속성. 클래스 생성시 속성으로 인정 config:{ name:null }과 같이 config 속성으로 name을 부여할 수 있음 config에 속성을 설정할 경우 → 해당 속성은 자동으로 get, set 접두어를 붙여 메소드로 사용 가능 → this.getName(), this.setName(’설정값’) 생성자 함수는 처음 클래스가 생성될 때 자동으로 constructor라는 생성자가 추가됨 const.. 2023. 8. 31.
.map(), .filter() .map()과 .filter()는 JavaScript의 배열 메서드로서, 배열의 요소를 변환하거나 필터링하는데 사용 React에서도 주로 사용되며, .map()은 주어진 배열의 각 요소를 변환하고 새로운 배열을 반환하며, .filter()는 주어진 조건을 만족하는 요소만을 선택하여 새로운 배열을 반환 1. .map() 메서드 React에서 .map()을 사용하여 배열의 요소를 컴포넌트로 변환하고 리스트를 렌더링하는 것이 일반적 const numbers = [1, 2, 3, 4, 5]; const squaredNumbers = numbers.map(num => num * num); // [1, 4, 9, 16, 25] .map() 메서드는 배열의 각 요소를 특정 함수를 적용하여 새로운 배열을 생성 이 메서.. 2023. 8. 31.
Context useContext는 기존의 React에 존재하는 Context를 더 편하게 사용할 수 있게 해주는 역할 Context 개념 context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있음 (React공식문서) ⇒ 데이터가 필요할 때마다 props를 통해 전달할 필요 없이 context 로 공유 가능 context API createContext : context 객체 생성 Provider : 생성한 context를 하위 컴포넌트에게 전달 Consumer : context의 변화를 감시하는 컴포넌트 2023. 8. 31.
Ext JS 시작해보기 Ext JS는 고성능의 변형가능한 UI 위젯을 지원. 다양한 벡엔드 소스에 맞출 수 있는 데이터 패키지 포함. 최소한의 조작으로 서버의 데이터를 가져와 사용할 수 있도록 지원 다양한 화면에 적합한 레이아웃 매니저와 설정을 지원. 반응형 레이아웃을 이용하여 데스크탑, 모바일 또는 화면 크기에 따른 세부적인 제어 가능 진보된 차트 패키지 지원. 쉽게 사용하거나 변경할 수 있는 테마 지원. 내부에서 사용하는 컨트롤러, 모델, 뷰컨트롤러, 뷰모델 등은 공유하여 사용 가능 이를 위해 classic과 modern이라는 toolkit을 지원 → 프로젝트를 기본으로 생성하면, 클래식과 모던 두 개의 위젯을 포함한 프로젝트가 생성됨. 센차 컴맨드를 이용해 프로젝트를 만들고 컴파일. 센차 컴맨드 작업공간 및 패키지 관리 .. 2023. 8. 30.
C# study Nullable Type Null 을 가질 수 없는 데이터 타입을 Null을 가질 수 있는 타입으로 만든 새로운 타입 대표적으로 값 타입(value type)들이 Null을 가질 수 없음 int, 구조체, double, bool 등의 데이터 타입은 값이 없는 상태(NULL)이 불가능한 데이터 타입 클래스와 같은 reference type(=참조 타입)은 이미 Null 체크가 가능하기 때문에 따로 Nullable Type으로 만들지 않아도 int와 같은 값 타입에 대해서 **"값이 없다"**를 표현하기 위해 Nullable Type이 개발 ✔️ Nullable 변수명 ✔️ T? 변수명 as 연산자 객체를 캐스팅할 때 사용되는 연산자 캐스팅에 성공하면 캐스트 결과를 리턴, 실패하면 null값 리턴 refer.. 2023. 8. 30.
용어 정리/ 기본 개념 foo 프로그래밍 상에서 임시로 변수이름을 지정해줘야할 때, 주로 쓰이는 변수 이름 외에 bar, baz, Fie, Foe, Fee등도 함께 사용됨 Ext.application 한 프로젝트에 하나만 있어야 한다. 리로드시 실행되는 것. app.js에 있음 천단위기호 가격과 같은 천단위로 (,)콤마를 사용하여 구분자 설정 // 천단위기호 추가 var newDecimalPointValue= Ext.util.Format.number(추가할대상, '0,000'); // var newDecimalPointValue = 추가할대상.toFixed(2).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',').split('.')[0]; // 천단위기호 제거, 소수점 제거 var newNormalValu.. 2023. 8. 30.
Ext Js 홈페이지 공부 Guides Intro to App Architecture | Ext JS 7.3.1 Intro to App Architecture MVC 와 MVVM application architectures 지원 MVC Models, Views or Controllers The user interacts with Views, which display data held in Models. Those interactions are monitored by a Controller, which then responds to the interactions by updating the View and Model, as necessary. The goal of MVC is to clearly define the responsi.. 2023. 8. 30.
this this 메서드와 this 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있음 '점 앞’의 this는 객체를 나타냄 let user = { name: "John" }; let admin = { name: "Admin" }; function sayHi() { alert( this.name ); } ***// 별개의 객체에서 동일한 함수를 사용함 user.f = sayHi; admin.f = sayHi;*** // 'this'는 '점(.) 앞의' 객체를 참조하기 때문에 // this 값이 달라짐 user.f(); // John ***(this == user)*** admin.f(); // Admin ***(this == admin)*** admin['f'](); // Admin (점과 대괄호는.. 2023. 8. 30.

티스토리툴바