bbchu's note

Scope 란?

scope 는 범위라는 뜻으로 프로그래밍 언어에서 변수나 메소드의 참조 범위

여기에서는 javascript 에 대한 scope 개념만 설명

Scope 종류

전역(global scope) : script 내에 어느 곳에서든 참조 가능

지역(local scope) : 정의된 함수 내에서만 참조 가능. 함수 외부에서는 접근 불가

[ 사진1 ] JavaScript 의 Scope 종류

> 로컬 변수의 값을 바꾸더라도 함수 내부에서만 유효하므로 전역변수의 값은 바뀌지 않음

var x = 'global';
function ex() {
  var x = 'local';
  x = 'change';
}
ex(); // x를 바꿔본다.
alert(x); // 여전히 'global'

[ 예제1 ] 지역/전역 변수 특징

JavaScript의 Scope 특징

• 변수명 중복 허용
• var 키워드 생략
• Function Scope
• 렉시컬 특성
• 변수 호이스팅 (variable hoisting)

변수명 중복 허용

자바스크립트에서는 변수명이 중복되어도 에러가 나지 않음

변수명이 여러 개 중복될 경우 가장 가까운 변수를 참조

var scope = 10;  
function scopeExam(){  
    var scope = 20;
    console.log("scope = " +scope);
}
scopeExam();  
//실행결과
/*
scope =20  
*/

[ 예제2 ] 변수명 중복 허용

var 키워드 생략

var 키워드를 붙이지 않으면 전역변수로 정의

> 전역 변수는 어디에서나 참조 가능하므로 변경된 값으로 출력

var x = 'global';
function ex() {
  x = 'change';
}
ex();
alert(x); // 'change'

[ 예제3 ] var 키워드 생략

Function Scope

자바스크립트는 블록단위가 아닌 함수 단위로 scope를 정의

> 다른 프로그래밍 언어는 블록 단위로 변수의 scope 가 정의

> 자바스크립트의 경우 function scope 의 특징을 가지므로 함수 내에서 a, b, c 의 scope 가 동일

function scopeTest() {  
    var a = 0;
    if (true) {
        var b = 0;
        for (var c = 0; c < 5; c++) {
            console.log("c=" + c);
         }
         console.log("c=" + c);
    }
    console.log("b=" + b);
}
scopeTest();  
//실행결과
/*
c = 0  
c = 1  
c = 2  
c = 3  
c = 4  
c = 5  
b = 0  
*/

[ 예제4 ] Function Scope 특징

렉시컬 특성

스코프는 함수 실행 시점이 아닌 정의 시점에 생성

lexical scoping, 정적 스코프라고도 불림

> f2 가 f1 안에서 실행되었지만 f2 외부에 있는 변수 a 를 호출할 수는 없음

function f1(){  
    var a= 10;
    f2();
}
function f2(){  
    return console.log("호출 실행");
}
f1();

//실행결과
/*

호출실행
*/

function f1(){  
    var a= 10;
    f2();
}
function f2(){  
    return a;
}
f1();

//실행결과
/*
Uncaught Reference Error  
: a is not defined
*/

[ 예제5 ] Lexical Scoping

변수 호이스팅 (variable hoisting)

변수의 정의가 선언과 할당으로 분리되는 것을 의미

변수가 함수 내에서 정의되었을 경우 선언이 함수의 최상단으로 이동

변수가 전역에서 정의된 경우 전역 컨텍스트의 최상단으로 이동

호이스팅은 함수 선언 방식에만 적용 가능 

(함수표현식, Function 생성 방식은 함수 변수로 인식)

> 예제6 소스는 자바스크립트 엔진에 의해 예제 7처럼 동작 (name 변수가 호이스팅)

function doSomething() {
    console.log("value : " + name);
    var name = "bbchu";
    console.log("value : " + name);
}
doSomething();

//실행결과
/*
undefined
bbchu
*/

[ 예제6 ] Variable Hoisting

function doSomething() {
    var name;
    console.log("value : " + name);
    name = "bbchu";
    console.log("value : " + name);
}
doSomething();

//실행결과
/*
undefined
bbchu
*/

[ 예제7 ] Variable Hoisting

Python 이란?

• 1990년 암스테르담의 귀도 반 로섬(Guido Van Rossum)이 개발한 인터프리터(Interpreter) 언어

• 고대 신화에 나오는 파르나소스 산의 동굴에 살던 큰 뱀 (파이썬 표지와 아이콘이 뱀 모양)

• 다양한 라이브러리들과 통합환경의 동시 제공 (numpy, pandas 등)

