SlideShare a Scribd company logo
1 of 14
Download to read offline
2/3주차 9팀
김동진 & 조혁주
목차
How to work


Demo
Class 사용 지양
javascript는 타 언어에서 사용하는 보편적인 class 기능을 제공하지 않고


prototype chain을 통해 상위 prototype의 속성에 접근해서 class와 비슷한 기능을 흉내낸다.


그렇기 때문에 class를 java의 class처럼 오해하고 사용하는 것은


기능에 문제가 없을지라도 javascript를 올바르게 사용한다고 볼 수 없다.


(자바스크립트는 왜 이 모양일까 - 더글라스 크락포드 참조)


그래서 우리는 최대한 함수와 객체만 사용하도록 노력하여 앞서 말한 내용을 이해해 보고자 하였다.
innerHTML 사용 지양
innerHTML은 리터럴 템플릿을 사용하여 편리하게 html을 만들고 추가할 수 있지만


크로스 사이트 스크립트 (XSS) 보안 문제와


리터럴 템플릿으로 인한 가독성 저하, 유지/보수 어려움 등의 문제에 대한 염려가 있기 때문에


innerHTML 사용을 지양하고 아토믹 디자인 구조와 함께 최대한 함수로 분리하여


javascript로 페이지를 개발
Atomic Design
“디자인 요소의 계층 구조를 원자, 분자, 유기체, 템플릿, 페이지로


나누고 이를 조합하여 view를 개발하는 방식”
Atomic Design 구성
ATOM


(원자)
가장 기본이 되는 빌딩 블록


하나의 태그


재사용성 매우 높음
MOLECULE


(분자)
원자들의 조합


한가지 기능


재사용성 높음
ORGANISM


(유기체)
원자와 분자들의 조합


여러 기능


재사용성 보통
TEMPLATE
원자, 분자, 유기체의 조합


데이터가 없는 레이아웃 상태


재사용성 낮음
PAGE
실제 유저들이 보는 화면


템플릿에 데이터를 주입


재사용성 없음
* 각 컴포넌트 의존성을 낮춘다


* 테스트 및 리팩토링이 쉽다


* CSS 관리가 편하다


* 빠르고 유연성 있는 개발 프로세스를 가진다
장점
* 각 구성 정의를 통일하기 어렵다


* 개발이 까다롭고 어렵다


* 개발자의 능력과 성향에 따라 사용 편차가 심하다
단점

More Related Content

What's hot

[ES6] 1. let과 const
[ES6] 1. let과 const[ES6] 1. let과 const
[ES6] 1. let과 constHan JaeYeab
 
일렉트론을 가볍게 한번 사용해보자! (설치부터 일렉트론으로 제이쿼리 사용하기)
일렉트론을 가볍게 한번 사용해보자! (설치부터 일렉트론으로 제이쿼리 사용하기)일렉트론을 가볍게 한번 사용해보자! (설치부터 일렉트론으로 제이쿼리 사용하기)
일렉트론을 가볍게 한번 사용해보자! (설치부터 일렉트론으로 제이쿼리 사용하기)클라우드 준
 
20170202 D2 발표
20170202 D2 발표20170202 D2 발표
20170202 D2 발표Suhjin Park
 
Web_06_Ruby On Rails (임시)
Web_06_Ruby On Rails (임시)Web_06_Ruby On Rails (임시)
Web_06_Ruby On Rails (임시)team air @ Dimigo
 
웹 본격적으로 배우기 전 감 잡기 - 1
웹 본격적으로 배우기 전 감 잡기 - 1웹 본격적으로 배우기 전 감 잡기 - 1
웹 본격적으로 배우기 전 감 잡기 - 1mangonamu
 
20 handler and_async_task
20 handler and_async_task20 handler and_async_task
20 handler and_async_task운용 최
 

What's hot (7)

[ES6] 1. let과 const
[ES6] 1. let과 const[ES6] 1. let과 const
[ES6] 1. let과 const
 
일렉트론을 가볍게 한번 사용해보자! (설치부터 일렉트론으로 제이쿼리 사용하기)
일렉트론을 가볍게 한번 사용해보자! (설치부터 일렉트론으로 제이쿼리 사용하기)일렉트론을 가볍게 한번 사용해보자! (설치부터 일렉트론으로 제이쿼리 사용하기)
일렉트론을 가볍게 한번 사용해보자! (설치부터 일렉트론으로 제이쿼리 사용하기)
 
20170202 D2 발표
20170202 D2 발표20170202 D2 발표
20170202 D2 발표
 
Web_06_Ruby On Rails (임시)
Web_06_Ruby On Rails (임시)Web_06_Ruby On Rails (임시)
Web_06_Ruby On Rails (임시)
 
웹 본격적으로 배우기 전 감 잡기 - 1
웹 본격적으로 배우기 전 감 잡기 - 1웹 본격적으로 배우기 전 감 잡기 - 1
웹 본격적으로 배우기 전 감 잡기 - 1
 
20 handler and_async_task
20 handler and_async_task20 handler and_async_task
20 handler and_async_task
 
20201223 jquery
20201223 jquery20201223 jquery
20201223 jquery
 

Similar to 데모 발표

