Sencha ExtJS 6 로 화면개발 더이상 고민하지 말자 - 기초편

Name: Sencha ExtJS 6 로 화면개발 더이상 고민하지 말자 - 기초편
Rating: 4.9 (31 reviews)

디자이너 + 퍼블리셔 + 개발자의 조합으로 대부분의 사이트를 제작합니다. 순수하게 Sencha의 ExtJS 컴포넌트를 이용하면, 디자이너와 퍼블리셔 없이 화면개발이 가능합니다. 단, 상용화 목적으로 ExtJS를 사용하신다면, 라이센스정책을 정확하게 숙지하시고 사용하시길 바라겠습니다.

(4.9) 수강평 31개

수강생 1,742명

난이도 초급

수강기한 무제한

개발로짜

먼저 경험한 수강생들의 후기

수강 후 이런걸 얻을 수 있어요

강력한 자바스크리트 UI 프레임워크 ExtJS
ExtJS의 다양한 컴포넌트

강좌소개

ExtJS는 강력한 자바스크립트 UI 프레임워크입니다. 그리드,차트,트리외에도 수백가지 컴포넌트들을 제공합니다. 전문적인 CSS 지식이 없어도 레이아웃 및 화면을 짧은 시간내에 만들 수 있습니다. 기본편에서는 오로지 컴포넌트들을 이용해서 레이아웃 배치 및 컴포넌트 이해, 그리고 이벤트(클릭,더블클릭 등..) 기본동작방법에 대하여 알아보도록 합니다. ExtJS는 오로지 자바스크립트로만 화면개발 및 기능을 구현합니다. 즉, BODY 태그에 어떠한 HTML 코드도 들어가지 않습니다. 요즘 이슈가 되고 있는 Angular, React 와는 별도로 UI를 만드는 재미를 느끼실 수 있을겁니다. 아래는 ExtJS 만을 이용해서 만들어본 WebOS 시연영상입니다.
※ 상용목적으로 ExtJS를 고려하시는 분들이시라면 라이센스정책에 대해서 정확히 숙지 후, 프로젝트에사용하시길 바랍니다.

참고 URL

https://github.com/mongoworld/extjs_world (강의에서 진행 될 샘플코드)
http://mongodev.tistory.com (강의관련 내용 정리 블로그)
https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ 질문관련 댓글은 youtube 채널을 통해서 달아주세요 ^^ 구독도 부탁드릴게요 ㅠㅠ

강좌대상

CSS 기술부분이 약해서 화면개발에 자신없는 디자이너 및 개발자
대학 졸업작품을 웹어플리케이션으로 만들고자 하는 대학생
디자이너 및 퍼블리셔 인력이 존재하지 않는 기업
화면구성을 CS 프로그램과 같은 구조로 기획을 하고계신 분

이런 분들께
추천드려요

학습 대상은
누구일까요?

CSS 기술부분이 약해서 화면개발에 자신없는 디자이너 및 개발자
대학 졸업작품을 웹어플리케이션으로 만들고자 하는 대학생
디자이너 및 퍼블리셔 인력이 존재하지 않는 기업
화면구성을 CS 프로그램과 같은 구조로 기획을 하고계신 분

안녕하세요
입니다.

2,493

명

수강생

개

수강평

개

답변

4.9

점

강의 평점

개

강의

커리큘럼

전체

31개 ∙ (9시간 3분)

섹션 1. 1강. 오리엔테이션

1개 ∙ (14분)

1. ExtJS 6 소개
14:39

섹션 2. 2강.ExtJS 환경구성

1개 ∙ (14분)

2. ExtJS 6 GPL 다운로드 및 환경설정
14:25

섹션 3. 3강.다양한 테마변경과 헬로월드 메시지 띄우기

1개 ∙ (22분)

3. 테마변경 및 onLoad 이해
22:51

섹션 4. 4강.ExtJS 문법이해 및 레이아웃 알아보기

3개 ∙ (39분)

섹션 5. 5강.ExtJS 레이아웃 추가로 알아보기

1개 ∙ (21분)