• 관련 서비스 

- 파일 동기화 서비스 드롭박스(Dropbox)

- Web 개발 프레임워크 장고(Django/Flask)

- 머신러닝/딥러닝 라이브러리(Sklearn, tensorflow, mxnet, pytorch..)

Python 특징

• Interpreter 기반의 객체 지향 언어

- 바이트 코드 컴파일을 지원하는 동적 인터프리팅 언어 (.py > .pyc)

- python shell 에서 interpreter 모드 테스트 가능

•  플랫폼 독립적 언어

- Windows, MAC OS, Palm OS, Android, Unix 계열, Linux 계열 등 다양한 OS 지원

•  유연한 확장

- 컴파일된 외부 모듈을 인터프리터 내부로 동적로딩 지원

•  동적 타이핑

- 컴파일 시점이 아닌 프로그램 실행 시점에 Type Checking 을 수행

- 개발생산성 향상 가능

- 디버그 속도 저하 발생 가능

•  리플렉션 (Reflection)

- Runtime 시 객체에 대한 상세 정보 획득 가능

- Object Properties 조작 가능

•  쉬운 문법, 빠른 속도

- 프로그램의 뼈대는 파이썬으로 짜고 빠른 실행속도를 필요로 하는 부분은 C 로 구현하여 import 가능

- Python 의 많은 라이브러리가 C 로 구현됨

•  간결함

- { } (브레이스) 없이 들여쓰기를 통해 단락 구분

- 강제적인 인덴테이션으로 가독성 향상

OOP - Classes and Instances

• 일반적인 클래스 정의

class Employee:
    pass # do nothing

emp_1 = Employee()
emp_2 = Employee() # emp_1, emp2는 클래스(Employee)의 인스턴스, 주소 다름

• 인스턴스 변수 설정

emp_1.first = "kildong"
emp_1.last = "hong"
emp_1.email = "kildong.hong@gmail.com"
emp_1.pay = 100

• 설정 값 확인

print('{} / {}'.format(emp_1.email, emp_1.first))

Class Variables  클래스 변수

• 클래스 전역 변수

- cls 지시자를 통해 access 가능

• 인스턴스 변수는 self 지시자를 통해 access

class Employee:
    raise_amount = 1.04

    def __init__(self, first, last, pay):
        self.first = first
        self.last = last
        self.pay = pay
        self.email = first + '.' + last + '@email.com'

emp_1 = Employee('killdong', 'hong', 10000)
emp_2 = Employee('chunhang', 'sung', 2000)

# raise_amount - 클래스 변수
# first, last, pay, email - 인스턴스 변수


// 클래스 변수 값을 변경하면 해당 인스턴스의 값이 전부 변경된다.
Employee.raise_amount = 1.05

print(emp_1.raise_amount)             # 1.05
print(emp_2.raise_amount)            # 1.05
print(Employee.raise_amount)       # 1.05

// 인스턴스 변수에 대한 값을 변경하면 클래스 변수의 raise_amount 는 바뀌지 않는다.
emp_1.raise_amount = 1.06

print(emp_1.raise_amount)         # 1.06
print(emp_2.raise_amount)        # 1.05
print(Employee.raise_amount)   # 1.05

Static Method and Class Method

• Instance Method

- 일반적인 메소드 형태

- parameter 는 self 부터 시작 (instance 의미)

• Class Method

- @classmethod annotation 으로 접근가능

- parameter 는 cls 부터 시작 (class 의미)

• Static Method

- @staticmethod annotation 으로 접근가능

- method parameter 에 self, cls 없음

- util 성 메소드 작성에 적합

- class, instance를 통해서 접근 가능하나 되도록 class 를 통해 호출하는 것이 바람직

class Employee:
    
    raise_amount = 1.04 
    num_of_emps  = 0   ### instance개수를 담을 class variables
    
    def __init__(self, first, last, pay):
        self.first = first
        self.last  = last
        self.pay   = pay
        self.email = first + '.' + last + '@email.com'
        
        Employee.num_of_emps += 1 ## instance개수를 +1씩 증가시킨다.
        
        
    def fullname(self):
        return '{} {}'.format(self.first, self.last)
    
    def apply_raise(self):
        self.pay = int(self.pay * self.raise_amount) #Instance Variables는 'self.변수명'으로 접근 가능
        
    # class method선언은 @classmethod annotation을 사용하고
    # 메소드 파라미터의 첫인자는 cls를 기본적으로 설정한다.
    @classmethod
    def set_raise_amt(cls, amount):
        cls.raise_amount = amount
        
    @classmethod
    def from_string(cls, emp_str):
        first, last, pay = emp_str.split('-')
        #return Employee(first, last, pay) # __init__ parameter와 같은 순서로 객체를 생성하라.
        return cls(first, last, pay)
    
    #static method는 별도의 parameter를 전달하지 않는다.
    # weekday()는 '0:월, 1:화, 2:수, 3:목, 4:금, 5:토, 6:일'의 값을 리턴
    @staticmethod
    def is_workday(day):
        if day.weekday() == 5 or day.weekday() == 6:
            return False
        return True

