영혼을 불태우는 나의 열정.

[책소개] "밑바닥부터 시작하는 웹브라우저" 소개

소혼 — Thu, 18 Sep 2025 17:53:18 +0900

방금 받은 따끈한 책

2024년에 가장 뿌듯한 일이 있다면 이 책을 번역한 일이라고 생각합니다.
원래는 가제 "크로미움 인터널"에 관한 글을 적어보려고 생각했는데, 이 책 번역 기회가 닿아 "글을 적는게 힘든 일이다"를 배웠네요.

2025년 초까지 계속 수정을 거듭해 드디어 책이 손에 오니 감개 무량합니다.
이 좋은 책을 정말 제가 번역한게 맞나 싶네요.

사실상 현 직장에 이직한 이후 블로그를 방치했었는데, 이 책을 계기로 그동안 쌓았던 지식들을 정리해야겠습니다.

이 책은 아주 쉬운 내용으로 시작해서 뒤로 가면 정말 프로그래밍 역량이 있어야 진행이 가능한 수준으로 난이도가 올라갑니다.

PROLOGUE. 브라우저와 웹

웹이 없던 시절 웹의 기원이 된 아이디어들부터 웹의 역사를 따라가며 브라우저의 등장과 발전, 브라우저 전쟁 이야기와 모던 브라우저까지의 이야기를 다루고 있습니다.

저도 이 책을 번역하기 전에는 몰랐던 이야기들이 많아서 너무 좋았습니다.

PART 1. 페이지 로딩

웹페이지를 읽어서 아주 간단하게 웹페이지의 콘텐츠를 화면에 그리는 텍스트만 있는 파이썬 프로그램을 작성합니다.

이 과정에서도 폰트의 유래, 베이스라인, 어센트, 디센트에 대해서 배울 수 있었습니다.

웹페이지를 파싱하는 기초적인 작업만으로도 브라우저를 만들어본 것같은 기분을 느낄 수 있습니다.

PART 2. 문서 표시

앞장에서 만든 파이썬 프로그램을 본격적으로 개선해 브라우저의 뼈대를 만듭니다.

텍스트를 DOM 트리로 만들고, 기초적인 레이아웃의 개념을 배우실 수 있습니다.

CSS 스타일을 적용하고 버튼, 링크 처리등을 하는데 생각보다 어렵지 않게 따라하실 수 있을 겁니다.

(여기까진 별 문제 없습니다)

PART 3. 애플리케이션 실행

여기서부터는 조금 어려워지는데, 간단한 파이썬 서버를 만들어서 브라우저와 통신하게 할 겁니다.

그리고, 자바스크립트를 바인딩하고 쿠키등의 데이터가 어떻게 처리되는지, 서버와 브라우저 코드를 같이 수정하면서 들여다 보는 것이 너무 좋았습니다.

보안에 관련해서는 좀 더 정보가 많았으면 하는 바람이 있는데, 이 책의 범위를 넘어가는 부분이 있긴 합니다.

아쉽지만 이 책에서 다루는 정도만으로 웹의 최신 보안 기술들에 흥미를 가져볼 수 있을 것 같습니다.

PART 4. 모던 브라우저 기능

하.. 이때부터는 솔직히 어렵습니다. 여기를 직접 짜실 수 있는 분이면 훌륭한 개발자라고 인정해드릴 수 있겠습니다.

책 예제가 모두 주어지지 않고 앞에서 작성한 코드에 수정을 할 것을 지시합니다. 알아서 다 수정하셔야 하고 안되면 디버깅을 열심히 하셔야 합니다.

대신 모던 브라우저의 주요 기능들을 정말 다뤄봅니다.

멀티 프로세스는 다루지 않지만 멀티 스레드만으로도 얼마나 어려운이 느낄 수 있을 것입니다.

애니메이션, 컴포지팅이 얼마나 어려운지도 아실 수 있을 것이고, 최적화를 위해 브라우저가 하는 더티비트 시스템에 대해 이해하실 수 있을 겁니다. (얼마나 어려운지요)

특히 마지막 장, "이전 결과 재사용"은 정말 어려울 겁니다.

하지만 이 앞장까지만 구현해봐도 꽤 괜찮은 브라우저가 완성된걸 보실 수 있을 겁니다.

PART 4 까지 보고, 예제도 직접 해보고 한다면 당분간 지루할 시간이 없을 파이썬 프로그램 하나를 만들어보시지 싶네요.

https://www.yes24.com/Product/Goods/153499985

밑바닥부터 시작하는 웹 브라우저 - 예스24

웹 브라우저! 쌓고, 뜯고, 이해하라하나씩 이해하는 웹의 작동 원리크롬, 파이어폭스, 브레이브, 웨일 같은 웹 브라우저는 겉으로는 단순해 보이지만, 그 밑에는 무려 1천만 줄에 달하는 코드가

www.yes24.com

8장. 서버로 정보 보내기 추가 설명

소혼 — Sun, 31 Aug 2025 17:00:58 +0900

8.2 위젯을 렌더링하기

TextLayout은 self_rect가 필요 없었지만, InputLayout은 self_rect가 필요합니다.

class InputLayout
    def self_rect(self):
        return Rect(self.x, self.y,
            self.x + self.width, self.y + self.height)

에러 상황들

소혼 — Sun, 31 Aug 2025 09:16:22 +0900

user@AL02296676 browserengineering-code % python3 browser.py http://localhost:8000/input.html
Traceback (most recent call last):
  File "/Users/user/workspace/project/browserengineering-code/browser.py", line 1000, in <module>
    Browser().new_tab(URL(sys.argv[1]))
    ~~~~~~~~~~~~~~~~~^^^^^^^^^^^^^^^^^^
  File "/Users/user/workspace/project/browserengineering-code/browser.py", line 987, in new_tab
    new_tab.load(url)
    ~~~~~~~~~~~~^^^^^
  File "/Users/user/workspace/project/browserengineering-code/browser.py", line 773, in load
    self.document.layout()
    ~~~~~~~~~~~~~~~~~~~~^^
  File "/Users/user/workspace/project/browserengineering-code/browser.py", line 660, in layout
    child.layout()
    ~~~~~~~~~~~~^^
  File "/Users/user/workspace/project/browserengineering-code/browser.py", line 547, in layout
    child.layout()
    ~~~~~~~~~~~~^^
  File "/Users/user/workspace/project/browserengineering-code/browser.py", line 547, in layout
    child.layout()
    ~~~~~~~~~~~~^^
  File "/Users/user/workspace/project/browserengineering-code/browser.py", line 397, in layout
    max_ascent = max([word.font.metrics("ascent")
                      for word in self.children])
ValueError: max() iterable argument is empty

LineLayout에서 이런 에러가 나면 빈 리스트에서 최대값을 찾으려고 하기 때문입니다.

max_ascent = max(
    (word.font.metrics("ascent") for word in self.children),
    default=0
)

max_descent = max(
    (word.font.metrics("descent") for word in self.children),
    default=0
)

와 같이 기본 값을 줘서 해결할 수 있습니다.

5장. 페이지 레이아웃의 추가 설명

소혼 — Sat, 30 Aug 2025 16:21:40 +0900

5.1 레이아웃 트리

4장에서 만든 Layout 객체를 BlockLayout으로 바꾸고 DocumentLayout을 통해 BlockLayout들을 만들어가는 것이 목표입니다.

5.1의 코드만 수정한 후 실행이 되려면 다음과 같은 코드가 추가로 필요합니다.

@@ -210,7 +216,7 @@ class Layout:
         self.size = 12
 
         self.line = []
-        self.recurse(tree)
+        self.recurse(self.node)
         self.flush()

@@ -286,7 +303,9 @@ class Browser:
     def load(self, url):
         body = url.request()
         self.nodes = HTMLParser(body).parse()
-        self.display_list = Layout(self.nodes).display_list
+        self.document = DocumentLayout(self.nodes)
+        self.document.layout()
+        self.display_list = self.document.children[0].display_list
         self.draw()
 
     def draw(self)

self.display_list 를 변경하는 것은 5.5장까지 진도를 나가면 paint_tree를 통해 순회하는 방법이 등장합니다.

단순링크: 웹개발의 역사

소혼 — Fri, 22 Aug 2025 10:58:01 +0900

책 내용과 비슷하지만, 조금 다른 부분들도 소개한 웹 개발의 역사

https://ppss.kr/archives/257673

비전공자도 이해할 수 있는 웹 개발의 역사

동영상이나, 음성 따위의 각종 멀티미디어를 이용하는 인터넷을 이르는 말. = 월드 와이드 웹. 국립국어원 표준국어대사전 시작하며 요즘 글이 뜸했습니다. 사실 뉴스레터 서비스가 유료로 전

ppss.kr

DuckyPy 설치시 externally-managed-environment

소혼 — Sat, 19 Jul 2025 10:45:42 +0900

brew install pipx
pipx install dukpy

project % python3 -m pip install dukpy
error: externally-managed-environment

× This environment is externally managed
╰─> To install Python packages system-wide, try brew install
    xyz, where xyz is the package you are trying to
    install.
    
    If you wish to install a Python library that isn't in Homebrew,
    use a virtual environment:
    
    python3 -m venv path/to/venv
    source path/to/venv/bin/activate
    python3 -m pip install xyz
    
    If you wish to install a Python application that isn't in Homebrew,
    it may be easiest to use 'pipx install xyz', which will manage a
    virtual environment for you. You can install pipx with
    
    brew install pipx
    
    You may restore the old behavior of pip by passing
    the '--break-system-packages' flag to pip, or by adding
    'break-system-packages = true' to your pip.conf file. The latter
    will permanently disable this error.
    
    If you disable this error, we STRONGLY recommend that you additionally
    pass the '--user' flag to pip, or set 'user = true' in your pip.conf
    file. Failure to do this can result in a broken Homebrew installation.
    
    Read more about this behavior here: <https://peps.python.org/pep-0668/>

note: If you believe this is a mistake, please contact your Python installation or OS distribution provider. You can override this, at the risk of breaking your Python installation or OS, by passing --break-system-packages.
hint: See PEP 668 for the detailed specification.

뭔가 영어로 에러가 한 가득 나옵니다.

한마디로 말하면:

"시스템 전체에 직접 pip로 패키지를 설치하려고 했는데, macOS의 Homebrew Python에서는 이를 막고 있어요."

입니다.

해결방법은 3가지중 첫번째를 추천합니다.

1. 가상 환경 사용하기

python3 -m venv venv
source venv/bin/activate
python3 -m pip install dukpy
...

2. pipx로 설치하기

brew install pipx
pipx install dukpy

3. 강제 설치하기

python3 -m pip install --break-system-packages dukpy

PEP668이 궁금하시면 아래 링크에서 보실 수 있습니다.
https://peps.python.org/pep-0668/

PEP 668 – Marking Python base environments as “externally managed” | peps.python.org

A long-standing practical problem for Python users has been conflicts between OS package managers and Python-specific package management tools like pip. These conflicts include both Python-level API incompatibilities and conflicts over file ownership.

peps.python.org

[책] 인공지능, 주식분석 좀 부탁해

소혼 — Tue, 15 Jul 2025 23:37:35 +0900

서평단에 신청해서 당첨?되었습니다.

일단 제가 생각한것과는 많이 다르네요. 어떤걸 기대했던걸까 생각해보면 이 책이 최선이 아닌가 싶기도 합니다.
프로그래밍과 주식 두가지 분야를 다루는 책인데, 둘 모두에 있어서 입문자의 관점에서 시작하는 책으로 생각됩니다.

1장은 파이썬의 기본 문법을 아주 간략하게 소개하고 있습니다.
뒷부분에서 필요한 최소한의 파이썬 문법인듯 합니다.

2장은 실제 주식발굴을 위해 웹페이지에서 데이터를 긁어와 주식을 선별합니다.

3장은 2장과 비슷한데, 차트를 파이썬으로 분석하고 있습니다.

4장은 머신러닝을 이용해 기술적분석을 하는 파이썬 스크립트를 보여주고 있습니다.

어떻게 보면 한권으로 다룰 수 없는 방대한 양을 샘플 중심으로 다룬 책이란 생각이 듭니다.
저에겐 1장은 아주 쉽고 2장도 쉬운편이지만, 뒤로 갈수록 시간을 들여 봐야겠다는 생각이 들었습니다.
이걸로 주식 투자의 고수가 되진 못하지만, 이걸 이해하고 나면 이렇게 접근하면 주식찾는데 도움을 받을 수 있겠구나 하는 인사이트를 얻었습니다.

서평을 쓰기엔 이 코드를 다 직접 다뤄보기엔 시간이 걸릴듯 합니다. 시간을 두고 따라 해볼 생각입니다.

언젠가 이걸로 좋은 주식을 발굴해보면 좋겠다는 생각이 들었습니다.

브라우저 개발자 모임

소혼 — Thu, 5 Jun 2025 21:23:57 +0900

[스크랩] 좋은 개발자의 특징

소혼 — Mon, 14 Apr 2025 09:35:24 +0900

https://news.hada.io/topic?id=20244

내가 아는 최고의 개발자들이 공통적으로 가진 특성 | GeekNews

저자는 다양한 개발자를 만나면서, 최고의 개발자들이 가진 공통된 특성에 대해 고민하게 됨이 글은 초보 개발자나 성장하고 싶은 사람들에게 영감을 주기 위해 작성된 관찰 기록임레퍼런스 문

news.hada.io

공감가는 좋은 글이라 스크랩해둡니다.

저자는 다양한 개발자를 만나면서, 최고의 개발자들이 가진 공통된 특성에 대해 고민하게 됨
이 글은 초보 개발자나 성장하고 싶은 사람들에게 영감을 주기 위해 작성된 관찰 기록임

레퍼런스 문서를 먼저 읽을 것

Stack Overflow나 LLM을 먼저 찾기보다는 공식 문서를 먼저 읽는 습관을 들이는 것이 중요함
Apache, Python, TOML 등의 공식 문서는 실제로 꽤 잘 작성되어 있음
소스에서 직접 배우는 습관은 장기적으로 큰 도움이 됨

도구를 깊이 이해할 것

도구를 ‘사용’할 줄 아는 것과, 그것을 ‘이해’하는 것은 다른 수준임
도구를 잘 아는 사람은 설정 하나하나를 설명할 수 있음
잘 이해하려면 도구의:
- 역사 (왜 만들어졌는가)
- 현재 (누가 관리하는가)
- 한계 (언제 안 맞는가)
- 생태계 (주변 도구, 라이브러리 등)
  를 모두 파악하고 있어야 함
Kafka 등을 주력으로 쓴다면, Reddit에서 본 수준 이상으로 알고 있어야 함

에러 메시지를 꼼꼼히 읽을 것

에러 메시지를 곰곰이 들여다보면 힌트가 담겨 있음
최고의 개발자는 적은 정보만 보고도 문제를 추론함
문제의 80%는 에러 메시지만 잘 봐도 해결 가능함

문제를 잘게 나눌 줄 알 것

막히는 건 누구나 겪는 일이고, 잘게 나눌 수 있어야 풀 수 있음
경험이 많거나, 문제 해결 능력이 뛰어난 사람은 쉽게 나눔
개발자의 핵심 업무는 결국 큰 문제를 작은 문제로 나누는 작업임
단순한 문제들을 차근차근 풀면 전체 문제도 해결됨

두려움 없이 코드를 다룰 것

최고의 개발자들은 코드 읽기를 두려워하지 않음
“그건 내 영역이 아니야” 같은 말 없이 그냥 시도하고 배움
처음 다룬 코드도 금세 팀 내 전문가가 되는 경우가 많음

항상 다른 사람을 도울 것

바쁜 와중에도 도와주는 개발자는 좋은 팀원이자 훌륭한 전문가임
호기심과 협력적인 태도는 좋은 개발자의 필수 자질임

글을 쓸 것

뛰어난 개발자는 말도 잘하고, 생각을 글로 풀 줄 앎
블로그, 발표, 오픈소스 활동 등으로 생각을 나눔
글쓰기 능력은 사고의 구조와 직접적으로 연결되어 있음
잘 쓰는 사람의 코드는 구조적이고, 명확하고, 때론 재치있음

배움을 멈추지 말 것

나이와 상관없이 계속 배우는 사람이 진짜 뛰어난 개발자임
새로운 도구나 언어를 시도하는 것에 거리낌이 없음
최신 기술을 맹목적으로 따르지 않고, 장단점을 스스로 분석할 줄 앎
젊은 나이에도 고정관념에 빠지면 성장이 멈춤

지위에 연연하지 말 것

좋은 개발자는 직책과 상관없이 누구에게나 배움을 구함
신입에게도 배울 게 있다는 태도를 가짐
새로운 시각을 가진 사람들과의 대화에서 영감을 받음

명성을 쌓을 것

실력도 중요하지만, 실력을 알려지는 것도 중요함
명성은 영향력을 넓히는 수단임
다음과 같은 방법으로 명성을 쌓을 수 있음:
- 중요한 서비스를 직접 만들거나 배포함
- 잘 알려진 도구를 개발함
- 유명한 오픈소스에 기여함
- 자주 인용되는 책을 씀
명성은 하루아침에 쌓이지 않으며, 꾸준한 노력과 시간이 필요함

인내심을 가질 것

사람과 컴퓨터 모두에게 인내심이 필요함
주변 사람은 바보가 아니라 정보가 부족한 것일 뿐임
인내심 없으면 쉽게 불만이 쌓이고 협업이 어려워짐
어려운 문제를 해결하려면 집중력과 끈기가 필요함

컴퓨터를 탓하지 말 것

최고의 개발자는 절대 시스템이나 외부 요인을 탓하지 않음
겉보기엔 무작위로 보이는 문제도 논리적인 이유가 있음
원인을 찾기 위해 끝까지 파고드는 태도가 중요함

“모르겠습니다”를 말할 줄 알 것

인터뷰에서 일부러 “모르겠습니다”를 말하는 순간을 기다린 적 있음
중요한 건 답이 아니라 태도임
최고의 후보는 모른다고 인정하고, 추론을 시작함
모른다고 인정하는 태도는 학습 가능성을 보여줌
거짓말하거나 아는 척하는 사람은 팀에 부정적임

추측하지 말 것

PEP 20의 철학처럼, 모호할 땐 절대 추측하지 말 것
추측의 위험:
- 틀리면 버그
- 맞아도 잘못된 전제를 믿게 되어 나중에 문제 유발
확신이 없으면:
- 질문하고
- 문서 읽고
- 디버깅 도구를 쓰고
- 근거를 찾아야 함

단순하게 유지할 것

똑똑한 사람은 똑똑한 코드를, 훌륭한 사람은 단순한 코드를 씀
단순한 코드가 유지보수에 훨씬 유리함
복잡함이 필요한 상황과 아닌 상황을 구별할 줄 알아야 진짜 실력임

마무리 생각

이 글은 체크리스트가 아니며, 훌륭한 엔지니어링은 경쟁이 아님
단, 어려운 작업을 건너뛸 수 있다고 스스로를 속이지 말 것
훌륭한 개발자가 되는 길에 지름길은 없음

[책] 모두를 위한 소프트웨어 보안 설계와 구현