섹션 6. 6강.ExtJS API 문서보는 방법 간단 소개

1개 ∙ (22분)

섹션 7. 7강.ExtJS 6 버튼종류 알아보기

1개 ∙ (30분)

섹션 8. 8강.ExtJS 6 메시지상자 다뤄보기

1개 ∙ (20분)

섹션 9. 9강.ExtJS 6 윈도우 컴포넌트 알아보기

1개 ∙ (14분)

섹션 10. 10강.ExtJS 6 탭패널 알아보기

1개 ∙ (4분)

섹션 11. 11강.ExtJS 6 폼필드 알아보기

1개 ∙ (15분)

섹션 12. 12강.ExtJS 6 데이터스토어 이해

3개 ∙ (37분)

섹션 13. 13강.ExtJS 6 트리패널 알아보기

1개 ∙ (20분)

섹션 14. 14강.ExtJS 6 그리드 페이징 및 버퍼스토어

1개 ∙ (15분)

섹션 15. 15강.ExtJS 6 그리드 에디팅 플러그인

1개 ∙ (20분)

섹션 16. 16강.ExtJS 6 이벤트 리스너 알아보기

1개 ∙ (24분)

섹션 17. 17강.ExtJS 6 그리드 CRUD 예제

1개 ∙ (28분)

섹션 18. 18강.ExtJS 6 Ajax 이해

1개 ∙ (24분)

섹션 19. 19강. ExtJS 차트그래프

6개 ∙ (1시간 23분)

섹션 20. 20강. ExtJS 소스코드 가독성 높이기

1개 ∙ (26분)

섹션 21. 21강. ExtJS 컴포넌트 교체

1개 ∙ (20분)

섹션 22. UI 템플릿 예제

1개 ∙ (18분)

강의 게시일:

마지막 업데이트일:

수강평

전체

31개

4.9

31개의 수강평

고운 캥거루
수강평 1
∙
평균 평점 5.0
5
13% 수강 후 작성
센차 프로젝트를 진행하게 되어 너무 막막했는데 이렇게 좋은 강의를 듣게되어 정말 도움이 많이됩니다. 감사합니다 : )
wlgud56321
수강평 1
∙
평균 평점 5.0
5
32% 수강 후 작성
JinJu Park
수강평 1
∙
평균 평점 5.0
5
23% 수강 후 작성
extjs 프로젝트를 하게 되서 보게되었는데 정말 자세하고 초보자도 쉽게 알려주셔서 ㅠㅠㅠㅠㅠㅠㅠㅠ너무 좋았습니다!
알찬
수강평 16
∙
평균 평점 5.0
5
10% 수강 후 작성
쿠카이든
수강평 487
∙
평균 평점 5.0
5
19% 수강 후 작성
ExtJS 6로 화면을 개발하니 정말 재미있네요! 명강의 감사합니다~!

무료

개발로짜님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

Sencha ExtJS 6 로 웹 어플리케이션 만들기- 실전/응용편

개발로짜

ExtJS 기초강좌에서 문법과 컴포넌트 종류에 대해 알아보았다면, 실전/응용편에서는 서버연동과 함께 간단한 연습용 프로그램을 만들어 보도록 합니다.

Intermediate

Spring Boot, ExtJS

Sencha ExtJS 6 로 웹 어플리케이션 만들기- 실전/응용편

개발로짜

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

자바스크립트부터 리액트까지 [PART3/4] 포기하지 않고 리액트로 가는 길

영코디 킴쌤

혹시, 리액트를 공부하다가 좌절하신 적이 있나요? 리액트의 기초가 되는 자바스크립트의 기본을 탄탄히 다진 후에 단계적으로 학습하여 포기하지 않고 리액트로 가는 길을 열어드립니다.

Beginner

JavaScript, vanilla-javascript, ES6

자바스크립트부터 리액트까지 [PART3/4] 포기하지 않고 리액트로 가는 길

영코디 킴쌤

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

Beginner

JavaScript, React, Node.js

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

Next.js with Spring Boot