# class method를 통해서 class variables를 변경한다.
Employee.set_raise_amt(1.05)

# class method를 통한 instance 생성
new_emp_1 = Employee.from_string(emp_str_1)
new_emp_2 = Employee.from_string(emp_str_2)

#static method 호출 > class를 통해 접근
import datetime
my_date = datetime.date(2016, 7, 11)
print(Employee.is_workday(my_date))

# instance를 통해서도 호출은 가능하나, class를 통해서 호출하는 것이 바람직.
new_emp_1.is_workday(datetime.date(2018, 6, 2))

Inheritance-Subclasses

•  부모 클래스의 속성/메소드와 같은 속성/메소드를 자식 클래스에서 재정의 가능

class Employee:
    
    raise_amount = 1.04 
     
    def __init__(self, first, last, pay):
        self.first = first
        self.last  = last
        self.pay   = pay
        self.email = first + '.' + last + '@email.com'
        
    def fullname(self):
        return '{} {}'.format(self.first, self.last)
    
    def apply_raise(self):
        self.pay = int(self.pay * self.raise_amount) #Instance Variables는 'self.변수명'으로 접근 가능

#Employee를 상속하는 자식클래스를 선언
class Developer(Employee):
    raise_amount = 1.10
    
    def __init__(self, first, last, pay, prog_lang):
        #부모 클래스의 메소드를 실행한다.
        super().__init__(first, last, pay)
        #Employee.__init__(first, last, pay) #이 코드도 상위 클래스 __init__ call
        self.prog_lang = prog_lang

dev_1 = Developer('kildong', 'hong', 10000000) # Java와 달리 new keyword를 사용하지 않음.
dev_2 = Developer('sunghun', 'kim', 5000000) # emp_1(객체)는 클래스(Employee)의 인스턴스(Instance)이다.

#자식클래스가 부모 클래스의 속성과 메소드를 상속하여 정상 동작함.
print(dev_1.email)
print(dev_2.email)

# Employee 를 상속하는 Manager 클래스
class Manager(Employee):    
    #parameter=None은 해당 parameter가 값이 없을 경우 None으로 설정한다.(default value)
    def __init__(self, first, last, pay, employees=None):
        #부모 클래스의 메소드를 실행한다.
        super().__init__(first, last, pay)
        if employees is None:
            self.employees = []
        else:
            self.employees = employees

    #부모 클래스에 없는 메소드 정의 가능    
    def add_emp(self, emp):
        if emp not in self.employees:
            self.employees.append(emp) #list append
            
    def remove_emp(self, emp):
        if emp in self.employees:
            self.employees.remove(emp) #list remove
            
    def print_emps(self):
        for emp in self.employees:
            print('-->{}'.format(emp.fullname()))

Instance Type / Subclass 여부 확인

print(isinstance(mgr_1, Manager))        #True
print(issubclass(Developer, Employee))    #True
print(issubclass(Employee, Manager))      #False

다중상속

• python은 다중상속을 지원하므로 instance 키워드가 없음

class parentA:
    
    def print(self):
        print('parentA')
        
    def printA(self):
        print('parentA print')
        
class parentB:
    def print(self):
        print('parentB')
        
    def printB(self):
        print('parentB print')
        
class Child(parentA, parentB):
    def print(self):
        super().print()
        print('child C')

ins = Child()
ins.print() # 다중 상속 클래스의 선언된 순서에서 우선한 것의 메소드를 실행한다.
ins.printB()
ins.printA()

 float 속성

• '띄우다'라는 의미로 원래는 이미지와 텍스트를 어떻게 정렬할 것인지에 대한 속성
• 현재는 레이아웃용으로도 많이 사용
• block level element 에만 float 속성을 사용할 수 있다.
• 속성값

clear 속성

• '취소하다'의 뜻으로 float 속성의 페이지 흐름을 변경
  
• 속성값

flex 란?

• 레이아웃을 효과적으로 잡아주는 도구

