블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

calendar

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

'etc./Responsive Web'에 해당되는 글 2

  1. 2016.03.24 자바스크립트 기초 메모
  2. 2012.07.29 반응형 웹 Media Query 를 위한 CSS 탬플릿 자료

자바스크립트 기초 메모

2016.03.24 23:55 | Posted by 솔웅


* 자바스크립트 기초

- 브라우저가 페이지의 HTML 텍스트를 받아서 DOM 스트럭처에 parse 한다. 그 후 해당 페이지의 content들에 대한 각 층들을 구분해서 표시할 준비를 한다. 그리고 표시하기 전에 style을 적용한 후 표시한다.
- HTML은 정적인 부분을 정의하기에 아주 좋은 언어이다. 하지만 웹의 다이나믹한 부분을 구현하는데는 한계가 있다.
- 자바스크립트는 이 다이나믹한 뷰를 제공하는 클라이언트 side의 가장 강력한 스크립트 언어이다.
- 자바스크립트는 ajax, user experience, responsive web design 의 가장 중요한 부분을 구현한다.
- DOM 은 jQuery 같은 라이브러리를 사용해서 클라이언트 side의 스크립팅을 간편하게 만들어 준다. 하지만 separation of concerns 를 처리하는 문제를 해결하지는 못한다.
- 이의 해결을 위한 다른 라이브러리나 프레임워크들이 있다.

* 자바스크립트의 목적
- 자바스크립트는 객체지향언어이다. 자바스크립트로 객체를 정의하고 메소드와 프로퍼티들을 할당한다.
- 자바스크립트 객체는 배열이나 hash와 관련돼 있다. (key value pairs)
: obj[key]=value 나 obj.name = value 형식으로 키를 할당한다.
: delete obj.name 으로 delete한다.
: string key의 iteration order는 definition order 이고 numeric key는 변경할 수 있다.
- 함수(프로퍼티)는 obj.method() 형식으로 호출된다. 또한 this. 로 참조되고 프로퍼티들은 어느때나 assign되거나 remove 될 수 있다.
- 함수는 new Func(params) 로 constructor에서 실행될 때 새로운 객체를 생성할 수 있다. 이때 대개 이러한 함수의 이름은 대문자를 사용한다.

* 객체 생성하기
- obj = new Object(); , obj = {};

dot notation을 사용하는 경우
var employee ={}; - 값이 정해지지 않은 상태
employee.Id = 12345;
employee.Name = "Tom" - Key : Name, Value : Tom
employee.Name
delete employee.Name
employee => Object {Id:12345}

[]를 사용하는 경우
var employee = {};
employee["Id"] = 12345;
employee["Name"] = "Tom"
employee => Object{Id:12345, Name:"Tom"}
delete employee["Name"]
employee => Object{Id:12345}

* 객체에 존재하지 않는 프로퍼티 참조하기
- 객체에 해당 프로퍼티가 존재하지 않으면 undefined 가 return 된다.
- in operator를 사용해서 키의 존재를 확인할 수 있다.
var employee = {}
employee.Id
employee.Id === undefined
"Id" in employee => false
employee.Id = 12345
"Id" in employee => true