구멍가게코딩단

전통적인 React 개발 방식과 Next.js를 이용해서 개발하는 방식은 전혀 다릅니다. 이 강의는 최신 Next.js 16의 핵심을 꿰뚫고, '진짜' Next.js다운 개발 방식을 알려드립니다. 취업 포트폴리오부터 실무 프로젝트까지, 성능과 효율을 모두 잡는 방법을 경험하세요. Next.js 스럽게 개발 합시다! Next.js의 기능을 어떻게 적용해야하는지 실제 예제를 만들면서 몸으로 배울 수 있도록 구성되었습니다. 서버 컴포넌트를 중심으로 보고 서버 액션과 캐싱 전략등을 이론보다는 실제로 코드를 통해서 더 빠르게 학습합니다. 강의의 목표는 최대한 빨리 Next.js의 분위기를 따라가는 것이 때문에 강의 자체는 JavaScript를 이용해서 진행합니다. 하지만 각 강의의 예제는 Typescript로 제작된 것을 추가로 수업자료로 제공합니다. 2025년 12월 18일 - Next.js 16버전으로 업데이트

Intermediate

JavaScript, React, Spring Boot

Next.js with Spring Boot

구멍가게코딩단

Sencha ExtJS 6 로 웹 어플리케이션 만들기- 실전/응용편

개발로짜

Intermediate

Spring Boot, ExtJS

Sencha ExtJS 6 로 웹 어플리케이션 만들기- 실전/응용편

개발로짜

모던 자바스크립트(ES6+) 기본

김영보

4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다.

Basic

JavaScript, ES6

모던 자바스크립트(ES6+) 기본

김영보

[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기

판다코딩

HTML / JS / CSS 만을 가지고 직접 심리 테스트 사이트를 만들고, 배포해보는 Project 사이트를 제작합니다.

Basic

HTML/CSS, JavaScript, Bootstrap

[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기

판다코딩

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

Basic

gemini, HTML/CSS, TailwindCSS

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

자바스크립트 머신러닝 TensorFlow.js

김영보

자바스크립트 환경에서 머신러닝 개념을 다룹니다. 자바스크립트와 TensorFlow.js로 머신러닝을 구현하는 형태와 코드를 다룹니다.

Intermediate

Tensorflow, JavaScript, 머신러닝

자바스크립트 머신러닝 TensorFlow.js

김영보

아무도 알려주지 않는 WebRTC를 사용한 P2P통신

July

WebRTC를 활용하여 구현하는 웹캠과 피어간 통신에 대해서 학습할 수 있습니다.

Beginner

Go, webrtc, p2p

아무도 알려주지 않는 WebRTC를 사용한 P2P통신

July

[인프런 X 생활코딩] HTML과 인터넷

인프런

생활코딩의 첫 번째 웹 개발 강의, <WEB 1 - HTML & Internet> 리뉴얼 버전이 오직 인프런에서만 공개됩니다!

Beginner

HTML/CSS, JavaScript, netlify

[인프런 X 생활코딩] HTML과 인터넷

인프런

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

Beginner

NestJS, Node.js, JavaScript

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

제로초(조현영)

본 강의에서는 자바스크립트를 활용해 프로그래밍 사고력을 기르는 연습을 합니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 반응 속도 테스트, 틱택토, 로또 추첨기, 가위바위보, 카드 짝맞추기 게임, 텍스트 RPG, 지뢰 찾기, 2048게임, 두더지 잡기까지 함께 만들어봅시다.

Basic

JavaScript

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

제로초(조현영)

조코딩의 코딩 기초와 웹 풀스택 개발

조코딩

코딩 1위 유튜버 조코딩의 실전 압축! 쉽고 재미있는 웹 풀스택 개발 강의

Beginner

HTML/CSS, JavaScript, Node.js

조코딩의 코딩 기초와 웹 풀스택 개발

조코딩

클린업 JavaScript: 베이스 빌드업!

김영보

생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

Basic

JavaScript, 면접, 기술면접

클린업 JavaScript: 베이스 빌드업!

김영보