• flex 를 사용하기 위해서는 컨테이너 역할을 하는 태그와 자식 역할을 하는 아이템 태그가 필요

• flex 를 사용할 때는 컨테이너 태그에 display:flex 속성을 부여

flex를 사용하기 위한 설정

• 컨테이너에 display:flex 속성을 추가해야 flex 사용이 가능

• 브라우저 별 사용 방법

flex-direction 속성값

예제1 - flex-direction 사용

flex-grow

• item 간 비율을 나타내는 속성

• 값이 커질 수록 컨테이터 내의 비율이 커지는 것을 의미한다.

flex-shrink

• item 간 고통분담 값을 나타내는 속성

• shrink 값이 커질 수록 컨테이터의 사이즈가 줄어들 때 고통분담하는 비중이 커진다.

• default 값은 1

flex-basis

• item 의 기본 사이즈 지정

• px 단위 

예제2 - flex-shrink

holyGrailLayout

• holi grail 은 성배라는 뜻 

• 기본적이지만 유연하게 구현하기 어려운 holy grail layout 을 flex 를 이용해 세련하게 구현 가능하다.

• holy grail layout 그림

예제3 - holyGrailLayout

** 참고 : 생활코딩 (https://opentutorials.org/course/2418/13526)

가상 클래스 (셰도 클래스)

• 클래스는 아니지만 클래스처럼 사용하는 속성

• 같은 레벨의 클래스가 적용돼있으면 css 에서는 뒤에 있는 클래스가 적용됨

• 가상클래스는 아래 순서대로 적용하는 것이 좋음    

- :link

- :visited

- :hover

- :active

로렌 입숨 (립숨)

• 테스트할때 긴 텍스트 제공

text-align

• left, right, center, justify

• justify 는 양쪽 동등하게. 대신 자간이 조정됨

web font

• 웹에서 다운로드 받아서 사용하는 방식

• 외국어보다 한글이 용량이 크다

• 폰트는 확장자가 여러 개인데 브라우저마다 폰트를 저장하는 방식이 달라서 그에 대응하기 위함

• 구글폰트 적용방법

- link 태그 head 에 복사

- 적용하고자하는 font-family 를 css 에 적용

 상속 inherited

• color 는 상속되고 border 는 상속되지 않음

stylish

• 크롬에 확장플러그인 추가

• 다른사람이 만들어놓은 디자인 사용가능

• 커스터마이징 가능

cascading

• 한 앨리먼트에 대해 웹브라우저, 사용자, 저자 간 우선순위

• 웹브라우저 < 사용자 < 저자

• 태그선택자(tag selector) < 클래스 선택자(class selector) < 아이디 선택자(id selector) < 인라인 스타일 속성(style attribute)

• !important 는 가장 우선순위를 높이는 방법. 남용은 하지말 것

bracket

• adobe 에서 만든 오픈소스 에디터 html, css 코딩에 최적화

• brackets.io 접속 > 설치

레이아웃

• block element : 화면전체를 사용하는 태그

• ex. p div h1

• inline level element : 화면의 일부를 차지하는 태그

• ex. span a

• display 속성을 이용하면 블록 -> 인라인, 인라인 -> 블록 변경 가능

박스 모델

• padding : 앨리먼트와 내부 요소 간의 간격

• margin : 엘리먼트 간 간격

• inline element 에서는 width, height 값은 무시된다.

박스 사이징

• box-sizing 속성을 border-box 로 지정하면 테두리를 포함한 크기 지정 가능

• box-sizing:content-box //컨텐트만 포함

• box-sizing:border-box //테두리까지 포함

마진겹침 현상 (margin-collapsing)

• 같은 레벨 엘리먼트 사이에 margin 이 적용돼있는 경우 둘 중 더 큰 margin 값 하나만 적용되는 현상

• 상위/하위 레벨 엘리먼트에 모두 margin 이 적용돼있는 경우  더 큰 margin 값 하나만 적용되는 현상 // 단 상위레벨 엘리먼트에 시각적 속성이 적용돼있으면 겹침 현상은 일어나지않음

• 엘리먼트에 top과 bottom margin 값 중 큰 값이 양쪽으로 적용 // 시각적 요소가 없는 경우 한정

• relative - 부모 엘리먼트를 기준으로 속성값 적용
• absolute - 최상위인 html 엘리먼트를 기준으로 속성값 적용. 포지션이 absolute 가 되면 부모와 독립의 관계가 됨
• static - 위치를 지정하지 않은 상태 (디폴트)
• fixed - 화면상에 노출된 위치에 고정 (스크롤과 상관없이)