[IT기술칼럼#1]고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원
[IT기술칼럼#1]고급자바스크립트  for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원[IT기술칼럼#1]고급자바스크립트  for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원
[IT기술칼럼#1]고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원탑크리에듀(구로디지털단지역3번출구 2분거리)
 
M5 6 1
M5 6 1M5 6 1
M5 6 1nexthw
 
Holub on-patterns-2-1
Holub on-patterns-2-1Holub on-patterns-2-1
Holub on-patterns-2-1정환 임
 
HolubOnPatterns/chapter2_1
HolubOnPatterns/chapter2_1HolubOnPatterns/chapter2_1
HolubOnPatterns/chapter2_1정환 임
 
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)SangIn Choung
 
QnA blog using Django - ORM, 회원가입, 로그인/로그아웃
QnA blog using Django - ORM, 회원가입, 로그인/로그아웃QnA blog using Django - ORM, 회원가입, 로그인/로그아웃
QnA blog using Django - ORM, 회원가입, 로그인/로그아웃Kwangyoun Jung
 
RequireJS를 이용한 모듈관리.
RequireJS를 이용한 모듈관리.RequireJS를 이용한 모듈관리.
RequireJS를 이용한 모듈관리.Hyung Eun Jin
 
[HaU] 신입 기술 면접 준비 java
[HaU] 신입 기술 면접 준비 java[HaU] 신입 기술 면접 준비 java
[HaU] 신입 기술 면접 준비 java유리 하
 
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerPolymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerChang W. Doh
 
Web Application Testing Patterns
Web Application Testing PatternsWeb Application Testing Patterns
Web Application Testing PatternsJune Kim
 
11장 시스템
11장 시스템11장 시스템
11장 시스템kidoki
 
Effective c++ 4
Effective c++ 4Effective c++ 4
Effective c++ 4현찬 양
 
자바 웹 개발 시작하기 (4주차 : MVC)
자바 웹 개발 시작하기 (4주차 : MVC)자바 웹 개발 시작하기 (4주차 : MVC)
자바 웹 개발 시작하기 (4주차 : MVC)DK Lee
 
자바 웹 개발 시작하기 (9주차 : 프로젝트 구현 – 추가적인 뷰)
자바 웹 개발 시작하기 (9주차 : 프로젝트 구현 – 추가적인 뷰)자바 웹 개발 시작하기 (9주차 : 프로젝트 구현 – 추가적인 뷰)
자바 웹 개발 시작하기 (9주차 : 프로젝트 구현 – 추가적인 뷰)DK Lee
 

Similar to 데모 발표 (20)

Design patterns
Design patternsDesign patterns
Design patterns
 
[IT기술칼럼#1]고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원
[IT기술칼럼#1]고급자바스크립트  for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원[IT기술칼럼#1]고급자바스크립트  for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원
[IT기술칼럼#1]고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원
 
(고급자바스크립트 강좌)자바스크립트 클래스?
(고급자바스크립트 강좌)자바스크립트 클래스?(고급자바스크립트 강좌)자바스크립트 클래스?
(고급자바스크립트 강좌)자바스크립트 클래스?
 
M5 6 1
M5 6 1M5 6 1
M5 6 1
 
Holub on-patterns-2-1
Holub on-patterns-2-1Holub on-patterns-2-1
Holub on-patterns-2-1
 
HolubOnPatterns/chapter2_1
HolubOnPatterns/chapter2_1HolubOnPatterns/chapter2_1
HolubOnPatterns/chapter2_1
 
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
 
QnA blog using Django - ORM, 회원가입, 로그인/로그아웃
QnA blog using Django - ORM, 회원가입, 로그인/로그아웃QnA blog using Django - ORM, 회원가입, 로그인/로그아웃
QnA blog using Django - ORM, 회원가입, 로그인/로그아웃
 
RequireJS를 이용한 모듈관리.
RequireJS를 이용한 모듈관리.RequireJS를 이용한 모듈관리.
RequireJS를 이용한 모듈관리.
 
[HaU] 신입 기술 면접 준비 java
[HaU] 신입 기술 면접 준비 java[HaU] 신입 기술 면접 준비 java
[HaU] 신입 기술 면접 준비 java
 
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerPolymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymer
 
4-1. javascript
4-1. javascript4-1. javascript
4-1. javascript
 
Uml 세미나
Uml 세미나Uml 세미나
Uml 세미나
 
7 8 1
7 8 17 8 1
7 8 1
 
Web Application Testing Patterns
Web Application Testing PatternsWeb Application Testing Patterns
Web Application Testing Patterns
 
11장 시스템
11장 시스템11장 시스템
11장 시스템
 
Cygnus unit test
Cygnus unit testCygnus unit test
Cygnus unit test
 
Effective c++ 4
Effective c++ 4Effective c++ 4
Effective c++ 4
 
자바 웹 개발 시작하기 (4주차 : MVC)
자바 웹 개발 시작하기 (4주차 : MVC)자바 웹 개발 시작하기 (4주차 : MVC)
자바 웹 개발 시작하기 (4주차 : MVC)
 
자바 웹 개발 시작하기 (9주차 : 프로젝트 구현 – 추가적인 뷰)
자바 웹 개발 시작하기 (9주차 : 프로젝트 구현 – 추가적인 뷰)자바 웹 개발 시작하기 (9주차 : 프로젝트 구현 – 추가적인 뷰)
자바 웹 개발 시작하기 (9주차 : 프로젝트 구현 – 추가적인 뷰)
 

데모 발표