소혼 — Wed, 12 Feb 2025 15:52:15 +0900

이전 직장 상사였던 김영기 멘토님께서 번역하신 책입니다.

지금 진행중인 책 번역때문에 이제서야 겨우 훝어보았습니다.

그런데, 책 내용이 저에게 정말 필요한 내용이네요.

현재 팀에서 보안과 관련된 일을 하고 있어서 더 그런 듯 합니다.

그래서 보안팀 분들과 일을 자주하고 있는데, 항상 궁금했습니다.

개발자가 아닌 보안 엔지니어가 되신 분들은 어떤 지식을 갖춰야 하는 거지?

이 책에 그 답이 보였습니다.

어차피 대부분의 지식은 인터넷을 통해 찾아볼 수 있지만, 우리가 무엇을 찾아야 하는지를 아는 것은 다른 문제입니다.

이 책은 단순한 코딩 가이드나, 안티패턴같은 걸 다루는게 아니라, 보안을 위해 다뤄야 할 거의 모든 내용을 A-Z까지 다루는 듯 합니다.

그래서 어쩌면 (앞부분은) 원론적이고 학술적인 내용조차 담고 있긴 하지만, 보안에 대한 기초가 부족한 저로서는 보안팀에서 일하는 분들이 하셨던 일련의 업무들이 이해가 되고, 그 분들이 무엇을 하는 지 감을 잡을 수 있었습니다.

뒷부분은 실제 개발자들이 알아야 할 패턴들에 대한 내용도 담고 있어서 개발을 하는 사람들이라면 다 읽어봐야 할 책이 아닌가 하는 생각이 들었습니다.

지금 제가 번역중인 책 작업으로 인해 꼼꼼히 읽지 못했지만 두고두고 몇번을 정독해야 할 책 리스트에 한권이 추가해두려고 합니다.

[1DayTip] 브라우저 자동로그인 기능의 문제점

소혼 — Fri, 22 Mar 2024 19:05:10 +0900

이제 비밀번호가 다양해지고 복잡해지니, 사이트마다 어떤 비번을 설정했는지 기억이 안나는 경우가 많습니다.

그런데 최근 이런 기사가 나왔습니다.

https://n.news.naver.com/mnews/article/001/0014551370?sid=105

KISA "브라우저 자동 로그인 쓰지 말라"…정보 탈취 범죄 급증

한국인터넷진흥원(KISA)은 최근 자동 로그인 기능을 악용한 계정 정보 탈취 범죄가 급증함에 따라 8일 과학기술정보통신부와 함께 브라우저 자동 로그인 기능에 대한 사용주의 권고를 발표했다.

n.news.naver.com

알다시피 요즘 사용하는 거의 모든 브라우저는 브라우저에 자동로그인이라는 기능을 제공합니다.

그리고 그 대부분의 브라우저는 크로미움 기반입니다.

크로미움은 오픈소스입니다. 그 오픈소스에서는 자동로그인 기능 구현이 이렇게 되어 있습니다.

1. 특정 파일에 암호화 키를 저장합니다.

2. 사용자의 비밀번호를 해당 암호화키로 암호화합니다.

따라서, 이 로직을 알고 있는 해커가 "사용자의 PC에 접근 수정할 수 있다면" 암호화 키도, 저장된 아이디/비밀번호도 모두 알아낼 수 있는 셈입니다.

만약 실수로라도 악의적인 해커의 이상한 프로그램을 설치하기만 하면 이 정보들을 모두 털리게 됩니다.

KISA에서 권고하는 정보는 아래에서 찾을 수 있습니다.

https://boho.or.kr/kr/bbs/view.do?bbsId=B0000127&nttId=71375&menuNo=205021

KISA 보호나라&KrCERT/CC

www.boho.or.kr

크롬 자동로그인 기능 끄는 법

크롬 자동로그인을 끄는 법은 간단합니다.
chrome://password-manager/settings 에 접속하여 아래 화면에서 비밀번호 저장여부

비밀번호 저장여부 확인을 끄면 됩니다.

엣지 자동로그인 기능 끄는 법

edge://wallet/settings 에서 동일하게 끌 수 있습니다.

웨일 브라우저의 경우에는 이 기능에 문제가 없습니다. (덜합니다.)
자동로그인을 쓰신다면 웨일 브라우저를 쓰면 좀 더 안전하다고 할 수 있겠습니다.

https://n.news.naver.com/mnews/article/014/0005154263?sid=105

브라우저 ‘자동 로그인’ 정보 탈취 우려 높아져‥"보안 기술 강화 필요"

최근 브라우저 자동 로그인 기능을 악용한 계정 정보 탈취가 늘어나고 있어 주의가 요구되고 있다. 개인정보 유출 등을 예방하기 위해 자동 로그인 기능 비활성화 등 사용자들은 자체 점검을 철

n.news.naver.com

웨일도 whale://password-manager/settings 에서 똑같이 기능을 끌 수는 있습니다만,
위와 같은 형태의 키 탈취보다는 조금 더 어려운 보안 수준을 갖고 있습니다.
(쉽게 말해 내부적으로 좀 더 보완했습니다.)

외부에 공개가 안된 로직을 이용하니 단순하 쉽게 탈취하긴 어려운 셈입니다.

(업데이트 25년)
최신 크로미움은 이 부분을 방어하는 AppBoundEncryption 기능을 추가로 제공하고 있습니다.
물론, 모든 경우에 적용되는 것은 아니고 윈도우즈의 일반적인 설치환경에서는 이 방식으로 암호화를 합니다.
앱별로 암호화를 따로 하는 방식으로 기존처럼 아주 쉽게 탈취할 수는 없을 듯 합니다.

다만, 이미 저장된 비밀번호들은 그대로 사용될 수 있습니다.

[1DayTip] 브라우저 탭과 히스토리 빨리 찾기 - Ctrl + shift + a

소혼 — Thu, 21 Mar 2024 07:47:21 +0900

얼마나 많은 탭을 열어두고 쓰시나요?

전 갈수록 탭이 많아 집니다.

이것보다 많이 열어둡니다.

탭을 닫는 것도 일입니다.

이런 일을 해주는 익스텐션도 있습니다.

하지만, 근본적으로 탭을 여러개 여는 습관부터 고쳐야겠죠.

새 탭을 열기전에 열려있는 탭이 있는지 찾아보면 어떨까요?

이때 사용하는 단축키가 ctrl + shift + a 입니다.

모던 브라우저들도 비슷한 UI가 뜨는 걸 볼 수 있습니다.

웨일	크롬	엣지	브레이브

열린 탭과 과거에 닫은 탭을 모두 보여줍니다.

옴니박스에 바로 입력하는 습관에서 ctrl + shift + tab 을 통해 탭 검색을 한 뒤에 없을 경우 ctrl+t (새탭) ctrl+n(새창)을 띄우는 건 어떨까요?

[1DayTip] 스타일없이 붙여넣기 - Ctrl + shift + v 아시나요

소혼 — Wed, 20 Mar 2024 10:23:46 +0900

요새 다크모드로 글을 많이 씁니다.

그런데 다크모드로 쓴 글을 웹의 Rich editor에 붙일때 검은색이 그대로 붙는 경우가 있습니다.
(무조건 그런건 아닙니다.)

이 html 파일을 ctrl + c 해서 ctrl + v 하면 어떻게 될까요?

ctrl + v 로 붙이면 이렇게 됩니다.

<body>이 글을 붙여넣으면?

</body>

ctrl + shift + v로 붙이면 이렇게 됩니다.

<doctype html>
<head><meta charset="utf-8"></head>
<body>이 글을 붙여넣으면?
</body>

차이가 바로 느껴지실 겁니다.

모든 프로그램이 ctrl + shift + v를 지원하진 않습니다.
아마 대부분의 모던 브라우저들은 지원할겁니다.

엑셀 같은 경우가 문제인데, 버전에 따라 지원하지 않는 경우가 있습니다.

이런 경우 ctrl + alt + v를 시도해보는 것도 방법입니다.
( ctrl + at + v 누른뒤 화살표키 아래 > 엔터)

원본 : ctrl+v : ctrl+shift+v

워드프레스에서 우편번호 오류창 해결하기

소혼 — Tue, 19 Sep 2023 19:18:18 +0900