* 객체 키에 대해 iterationg 하기
- for.. in을 사용해서 iterate 할 수 있다.
var employee = {}
employee.Id = 12345
employee.Name = "Tom"
for(key in employee) {console.log("Key : " + key + "Value : " + employee[key]}
==> Key : Id Value : 12345
==> Key : Name Value : Tom

* Object reference
- 객체에 할당된 변수는 그것을 reference 한다. 즉 포인터와 같은 역할을 하는데 실제 data를 가리키는 것이다.
- 이 reference 변수를 사용해서 객체의 property를 바꿀 수 있다.
- 변수는 실제로는 reference 이다. 함수의 객체에 전달할 때의 값이 아니다.
var employee = {};
employee["Id"] = 12345;
var obj = employee; - 같은 객체에 대한 새로운 point
obj.Id = 54321
employee.Id ==> 54321

* this 키워드
-객체에서 함수가 호출될 때 this 가 이 객체의 reference가 된다.

var foo = {
    name : "Guest",
    setName : function(){
        this.name = prompt('Enter your name'); - this 는 foo 객체의 reference 가 된다.
    },
    getName : function(){
        console.log("Your name is : " + this.name);
    }
};

foo.getName(); ==> Your name is : Guest
foo.setName() - 프롬프트가 나타나면 이름을 입력한다.
foo.getName(); ==> Your name is : '프롬프트에 입력한 이름'

* 생성자 함수
- obj = {...}를 사용해 객체를 생성할 수 있다.
- 다른 방법으로는 constructor를 사용할 수 있다. 이 때 Constructor는 Pascal case 여야 한다.
- 초기에 빈 객체인데 여기에 초기화 할 때 어떤 프로퍼티를 할당해야 하는 경우 사용한다. result 는 returned 이다.

function Calculator(firstVar, secondVar) {
    this.firstVar = firstVar;
    this.secondVar = secondVar;
    this.sum = function(){
        return this.firstVar + this.secondVar;
    }
}

new Calculator(5,5);
var calcObj1 = new Calculator(5,5);
var calcObj2 = new Calculator(15,15);

calcObj1.sum(); ==> 10
calcObj2.sum(); ==> 30

* 프로토타입 상속
- 자바스크립트에서 상속은 프로퍼티 베이스이다. 다른 클래스에서 클래스를 상속하는 대신 다른 객체에서 객체를 상속한다.
- 다른 객체에서 객체를 상속하기 위해서는 아래와 같이 한다.
childObject._proto_=baseObject
: 이 syntax는 크롬과 파이어폭스에서 사용된다. 다른 브라우저에서는 내부적으로 이 프로퍼티가 존재한다. (hidden)
childObject = Object.create(baseObject)
ConstructorFunction.prototype = baseObject
: 이 syntax는 최근의 모든 브라우저에서 동일하게 작동한다.

1. _proto_ 사용해서 프로토타입 상속하기
var foo {
    fooVar : "Foo Variable",
    fooMethod : function(){
        console.log(this.fooVar);
    }
}

var bar = {
    barVar : "Bar Variable"
}

bar._proto_ = foo // bar 객체가 foo로부터 상속했다.
==> Object{fooVar: "Foo Variable", fooMethod:function}
bar
==> Object{barVar: "Bar Variable", fooVar: "Foo Variable", fooMethod:function}



2. Object.create() 사용해서 프로토타입 상속하기

var foo {
    fooVar : "Foo Variable",
    fooMethod : function(){
        console.log(this.fooVar);
    }
}

var bar = Object.create(foo) // bar 객체가 foo로부터 상속했다.

bar
==> Object{fooVar: "Foo Variable", fooMethod:function}

bar.barVar - "Bar Variable"
==> Object{barVar: "Bar Variable", fooVar: "Foo Variable", fooMethod:function}

3. prototype 사용해서 프로토타입 상속하기
function Employee(){
    this.Id = 0;
    this.Name = "";
}

function Manager(){}
Manager.prototype = new Employee(); // Manager가 Employee 객체를 상속한다.
==> Employee {Id: 0, Name: ""}
var ani1 = new Manager();
ani1
==>Manager {Id: 0, Name: ""} // new Manager로 생성되는 모든 객체는 ID와 Name을 갖게 된다.
ani1.Id = 1111;
ani1.Name = "Tom"
ani1
==> Manager {Id: 1111, Name: "Tom"}

저작자 표시 비영리 동일 조건 변경 허락
신고

'etc. > Responsive Web' 카테고리의 다른 글

자바스크립트 기초 메모  (0) 2016.03.24
반응형 웹 Media Query 를 위한 CSS 탬플릿 자료  (0) 2012.07.29


아래 글은 http://hardboiledwebdesign.com/ 을 만든 앤디가 자신이 몇개월간 작업하면서 만들어 놓은 CSS3 Media Query  관련 소스를 공개한 글 입니다.

앞으로 반응형 웹 작업을 하게 되면 아주 유용하게 쓰일 것 같습니다.

좋은 정보를 공유해 준 앤디에게 감사하면서 이 정보를 제 블로그에 정리해 둡니다.


Hardboiled CSS3 Media Queries

제가 책을 launch 하기 위해  Hardboiled Web Design 웹사이트를 만들면서 CSS3의 Media Query를 사용해서 responsive layout을 만드는 것은 아주 많은 일을 해야 되는 작업이었습니다.

지난 몇달간 Media Query를 사용하면서 각 프로젝트마다 여러번 그 소스들을 고쳤었습니다. 그래서 아예 표준문안처럼 만들어 놓으면 다음에 사용할 때 편할거라고 생각했죠.

이 hardboiled CSS3 Media Queries들은 각 디바이스들에 대한 empty placeholder들 입니다. 이걸 이용하면 당장 responsive 디자인을 시작할 수 있죠.

이것은 책을 내면서 같이 선사하는 toolkit이었습니다.

그리고 여러분들은 지금 이 소스를 다운로드 받으시고 오버라이드해서 마음대로 사용하실 수 있습니다.


Download the CSS file




/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }

물론 하나의 스타일쉬트 파일에 방대한 responsive design style들을 넣고 싶지 않으실 겁니다.

이럴 경우 여러 스타일쉬트 파일로 소스를 구분하시고 html 파일에서 link element를 사용하시면

좋으실 겁니다.

<head>

<link rel="stylesheet" href="smartphone.css" 
media="only screen and (min-device-width : 320px) 
and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" 
media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" 
media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" 
media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" 
media="only screen 
and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5)">

</head>

Download the CSS file and any comments or suggestions for future improvements would be more than welcome.

Sign-up for email alerts or follow @itshardboiled for more updates and sneak previews.



저작자 표시 비영리 동일 조건 변경 허락
신고

'etc. > Responsive Web' 카테고리의 다른 글

자바스크립트 기초 메모  (0) 2016.03.24
반응형 웹 Media Query 를 위한 CSS 탬플릿 자료  (0) 2012.07.29
이전 1 다음