흑백과 디지털

 파이썬 extended slices 라는 것을 공부하게 되었다. 이게 무려 파이썬 2.3 대에서 부터 있었던 것이다. https://docs.python.org/release/2.3.5/whatsnew/section-slices.html

흔히 arr = list(range(10)) 에 대해서 arr[1], arr[1:2] 같은 것은 잘 알고 있을 것이다. 그런데 이 콜론이 2개까지 사용할 수 있다. 이건 마치 C나 Java 언어에서 for 문을 사용하는 것 같은 형태이다.  맨 앞이 초기값, 중간이 종료값-1, 마지막이 증감을 의미하는 형태로 사용할 수 있다. 그리고 그 숫자는 생략 할 수 있다. 다음과 같은 형태 모두 가능하다. 

arr = list(range(0,10))  # [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
arr[0:2]  # [0, 1]  # [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
arr[0:10:2]  # [0,2,4,5,8]
arr[:10:2] # 맨 앞을 생략하면 0부터 시작한다.  [0,2,4,5,8]  
arr[0::2] # 맨 뒤를 생략하면 리스트 끝까지를 의미한다. [0,2,4,5,8] 
arr[::2] # 맨 시작과 끝 모두 생략 가능하다. [0,2,4,5,8] 
arr[1::2] # [1, 3, 5, 7, 9]
arr[::3] # [0, 3, 6, 9]
arr[:] # [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
arr[::] # [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

나는 이때까지 3번째 인자를 사용하지 않고 있었다. 그러다 보니 증감이 기본값인 1로 적용하고 사용한 것이었다. 

이게 파이썬 버전 2때부터 있었다니. 분명 나는 이것을 책으로 배웠을 것 같은데, 계속 웹프로그래밍만 하다보니 사용할 일이 없다보니 이러한 Slice  방식이 매우 새롭게 느껴진다. 

  파이썬에 정수 나눗셈 연산자가 있는지 있는지 오늘 처음 알았다. github 에서 다른 사람이 짠 코드를 보고 이건 뭔가 하는 코드를 발견했다. 혹시 정수 나눗셈인가 하는 의심이 들어 찾아 보니 파이썬에 정수 나눗셈 연산자가 있었다.

# 이건 결과가 float
a = 12 / 5

# 이게 결과가 integer
b = 12 // 5

print("a = ", a)
 # a =  2.4
 
 print("b = ", b)
 # b = 2

파이썬 버전 2에서는 C나 C++ 언어처럼 정수 나누기 정수의 결과도 정수였다. 그런데 파이썬 버전 3에서부터 비개발자도 이해하기 쉽게 하기 위해 정수 나누기 정수일지라도 비개발자도 이해할 수 있게 float 데이터 처럼 결과를 보여주기 시작했다. 분명 이 연산자는 파이썬 버전 3 처음부터 있었을 텐데, 오늘 처음 인식하게 되었다. 

아마 내가 파이썬 버전 2.7 대에서는 주로 Django 로 서버를 만드는 일을 했을 것이다. 그리고 그 Djanog 가 더 이상 파이썬 버전 2를 지원하지 않게 되자, 나도 파이썬 버전3로 전향을 하게 되었다.  파이썬 버전 2.7에서 버전 3로 넘어갈 때 걱정이 많았다. 그런데 생각외로 큰 변화가 없어서 쉽게 전향을 했던 것 같다. 파이썬 2에서 버전 업을 할 때 조금씩 파이썬 버전 3 기능을 지원했기 때문에 자연스럽게 전환을 했던 것 같다. 

역시 남의 코드를 자주 봐야 다양한 기능을 익히고 문법도 익히고 스타일도 익히게 되는 것 같다. 

이제 vuetify를 이용해서 vue 를 사용한지 1년은 된 것 같다. 그런데도 새로운 것을 배우게 된다. 그냥 무의식적으로 css 설정에서 deep (vue2 에서는 v-deep 로 알고 있다.) 를 사용했는데, 이것을 사용하는 이유를 인식하게 되었다. 난 이용도를 제대로 인식하지 못하다보니 deep 설정이 필요 없는 곳에도 난발하고 있었다.

vue에서 일반적으로 css 스타일을 지정할 때 <style scope> 처럼 scope 라는 구문으로 css 범위를 해당 파일로 제한하게 된다. vue3 를 기준으로 html 태그를 추가하면 자동으로 태그 옆에 data-v-f2c7905d 같은 랜덤함 attribute 가 동일한 파일범위에 같은 값으로 추가된다. 그래서 css 설정에 보면 자동으로 [data-v-f2c7905d] 같은 css selector 가 자동 추가된다. 이렇게 추가되다보면 현재 작업하는 파일과 다른 파일로 분리된 vue 컴포넌트는 다른 랜덤 data-v-XXXXXX 가 생성된다. 그러면 현재 범위를 기준으로 하위 컴포넌트의 스타일을 변경하지 못한다. 이러한 제한을 벗어나게 하기 위해 deep 구문을 이용해서  .test :deep([type="text"].v-field__input) 
으로 deep 를 설정하게 된다. deep 내에 둘러싸인 부분은 하위 컴포넌트를 접근하기 위한 css selector 조합인 것이다. 어째든 이렇게 deep 로 둘러싸인 부분은 자동으로 [data-v-XXXXXX] 같은 것이 추가되지 않는 것 같다.(정확한 동작 원리는 모르겠지만 내 테스트로는 이렇다.)
대충 내 느낌으로는 왼쪽 처럼 사용하면 오른쪽 처럼 자동으로 css selector 가 변화는 느낌이다. 
.test :deep([type="text"].v-field__input)   => .test  [data-v-f2c7905d]  [type="text"].v-field__input
.test ([type="text"].v-field__input)  => .test [type="text"].v-field__input[data-v-f2c7905d]

[type="text"].v-field__input 부분이 하위 컴포넌트 부분이라면  [data-v-f2c7905d] 가 아닌 다른 랜덤한 번호가 붙기 때문에 의도대로 css 셀레팅이 되지 않을 것이다. 이렇기 때문에 deep 를 사용해서 자동 추가를 막는 것 같다. 

어째든 하위 컴포넌트 속성을 selector 하는 부분이 없다면  이 구문이 필요 없는 것이었다. 내가 vuetify 를 이용하고, 이 컴포넌트들의 디자인을 더 작게 만들일이 많다보니 deep 를 많이 사용했던 것이다. 

이것을 오늘에서야 인식하게 되었다니, 나도 참 대충 프로그래밍 짜는 것 같아서 부끄럽다.