[우편번호 서비스 로딩 오류] API 로딩시 허용되지 않은 파라미터가 감지되었습니다. 사이트 관리자(개발자)분께서는 가이드페이지( https://postcode.map.daum.net/guide )의 기본 사용법을 참고하시어 수정 부탁드립니다.

워드프레스로 이런 에러가 나는 경우 해결 방법

결론은 아래 정리했습니다. 과정을 음미하실분만 찬찬히 보세요.

오픈채팅에서 어떤분이 해결하려고 애쓰는 문제를 도와줬습니다.

전 워드프레스도 모르고 암것도 모르니 일단 인스펙터를 열어봅니다.

postcode.v2란 애가 문제가 있네요.

소스코드에서 얘를 찾아봤습니다.

kboard plugin에 아래와 같은 코드가 있습니다.

wp_enqueue_script('daum-postcode', '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js', array(), NULL, true);

이 코드로 구글링을 해서 아래와 같은걸 찾았습니다.

https://www.cosmosfarm.com/threads/document/51932

우편번호 서비스 에러발생. - Cosmosfarm

http://nexttile.kr/?page_id=500&mod=editor&pageid=1 해당페이지에서 주소검색 기능이 에러가 발생됩니다. [에러내용은 아래와 같습니다.] [우편번호 서비스] API 로딩시 허용되지 않은 파라미터가 감지되어

www.cosmosfarm.com

하지만 이걸로는 해결이 안되고, 관련 글들을 쭉 읽었습니다.

https://www.cosmosfarm.com/threads/document/64728

우편번호 API 오류문제 - Cosmosfarm

1. 정확한 제품 또는 플러그인 이름 코스모스팜 회원관리 2. 상세 내용 일주일 시험버전을 다운받아 설치하였는데 다음과 같은 에러가 발생합니다. 다른 우편번호 관련 플러그인은 사용하는게

www.cosmosfarm.com

캐시가 되서 그런것 같다고 합니다.

위 인스펙터에서 나온 결과를 보면 postcode에 이상한 값이 붙어 있습니다.

해당 사이트가 캐시 플러그인을 사용하나 봅니다.

캐시 플러그인이 뭐가 있는지 몰라서 워드프레스 캐시 플러그인들을 찾아보니 몇개가 나옵니다.

https://www.elegantthemes.com/blog/wordpress/best-wordpress-cache-plugins

9 Best WordPress Cache Plugins in 2023 (For Site Speed)

Caching is a great way to speed up your website, here are our top choices for WordPress Cache plugins in 2023.

www.elegantthemes.com

관련된 플러그인이 설치되었나 확인해봅니다.

수많은 플러그인 사이에서 찾았습니다.

Settings에 들어갑니다.

캐시탭이 있지만 별 세팅이 없습니다.

대신 FILE OPTIMIZATION에 들어가니 CSS와 JS의 처리방식이 있고 exclude가 있습니다.

Javascript 쪽에 postcode.v2.js를 넣고 저장합니다.

네 위 에러가 없어졌고 postcode.js의 url뒤에 뭐가 더이상 안붙게 되었네요.

카카오톡 오픈 프로필 만들기

소혼 — Tue, 16 May 2023 12:23:38 +0900

몇가지 방법이 있지만, 오픈 채팅방에서 만드는 법

오픈 채팅방 우상단 줄세개를 클릭합니다.

내 계정을 클릭합니다.

프로필 편집 클릭합니다.

새로운 오픈 프로필 만들기를 선택합니다.

적당한 이름을 적고 완료를 누릅니다.

업데이트 된 것을 확인합니다.

[책] 오늘도 개발자가 안 된다고 말했다

소혼 — Tue, 11 Apr 2023 23:39:36 +0900

책을 읽고 난 느낀점 정리

일단 뭐랄까 개발자가 뭔가 외계인도 아니고, 선망의 대상도 아닐진데 뭔가 다른 세상 사람인것처럼 대하는 글의 느낌이 매우 신선하게 다가왔다.

1. 어딘가 이상한 비전공자의 협업

기획자 김군의 협업

서비스 구조와 인체 구조의 닮은 점 중에서

이게 비유가 이상하다.

증상을 파악하고 처방을 한다는 부분은 인체(의학?)와 비슷하다는 건 어느정도 공감이 가는데,
위처럼 분류한 것은 오해의 소지가 많아 보인다.

"개발자끼리도 생각이 다르다" 중에서

사람이니까 당연히 서로 생각하는 바가 다른게 당연하다. 특히 뭐든 낙관적인 사람도 있고 비관적인 사람도 있다.
다만 개발에서 요청을 받아들일 때 기간과 가능성을 정할때는 그저 POC수준에서 구현하는 것인지, 아니면 실제 서비스로 써야 하는지에 따라 기간과 가능성이 정말 많이 달라질 수 밖에 없다.

그리고 이 부분에 대해서 개발자마다의 차이가 있으니 당연히 오랜 시간 함께 지내다보면 그 개발자가 어떤 성향인지 알게 되고 개발자의 성향에 맞는 대응이 생기는 것은 당연한 것 같다.

디자이너 김 양의 협업

과거에 psd 파일을 직접 받아서 잘라서 웹사이트를 만들던 시절이 실제로 있었다.

"직접 개발해볼 수 있지 않을까?라는 착각" 중에서

디자이너가 개발을 공부하는 것에 대한 부분이 나왔는데 십분 공감이 간다. 나는 구현을 생각하는 경향이 있다. 이 틀을 깨고 디자인과 개발을 나눠서 할 수 있다면 좋겠는데, 나는 개발 한번 배워 보는 건 어때요? 라고 말을 건넬때 정말로 개발을 해보라는 의미였는데, 구조를 이해하는 수준으로 배우란 의미로 생각한다는 것도 신기하다.

"우리가 협업을 할 수 있었던 이유" 에서

"무식하면 용감하다는 말이 있듯이 아무것도 몰랐기 때문에 개발자의 말에 더 경청할 수 있었고, 이해되지 않는 내용은 질문을 반복하면서 협업을 위해 알고 있어야 하는 정보가 무엇인지 빠르게 학습할 수 있었다. 이른바 소통하기 위해 소통을 했던 것이다."

나는 이 문장이 개발자와 아니, 거의 모든 다른 도메인과 협업해야 하는 사람들의 마음속에 담아야 할 핵심 문장이 아닌가 생각한다.

심지어 같은 개발자라고 하더라도 경청하는 마음과 배우는 마음으로 협업한다면 비록 문제를 해결하진 못해도 협업의 과정에서의 문제는 사라지지 않을까?

2. 온몸으로 느낀 개발자

세가지 유형의 개발자

- 안된다고 말을 달고 사는 개발자

1, 서비스 구조를 고려하지 않고 개발을 요청하는 경우

2. 안정성에 영향을 주는 개발 건을 요청하는 경우

3. 쌓인 일이 많을 때 개발을 요청하는 경우

이 세가지 만은 아닐것 같은데 중요한 세가지 지점같다. 네번째로 중요하지 않아 보이는데 만들기 어렵고(하기싫은) 경우가 있지 않나 싶다. 1번과 겹치는 것 같기도 하지만, 서비스 구조와 겹치지 않더라도 그냥 개발자가 만들기 싫은 경우도 있다고 생각한다. (개발자도 그냥 평범한 사람이고 게으른 사람도 많다. 나...)

- 무엇이든 가능하다고 말하는 개발자

1. 기능의 구현 가능 여부만 놓고 대답하는 경우

2. 자신의 업무만 한정지어 가능하다고 하는 경우

세번째가 빠진 것 같다. 경험이 적은 신입인 경우. 어느정도 경력이 쌓인 개발자가 무엇이든 가능하다고 말할리가 없다. 반대로 소프트웨어의 세상에서 불가능한것도 사실 없다. 단지 제한된 자원으로 가능하냐의 문제가 첫번째고, 그걸 내가 해야 한다는게 두번째이다.

누군가 사장을 제외하고 같은 급여로 52시간 일하던 이에게 120시간 일하라고 하면 그냥 네 하고 일할 사람이 얼마나 될까?

개발자에게 가능하다. 라는 대답은 나에게 그 의무가 부여되는 것과 같다. 그 무게를 알 수록 무엇이든 가능하다고 대답할 수는 없을 것이다.

- 대안을 제안하는 개발자

앞에서도 말했지만 많은 것들이 협업을 한다면 당연히 해야 할 일이라고 생각한다. 누군가의 의견에 안되요. 가 아니라 안되면 대안을 제시하는 것이 맞다. 개발자가 부정적으로 보이는 이유는 안된다에서 끝나는 경우가 많기 때문이 아닐까? 물론 대안을 제시한다는 것조차 언젠가부터 잘 생각하게 된다. 앞에도 말했지만 그 대안이 나의 의무가 된다.

그렇기 때문에 때론 그 일을 실제 개발하지 않을 동료 개발자나 개발팀장같은 사람이 필요해진다. 직접 구현을 하진 않으며 대안을 제안하는 협업능력을 갖춘 사람이다. 의무에 대한 부담없이 개발 가능성을 이야기할 수 있지 않을까?

협업을 잘하는 개발자

- 집요한 문제해결

- 비즈니스를 이해하는 눈

- 쉽게 말하는 소통의 기술

- 체계적인 업무 관리와 빠른 피드백

FE공부2 - 웹스토리보이님의 레이아웃02 영상

소혼 — Mon, 19 Dec 2022 23:28:56 +0900

https://www.youtube.com/watch?v=dNQZqNd_uUE

지난번 영상과 큰 차이가 없는 것 같네요

다만, overflow: hidden 에 대해 이야기를 하고 있습니다.

버그라고 이야기를 하고 있는데, 버그 아니라 표준입니다;;
(물론 웹 표준이 구현에 구겨 맞춰 만들어진 감이 있긴 합니다.)

https://www.w3.org/TR/CSS2/visuren.html#block-formatting

Visual formatting model

In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by: The visual formatting model does not specify all aspects of formatting (e.g., it does not s

www.w3.org

CSS 2.1 표준을 보면,

"Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents."

overflow가 visible이 아닌, block은 새로운 block formatting context를 만듭니다..

그럼 container 의 height는 지정하지 않으면(auto) 어떻게 계산될까요?

https://www.w3.org/TR/CSS21/visudet.html#root-height

Visual formatting model details

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows: In paged media, an absolutely positioned element i

www.w3.org

"In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:

If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.

Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.

In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not."

height가 auto일 때 block의 크기는 topmost 블럭이랑 bottommost 블럭이 결정합니다. 다만 float이 있으면 그만큼 늘어납니다.

따라서, overflow로 인해 새 block formating context가 시작되었고, 그 block formating context의 크기가 float을 포함했기 때문에 해당 block formating context의 크기가 float크기만큼 커져서 결정된 것입니다.

만약 overflow를 준 container block (영상에서 main) 에 height를 임의로 지정한다면, 다음 block은 float을 무시하지 않기 때문에 겹쳐 보이게 될 것입니다.

반면, clear는 현재의 block formating context이전의 float box와 연관되지 않게 하는 프로퍼티입니다.
따라서 main의 height를 지정하더라도 겹쳐 보이지 않게 됩니다.

FE공부1 - 웹스토리보이님의 레이아웃01 영상

소혼 — Thu, 15 Dec 2022 00:24:32 +0900

https://www.youtube.com/watch?v=qnwa6I5WosI

"[레이아웃01] 사이트 만들기 프로젝트1 - float, flex, grid 레이아웃 유형별 연습하기" 라는 제목을 갖고 있는데,
내용은 레이아웃 만져보기 정도였습니다.
그래도 궁금한건 직접 찾아서 공부해보면 되서 나쁘지 않았습니다.

언급된 내용들 중 중요하다고 생각되는 것들을 기초적으로만 정리해보면 다음과 같습니다.

- float https://developer.mozilla.org/ko/docs/Web/CSS/float

CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.

- clear https://developer.mozilla.org/ko/docs/Web/CSS/clear

clear CSS 속성은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다.

- media query https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

@로 시작
어떤 CSS를 미디어의 유형에 따라 선택적으로 사용하고 싶을 때 사용
영상에서 screen 생략 가능하다 이런 이야기가 있는데, 이건 틀린 이야기일 겁니다.
print media가 큰 의미가 없어졌긴 합니다만, print 화면을 다르게 출력하려고 한다면 해당 값을 이용해야 합니다.

media type : all screen print
media feature : min-width max-width color orientation ...

and 나 or로 묶을 수 있음 , 로 여러개 쓸 수 있음

- flex https://developer.mozilla.org/ko/docs/Web/CSS/flex

CSS가 엘리먼트들을 배치(layout)하는 방법들 가운데, 기존의 block 이나 inline 외에 도입한 방법입니다.
기존의 보통흐름을 위해 사용되던 block과 inline과 달리, 자식을 어떻게 배치할지를 지정합니다.

flex의 기본은 자식들을 배치하는 방향입니다. 영상에서는 기본 방향 row에 flex-wrap을 사용했습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout

flex 관련 잘 정리된 글 : https://studiomeal.com/archives/197

- grid

flex처럼 자식을 어떻게 배치할지를 정하는데, 테이블레이아웃처럼 2차원으로 배치하기 위해 만들어진 방법입니다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout

grdi 좀 어렵지만 정리된 글 : https://studiomeal.com/archives/533

ninja 빌드시 반복적으로 gn이 호출됨

소혼 — Tue, 8 Nov 2022 11:02:09 +0900

원인을 모르게 gn이 반복적으로 호출됨

-d explain 옵션을 주고 실행해보니 시간 정보가 바뀌지 않았다.

ls로 해당 파일을 확인해보니 시간 정보가 이상함

drwxrwxr-x 265 ryuan ryuan 28672 11월 3 14:17 .
drwxrwxr-x 27 ryuan ryuan 4096 11월 2 15:46 ..
-rw-rw-r-- 1 ryuan ryuan 406205 11월 3 2022 BUILD.gn

파일 지우고 다시 받으니 괜찮음.

이것때문에 한참 삽질했다;

[Crawling] BeautifulSoup 예제

소혼 — Thu, 11 Aug 2022 09:59:37 +0900

오픈 채팅방에서 Beautiful soup 예제에 대한 설명을 원하는 분이 계셔서 간단히 공부하고 작성해 봅니다.
(BeautifulSoup 처음 써봄)

BeautifulSoup은 HTML/XML 데이터를 가져와서 간단히 파싱을 해서 보여주는 python 라이브러리입니다.
https://www.crummy.com/software/BeautifulSoup/bs4/doc/

PIP로 설치할 수 있습니다. https://www.crummy.com/software/BeautifulSoup/bs4/doc/#installing-beautiful-soup

간단한 예제는 다음과 같습니다.
이 블로그의 목록을 가져와 제목과 요약을 출력해보았습니다.

import requests
from bs4 import BeautifulSoup

headers = {'User-Agent' : 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.141 Safari/537.36'}
data = requests.get('https://bunhere.tistory.com/',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

articles = soup.select('.area-main > .area-common > article')
for article in articles:
    title = article.select_one('.title')
    summary = article.select_one('.summary')
    print(title.text, summary.text)

코딩을 거의 모른다고 전제하고 하나씩 설명해 보겠습니다.

처음 두 줄은 python에서 외부 라이브러리(또는 모듈)를 가져오는 부분입니다.
우리가 직접 작성하지 않은 코드들을 가져와 사용하고 싶을 때 파이썬에서는 import라는 키워드를 사용합니다.

첫번째 줄은 requests라는 외부모듈을 가져옵니다. 이걸로 네트워크를 통해 웹페이지를 가져올 겁니다.
두번째 줄은 bs4 라는 외부 모듈에서 BeautifulSoup을 가져옵니다. 부분적으로 가져오기 위해 from 이라는 키워드를 사용했습니다.

그 다음 코드 블럭 4-5줄은 네트워크를 통해 html을 가져오는 부분입니다.
requests라는 모듈은 get이라는 함수를 가지고 있습니다. 웹에서 어떤 정보를 요청하는 가장 기본적인 두가지 메소드(get과 post)중 get을 이용해 웹페이지 정보를 가져오는 일을 수행합니다.

우리가 브라우저를 통해 주소를 전달할때 브라우저는 주소외에 다른 정보들을 추가로 전달합니다.
이 것을 request header라고 합니다.

브라우저의 인스펙터를 통해 Request header 정보를 볼 수 있습니다.

이렇게 전달된 request header 정보들은 url과 함께 웹서버가 적절히 판단하여 결과를 보내주게 됩니다. 이 중 웹 서버들이 확인하는 주요 정보중 하나인 User-Agent는 이 요청이 누구에게서 왔는지 알려주는 역할을 수행합니다.

브라우저에서 요청한 것처럼 해야 하기 때문에 유명한 브라우저의 User-Agent 정보를 임의로 하나 header에 넣어 전달하였습니다.

7줄은 beatiful soup을 객체를 만듭니다.
requests 모듈의 get 함수를 통해 받은 html data를 넘겨주고, html.parser를 사용할 것을 선언합니다
https://www.crummy.com/software/BeautifulSoup/bs4/doc/#making-the-soup

그 뒤로 beautiful soup을 이용하여 html의 특정 요소들의 내용을 찾아 꺼내와야 합니다.

이것을 수행하려면 html 과 CSS 선택자에 대해 이해가 필요합니다.

일반적으로 웹 페이지는 HTML, CSS, JavaScript 이렇게 세가지 요소로 이루어져 있습니다.
크롤링을 위해 꼭 필요한 기본 적인 정보만 설명해보겠습니다.

HTML은 hypertext markup language의 줄임말로 HTML 파일은 HTML 태그라고 불리는 마크업들을 텍스트 문서로 나열한 것입니다.
태그들은 <body> ... </body> 와 같이 대체로 여는 태그와 닫는 태그로 구성되어 있습니다.
이 태그들을 중첩해서 웹페이지가 담으려는 정보들의 구조를 잡게 됩니다.
크롤링을 위해 알아야 하는 HTML의 또 다른 중요한 요소는 어트리뷰트(attribute)입니다. 어트리뷰트는 태그에 추가적인 속성을 제공합니다. 그렇게 제공되는 속성 가운데 id와 class가 크롤링을 위해 많이 사용됩니다.
id ( https://www.w3schools.com/html/html_id.asp )는 특정 태그를 유일하게 구분할 수 있게 해주며,
class ( https://www.w3schools.com/html/html_classes.asp )는 특정 태그들의 묶음을 구분할 수 있게 해줍니다.

<body> ... <a href="..." id="link_axxx" class="title">인터넷 익스플로러</a> ... </body>

위 예제에서는 a 태그중에 id가 link_axxx class가 title인 값을 보여주고 있습니다. 이 페이지에서 id가 link_axxx인 값은 위 태그말고는 없어야 합니다.(가끔 잘못 만드는 경우 있을 수 있습니다만 오동작할 가능성이 있습니다.) 반면, class가 title인 다른 태그들은 여럿이 있을 수 있습니다.

CSS는 cascading style sheet의 줄임말로 HTML 파일에 스타일(화면에 어떻게 표시되어야 할지)을 제공해줍니다.
이를 위해 CSS의 중요한 요소는 지금 크롤링을 위해 필요하지 않아 생략하고 크롤링에서 사용되는 요소는 CSS 선택자입니다.

CSS 선택자는 CSS가 HTML의 특정 태그 또는 태그들을 선택할 수 있도록 하는 CSS의 문법입니다.
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

CSS 선택자 - CSS: Cascading Style Sheets | MDN

CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.

developer.mozilla.org

자세한 내용은 위 문서를 꼼꼼히 읽어보시길 추천드립니다.

CSS 선택자 가운데 위에서 이야기한 id는 #을 붙여서, 클래스는 .을 붙이면 됩니다.
위 예제에서 #link_axxx 를 하거나 .title을 사용하면 위 a 태그가 선택될 것입니다.

크롤링을 하려면 웹페이지가 HTML 태그들과 어트리뷰트들을 어떻게 쓰고 있는지 분석이 필요합니다.

이를 위해 브라우저를 띄워서 인스펙터를 실행해보겠습니다.
인스펙터는 크롬/웨일 기준 Ctrl + Shift + i 또는 F12를 누르시거나 메뉴에서 개발자도구를 선택하시면 됩니다.

인스펙터의 이 버튼을 클릭하거나 Ctrl + Shift + C를 누르면 마우스가 이동하는 곳이 푸른색으로 변합니다.
아무글이나 선택해보면 다음과 같이 변합니다.

인스펙터 창이 Elements라는 항목으로 바뀌면서 HTML 태그들이 트리 구조로 보입니다.

대충 보면 이 페이지는 area-main이라는 클래스를 가진 div 태그 안에 area-common 클래스를 가진 div태그 안에 article이라는 태그들이 반복적으로 나타나는 것을 알 수 있습니다. (HTML tag 마지막을 보시거나 직접 실행해보세요)

따라서 코드의 9번줄에서는 beautiful soup의 select 함수에 .area-main > .area-common > article 라는 CSS 선택자를 전달해주었습니다.
A > B 는 CSS 선택자 가운데 A의 직접 자식들 중에서 B를 선택하도록 하는 선택자입니다.

결과로 반환되는 articles는 여러개의 article 태그집합을 가르키고 있을 것입니다.
article 내부를 보면 a 태그, article-content라는 클래스를 갖는 div 태그가 있고 그 div 태그 내에 title이라는 클래스를 갖는 strong태그가 제목을, summary 클래스를 갖는 p 태그가 요약을 가지고 있습니다.

for loop를 만들어 각각의 article 태그 집합을 순회하며 select_one 함수를 이용해 해당하는 값들을 꺼내 출력해주면 제목과 요약 정보들을 크롤링하는데 성공한 것을 볼 수 있습니다. (아래는 보기 좋게 하려고 제목만 출력했습니다.)

인터넷 익스플로러 종료 미리하기
[웨일] 모바일에서 전송한 url/사진 등이 PC에서 안보일때
chrome/whale등에서 파일 다운로드 안될때 확인
[초프만2022] 1. 안드로이드 스튜디오 설치하기
원격에서 듀얼부팅할때 순서 바꾸는 법
flutter 따라해보기 - 첫번째 앱 1
참조된 계정이 현재 잠겨있으므로 그 계정으로 로그온 할 수 없습니다
[C++] 소스코드에서 컴파일러 구분하기?
DART 대충 빠르게 훝어본 C++과 다른점
[C++11] std::enable_shared_from_this

인터넷 익스플로러 종료 미리하기

소혼 — Mon, 2 May 2022 11:04:33 +0900

올해 6월부터 인터넷 익스플로러 사용이 종료됩니다.

MS에서 이걸 미리 적용할 수 있는 방법을 제공하고 있는 것 같습니다.

https://docs.microsoft.com/ko-kr/deployedge/edge-ie-disable-ie11

Internet Explorer 11 사용하지 않는 경우

Internet Explorer 11을 사용하지 않도록 설정하고 Microsoft Edge에서 Internet Explorer 모드를 사용하는 방법을 알아봅니다.

docs.microsoft.com

https://www.microsoft.com/download/details.aspx?id=103124&msclkid=eae4a72fb1fb11ecb97ca3096b36cc06

Download Administrative Templates (.admx) for Windows 10 May 2021 Update (21H1) from Official Microsoft Download Center

Important! Selecting a language below will dynamically change the complete page content to that language. Download This page provides the complete set of Administrative Templates (.admx) for Windows 10 May 2021 Update (21H1) Details Administrative Template

www.microsoft.com

1. 여기서 윈도우즈10 관리 템플릿을 받아 설치합니다.

2. 윈도우즈 버튼을 누르고 "그룹정책편집" 을 검색하여 실행합니다.

3. 컴퓨터 구성 > 관리 템플릿 > Internet Explorer 를 선택합니다

4. Internet Explorer 11을 독립 실행형 브라우저로 사용 안함 을 사용합니다.

5. Internet Explorer가 edge만 실행되는 것을 확인할 수 있습니다.

[웨일] 모바일에서 전송한 url/사진 등이 PC에서 안보일때

소혼 — Fri, 18 Mar 2022 14:17:35 +0900

웨일이나 네이버앱을 사용하면 공유기능에 "PC로 보내기" 또는 "웨일로 보내기" 기능이 있다.

개인적으로 좋아하는 기능인데, 가끔 전송이 안될떄가 있다.

그러면 해당 PC의 whale://sync-internals/ 에 들어가 본다.

오른쪽에 Trigger GetUpdates를 누르면 전송되는 것을 볼 수 있다.

chrome/whale등에서 파일 다운로드 안될때 확인

소혼 — Thu, 10 Feb 2022 15:40:26 +0900

갑자기 파일 다운로드가 안되는데 원인을 알 수가 없었다.

그래서 histograms을 봤다.

( chrome://histograms 또는 whale://histograms )

이제 아래 사이트에 들어가서 저 문자열 (Download.CancelReason)을 검색한다.

https://source.chromium.org/chromium

첫번째를 보면 객체가 DownloadCancelReason. DownloadCancelReason으로 다시 검색을 해야 나올것 같으니 다시 검색하면 아래와 같은 enum이 나온다.

enum class DownloadCancelReason {
  // Existed download path after download target determination.
  kExistingDownloadPath = 0,
  // Canceled due to download target determiner confirmation result.
  kTargetConfirmationResult = 1,
  // Canceled due to no valid virtual path.
  kNoValidPath = 2,
  // Canceled due to no mixed content.
  kMixedContent = 3,
  // Canceled due to failed path reservacation.
  kFailedPathReservation = 4,
  // Canceled due to empty local path.
  kEmptyLocalPath = 5,
  kMaxValue = kEmptyLocalPath
};

3은 MixedContent라 Cancel되었다.

그냥 url 복사해서 붙이니 다운로드가 되었다. ;

원격에서 듀얼부팅할때 순서 바꾸는 법

소혼 — Tue, 14 Sep 2021 10:09:44 +0900

#!/bin/bash
sudo grub-reboot 2
sudo reboot

일반적으로 윈도우즈, 리눅스 멀티부팅을 하면 리눅스가 1번, 윈도우즈가 3번이 된다.

이걸 이용해 리눅스에서 윈도우즈로 부팅이 가능할것 같다.
나는 16.04 쓰는데 위에 걸로 문제가 없었음.

혹시 안되면 아래 방법도 있다.

https://webnautes.tistory.com/512 에 더 자세한 정보가 있네.

- /etc/default/grub 에서 GROUP_DEFAULT=saved로 수정
- sudo grub-set-default 2

버전마다 다를 수 있을 것 같다.

16.04 이상은 이걸 써야 할듯

flutter 따라해보기 - 첫번째 앱 1

소혼 — Thu, 27 May 2021 00:11:14 +0900

설치하는 법 : https://flutter.dev/docs/get-started/install

따라하는 글 : https://flutter.dev/docs/get-started/codelab#step-1-create-the-starter-flutter-app

https://flutter.dev/docs/get-started/test-drive#create-app 을 따라 앱을 그냥 만들고 커밋 (https://github.com/bunhere/study/commit/2881e3a5e538a162f41e032a77db23cb64fab019)

lib/main.dar가 존재

아래 코드로 변경하고 웹으로 실행

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

정리(Observations)

* Material 앱이란다. 플러터는 메테리얼위젯을 제공한다. 어쩌구. uses-material-design: true in flutter section of pubspec.yaml (false로 바꿔봤는데 딱히 아직 차이를 모르겠다.)

* main() 은 화살표(=>) 노테이션을 쓴다.

* 앱은 StatelessWidget을 extends한다. 앱 자체를 위젯으로 만든다. 플러터에서 거의 모든것이 widget이다.

* Scaffold 위젯은 appBar와 body를 갖고 있다.

* 위젯의 중요한것은 build()를 제공하는 것이다.

* body는 Text 위젯을 갖는 Center 위젯으로 이뤄져있다.

여기까지 하고 실행하면 아래와 같다.

https://github.com/bunhere/study/commit/8a1fae4ccf055fdf2b8562973bffb00714f5f373

Step 2 부분

pubspec.yaml 은 dependency등을 관리하는 파일인가보다.

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  english_words: ^4.0.0-0

english_words 를 추가하고 나면 상단에 이런 게 생긴다.

pub get을 클릭

제대로 가져왔으면 pubspec.lock파일에 english_words가 아래처럼 자동 생성되어 있다.

아래처럼 코딩한다.

diff --git a/project/flutter/hello/lib/main.dart b/project/flutter/hello/lib/main.dart
index 349bf01..0eafe0a 100644
--- a/project/flutter/hello/lib/main.dart
+++ b/project/flutter/hello/lib/main.dart
@@ -4,12 +4,14 @@
 // found in the LICENSE file.
 
 import 'package:flutter/material.dart';
+import 'package:english_words/english_words.dart';
 
 void main() => runApp(MyApp());
 
 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
+    final wordPair = WordPair.random();
     return MaterialApp(
       title: 'Welcome to Flutter',
       home: Scaffold(
@@ -17,7 +19,7 @@ class MyApp extends StatelessWidget {
           title: Text('Welcome to Flutter'),
         ),
         body: Center(
-          child: Text('Hello World'),
+          child: Text(wordPair.asPascalCase),
         ),
       ),
     );

아래처럼 나온다.

Step 3 Stateful widget 추가하기

Stateful widget과 Stateless widget으로 개념을 나눠둔거 정말 좋은 생각인것 같다.

Stateful widget 은 lifetime동안 바뀔 수 있는 상태를 관리한다고 한다.

그런데 Stateful widget은 State를 갖고 있다. Stateful widget 자체는 Stateless widget처럼 immutable 하고 버려지고 다시 만들어진다고 한다.

반면, State는 Widget의 수명에 걸쳐 유지된다고 하는데, 이 위젯이 자신을 가진 Stateful widget을 말하는건가? Stateful widget은 버려질 수 있다고 했는데 흠.. 아직 잘 모르겠다.

예제대로 RandowWords 라는 Stateful widget, _RandomWordsState라는 State를 만들자.

신기한게 제일 밑에다가 stful 입력하고 엔터치면 보일러플레이트 코드를 자동으로 완성해준다.

원글에는 따로 언급이 없는데 아래같은 코드가 생성되는데 그 중에 key 를 인자로 하는 생성자가 있다.

@@ -19,9 +18,24 @@ class MyApp extends StatelessWidget {
           title: Text('Welcome to Flutter'),
         ),
         body: Center(
-          child: Text(wordPair.asPascalCase),
+          child: RandomWords(),
         ),
       ),
     );
   }
 }

class RandomWords extends StatefulWidget {
  const RandomWords({Key key}) : super(key: key);

  @override
  _RandomWordsState createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

MyApp의 Scaffold에 RandomWords로 했으니 이 생성자의 key는 에러가 난다. 어떻게 고칠지 아직 모르니 그냥 삭제했다.

아직은 State가 뭘하는 것인지 모르겠다.

참조된 계정이 현재 잠겨있으므로 그 계정으로 로그온 할 수 없습니다

소혼 — Tue, 20 Apr 2021 19:18:08 +0900

요약: 네트워크를 통해 로그인 시도가 있었고 NLTM 보안레벨 올리고, 공격들어오는 계정명을 바꿔버림

추가로 windows 10 방화벽에서 원격데스크톱도 꺼버림

빌드를 걸어놓고 왔을 뿐인데, 로그인이 안되고 위와 같은 메시지가 뜬다.

리부팅을 해도 똑같음.

이 에러가 나는 이유는 비밀번호를 틀렸기 때문이나, 나는 로그인을 한 적이 없다.

그래서 이벤트 뷰어를 살펴봤다.

이벤트 뷰어

무수히 많은 로그인 실패 에러가 있다.

ADMINISTRATOR 계정으로 NLTM으로 공격이 들어온다.

일단 NLTM을 검색해봤더니 보안레벨을 올리는게 있어서 올려봤으나 공격은 계속 들어오네

* NLTM을 끄는 법

실행(windows키+R)을 통해 gpedit.msc를 실행

여전히 들어온다.

그래서 아예 Administrator 계정이름을 내 마음대로 바꿔버림 (같은 위치에 Administrator 계정 이름 바꾸기)

그래도 들어오긴 한다.

추가로 일단 Windows 원격 데스크톱도 끄기로 했다.

방화벽 및 네트워크 보호 선택

방화벽에서 앱 허용 선택

원격 데스크톱을 꺼버림

더이상 공격이 안들어옴

[C++] 소스코드에서 컴파일러 구분하기?

소혼 — Tue, 19 Jan 2021 21:56:58 +0900

원본 : https://quuxplusone.github.io/blog/2021/01/13/conversion-operator-lookup/

친구의 페이스북에 올라온 C++ 컴파일러 구분하기 란 글을 보았다.
역시 난 C++을 모르는듯 ㅎㅎ

여기서 핵심은 U 와 T가 무엇으로 lookup되어야 하는지를 정하는게 표준에 있는데
컴파일러가 제멋대로 구현했다는 것 같다.

U, T 모두에 대해서 gcc만 제대로 A scope으로 룩업한다고...

code link : https://godbolt.org/z/jo3dc4

struct T1 {}; struct T2 {};
struct U1 {}; struct U2 {};

struct A {
    using T = T1;
    using U = U1;
    operator U1 T1::*();
    operator U1 T2::*();
    operator U2 T1::*();
    operator U2 T2::*();
};

inline auto which(U1 T1::*) { return "gcc"; }
inline auto which(U1 T2::*) { return "icc"; }
inline auto which(U2 T1::*) { return "msvc"; }
inline auto which(U2 T2::*) { return "clang"; }

int main() {
    A a;
    using T = T2;
    using U = U2;
    puts(which(a.operator U T::*()));
}

C++ 문법을 한번 봐야겠다는 생각이 드네

DART 대충 빠르게 훝어본 C++과 다른점

소혼 — Tue, 19 Jan 2021 07:53:42 +0900

타입

num 타입 : int 타입 + double 타입인듯
float은 안보임

auto 같은 var
as 로 타입변환이 되는데 0.1이 int가 되진 못함

타입검사
if (a is int) {...}
if (a is! int) {...}

연산자 https://dart.dev/guides/language/language-tour#operators

~/ : 몫 연산자가 있음 아무래도 int 타입때문인듯

- null aware operators

?? : if null operator : null인지 체크

// prefs.getBool('some-feature') 가 null이면 false 아니면 prefs.getBool('some-feature')
bool v = prefs.getBool('some-feature') ?? false;

??= null aware assignment
?. null aware access
?... null aware spread operator [ Dart 2.3부터 ]

as, is, is! :

함수

print('hello ${person.name}')

함수의 선택 매개변수, 기본값
void something(String name, {int age = 10}) {}

클래스

class의 private은 _으로 시작
getter setter
int get age => _age;
set age => _age;
상속은 extends, abstract class는 implements, 상속하지 않고 가져오는 with
오버라이드할때 메소드앞에는 @override

PS, 더 있을 수 있습니다.

[C++11] std::enable_shared_from_this

소혼 — Tue, 6 Feb 2018 11:01:51 +0900

std::shared_ptr은 std::unique_ptr과 함께 C++11부터 사용 가능한 smart pointer 이다.

std::shared_ptr is a smart pointer that retains shared ownership of an object through a pointer.
(http://en.cppreference.com/w/cpp/memory/shared_ptr)

std::unique_ptr과 다른점은 ownership을 공유(shared)한다는 점이다.

std::shared_ptr 객체를 만들때 한가지 문제가 되는 부분이 있는데, 아래와 같은 상황이 발생하지 않도록 주의해야 한다는 점이다.

Bad* p = new Bad;
std::shared_ptr<Bad> a1(p);
std::shared_ptr<Bad> a2(p); // ERROR! you may want to write std::shared_ptr<Bad> a2(a1);

a1과 a2는 (같은 raw pointer p를 갖는) 서로 다른 스마트 포인터이기 때문에 위 코드는 런타임에 아래처럼 죽게 된다. (mac clang-900.0.39.2)

./a.out

a.out(16448,0x7fff8e2d2340) malloc: *** error for object 0x7fc73b400340: pointer being freed was not allocated

*** set a breakpoint in malloc_error_break to debug

Abort trap: 6

우리가 raw pointer 를 아예 안쓰면 모르지만, 아래와 같은 경우는 난감하다.

void func(BadOrGood* p) {
std::shared_ptr<BadOrGood> a(p);
...
}

T 를 구현할 때 std::enable_shared_from_this<T> 를 상속하면 T의 객체가 자신의 shared_ptr 객체를 알 수 있게 해준다.

class Good : public std::enable_shared_from_this<Good> { ... };
std::shared_ptr<Good> a(p.shared_from_this());

이렇게 enable_shared_from_this 를 상속받고, shared_ptr에 raw pointer를 넣을때는 shared_from_this() 를 통해 shared_ptr을 얻어서 호출하면 안전하다.

사실 아직 문제가 있는데

shared_ptr 객체를 만들지 않고 shared_from_this()를 호출하면 std::bad_weak_ptr exception이 발생한다.(C++17부터, 그전에는 undefined behavior)

그리고, 여전히 첫번째 예제(Bad)처럼 실수하면 죽는다.

이를 막기 위해서, 직접 new 를 못하게 막아 두고 shared_ptr 객체가 생성되도록 해야 한다.

class Good : public std::enable_shared_from_this<Good> {
public:
std::shared_ptr<Good> create() { return std::make_shared<Good>();};
private:
Good() = default;
};

[GIT] windows에서 invalid username (wincred)

소혼 — Tue, 18 Oct 2016 20:52:13 +0900

http://www.codewrecks.com/blog/index.php/2015/06/23/git-for-windows-getting-invalid-username-or-password-with-wincred/

만약 login이 귀찮아 wincred를 아래처럼 설정해서 썼다면, 비밀번호가 바뀌었을때 대략 난감해진다.

git config --global credential.helper wincred

이 상황에서는 제어판의 "자격 증명 관리자" 를 찾아 들어가 관련 repository와 관련된 것을 지워주고 다시 git 명령을 치면 된다.

[읽은 글] const correctness

소혼 — Tue, 18 Oct 2016 10:13:24 +0900

https://herbsutter.com/2013/05/24/gotw-6a-const-correctness-part-1-3/

https://herbsutter.com/2013/05/24/gotw-6b-const-correctness-part-2/

https://herbsutter.com/2013/05/28/gotw-6b-solution-const-correctness-part-2/

* 번역이 아니라 이해하고 정리한 내용입니다. 따라서 원 글의 의도가 전달되지 않을 수 있으며, 수정 될 수 있습니다.

[ ] https://herbsutter.com/2013/05/24/gotw-6a-const-correctness-part-1-3/

1. shared variable

Shared variable이란 하나 이상의 thread에서 동시에 접근할 수 있는 변수를 말한다.

2. shared variable의 관점에서 const 나 mutable이란?

const member function은 다음 두가지 중 하나를 반드시 만족해야 한다. (절대 공유되지 않는다는 가정이 있지 않는 한)

- 진짜로 const(truly physically/bitwise const). 다시 말해 객체의 어떤 데이터에도 write하지 않아야 한다.

- 내부적으로 동기화되어서 (예를 들어 mutex, atomic<> 등으로) 동시에 호출되더라도 문제가 없어야 한다.

비슷하게, 멤버 변수에 mutable 키워드를 쓴다는 것은 그 변수가 쓸 쑤 있지만 논리적으로는 const(writable but logically const) 임을 의미한다.

- 논리적으로 const란 여러 동시성 (const) 연산들로부터 안전하다는 의미이다.

- mutable이 붙어있다는 것은 어떤 const operation이 사실은 write할지 모른다는 뜻이고, 동시성을 갖고 읽고 쓰는데 문제가 없다는 의미이다. 따라서 mutex 나 유사한 동기화 로직 아니면 atomic<>으로 만들어야 한다.

따라서, mutex 와 mutable 을 같이 써야 한다. (또는 atomic<> 과 mutable)

3. c++98과 c++11에서 mutable과 const는 뭐가 다른가?

먼저 그전에...

이 내용을 정리하기 전에, const와 mutable에 대해 헷갈리게 했던 부분은 const_cast를 통해 수정하면 되지 왜 mutable을 써야 하지? 하는 점이었다.

예를 들면 아래 처럼...

#include <vector>

class Tile { ... };

class TileStore {
 public:
  Tile* getTile() const {
    if (empty_tiles_.empty()) {
      const_cast<TileStore*>(this)->ReserveMoreTiles();
    }
    // ...
    return //something;
  }
  void ReserveMoreTiles() {
    // ...
  }
 private:
  std::vector<Tile*> empty_tiles_;
};

먼저 아래 링크을 가져왔다.

http://stackoverflow.com/questions/11457953/const-cast-vs-mutable-any-difference

const_cast는 사실 대상 객체의 const 속성을 제거하는 것이 아니다. 대신 접근 경로(access path)상에 const 속성을 바꿔주는 것이다.

따라서 진짜 const 객체에 대하여 const_cast를 수행하는 것은 Undefined behavior를 야기할 수 있다.

  const int j = 5; // constant object
  const int *p = &j; // `p` is a const access path to `j`

  int *q = const_cast<int *>(p); // `q` is a non-const access path to `j`
  *q = 10; // UNDEFINED BEHAVIOR !!!

그럼 mutable은 뭘까? [1]

- mutable로 지정된 멤버는 외부에 노출된 클래스의 상태(the externally visible state of the class)에 영향을 받지 않는다.

- const 클래스의 mutable 멤버는 수정 가능하다.

- c++은 mutable을 storage-class-specifier로 취급한다.

mutable이 단순히 상수성을 제거한다는 생각을 했는데, 중요한 포인트중 하나는 class가 const여도 된다는 것이다.

즉,

* const_cast는 애초에 다루는 객체가 const이면 안된다.

* mutable은 다루는 객체가 const여도 modifable하다.

위에 적당히 만들어본 Tile & TileStore를 아래처럼 고쳐보았다.

#include <vector>
#include <stdio.h>


class Tile {
  public:
   int i;
};


class TileStore {
 public:
  Tile* getTile() const {
    if (empty_tiles_.empty()) {
      const_cast<TileStore*>(this)->ReserveMoreTiles();
    }


    return empty_tiles_[0];
  }
  void ReserveMoreTiles() {


    Tile* tile = new Tile();
    tile->i = 10;
    empty_tiles_.push_back(tile);
  }
 private:
  std::vector<Tile*> empty_tiles_;
};


int main() {
  const TileStore a;
  Tile* t = a.getTile();
  printf("%d\n", t->i);
  return 0;
}

이 동작은 undefined behavior이다. const 객체의 constness를 제거하는 로직이니까.

mutable로 empty_tiles_를 선언해야 맞는 것 같다.

결론적으로 const_cast는 위험하다! (const 객체 안쓴다고 확신할 수 있는가?)

PS. 하지만, QT 5.6으로 컴파일뿐 아니라 실행은 잘 된다. (undefined.... != crash)

3으로 다시 돌아가서....

C++98 single threaded code는 문제 없다. ( 왜 c++98 single threaded code라고 부르는지 모르겠다. )

C++98에서 우리는 const는 논리적인 const(logically const)이며, 물리적인/비트레벨의 const(phisically/bitwise)는 아니다라고 가르쳐왔다.

이제 C++11에서는 const란 read-only 또는 동시성을 고려해서 안전하게 읽을수 있음(safe to read concurrently)을 보장한다.(해야 한다.)

다시 말해 물리적인/비트레벨의 const이거나 내부적으로 동기화되어 어떠한 쓰기 동작도 concurrent한 read access들로부터 동기화되어야 한다.

요약해서,

const correctness 코드를 짜라.

const를 올바르게 사용하는 것은 올바르게 동기화된 코드를 위해 필요하다. 또 const는 그 자체로 "값을 수정하지 않겠다는" 훌륭한 문서이고 컴파일러가 더 나은 코드를 만드는 것을 도와준다.

cosnt 객체나 동작(메소드)에서 멤버를 수정해야 한다면 mutable을 mutex 또는 atomic과 함께 써라.

모든 상용 라이브러리들이 const correct하진 않다.

[ ] https://herbsutter.com/2013/05/28/gotw-6b-solution-const-correctness-part-2/

1. 함수를 선언할때 레퍼런스가 아닌 파라미터의 const는 의미 없다.

void a(const int);
void a(int); // same

void b(const int&);
void b(int&); // different

그러나 inline 함수는 선언과 정의가 같이 있으니까 적는게 의미가 있다.

2. 이항 연산자의 overload시 rhs는 const, lhs는 const가 아닌것이 좋다.

// 잘못된 예제 코드
polygon operator+( polygon& lhs, polygon& rhs ) {
    auto ret = lhs;
    auto last = rhs.get_num_points();
    for( auto i = 0; i < last; ++i ) // concatenate
        ret.add_point( rhs.get_point(i) );
    return ret;
}

lhs를 ret에 복사하고 있다.

결국 내부에서 한번의 객체 복사가 이뤄져야 하는데, 이 객체가 앞서 호출된 임시객체인 것이 유리할 수 있다.

예를 들어 x = a + b + c;

a + b를 수행하면서 생긴 ret객체를 다시 lhs로 받아서 c와 더하게 된다.

즉, 아래와 같이 하는 것이 비용이 적을 가능성이 있다.

polygon operator+(polygon lhs, const polygon& rhs) {
    // ...
    return lhs;
}

참조

[1] http://en.cppreference.com/w/cpp/language/cv

[C++11] std::function의 성능

소혼 — Fri, 29 May 2015 09:38:42 +0900

std::function의 성능이 생각보다 많이 느리다는 것을 알게 되었다.

test.cpp

ryuan@webkit:~$ g++ ./test.cpp --std=c++11 -O3 -DINTERFACE_VERSION
ryuan@webkit:~$ ./a.out
main:96] 8 elapsed
ryuan@webkit:~$ g++ ./test.cpp --std=c++11 -O3 -DINTERFACE_VERSION_NO
ryuan@webkit./a.out
main:96] 437 elapsed

못쓰겠네 -_-;

http://probablydance.com/2013/01/13/a-faster-implementation-of-stdfunction/

[Update]

Modern Effective C++ Item 5 에 따르면

std::function은 단순히 closure와 유사한 것이 아니라 모든 callable object를 담는 것으로...

추가적인 heap 메모리를 사용하는 것 같다.

위 예제를 auto로 바꿔서 테스트해봐야겠다.

[EFL] EWebKit Extension

소혼 — Tue, 23 Sep 2014 09:07:43 +0900

ewebkit (WebKit/Efl)은 최근 WebKit1 포트를 제거했습니다. 옛날 코드를 사용하지 않는다면, WebKit2만 사용이 가능한 셈입니다.

이 둘의 가장 큰 차이는 이전에 적었던 글에서도 이야기한 것처럼 단일 프로세스를 통해 실행되느냐, 멀티 프로세스 환경에서 실행되는가입니다.

따라서 사용자의 요청(예를 들어 url을 로드해라, resize해라)등은 프로세스간 통신(IPC)을 거쳐 웹 컨텐츠를 담당하는 WebProcess에게 전달됩니다.

그러나 이러한 IPC 메커니즘을 통해 처리하기 어려운 것들이 있습니다. 대표적인 것이 JavaScript binding입니다. JavaScript binding은 native 코드를 javascript interface로 컨텐츠에 추가하여 web page에서 해당 interface를 통해 native code를 수행할 수 있게 하는 방법입니다.

WebKit2에서 이러한 것들을 수행하기 위해서는 WebProcess에서 사용자의 코드들을 수행할 수 있어야 합니다.

이를 위해 Injected Bundle이라는 것을 WebKit2에서는 제공하고 있습니다.

그러나 Injected Bundle은 WebKit2의 인터페이스를 사용하고 있기 때문에, ewebkit은 이를 한단계 감싼 ewk_extension 을 제공합니다.

그림으로 보면 위와 같습니다.

EWebKit2_Extension을 쓰려고 하는 사용자는 EWebKit2_Extension을 이용하여 extension을 만들어야 합니다.

이 때, 반드시 "void ewk_extension_init(Ewk_Extension *extension)" 을 구현하여야 합니다.

또, user application 에서는 ewk_context_new_with_extensions_path()를 사용하여 자신이 작성한 extension 라이브러리의 path를 건네주어야 합니다.

ewebkit은 WebProcess를 실행(fork)할 때, WebProcess가 호출할 injected bundle, 즉 ewebkit_extension_manager의 위치와 사용자 extension의 위치를 같이 넘겨줍니다.

WebProcess는 실행 직후 ewebkit_extension_manager를 로드(dlopen)하고 extension_manager가 extension을 로드하면 extension을 쓸 준비는 끝나게 됩니다.

extension은 이후 WebProcess에 자신이 원하는 타이밍에 WebProcess로부터 콜백들을 받고 적절한 일(javascript binding같은)을 수행할 것이며, message를 이용하여 user application과 서로 통신하게 될 것입니다.

간단한 extension의 예제는 아래에 있습니다.

https://github.com/ewebkit/samples/tree/master/devs/ryuan/extensions

transparent ewebkit

소혼 — Wed, 30 Jul 2014 05:43:54 +0900

기존 글:

Hello, ewebkit

이번에는 ewk_view에 투명한 배경을 주는 예제를 소개할까 합니다.

기존의 예제(simple.c)를 약간 수정하는 정도의 예제입니다.

먼저 투명한 배경에 대한 설명을 하겠습니다.

일반적으로 웹 페이지는 웹뷰(ewk_view)의 전체 영역에 컨텐츠를 그리게 됩니다.

웹페이지는 body 태그의 배경을 이용하여 컨텐츠의 배경색을 갖게 되는데, 보통 다음과 같이 사용합니다.

### html
<!doctype html>
<!- no background -->
<body>HELLO</body>

### html
<!doctype html>
<body bgcolor="red">Hello, I am red background</body>

### html
<!doctype html>
<head><style>body { background-color: green; } </style></head>
<body>Hello, I am green background</body>

두번째와 세번째는 배경을 갖는 예제인 반면, 첫번째는 배경을 갖지 않는 예제입니다. 그러나 만약 첫번째 예제를 브라우저에서 실행한다면 흰 배경 위에 HELLO라는 글자가 적혀 있는 것을 보게 될 것입니다.

일반적으로 거의 대부분의 브라우저들은 기본 배경을 흰색으로 제공하고 있습니다.

그래서 웹 컨텐츠를 제작하는 대부분의 분들이 배경을 지정하지 않고 있습니다.

(

하지만 만약 흰 배경을 사용하지 않는 브라우저가 나타나면 어쩌실건가요? ㅡ.ㅡ

그리고, 특정 모바일 디스플레이들은 흰색일 때 배터리 소모가 극심합니다.

)

webkit도 기본 배경을 흰색으로 정하고 있지만, 다른 색을 쓰거나, 투명하게 그릴 수 있는 방법을 제공하고 있습니다.

ewebkit에서 관련 API는 ewk_view_bg_color_set 이라는 API가 존재합니다.

### c++
/**
* Sets the background color and transparency of the view.
*
* @param o view object to change the background color
* @param r red color component
* @param g green color component
* @param b blue color component
* @param a transparency
*/
EAPI void ewk_view_bg_color_set(Evas_Object *o, int r, int g, int b, int a);

각각의 color component들은 0 부터 255 사이의 숫자여야 합니다.

일반적으로 EFL에서는 evas_object_color_set이라는 API를 이용하여 evas object의 색을 지정했지만,

ewebkit에서는 alpha를 제외하곤 evas_object_color_set의 다른 인자들을 사실상 무시합니다.

이유는, evas_object_color_set의 alpha가 전체 컨텐츠의 opacity를 다루는 반면, ewebkit은 배경만의 opacity를 다루어야 하는 요구사항이 있기 때문입니다.

즉, evas_object_color_set은 evas_object 전체의 색을 조절하는 API로 ewebkit에서는 contents의 색은 contents가 지정해야 하기 때문에 RGB값은 무시됩니다. (현재)

ewk_view_bg_color_set 을 사용하는 예제는 아래와 같습니다.

https://github.com/ewebkit/samples/blob/master/devs/ryuan/transparent.c

### c++
// gcc transparent.cpp `pkg-config --cflags --libs elementary ewebkit2
#include <Elementary.h>
#include <EWebKit2.h>

void on_done(void *userData, Evas_Object *webView, void *eventInfo)
{
   elm_exit();
}

EAPI_MAIN int
elm_main(int argc, char *argv[])
{
   ewk_init();

   Evas_Object* win;
   win = elm_win_add(NULL, "sample", ELM_WIN_BASIC);
   elm_win_title_set(win, "sample");
   evas_object_smart_callback_add(win, "delete,request", on_done, NULL);
   elm_win_autodel_set(win, EINA_TRUE);

   Evas_Object* bg = elm_bg_add(win);
   evas_object_size_hint_weight_set(bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_bg_color_set(bg, 0, 0, 255);
   elm_win_resize_object_add(win, bg);
   evas_object_show(bg);

   Evas_Object* ewk = ewk_view_add(evas_object_evas_get(win));
   ewk_view_html_string_load(ewk, "<!doctype html><body>HELLO</body>", NULL, NULL);
   ewk_view_bg_color_set(ewk, 0, 0, 0, 0);

   evas_object_resize(ewk, 400, 400);
   evas_object_move(ewk, 0, 0);
   evas_object_show(ewk);

   evas_object_resize(win, 400, 400);
   evas_object_show(win);

   elm_run();

   ewk_shutdown();
}
ELM_MAIN()

배경 속성이 없는 web contents를 위해 url 대신 ewk_view_html_string_load를 이용했습니다.

그리고 ewk_view_bg_color_set 을 통해 ewk_view의 배경을 투명하게 만든 예제입니다.

위에서 elm_bg의 색을 blue로 했기 때문에 파란색 배경 위에 HELLO라는 글자가 적혀있어야 합니다.

만약 검은색으로 나온다면, ewebkit을 최신으로 빌드해보시기 바랍니다.

(최근 수정 :https://bugs.webkit.org/show_bug.cgi?id=135333)

추신. 현재 ewk_view_bg_color_set과 EFL 관련 버그가 하나 더 있는 것 같습니다.

만약 ewk_view_bg_color_set의 RGB요소에 값을 주고 alpha를 준 경우, elm_bg의 색과 blend되고 있습니다.

만약 투명한 웹뷰가 필요한 경우라면 RGB요소를 모두 0으로 주시기 바랍니다.

CSS pixel 이란 무엇인가?

소혼 — Fri, 25 Jul 2014 09:37:31 +0900

일반적으로 픽셀(pixel)은 아래처럼 설명할 수 있습니다.[1][2]

"In digital imaging, a pixel, pel,or picture element is a physical point in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen." (출처 : wikipedia)

흔히 TV/모니터는 얼마나 많은 픽셀을 표현하는지를 (display) resolution이라고 부르며 (물리적인) 픽셀로 처리합니다.[3]

( 해상도 관련 글 )

그래서 그동안 프로그래밍을 하는 과정에서 픽셀이라는 개념은 물리적인 스크린의 한 점과 같다고 생각해 왔습니다.

최근 모바일 (그리고 모바일 웹)에서 이러한 픽셀의 개념에 큰 혼란이 생겨 개인적으로 조사한 내용을 적으려고 합니다.

아이폰의 등장

2007년 초 아이폰과 이후 안드로이드의 등장으로 모바일 디바이스는 스마트폰(그전에도 존재했지만)의 세상이 되었습니다.

이들 스마트폰이 등장하면서 모바일 브라우저는 기존 웹 페이지를 '거의' 문제 없이 모바일에서 렌더링할 수 있게 되었습니다.

레티나 디스플레이의 등장

2010년 애플은 아이폰4에 레티나 디스플레이라는 화면 구성을 가져옵니다. 이는 기존의 아이폰 3에 비해 사실상 두배의 해상도를 갖는 디스플레이(640 x 960)입니다.

(사실 레티나 디스플레이에서 중요한 것은 DPI 로 특정 시야거리에서 기존의 160 ppi 의 두배인 326 ppi 를 만족한다는 의미로 레티나라고 불렀던 것으로 압니다.)

여기에서 한가지 문제점은 기존의 앱/웹페이지들이 320 x 480에 최적화 되어 있다는 것이었습니다.

이를 위해 애플은 웹의 경우 device pixel ratio 라는 요소를 가져왔습니다.

즉, device의 width는 320으로 놓고 대신 pixel ratio의 값을 2로 설정하도록 한 것입니다.

여기서 새로운 픽셀의 정의가 생겨나고 말았습니다.

웹페이지는 contents가 320픽셀이라고 생각하지만, 실제 물리적인 픽셀은 640픽셀인 것입니다.

다시 말해 우리가 width=100 px 의 DIV태그를 만들면 화면상에는 200px의 박스가 그려지게 됩니다.

안드로이드의 따라하기.

후발주자인 안드로이드는 어쩔수 없이 애플이 만들어놓은 컨텐츠를 잘 그리기 위해서 아이폰의 많은 부분을 그대로 차용하게 됩니다.

그래서 레티나급 디바이스에 대해 유사하게 2.0의 device pixel ratio를 사용하게 됩니다.

문제는 안드로이드는 정말 많은 디바이스가 존재하고 각 디바이스들이 전부 ppi가 달랐습니다.

target-density라는 개념을 통해 device 별로 테이블을 만들고 했지만, 문제는 간단하지 않았던 것 같습니다.

device pixel ratio는 아이폰의 의미와 약간 다르게 device의 ppi를 고려하여 1.5 2.0 3.0등 다양한 값을 갖게 되었습니다.

여기서, 이 값이 실제 1.0 일 때의 ppi에 정확히 비례하지 않을 뿐 아니라, 실제 단말의 픽셀과도 정확히 일치하지 않게 됩니다.

즉, 1.5 의 단말의 픽셀이 320 x 1.5 = 480 px 이 아닌 단말들도 많아지게 됩니다.

2013년 target-density는 deprecated되었습니다.(https://petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-deprecated/)

사실 w3c에서는...

사실 웹 표준인 w3c에서는픽셀에 대한 정의를 "Reference pixel"이라고 정의하고 있었습니다. [4]

Showing that pixels must become larger if the viewing distance increases

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

애초에 물리 픽셀 과 논리 픽셀을 구분해둔 셈입니다.

일반적으로 모니터는 팔길이 정도의 시야거리(viewing distance)를 갖고 있고 96 dpi 였습니다. 웹 표준을 만들 때 이미 시야거리의 변화와 dpi의 변화를 고려하여 가상의 픽셀인 reference pixel을 정의하고 있었고 웹은 이 값에 기반하여 cm, inch등으로 픽셀값을 변환할 수 있었습니다.

그러나 모바일 벤더들은 96dpi를 바꾸지 않았습니다.(여러가지 문제가 있었을 거라고 생각됩니다.)

따라서 160dpi나 326dpi인 아이폰에서도 1 픽셀을 인치로 변환하면 1/96이 나오게 된 것입니다.

아이폰과 같은 모바일의 시야거리는 대략 10 inch (25cm) 라고 생각할 수 있습니다.

대충 계산하면 동일한 시야각을 얻으려면 픽셀은 0.1 mm 여야 할듯 합니다.

0.26 : 71 = x : 25

다시 말해 모니터와 같은 reference pixel(같은 시야각을 같는 픽셀)을 얻으려면 대략 243 dpi가 나와야 합니다.

하지만 현재 모바일은 160 dpi를 de-factor처럼 사용하고 있는 셈입니다.

심지어, 그 값도 단말에 따라 약간씩 다릅니다.

결론적으로

1. 웹에서 현재 있는 cm , inch 등은 printer를 media type을 위해서 사용해야 합니다.

px과 cm간의 변환은 사실상 의미를 잃어버렸습니다. (계산은 되지만, 실제 물리적인 길이를 의미하지 않습니다.)

2. px 정보(screen.width window.clientWidth) 를 이용하여 디바이스의 크기를 알아내는 것은 사실상 불가능해졌습니다.

현재의 웹은 디바이스의 크기를 알 방법을 제공하지 않습니다.

당연히 디바이스의 크기를 구분할 수 있는 올바른 방법은 존재하지 않고 미디어쿼리나 user agent를 통해 이미 알고 있는 디바이스만을 고려할 수 있게 되었습니다.

참고 :

[1] (한글) http://ko.wikipedia.org/wiki/%ED%99%94%EC%86%8C

[2] (영문) http://en.wikipedia.org/wiki/Pixel

[3] http://en.wikipedia.org/wiki/Display_resolution

[4] http://dev.w3.org/csswg/css-values/

http://ko.wikipedia.org/wiki/%EB%A0%88%ED%8B%B0%EB%82%98_%EB%94%94%EC%8A%A4%ED%94%8C%EB%A0%88%EC%9D%B4

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

http://alistapart.com/article/a-pixel-identity-crisis/

Tizen Wearable SDK 예제 사진

소혼 — Tue, 18 Mar 2014 08:18:38 +0900

Tizen Wearable SDK beta 1.0 이 릴리즈 되었습니다.

( http://developer.samsung.com/samsung-mobile-sdk/ )

아래는 기본으로 설치되어 있는 예제들 사진입니다.

에뮬레이터와 Analog watch 화면

카메라 앱과 에뮬레이터 콘트롤 패널

Hello ewebkit?

소혼 — Fri, 14 Mar 2014 08:44:00 +0900

ewebkit은 WebKit 엔진 기반에 EFL 라이브러리를 사용하여 UI를 표현하는 라이브러리입니다.

(WebKit/EFL 이라고도 부르는데, 저는 so 파일 이름에 따라 ewebkit이라고 부르고 있습니다.)

물론, Elementary의 elm_web이 ewebkit 에서 사용하는 ewk_view의 간단한 wrapper 클래스이지만 아직 문제가 많은 상태이기 때문에(1.9) ewebkit을 직접 쓰는 방법을 권장하고 있습니다. (또 타이젠(~2.2) 에서는 elm_web을 사용하실 수 없습니다.)

이 글에서는 elm_web이 아닌 ewk_view를 사용해서 간단한 페이지를 만드는 법을 공유하려고 합니다.

ewebkit 라이브러리는 현재 두 종류가 있습니다.

ewebkit : WebKit1/EFL 포트에 기반하는 라이브러리

ewebkit2 : WebKit2/EFL 포트에 기반하는 라이브러리

둘의 가장 큰 차이는 간단히 설명드리면 웹페이지를 렌더링하는 코어영역을 같은 프로세스에서 처리하느냐(ewebkit), 다른 프로세스에서 처리하느냐(ewebkit2) 입니다.

대부분의 인터페이스는 유사하지만, 이런 프로세스 모델의 차이에서 몇몇 인터페이스에는 차이가 있습니다.

참고로 타이젠과 같은 경우 1.0에서는 ewebkit을 사용하였고, 2.0부터는 ewebkit2를 사용하고 있습니다.

(현재 ewebkit은 webkit.org에서 제거되어 ewebkit2만 남았습니다.)

ewebkit을 사용한 코드들은 elm_web (http://git.enlightenment.org/core/elementary.git/tree/src/lib/elm_web.c) 이나 WebKit 프로젝트 내의 http://trac.webkit.org/browser/trunk/Tools/EWebLauncher/main.c 가있습니다.

ewebkit2를 사용한 코드들은 elm_web2(http://git.enlightenment.org/core/elementary.git/tree/src/lib/elm_web2.c), 또는 WebKit 프로젝트 내의 http://trac.webkit.org/browser/trunk/Tools/MiniBrowser/efl/main.c 가 있습니다.

참고삼아 보시면 될 듯 하고, 이 글에서는 ewebkit2 의 코드를 MiniBrowser 기반으로 설명을 드리려고 합니다.

(http://trac.webkit.org/browser/trunk/Tools/MiniBrowser/efl/main.c 정도의 설명입니다.)

혹시 EFL 에 대해서 잘 모르신다면, 이 글을 읽기에 부담스러우실 수 있습니다.

(과감히 뒤로가기를 누르셔도 됩니다.)

(

혹, EFL에 관심이 있으시면 먼저 아래 글을 보시는 것을 추천드립니다.

https://events.linuxfoundation.org/images/stories/pdf/lfcs2012_raster.pdf

)

1. 생성 / 소멸

다른 EFL 라이브러리들처럼 ewebkit/ewebkit2도 전역의 _init 과 _shutdown 을 가지고 있습니다.

### c++
int main ()
{
    ewk_init();
    ...
    ewk_shutdown();
    return 0;
}

반드시 사용하기 전에 호출해주셔야 합니다.

가능하면 main 시작하자마자 ewk_init을 호출하고, loop가 끝난 후 ewk_shutdown을 호출해주시는 것이 좋습니다.

다음으로,ewk_view 객체를 만들어야 합니다.

ewk_view를 만드는 방법은 여러가지가 있습니다. 하나씩 살펴보도록 하겠습니다.

1) ewk_view_add(Evas *e)

ewk_view_add 는 ewk_view를 만드는 가장 쉬운 방법입니다.

간단한 페이지를 로드하는 데는 적합하지만, alert/prompt/confirm이라던가 새창을 열거나 그 밖에 UI의 도움을 받아야 하는 많은 것들을 할 수 없습니다.

또, ewebkit에서는 관계없으나 ewebkit2에서는 매 evas object가 별도의 WebProcess를 생성하여 동작하게 됩니다.

### c++
Evas_Object *o = ewk_view_add(e);
ewk_view_url_set(o, "http://bunhere.tistory.com");

2) ewk_view_add_with_context(Evas *e, Ewk_Context *context)

ewebkit에서는 없는 함수입니다.

ewebkit2에서는 web context 라는 것이 있어서 하나의 web context는 하나의 WebProcess를 생성하게 합니다. 만약 이미 생성한 web context 안에 웹뷰를 만들려고 하면 이 함수를 사용해서 생성하면 됩니다.

### c++
// o 와 같은 context(web process)에서 동작하는 ewk_view를 생성
Evas_Object *o2 = ewk_view_add_with_context(e, ewk_view_context_get(o));

3) ewk_view_smart_add(Evas *e, Evas_Smart *smart, Ewk_Context *context, Ewk_Page_Group *group)

해당 API는 ewebkit에는 없습니다.(유사한 방법이 있으나 별도의 API 로 존재하지 않습니다.)

이 API 를 쓰면 ewk_view가 할 수 있는 일을 모두 할 수 있습니다.

물론 그만큼 사용하기 어렵다는 문제도 있습니다.

먼저, 인자들을 하나씩 살펴보도록 하겠습니다.

Evas *e

현재 생성하는 ewk_view의 기반이 될 canvas입니다.

Evas_Smart *smart

ewk_view는 여러 Evas_Object들 중 smart object로 만들어졌습니다.

Smart Object를 만드는 것에 대한 자세한 내용은 아래 글을 참고하시면 좋을 것 같습니다.

http://docs.enlightenment.org/stable/efl/Example_Evas_Smart_Objects.html

일반적으로 smart object를 만들때는 smart class를 만들어서 evas_object_smart_add를 호출하면 되지만, ewk_view는 추가로 처리해야 하는 인자들이 있어서 ewk_view_smart_add를 대신 사용합니다.

ewk_view_smart_add는 내부적으로 evas_object_smart_add의 일을 수행하게 됩니다.

(ewebkit은 evas_object_smart_add를 사용합니다.)

Evas_Smart를 만드는 법은 복잡하기 때문에 아래에서 다시 설명하겠습니다.

Ewk_Context *context

여러 ewk_view는 하나의 context를 가질 수도 있고, 여러개의 context를 가질 수도 있습니다.

하나의 context에 기반한 ewk_view들은 많은 것을 공유하게 됩니다.

특히 하나의 프로세스에서 수행되게 될 것입니다.

context를 구하려면 기존의 ewk_view 를 이용하여 ewk_view_context_get(o)을 하거나, ewk_context_default_get()을 이용하여 default context를 생성하면 됩니다.

Ewk_Page_Group *group

page group을 이해하는 쉬운 예제는 자바스크립트로 실행한 새창입니다. 자바스크립트로 새창을 열면 해당 페이지와 새로 열린 페이지는 opener / child 관계를 갖게 됩니다. 이 두 페이지는 같은 세팅을 가져야 합니다. 세션도 공유할 것이고요.

이렇게 같은 설정을 가져야 하고 정보들을 공유해야 한다면 같은 page group으로 묶어야 합니다.

page group을 얻는 방법은 기존의 ewk_view를 이용하여 ewk_view_page_group(o)을 호출하거나 ewk_page_group_create(group_name) 을 호출하여 특정 그룹을 생성하면 됩니다. group_name이 null이면 임의의 그룹을 생성하게 됩니다.

Evas_Smart 만들기

Evas_Smart를 만들려면 smart class를 하나 만들어야 합니다.

특히 ewk_view를 위한 smart class는 Evas_Smart_Class 를 확장한 Ewk_View_Smart_Class입니다.

사용자는 Ewk_View_Smart_Class를 확장하거나, Ewk_View_Smart_Class를 고쳐서 쓸 수 있습니다.

확장을 해서 쓸 경우, 기본 구현을 오버라이드하여 이용하기 좋다는 장점이 있습니다만, 대부분의 경우에는 기본 구현이 없습니다.(마우스/터치 이벤트 제외)

이 글에서는 일단 Ewk_View_Smart_Class를 고쳐서 쓰려고 합니다.

### c++
static Ewk_View_Smart_Class *miniBrowserViewSmartClass()
{
    static Ewk_View_Smart_Class ewkViewClass = EWK_VIEW_SMART_CLASS_INIT_NAME_VERSION("MiniBrowser_View");
    return &ewkViewClass;
}

MiniBrowser에서 발췌한 코드로 Ewk_View_Smart_Class 객체를 하나 만들어서 MiniBrowser_View라는 이름으로 초기화했습니다.

이 때, 값들은 모두 NULL로 초기화 될 것입니다.

ewk_view가 제공하는 메소드들로 재정의하기 위해서 ewk_view_smart_class_set을 호출해 주어야 합니다.

사실 ewk_view는 재정의할 메소드들이 별로 없습니다만 이 함수는 반드시 호출되어야 합니다. 가장 중요한 Evas_Smart_Class의 메소드들이 연결될 것입니다.

### c++
    if (!ewk_init())
        return EXIT_FAILURE;

    ewk_view_smart_class_set(miniBrowserViewSmartClass());

이제 어플리케이션에서 필요로 하는 기능들에 대해 추가로 수정을 하시면 됩니다.

### c++
    Ewk_View_Smart_Class *ewkViewClass = miniBrowserViewSmartClass();
    ewkViewClass->run_javascript_alert = on_javascript_alert;
    ewkViewClass->run_javascript_confirm = on_javascript_confirm;
    ewkViewClass->run_javascript_prompt = on_javascript_prompt;
    ewkViewClass->window_geometry_get = on_window_geometry_get;
    ewkViewClass->window_geometry_set = on_window_geometry_set;
    ewkViewClass->fullscreen_enter = on_fullscreen_enter;
    ewkViewClass->fullscreen_exit = on_fullscreen_exit;
    ewkViewClass->window_create = on_window_create;
    ewkViewClass->window_close = on_window_close;
    ewkViewClass->popup_menu_show = on_popup_menu_show;
    ewkViewClass->popup_menu_hide = on_popup_menu_hide;
    ewkViewClass->context_menu_show = on_context_menu_show;
    ewkViewClass->context_menu_hide = on_context_menu_hide;
    ewkViewClass->input_picker_color_request = on_color_picker_request;
    ewkViewClass->input_picker_color_dismiss = on_color_picker_dismiss;

앞서 말씀 드린 것과 같이 마우스 이벤트와 같은 몇몇 이벤트를 제외하면 ewkViewClass가 추가한 메소드들은 특수한 구현들을 갖고 있지 않습니다.

각각의 메소드들이 어떤 인자들과 반환값을 가져야 하는지는 http://trac.webkit.org/browser/trunk/Source/WebKit2/UIProcess/API/efl/ewk_view.h 를 참고하셔야 합니다.

몇몇 메소드들은 아래에서 좀 더 설명하도록 하겠습니다.

이렇게 smart class가 준비되었다면 Evas_Smart를 만들면 됩니다.

### c++
Evas_Smart *smart = evas_smart_class_new(&ewkViewClass->sc);

sc는 Evas_Smart_Class를 가르키는 주소입니다.

아래는 MiniBrowser에서 ewk_view_smart_add를 호출하는 일부 코드입니다..

### c++
    Evas *evas = evas_object_evas_get(window->elm_window);
    Evas_Smart *smart = evas_smart_class_new(&ewkViewClass->sc);
    Ewk_Context *context = opener ? ewk_view_context_get(opener) : ewk_context_default_get();
    Ewk_Page_Group *pageGroup = opener ? ewk_view_page_group_get(opener) : ewk_page_group_create("");
    window->ewk_view = ewk_view_smart_add(evas, smart, context, pageGroup);

생성과 달리 소멸은 간단히 evas_object_del을 호출해주면 됩니다.

2. Load contents

ewebkit에서 contents를 읽는 방법은 두가지가 있습니다.
가장 기본적인 방법인 url을 읽는 방법과, html string을 읽는 방법입니다.

url을 읽는 API는 다음과 같습니다.

### c++
ewk_view_url_set(view, "http://bunhere.tistory.com");

그 다음은 알아서 로딩이 된 후, 화면에 그려지게 됩니다.

html string을 직접 읽는 방법도 크게 어렵지는 않습니다.

### c++
ewk_view_html_string_load(view, "<!doctype html><body>hello</body>", base_uri, unreachable_uri);

img나 기타 리소스들이 상대 경로로 놓여질 때 읽어올 base_uri, 에러가 났을때 알려줄 unreachable_uri가 추가된 것을 제외하면 특별한 것이 없습니다. 그리고 이 값들은 NULL로 넘겨도 상관없습니다.

간단한 예제

여기까지 이야기한 것들을 바탕으로 가장 간단한 ewebkit 기반의 웹브라우저를 만들어보겠습니다.

https://github.com/ewebkit/samples/blob/master/devs/ryuan/simple.c

### c++
// gcc simplebutton.cpp `pkg-config --cflags --libs elementary ewebkit2`
#include <Elementary.h>
#include <EWebKit2.h>

void on_done(void *userData, Evas_Object *webView, void *eventInfo)
{
   elm_exit();
}

EAPI_MAIN int
elm_main(int argc, char *argv[])
{
   ewk_init();

   Evas_Object* win;
   win = elm_win_add(NULL, "sample", ELM_WIN_BASIC);
   elm_win_title_set(win, "sample");
   evas_object_smart_callback_add(win, "delete,request", on_done, NULL);
   elm_win_autodel_set(win, EINA_TRUE);

   Evas_Object* bg = elm_bg_add(win);
   evas_object_size_hint_weight_set(bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_bg_color_set(bg, 0, 0, 255);
   elm_win_resize_object_add(win, bg);
   evas_object_show(bg);

   Evas_Object* ewk = ewk_view_add(evas_object_evas_get(win));
   ewk_view_url_set(ewk, "http://bunhere.tistory.com");

   evas_object_resize(ewk, 400, 400);
   evas_object_move(ewk, 0, 0);
   evas_object_show(ewk);

   evas_object_resize(win, 400, 400);
   evas_object_show(win);

   elm_run();

   ewk_shutdown();
}
ELM_MAIN()

실행 결과입니다.

WebKit/efl 하면서 쓸 ctags 만들기

소혼 — Tue, 17 Dec 2013 20:22:22 +0900

ctags -R --exclude=.git --exclude=Examples --exclude=LayoutTests --exclude=ManualTests --exclude=WebKitLibraries --exclude=build --exclude=PerformanceTests --exclude=Tools --exclude=WebKit.xcworkspace --exclude=layout-test-results --exclude=WebKitBuild --exclude=Websites --exclude=Source/*/win --exclude=Source/*/mac --exclude=Source/*/wince --exclude=Source/*/blackberry --exclude=Source/*/mac --exclude=Source/WebKit/--exclude=*.html --exclude=*.js --exclude=*.pl --exclude=*.php .

GCC options

소혼 — Thu, 5 Dec 2013 21:55:17 +0900

<< 작성중 >>

성능과 관련된 옵션들

-fno-rtti (runtime type information)

rtti는 아래와 같이 두가지 경우에 사용됩니다.

- #include <typeinfo>

typeinfo(this).name()

### c++
class type_info {
public:
    virtual ~type_info();
    bool operator==(const type_info& rhs) const;
    bool operator!=(const type_info& rhs) const;
    int before(const type_info& rhs) const;
    const char* name(__type_info_node* __ptype_info_node = &__type_info_root_node) const;
    const char* raw_name() const;
private:
    void *_m_data;
    char _m_d_name[1];
    ...
};

- dynamic_cast

성능에 영향을 줄 수 있으므로 -fno-rtti 를 주면 type_info가 생성되지 않습니다.

-Os

-Os는 O2에 -falign-functions -falign-jumps -falign-loops -falign-labels -freorder-blocks -freorder-blocks-and-partition -fprefetch-loop-arrays -ftree-vect-loop-version 를 제거한 것과 같다.

-fprofile-generate, -fprofile-use, -fprofile-arcs

참고자료 : http://blog.man7.org/2012/10/how-much-do-builtinexpect-likely-and.html

Linker options (-Wl, ...)

--as-needed :

http://www.ubuntu.or.kr/viewtopic.php?p=70082

WebKit/Efl 빌드하기(우분투)

소혼 — Tue, 26 Nov 2013 22:05:24 +0900

마지막 update : 2014-08-06 (우분투 13.10)

webkit을 빌드할면 소스코드부터 받아야 합니다.

소스코드를 받는 방법은 svn을 이용하거나 git을 이용하면 됩니다.(http://www.webkit.org/building/checkout.html)

- svn에서 받기 : svn checkout https://svn.webkit.org/repository/webkit/trunk WebKit

- git에서 받기 : git clone git://git.webkit.org/WebKit.git

EFL latest 기반에서 빌드하려면 아래 "최신 EFL을 사용하여 빌드하기"를 참고하세요.

* jhBuild를 사용하여 빌드하기

WebKit/EFL을 빌드하는 가장 쉬운 방법은 https://trac.webkit.org/wiki/EFLWebKit 을 읽고 따라하는 것입니다.

하지만, 현재 EFL 1.8에 기반하고 있습니다.

간단히 요약하면

1. 관련 패키지 설치

패키지를 설치하는 방법은 아래 스크립트를 실행하는 것입니다.(우분투만 지원)

./Tools/efl/install-dependencies

2. dependency 패키지 업데이트

./Tools/Scripts/update-webkitefl-libs

3. 웹킷 빌드

./Tools/Scripts/build-webkit --efl --cmakeargs="-DSHARED_CORE=ON"

(SHARED_CORE 옵션은 선택사항입니다.)

* 최신 EFL을 사용하여 빌드하기(trunk build)

단, 위 방법은 jhbuild를 사용하여야 하기 때문에 최신 EFL을 사용해서 빌드할 수 없습니다.

** EFL이 /usr/elocal에 설치되어 있다고 가정하겠습니다.

아래 환경 변수들을 세팅합니다. (prefix를 가정했기 때문입니다. 아래 내용을 아시면 적절히 수정하시면 됩니다.)

export LD_LIBRARY_PATH=/usr/elocal/lib:$LD_LIBRARY_PATH

export PKG_CONFIG_PATH=/usr/elocal/lib/pkgconfig:$LD_LIBRARY_PATH

export PATH=/usr/elocal/bin:$PATH

Ubuntu 12.10는 최신 libsoup이 제공되지 않습니다.

libsoup을 설치합니다.

libsoup은 jhbuild에 있는 url을 통해 받으실 수 있습니다.

ftp://ftp.gnome.org/pub/gnome/sources/libsoup/2.42/libsoup-2.42.0.tar.xz

압축을 풀고, 폴더로 이동하여 아래 명령을 실행합니다.

./configure --without-gnome --disable-introspection --prefix=/usr/elocal

make -j4

sudo make install

이제 웹킷 폴더로 이동하여 build 폴더를 만들고 이동합니다.

mkdir build && cd build

빌드합니다.

cmake .. -DPORT=Efl -DENABLE_ACCESSIBILITY=Off -DENABLE_BATTERY_STATUS=Off -DCMAKE_INSTALL_PREFIX=/usr/elocal

make -j4

sudo make install

(첨:

최신 EFL을 사용하신다면 gstreamer가 설치되어 있을 것입니다.

아니라면, -DENABLE_VIDEO=OFF -DENABLE_VIDEO_TRACK=OFF -DENABLE_WEB_AUDIO=OFF 를 통해 VIDEO 관련 기능을 꺼주셔야 합니다.

gstreamer 빌드 관련해서는 gstreamer 최신 버전 설치하기를 참조하시면 됩니다.

)

위에 몇가지 OFF한 옵션들을 모두 켜서 빌드하려면 atk(ENABLE_ACCESSIBILITY), e_dbus(ENABLE_BATTERY_STATUS)가 있어야 합니다.

test browser

WebKit/Efl을 빌드하면 MiniBrowser라는 테스트 브라우저를 제공하고 있습니다.

아래 명령으로 테스트 브라우저를 실행할 수 있습니다.

./bin/MiniBrowser

* 최신 EFL을 사용하여 빌드하기(tarball)

최근부터 ewebkit의 tarball을 제공하기 시작했습니다.

현재 버전은 1.11 alpha입니다.

http://download.enlightenment.org/rel/libs/webkit-efl/ 에서 받으실 수 있습니다.

(주의: 위에서 제공되는 압축 파일은 전체 소스를 가지고 있지 않고 ewebkit을 빌드하는데 필요한 파일들만을 담고 있습니다.)

기본적으로는 위 trunk 빌드를 참고하시면 됩니다.

빌드할 때는 아래와 같이 적으시면 됩니다.

cmake .. -DCMAKE_INSTALL_PREFIX=/usr/elocal

make -j4

sudo make install

trunk 빌드와의 차이는 EFL port가 기본이며 몇가지 옵션들이 자동으로 꺼집니다. (BATTERY_STATUS)

[C++11] Range based for loop

소혼 — Wed, 13 Nov 2013 06:31:23 +0900

목차로 가기

<개인적으로 공부한 내용들로, 내용이 완벽하지 않을 수 있습니다. 부족한 부분/틀린 부분에 대한 Comment 환영합니다.>

- 업데이트

* 박진수님이 지적해주신 오타 수정

C++11 에는 새로운 형태의 for loop인 range based for loop를 지원합니다.

이미 python같은 언어에서는 지원되던 기능이기도 합니다.

python에서는 아래처럼 루프를 사용할 수 있었습니다.

### python
peoples = ['ryuan', 'yesum', 'w.third']
for p in peoples:
print 'people :', p

이것을 c++에서 구현하려면 아래와 같이 해야 할 것입니다.

### c++
#include <iostream>
#include <vector>
using namespace std;

int main()
{
    vector<string> s;
    s.push_back("ryuan");
    s.push_back("yesum");
    s.push_back("w.third");

    for (vector<string>::iterator i = s.begin(); i != s.end(); ++i)
        cout << "people :" << *i << endl;

    return 0;
}

물론 auto의 등장으로 for loop는 아래처럼 간단해질 수 있습니다.

### c++
for (auto i = s.begin(); i != s.end(); ++i)
cout << "people :" << *i << endl;

하지만, 만약 vector대신 2차원 배열로 바꾸려고 하면 어떻게 해야 할까요?

### c++
int main()
{
    const char *s[3] = { "ryuan", "yesum", "w.third" };

    for (int i = 0; i != 3; ++i)
        cout << "people :" << s[i] << endl;

    return 0;
}

이제 range based for loop를 쓰면 아래와 같습니다.

### c++
int main()
{
    //const char *s[3] = { "ryuan", "yesum", "w.third" };
    vector<string> s;
    s.push_back("ryuan");
    s.push_back("yesum");
    s.push_back("w.third");

    for (auto i : s)
        cout << "people :" << i << endl;

    return 0;
}

vector를 쓰던, 배열을 쓰던 동일합니다.

주의할 점은 range loop의 인자 i 는 반드시 loop안에서 선언되어야 한다는 점입니다. 만약 loop밖에서 선언하고 안에서 사용하지 않는다면 아래처럼 에러가 날 것입니다.(gcc)

range_for_loop.cpp: In function ‘int main()’:
range_for_loop.cpp:10:12: error: found ‘:’ in nested-name-specifier, expected ‘::’
range_for_loop.cpp:10:10: error: ‘i’ is not a class, namespace, or enumeration
range_for_loop.cpp:10:15: error: expected ‘;’ before ‘)’ token
range_for_loop.cpp:13:5: error: expected primary-expression before ‘return’
range_for_loop.cpp:13:5: error: expected ‘;’ before ‘return’
range_for_loop.cpp:13:5: error: expected primary-expression before ‘return’
range_for_loop.cpp:13:5: error: expected ‘)’ before ‘return’

그럼 만약, 내가 만든 클래스를 range based for loop로 사용하고자 한다면 어떻게 하면 될까요?

물론 이런 경우가 흔하진 않겠지만, 간단한 class를 만들어보도록 하겠습니다.

### c++
#include <iostream>

class IntList
{
public:
    class Iterator {
    public:
        Iterator(const IntList* p, int pos)
            : m_p(p)
            , m_pos(pos)
        { }

        // Range based for loop use below methods
        bool operator!=(const Iterator& other) const { return m_pos != other.m_pos; }
        int operator*() const { return m_p->get(m_pos); }

        const Iterator operator++()
        {
            //little bit tricky
            ++m_pos;
            return *this;
        }
    private:
        const IntList* m_p;
        int m_pos;
    };

    IntList()
    {
        for (int i = 0; i < 10; ++i)
            m_arr[i] = i;
    }

    int get(int i) const { return m_arr[i]; }
    Iterator begin() const { return Iterator(this, 0); }
    Iterator end() const { return Iterator(this, 10); }
private:
    int m_arr[10];
};

int main()
{
    IntList list;
    for (auto i : list)
        std::cout << i << std::endl;
    return 0;
}

실제로 쓸모는 없지만, range based for loop 는 동작합니다.

결국,

begin(), end()를 제공하고, 이때 반환되는 iterator 클래스에서 operator++, operator*, operator!=을 구현하면 됩니다.

참조 : http://www.cplusplus.com/forum/beginner/99989/

참조 : http://www.cprogramming.com/c++11/c++11-ranged-for-loop.html

[C++11] Move semantics

소혼 — Sun, 10 Nov 2013 17:37:06 +0900

목차로 가기

<개인적으로 공부한 내용들로, 내용이 완벽하지 않을 수 있습니다. 부족한 부분/틀린 부분에 대한 Comment 환영합니다.>

C++11에서는 Move semantics라는 개념이 도입되었습니다.

move semantics가 도입된 배경에 대해 이해하기 위해 아래 예제를 보도록 하겠습니다.

### c++
#include <iostream>
using namespace std;

class Number
{
public:
    explicit Number(int i)
        : m_number(new int(i))
    {
        cout << "Number Constructor is called(" << i << ")" << endl;
    }
    ~Number()
    {
        if (m_number)
            cout << "Number Destructor is called(" << *m_number << ")" << endl;
        delete m_number;
    }
    Number(const Number& rhs)
        : m_number(new int(*rhs.m_number))
    {
        cout << "Number copy constructor is called" << endl;
    }

    static void printValue(Number n) {
        cout << "print " << *n.m_number << endl;
    }

private:
    int* m_number;

};

int main()
{
    Number one(1);

    Number::printValue(one);
}

설명을 위해 의도적으로 m_number를 heap에 할당했습니다.

위 예제를 실행하면 아래와 같은 결과가 나옵니다.

Number Constructor is called(1)
Number copy constructor is called
print 1
Number Destructor is called(1)
Number Destructor is called(1)

printValue의 인자로 넘겨주는 과정에서 한번의 복사과정이 발생하게 됩니다. 불필요한 객체를 막기 위해 printValue를 아래와 같이 바꿀 수 있습니다.

### c++
static void printValue(const Number& n) {
cout << "print " << *n.m_number << endl;
}

핵심은 reference로 변경한 것입니다. (reference는 원본을 참조하므로 내부에서 수정을 못하도록 const를 붙여주어야 합니다.)

이제 복사 생성자(copy constructor)가 호출되지 않을 것입니다.

이제 예제를 좀 더 확장해 아래와 같은 경우를 보도록 하겠습니다.

### c++
// in main
Number x(one); // (1)

이 경우 x와 one은 별도의 객체이므로 복사 생성자가 불려야 합니다.

### c++
class Number {
    ...
    Number operator+(Number& rhs)
    {
        return Number(m_number + rhs.m_number);
    }
    ...
};

Number make_number()
{
    return Number(2);
}

//in main
Number value(make_number()); // (2)
Number sum(one + two); // (3)

value와 sum을 만들기 위해서는 모두 두번의 복사 생성자가 불립니다.

이 경우에 불리는 복사 생성자는 사실상 불필요합니다. 하지만 제거할 방법은 마땅하지 않습니다.

물론 일부 compiler에서 최적화를 지원합니다. (Return Value Optimization : RVO)

gcc 의 경우 -fno-elide-constructors 를 사용하면 이 기능을 끌 수 있습니다.

현재 예제의 경우는 간단하기 때문에 임시로 생성되는 객체들에 대한 부담이 적을 수 있습니다만, Number가 아니라 Vector와 같은 많은 리소스를 사용해야 하는 경우라면 이것은 그대로 비효율이 됩니다.

(1)과 (2), (3)에는 한가지 중요한 차이점이 있습니다.

(1)은 lvalue를 받은 경우이고, (2), (3)은 rvalue를 넘겨받은 경우라는 사실입니다.

c++11부터는 이동 생성자가 생겼습니다.

rvalue reference를 인자로 받는 새로운 생성자입니다.

위 예제에서 아래와 같이 이동 생성자를 추가하겠습니다.

### c++
    Number(Number&& rhs)
    {
        cout << "Number move constructor is called" << endl;
        m_number = rhs.m_number;
        rhs.m_number = nullptr;
    }

이동 생성자가 복사 생성자와 다른 점은 rvalue reference로 받아서 받은 rhs의 m_number를 그대로 사용한다는 점입니다.

따라서, 복사 생성자가 불렸을 때와 비교해 불필요한 메모리 할당/해제가 사라지게 됩니다.

참조 : http://stackoverflow.com/questions/3106110/what-is-move-semantics

[c++11] rvalue reference

소혼 — Thu, 7 Nov 2013 23:12:23 +0900

목차로 가기

<개인적으로 공부한 내용들로, 내용이 완벽하지 않을 수 있습니다. 부족한 부분/틀린 부분에 대한 Comment 환영합니다.>

이미 C++ 에서는 Reference(참조자)를 지원하고 있습니다.rvalue Reference를 설명하기 전에 기존의 Reference의 예제를 잠깐 살펴보겠습니다.

### c++
#include <iostream>
using namespace std;

int main()
{
    int zero = 0;
    int& a = zero; //OK
    int& b = 0; // Compile Error
    return 0;
}

아시겠지만, Reference에 0을 할당하는 것은 불가능합니다.

예제를 컴파일 해보면 아래와 같은 에러를 볼 수 있습니다. (gcc 기준)

g++ rvalue_reference.cpp
rvalue_reference.cpp: In function ‘int main()’:
rvalue_reference.cpp:8:14: error: invalid initialization of non-const reference of type ‘int&’ from an rvalue of type ‘int’

에러 메시지를 번역해보자면,"int 타입의 rvalue에서 int& 타입인 non-const reference로의 잘못된 초기화" 입니다.

물론 const int& b 로 바꿔도 동작은 합니다.

여기서 핵심은

1. 0은 rvalue입니다.

2. (기존의) reference는 rvalue를 참조하지 못합니다. (const reference(&)는 rvalue도 담을순 있습니다.)

따라서 reference(&)를 lvalue reference라고 부를 수 있습니다. (물론 그동안 이렇게 부를 필요가 없었죠. rvalue reference가 나오기 전까진...)

lvalue 와 rvalue

이제 lvalue와 rvalue에 대해 이야기해보겠습니다.

전통적인 의미로 이것은 Left Value와 Right Value를 의미했으나(참조1),

사실상 C에서의 lvalue는 수식의 오른쪽 값이 쓰여질 수 있는 메모리 공간을 가르키는 용어(locater value)입니다.
(오른쪽 값이 rvalue를 의미하는 것은 아닙니다.)

따라서 lvalue는 반드시 left에 올 필요는 없습니다.

### c++
int x = 9;
std::string s;
int* p = 0;
int& ri = x;

x, s, p, ri 모두 lvalue입니다. 4번 라인에서 x는 오른쪽에도 존재합니다.

이제 lvalue를 다시 설명해보고자 합니다.

"lvalue란 이름은 E1 = E2 의 수식에서 E1이 (수정 가능한) lvalue 이어야 한다는 데서 기원하고 있습니다. 그러나 "locaor value"를 의미한다고 생각하는 것이 나을 것입니다."

The name "lvalue" comes originally from the assignment expression E1 = E2, in which the left operand E1 must be a (modifiable) lvalue. It is perhaps better considered as representing an object "locator value."

rvalue는 수식의 값으로써 종종 언급되었습니다.

What is sometimes called ‘‘rvalue’’ is in this International Standard described as the ‘‘value of an expression’’.

rvalue의 대표적인 예는 literal들입니다. 위 예제의 9나 0 또는 'a', "hello"는 rvalue들입니다.

아래의 예를 더 보도록 하겠습니다.

### c++
++i;
i++;

++i는 lvalue이고 i++은 rvalue입니다.

i++이 rvalue인 것을 증명하기 위해, 간단한 테스트를 해보겠습니다.

###c++
int i = 1;
int& a = ++i; // ok
int& b = i++; // compile error

4번 라인은 앞에서 봤던 것과 동일한 에러가 날 것입니다.

앞서 ++i는 lvalue인 i의 값을 증가시킨 후, i를 반환합니다. 따라서 ++i는 lvalue입니다.

반면, i++은 lvalue인 i의 값을 증가시키지만, 증가되기 전의 값을 임시로 보관하여 반환합니다.

따라서, 반환되는 값은 임시로 존재하며 수식이 끝나는 순간 사라지게 됩니다.

또 다른 예를 보겠습니다.

### c++
int i = 1;
const int& p = i;
p = 7; // compile error

p 는 lvalue이지만, const 속성때문에 rvalue인 7을 저장할 수 없습니다.

lvalue나 rvalue 모두 const 나 non-const 속성을 가질 수 있습니다.

### c++
string one("one");
const string two("two");
string three() { return "three"; }
const string four() { return "four"; }
static int s_five = 0;
int& five() { return s_five; }
int main()
{
    one;     // 변경 가능한(non-const)lvalue
    two;     // 변경 불가능한(const) lvalue
    three(); // 변경 가능한(non-const) rvalue
    four(); // 변경 불가능한(const) rvalue
    int& f = five(); // 변경 가능한(non-const)lvalue
    f = 5;
    cout << f << " equals " << s_five << endl;

    return 0;
}

앞에서 보여드린 것처럼 reference는 lvalue를 참조합니다.

따라서 reference를 반환하는 five도 lvalue입니다.

수식(expression)이 끝나도 존재하는 것을 lvalue, 수식의 종료와 함께 사라지는 임시적인 값을 rvalue라고 설명하기도 합니다.

또 다른 설명으로 수식(expression)에서 identity를 가지는 value가 lvalue, identity를 가지지 않는 value가 rvalue라고도 합니다.

여기까지가 C++ 03까지에 대한 내용입니다.

이제 rvalue reference에 대해 설명하도록 하겠습니다.

c++11에서는 rvalue reference(&&)라는 새로운 operator가 등장합니다.

### c++
int&& sum(int a, int b)
{
    return a + b;
}

int main()
{
    int&& r = sum(1, 2);
    cout << r << endl;
    return 0;
}

크게 필요성을 느끼기 어려운 예제입니다. 심지어 gcc에서는 warning도 납니다. 하지만 짚고 넘어갈 부분이 있습니다.

보시면 a + b의 결과가 문장(8 line)이 지나갈때까지 살아있게 됩니다.

rvalue인 a + b는 해당 수식이 소멸되는 시점에 사라져야 하지만, rvalue reference로 참조하게 되면 lifetime이 연장되어 존재하게 됩니다.

이러한 value 유형을 xvalue ("eXpiring" value) 라고 합니다.

xvalue는 lvalue처럼 identity를 갖지만 추가로 movability를 갖습니다.

lifetime이 끝나도 identity가 유지되는 한 존재하게 됩니다.

(기존의) lvalue와 xvalue를 묶어서 glvalue("generalized" lvalue) 라고 부릅니다.

glvalue는 identity가 있다는 특징이 있습니다.

기존의 rvalue는 임시적이고 identity를 갖지 않지만, xvalue가 등작했기 때문에 xvalue까지를 포함하여 rvalue라고 합니다.

대신 xvalue가 아닌 rvalue들을 prvalue (pure rvalue) 라고 부릅니다.

rvalue reference의 진정한 가치를 알려면 move semantics에 대해 이해해야 합니다.

move semantics에 대해서는 다음 글에서 이야기하려고 합니다.

참조1 (The main fatures of CPL) : http://comjnl.oxfordjournals.org/content/6/2/134.full.pdf+html

참조 2 : http://blog.smartbear.com/development/c11-tutorial-explaining-the-ever-elusive-lvalues-and-rvalues/

참조 : http://scor7910.tistory.com/66

참조 : http://en.wikipedia.org/wiki/Rvalue_reference#rvalue_reference

참조 : http://stackoverflow.com/questions/3601602/what-are-rvalues-lvalues-xvalues-glvalues-and-prvalues

참조 : http://stackoverflow.com/questions/371503/why-is-i-considered-an-l-value-but-i-is-not

참조 : http://c0x.coding-guidelines.com/6.3.2.1.html

참조 : https://prog.woong.org/11

[C++11] Variadic template

소혼 — Wed, 6 Nov 2013 20:17:29 +0900

목차로 가기

<개인적으로 공부한 내용들로, 내용이 완벽하지 않을 수 있습니다. 부족한 부분/틀린 부분에 대한 Comment 환영합니다.>

먼저 짧은 영어 탓에 variadic이라는 단어부터 찾아봤습니다.

하지만, variadic이란 단어는 원래 존재했던 단어는 아닌듯 합니다. (http://en.wiktionary.org/wiki/variadic)

어원은 variable 과 -adic 이 결합된 단어라고 하며, `임의의 많은 변수를 취하는` 이란 뜻입니다.

C언어를 접해서 쓰고 있는 사람이라면 printf를 생각하면 쉬울 듯 합니다.

printf는 대표적인 variadic function입니다.

### c++
// printf의 선언
int printf(const char *format, ...);

Variadic Template을 지원한다는 것은 결국 임의의 많은 template parameter를 취하는 템플릿을 지원한다는 것을 의미합니다.

기본적인 모양은 아래와 같습니다.

### c++
template<typename ... Values> class tuple;

(코딩 스타일은 어떻게 하는 것이 좋은지 모르겠네요. ... (ellipse operator) 과 typename, Values사이에는 space가 있어도 되고 없어도 되는듯 합니다.)

인스턴스를 만들때는 아래처럼 쓰게 됩니다.

### c++
// 세개의 template 인자를 갖는 some_instance_name
tuple<int, std::vector<int>, std::map<std::string, std::vector<int>>> some_instance_name;
//인자의 개수가 0개여도 괜찮습니다.
tuple<> a;

몇개의 인자를 제한하고자 하면 아래와 같이 해당하는 인자들뒤에 typename ... values 를 적으면 됩니다.

### c++
template<typename T, typename ... Values> class tuple;

간단한 예제를 만들어봤습니다.

### c++
#include <iostream>
using namespace std;

class dog {
public:
    void speak() const { cout << "bow wow" << endl; }
};
class cat {
public:
    void speak() const { cout << "meow" << endl; }
};

template <typename T>
void speak(const T& p)
{
    p.speak();
}

template <typename T, typename ... ARGS>
void speak(const T& p, ARGS ... args)
{
    p.speak();
    speak(args...);
}

int main()
{
    dog a, b, c, d;
    cat e, f, g, h;
    speak(a, e, b, f, c, g, d, h);
    return 0;
}

좀 억지스러운 면이 있네요(굳이 이렇게 어렵게 짤 필요는 없어보입니다.).

적절한 사용법은 찾아야 될듯 합니다.(실제웹킷에서 쓰는 예를 아래에 첨부했습니다.)

어쨌든 30라인의 speak라는 함수는 dog객체와 cat객체를 임의의 개수만큼 받을 수 있도록 되어 있습니다.이를 위해 두가지 버전의 speak함수를 구현했습니다. (13-17라인, 19-24라인)

19-24라인의 speak는 variadic template으로 구현되어 있습니다. 이 버전의 speak를 보면, 첫번째 템플릿 인자는 T로 받아서(19라인) speak()를 호출합니다. (22라인), 그리고 나머지 인자들은 args... 이용해 speak를 다시 호출합니다. (23라인)

즉, 재귀적으로 variadic template 메소드를 호출하다가 마지막으로 인자가 한개만 남게 되면 13-17라인의 speak 함수를 통해 출력하게 됩니다. 이런 형태의 template을 recursive template이라고 합니다.

만약 13-17라인의 speak 함수가 없다면, 컴파일 타임에 아래와 같은 에러를 출력하게 됩니다.(gcc)

variadic_template.cpp: In instantiation of ‘void speak(const T&, ARGS ...) [with T = cat; ARGS = {}]’:
variadic_template.cpp:18:5:   recursively required from ‘void speak(const T&, ARGS ...) [with T = cat; ARGS = {dog, cat, dog, cat, dog, cat}]’
variadic_template.cpp:18:5:   required from ‘void speak(const T&, ARGS ...) [with T = dog; ARGS = {cat, dog, cat, dog, cat, dog, cat}]’
variadic_template.cpp:25:33:   required from here
variadic_template.cpp:18:5: error: no matching function for call to ‘speak()’
variadic_template.cpp:18:5: note: candidate is:
variadic_template.cpp:15:6: note: template<class T, class ... ARGS> void speak(const T&, ARGS ...)
variadic_template.cpp:15:6: note:   template argument deduction/substitution failed:
variadic_template.cpp:18:5: note:   candidate expects 2 arguments, 0 provided

유사한 예제로, Dog객체와 Cat 객체가 순서대로 있어야 하는 speak를 아래와 같이 만들수도 있습니다.

### c++
template <class Dog, class Cat>
void speak(const Dog& d, const Cat& c)
{
    d.speak();
}

template <class Dog, class Cat, class ... ARGS>
void speak(const Dog& d, const Cat& c, ARGS ... args)
{
    d.speak();
    speak(args...);
}

int main()
{
    dog a, b, c, d;
    cat e, f, g, h;
    speak(a, e, b, f, c, g, d, h);
    //speak(e, b, f, c, g, d, h); //Compile Error!
    return 0;
}

이렇게 일부 인자만을 지정하는 것을 partial specialization이라고 부르기도 합니다.

ellipse operator

보신 바와 같이, ellipse operator(...)는 크게 두가지 형태로 사용됩니다.

첫번째로, template parameter list나 speak()와 같이 template body의 인자 목록에서 사용될 경우 parameter pack을 선언한다고 합니다. (전자의 경우 template parameter pack, 후자의 경우 function parameter pack)

### c++
// template parameter pack
type ... Args
typename|class ... Args
template < parameter-list > ... Args

// function parameter pack
Args ... args

결국 parameter pack 을 가지는 template이 Variadic template이라고 할 수 있습니다.

두번째로, spack()의 body에서 사용된 것처럼 (args ... ) ellipse operator 가 템플릿 또는 함수 호출 인자의 오른쪽에 나오는 경우, parameter pack은 unpack한다 또는 확장(expansion)한다고 합니다.

위 예제에서는 간단한 형태의 parameter pack expansion 을 보여드렸습니다. (args ... )

하지만, expansion이 어디서 일어나느냐에 따라 다양한 형태로 이뤄지게 됩니다.

확장이 이뤄질 수 있는 곳들은 다음과 같습니다. (아래 참조에 있는 것들을 가져왔습니다.)

Function Argument list

### c++
f(&args...); // expands to f(&E1, &E2, &E3)
f(n, ++args...); // expands to f(n, ++E1, ++E2, ++E3);
f(++args..., n); // expands to f(++E1, ++E2, ++E3, n);
f(const_cast<const Args*>(&args)...);
// f(const_cast<const E1*>(&X1), const_cast<const E2*>(&X2), const_cast<const E3*>(&X#)
f(h(args...) + args...); // expands to
// f(h(E1,E2,E3) + E1, h(E1,E2,E3) + E2, h(E1,E2,E3) + E3)

Template Argument list

### c++
template<class A, class B, class...C> void func(A arg1, B arg2, C...arg3)
{
    container<A,B,C...> t1; // expands to container<A,B,E1,E2,E3>
    container<C...,A,B> t2; // expands to container<E1,E2,E3,A,B>
    container<A,C...,B> t3; // expands to container<A,E1,E2,E3,B>
}

Template Parameter list

### c++
template<typename... T> struct value_holder
{
template<T... Values> // expands to a non-type template parameter
struct apply { }; // list, such as <int, char, int(&)[5]>
};

sizeof operator

### c++
template<class... Types>
struct count {
static const std::size_t value = sizeof...(Types);
};

만약 count<int, char> 이면 value는 2가 될 것입니다.

Initializer list of array

### c++
template<typename... Ts> void func(Ts... args){
const int size = sizeof...(args) + 2;
int res[size] = {1,args...,2};
}

Member initializer list

### c++
template<class... Mixins>
class X : public Mixins... {
public:
X(const Mixins&... mixins) : Mixins(mixins)... { }
};

### c++
#include <iostream>
using namespace std;

struct a1{};
struct a2{};
struct a3{};
struct a4{};

template<class X> struct baseC{
    baseC(int a) {printf("baseC primary ctor: %d\n", a);}
};
template<> struct baseC<a1>{
    baseC(int a) {printf("baseC a1 ctor: %d\n", a);}
};
template<> struct baseC<a2>{
    baseC(int a) {printf("baseC a2 ctor: %d\n", a);}
};
template<> struct baseC<a3>{
    baseC(int a) {printf("baseC a3 ctor: %d\n", a);}
};
template<> struct baseC<a4>{
    baseC(int a) {printf("baseC a4 ctor: %d\n", a);}
};

template<class...A> struct container : public baseC<A>...{
    container(): baseC<A>(12)...{
        printf("container ctor\n");
    }
};

int main(void){
    container<a1,a2,a3,a4> test;
    return 0;
}

lamda captures

### c++
template<class ...Args>
void f(Args... args) {
auto lm = [&, args...] { return g(args...); };
lm();
}

Exception specification list

### c++
template<class...X> void func(int arg) throw(X...)
{
// ... throw different Xs in different situations
}

아래 link는 webkit에서 아직 공식 지원되지 않는 make_unique를 내부적으로 만들어서 쓰기 위해 variadic template 버전과 variadic template이 지원되지 않는 버전을 같이 만든 패치입니다.

http://trac.webkit.org/changeset/156000

참조: http://en.wikipedia.org/wiki/Variadic_templates

참조2 : http://en.cppreference.com/w/cpp/language/parameter_pack

참조3 : http://pic.dhe.ibm.com/infocenter/lnxpcomp/v111v131/index.jsp?topic=%2Fcom.ibm.xlcpp111.linux.doc%2Flanguage_ref%2Fvariadic_templates.html

[C++11] unique_ptr

소혼 — Fri, 1 Nov 2013 23:40:26 +0900

목차로 가기

<개인적으로 공부한 내용들로, 내용이 완벽하지 않을 수 있습니다. 부족한 부분/틀린 부분에 대한 Comment 환영합니다.>

unique_ptr는 C++에서 제공하는 스마트 포인터입니다.

(TODO: 스마트 포인터에 대한 설명 추가)

unique_ptr를 사용하면 동적으로 힙 영역에 할당된 인스턴스에 대한 소유권을 얻고 unique_ptr 객체가 사라지면 해당 인스턴스를 해제하게 됩니다.

소유권을 갖기 때문에 인스턴스를 소유하는 unique_ptr은 동시에 두개가 되어선 안됩니다.

(둘이 된 경우 소멸되는 과정에서 double free 에러가 발생하게 될 것입니다.)

unique_ptr를 사용하려면 <memory> 헤더를 인클루드하면 됩니다.

간단한 unique_ptr의 사용 예제입니다.

### c++
#include <iostream>
#include <memory>

using namespace std;
void f()
{
    unique_ptr<int> a(new int(3));
    cout << *a.get() << endl;
}

int main()
{
    f();
}

a는 f()함수가 사라짐과 동시에 소멸됩니다. 사용자가 굳이 delete를 해줄 필요가 없고 unique_ptr<int> 객체인 a가 자신의 소멸 시점에 할당된 메모리를 제거할 것입니다.

예제에서는 unique_ptr의 메소드중 하나인 get()을 이용해 할당된 메모리를 얻어 출력하고 있습니다.

a를 선언하는 방법은 아래와 같이 할 수도 있습니다.

### c++
unique_ptr<int> a = unique_ptr<int>(new int(3));

아래와 같이 사용하는 것도 가능합니다.

### c++
unique_ptr<int> factory()
{
    return unique_ptr<int>(new int(3));
}

void f()
{
    unique_ptr<int> a = factory();
    cout << *a.get() << endl;
}

하지만, 아래와 같이 대입을 하는 것은 불가능합니다.

### c++
unique_ptr<int> a = unique_ptr<int>(new int(3));
unique_ptr<int> b = a; // error!!

이 경우 아래와 같은 에러가 발생합니다. (gcc 기준)

$ g++ unique_ptr.cpp -std=c++11
unique_ptr.cpp: In function ‘void f()’:
unique_ptr.cpp:14:25: error: use of deleted function ‘std::unique_ptr<_Tp, _Dp>::unique_ptr(const std::unique_ptr<_Tp, _Dp>&) [with _Tp = int; _Dp = std::default_delete<int>; std::unique_ptr<_Tp, _Dp> = std::unique_ptr<int>]’
In file included from /usr/include/c++/4.7/memory:86:0,
from unique_ptr.cpp:2:
/usr/include/c++/4.7/bits/unique_ptr.h:262:7: error: declared here

std::move

데이터를 이동시키고자 할때는 아래 예제처럼 std::move를 사용해야 합니다.

### c++
void f()
{
    unique_ptr<int> a(new int(3));
    unique_ptr<int> b = move(a);
    cout << *b.get() << endl;
    //cout << *a.get() << endl; //Segmentation Fault!
}

move를 호출하면 a가 소유하고 있는 객체(new int(3))는 b에게 넘어갑니다. 따라서 a는 empty 상태가 되고 이러한 a를 통한 접근은 segmentation fault를 야기하게 됩니다.

위에서 간단히 int를 할당하여 int의 raw pointer를 얻는 법을 계속 보여드렸습니다. 하지만 이런 접근은 그다지 안전하다고 볼 수 없습니다.

unique_ptr에 객체를 할당하고 객체의 메소드를 사용하는 것이 더 일반적인 사용법이라고 생각됩니다. 이 때는 기존에 직접 할당했을 때와 마찬가지로 ->를 사용하여 접근할 수 있습니다. 간단한 예제를 만들어보았습니다.

### c++
#include <iostream>
#include <memory>

using namespace std;
class house
{
public:
    house(int window, int door)
        : m_window(window)
        , m_door(door)
    { }

    int window() const { return m_window; }
    int door() const { return m_door; }

private:
    int m_window;
    int m_door;
};

int main()
{
    unique_ptr<house> home(new house(4, 1));
    cout << home->window() << " windows and " << home->door() << " doors" << endl;

    return 0;
}

home은 house의 객체가 아니라 unique_ptr<house>의 객체입니다. 하지만 window()나 door()와 같은 house의 메소드에 접근할 수 있습니다. (사실은 unique_ptr이 ->를 오버라이드하는 것으로 보는 것이 더 정확합니다.)

std::unqie_ptr::reset

만약 unique_ptr에 할당된 값을 지우거나 다른 값으로 바꾸고 싶다면 reset이란 메소드를 사용하면 됩니다.

위 예제에서 main부분만을 아래와 같이 변경해보겠습니다.

### c++
int main()
{
    unique_ptr<house> home; //empty

    home.reset(new house(2, 1));
    home.reset(new house(4, 1));
    home.reset();

    home.reset(); //nothing happend

    return 0;
}

home 객체는 empty 로 생성되었습니다. 하지만 5번 reset을 통해 house(2, 1)의 ownership을 갖게 됩니다.

6번 reset을 수행하면 위에서 생성된 house(2,1)은 소멸되고 house(4, 1)의 ownership을 갖게 됩니다.

7번 라인과 같이 인자 없이 수행하면 갖고 있는 객체를 소멸시키게 됩니다.

이 동작은 9번 라인과 같이 현재 객체가 없는 경우에도 아무런 문제가 없습니다.

std::unique_ptr::release

현재 소유한 인스턴스의 소유권을 해제 없이 놓고자 할때는 release라는 메소드를 사용합니다.

이 경우, 반환된 인스턴스를 직접 해제해 주어야 합니다.

만약 현재 unique_ptr객체가 empty였다면, 반환된 인스턴스는 nullptr이 될 것입니다.

### c++
int main()
{
    unique_ptr<house> home; //empty

    house *p = home.release();
    if (p)
        cout << "It's not printed" << endl;
    home.reset(new house(4, 1));

    p = home.release();
    if (p) {
        cout << "p should be released" << endl;
        delete p;
    }

    return 0;
}

custom deleter

이미 알고 계시겠지만, unique_ptr은 메모리의 할당에는 관여하지 않으면서 메모리의 해제를 수행합니다, 따라서 만약 메모리를 new가 아니라 malloc과 같이 다른 형태로 할당했다면 문제가 발생할 것입니다. 이때는 custom deleter를 구현해주어야 합니다.

아래는 malloc으로 할당하고 custom deleter를 통해 해제하는 예입니다.

### c++
struct my_free
{
    void operator()(void* x) { free(x); }
};

int main()
{
    unique_ptr<int, my_free> a((int*)malloc(sizeof(int)));

    return 0;
}

추가정보1. WebKit에서는 OwnPtr이란 것을 사용했지만, c++11을 사용할 수 있게 된 이후, 현재 unique_ptr로 변경하는 추세입니다.

추가정보2 : c++14 에서는 unique_ptr의 factory인 make_unique가 도입될 듯 합니다.

참조 (custom deleter) : http://stackoverflow.com/questions/3477525/is-it-possible-to-use-a-c-smart-pointers-together-with-cs-malloc

참조 : http://en.wikipedia.org/wiki/Smart_pointer#C.2B.2B_smart_pointers

[C++11] Type Inference: auto

소혼 — Fri, 1 Nov 2013 22:56:48 +0900

목차로 가기

<개인적으로 공부한 내용들로, 내용이 완벽하지 않을 수 있습니다. 부족한 부분/틀린 부분에 대한 Comment 환영합니다.>

- 업데이트
* ts님이 지적해주신 제목 오타 수정

C/C++(C++11 이전의 C++)은 어떤 변수를 사용하려면 변수의 타입을 지정하여 선언(Declaration)을 해야만 합니다. 예를 들면 아래처럼 말입니다.

### c++
int a;
char b;

그러나, 템플릿과 STL등을 사용하다보면 어떤 타입을 지정하여 선언한다는 것이 간단한 일이 아닙니다.

예를 들어 아래처럼 복잡한 타입을 선언해야 할 수 있습니다. (내용은 타 코드에서 아무렇게나 가져왔습니다.)

### c++
HashMap<int, RefPtr<StaticPropertyAnalysis>, WTF::IntHash<int>, WTF::UnsignedWithZeroKeyHashTraits<int>> map = getMap();

이를 위해 C++11에서 등장한 두가지 타입 추론(Type Inference) 방법중 하나가 바로 auto 입니다.

위 문장은 간단히 아래와 같이 선언할 수 있습니다.

### c++
auto map = getMap();

위 문장에서 map의 타입은 compile타임에 getMap의 반환값의 타입에 맞춰 변환될 것입니다.

사실 기존에 auto라는 키워드가 이미 존재했습니다. 스토리지 클래스(storage class)들 중 하나로 지역 변수(local variable)들의 기본 스토리지 클래스였습니다.

이 때 사용하던 auto의 용법은 아래와 같습니다.

### c
auto int i;

그러나 c++11을 사용하면 이 구문은 더이상 유효하지 않습니다.

다시말해, 위 예제를 그냥 c++11이전의 표준 컴파일러로 빌드하면 문제가 없지만 c++11 컴파일러로 빌드하면, 아래와 같은 에러가 발생합니다. (gcc 기준)

auto.cpp: In function ‘int main()’:
auto.cpp:5:14: error: two or more data types in declaration of ‘i’

기존의 auto는 머리속에서 지워버리고(최소한 c++에서는), 이제 c++11에서 다시 등장한 auto에 익숙해지기 위해 몇가지 예제를 보도록 하겠습니다.

### c++
auto i = 5; // i는 integer입니다.
auto str = "string"; // str은 string입니다.
auto* p = new Person; // p는 Person*입니다.
const auto* cp = p; // cp는 const Person*입니다.
auto& r = *p; // r는 Person&입니다.

위 코드를 디버거(gdb)로 실행해보면 아래와 같은 값들을 얻을 수 있습니다.

(gdb) p str
$7 = 0x40095c "str"
(gdb) p i
$8 = 5
(gdb) p p
$9 = (Person *) 0x602010
(gdb) p cp
$10 = (const Person *) 0x602010
(gdb) p r
$11 = (Person &) @0x602010: {name = 0x400960 "ryuan"}

auto의 위력은 STL을 이용해 반환값을 선언하거나, iterator와 같은 코드를 구현할 때 진가를 발휘합니다.

예를 들어, 아래는 vector를 탐색하는 흔한 for loop입니다.

### c++
for (std::vector<int>::const_iterator itr = myvec.cbegin(); itr != myvec.cend(); ++itr)

이것을 auto를 이용하면 아래와 같습니다.

### c++
for (auto itr = myvec.cbegin(); itr != myvec.cend(); ++itr)

참조 1 : http://en.wikipedia.org/wiki/C%2B%2B11

참조 2 : http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2008/n2546.htm

참조 3 (storage class) : http://msdn.microsoft.com/en-us/library/w9hwbe3d%28v=vs.80%29.ASPX

c++11 스터디(목차)

소혼 — Fri, 1 Nov 2013 21:34:50 +0900

C++11에 대한 개인적인 스터디 글들입니다.

<개인적으로 공부한 내용들로, 내용이 완벽하지 않을 수 있습니다. 부족한 부분/틀린 부분에 대한 Comment 환영합니다.>

* [C++11] Type Inference : auto

* [C++11] unique_ptr

* [C++11] Variadic template

* [C++11] rvalue reference

* [C++11] Move semantics

* [C++11] Range based for loop

<계속 추가 예정입니다만. 언제 될지는 미정입니다.>

GCC 버전별 C++0x/C++11 지원 현황 : 링크

Elementary Dark theme

소혼 — Thu, 17 Oct 2013 18:41:35 +0900

최신 Elementary를 빌드하면 됩니다.

전체적으로 버튼 사이즈가 작아졌네요.

[TIZEN][EFL] 타이젠 상에서 EFL 예제 실행하기

소혼 — Fri, 2 Aug 2013 22:49:21 +0900

Tizen SDK 2.2부터는 EFL 개발을 할 수 있습니다. ( Tizen 2.2 정식 SDK 배포 by SeoZ )

단, Tizen을 설치하실 때 Platform Development를 선택하셔야 하고 리눅스에서만 개발이 가능합니다.

이 글은 우분투 (13.04)에서 작성하였습니다.

먼저 Tizen IDE를 실행하시고 New -> Others를 선택합니다.

Tizen 폴더를 선택하여 Tizen Platform Project를 선택합니다.

Template이 나오고 3가지 방법이 있습니다. 다음 릴리즈에는 Sample들도 추가되길 기대해 봅니다.

EFL Application을 선택합니다.

Hello EFL이라는 메뉴를 선택하고 Project name(여기서는 helloEFL)을 지정합니다.

Finish를 눌러 완료합니다.

그러면 Project Explore에 위와 같이 helloEFL이라는 프로젝트가 생겼음을 알 수 있습니다.

프로젝트는 총 4개의 폴더와 4개의 파일로 이루어져 있습니다.

include/ - 헤더파일들을 모아두는 곳입니다. 지금은 dbg.h라는 디버깅 정보를 출력하기 위한 헤더가 들어있습니다.

packaging/ - Tizen에서 platform개발은 rpm파일을 생성하여 이루어집니다. rpm파일 생성을 위한 정보는 spec에 지정하게 되어 있습니다.

po/ - 다국어 지원을 위한 메타 파일들이 들어있습니다.

src/ - 소스 코드들을 모아두는 폴더입니다. 지금은 main.c만 존재합니다.

CMakeLists.txt - Tizen은 빌드 스크립트로 CMakefile을 선호합니다.(Autotools도 동작합니다.) main.c와 인클루드 정보등 빌드 정보를 담은 CMakeLists.txt가 존재합니다.

org.tizen.helloEFL.png - 이 앱을 설치했을때 나오는 기본 아이콘입니다. 밋밋한 회색 원판입니다.(타이젠 로고라도 넣어줬으면 좋았을텐데 말입니다.)

org.tizen.helloEFL.xml.in - 메니페스트 정보를 담는 파일입니다. 빌드를 하면 이 파일을 바탕으로 org.tizen.helloEFL.xml이 생성됩니다.

일단 예제 실행을 위해 빌드를 해보겠습니다.

먼저 에뮬레이터가 실행되어 있는지 확인합니다.
아래 그림처럼 Project explore 아래에 Connection Explore에 보면 현재 실행중인 에뮬레이터 정보가 보입니다.

없다면, 왼쪽에 휴대폰 모양의 버튼을 클릭해 줍니다. (현재 그림에는 한개의 에뮬레이터가 실행중입니다.)

그 다음 에뮬레이터를 root mode로 변환해야 합니다.(에뮬레이터는 한개만 실행중이라고 가정하겠습니다.)

콘솔창을 열어 아래 명령을 실행합니다.

# sdb root on

또 gbs가 설치되어 있어야 합니다.

gbs설치 방법에 대한 가이드는 source.tizen.org의 documentation에서 찾으실 수 있습니다.

gbs 설치가 잘 되었다면 프로젝트 명에서 마우스 오른쪽 클릭을 하여 Run As -> Tizen Platform Project를 선택합니다.

문제가 없다면 에뮬레이터 화면에서 Hello EFL 을 보실 수 있을 것입니다.

(gbs 빌드는 서버에서 의존성 패키지를 가져와 빌드하고 설치하는 과정을 거칩니다. 따라서 시간이 매우 오래 걸릴 수 있습니다.)

몇가지 문제가 있을 수 있는데, 예를 들어 아래와 같은 상황입니다.

이 팝업은 device가 root모드가 아니기 때문에 나타납니다.

sdb root on 을 실행해줍니다.

문제가 없으면 패키징을 할 것인지 물어봅니다.

우분투의 경우 패키징을 위해 관리자 계정의 비밀번호가 필요합니다.(sudo의 비밀번호)

그림을 첨부하지 않았지만, gbs가 설치되어 있지 않으면 빌드 과정에서 실패가 될 것입니다.

이런 경우 gbs를 설치해 주셔야 합니다.

정상적으로 빌드된 후 실행되면 아래와 같은 간단한 EFL Application을 보실 수 있을 것입니다.

[TIZEN] 2.2 Emulator 실행하기

소혼 — Thu, 1 Aug 2013 22:22:32 +0900

Tizen 2.2 에뮬레이터는 기존의 에뮬레이터보다 훨씬 예쁩니다.

에뮬레이터를 실행하면 아래와 같은 화면이 뜹니다.

가운데 + 버튼을 누르면 아래와 같은 화면이 나옵니다.

입력해야 할 정보들은 예전과 유사하지만 디자인이 좀 더 예쁩니다.

Name은 적절한 이름을 입력하고 (tizen),

Ram Size는 1025Mb로 늘렸습니다.

File Sharing을 켜고, [...]을 눌러 적절한 폴더를 선택했습니다.

Confirm버튼을 누르면 아래와 같습니다.

왼쪽에 아래와 같이 입력된 간단한 정보를 보여주는 작은 휴대폰 모양이 생깁니다.

파일들은 ~/tizen-sdk-data/emulator-vms/vms 에 생성됩니다.

휴대폰 모양안에 있는 파란 버튼을 클릭하면 아래처럼 에뮬레이터가 실행됩니다.