Typiler

얼마전 마이크로소프트(이하 MS)가 새롭게 발표한 윈도우 11이 발표되었습니다. 윈도우 11은 생산성과 엔터테인먼트를 위한 여러 기능 추가 및 UI,UX를 개선했습니다. 사용자가 자신의 PC를 쓰는 방법에 맞춰 바탕화면 및 작업 창을 맞춤형으로 구성하는 것도 가능하다라고 알려졌습니다. 아래 윈도우 11 소개영상을 살펴보겠습니다.

윈도우 11 소개영상

요구사양

변경점

가장 눈에 띄는 변화는 바로 디자인 UI,UX입니다. 바탕화면은 마치 Mac 을 연상시키는 디자인이고, 창 최소화, 최대화 등의 애니메이션도 상당히 개선된것으로 보입니다. 그리고 정보에 의하면 작업표시줄 위치는 변경할 수 없게 되었다고 합니다. 하단에 강제고정이 되었다고 합니다. 이부분은 좀 아쉽네요. 그리고 시작버튼을 눌렀을때 아이콘형식으로 앱을 보여줘 모바일과 비슷한 디자인으로 모바일에 익숙한 세대를 겨냥한 느낌이 듭니다. 영상에서 확인된 앱중에 채팅앱이 있는데, 이것은 Microsoft Teams 의 기능이 채팅 앱을 통합되었다고 합니다. 기존에 사전설치되어 있던 Skype 앱은 제거되었습니다. Microsoft Teams은 화상 통화를 할 수 있는데, 안드로이드 또는 iOS 장치에 SMS를 발송할 수 있다고합니다. 그리고 특정 앱의 화면만 상대방에게 공유할 수 있습니다. 크로스플랫폼으로 설계된 앱이라고하니 나와보면 사용해 봐야할것 같습니다.

제가 찾아본 자료에 의하면 전체적으로 속도가 빨라지고 가벼워 졌다고 합니다. 신형 CPU 장착 PC는 기존 윈도우 10에 비해 성능이 더 좋아졌다고 알려지고 있습니다. 그리고 HDR 지원이 강화되었고, Xbox Series X|S에 탑재된 엑스박스 머신러닝 HDR 기능을 사용할 수 있다고 합니다. 새로운 보안 기술 설계가 운영체제에 접목되었다고 합니다. 신규 보안 기술이 내장되어 있으며 제로 트러스트 지원 운영 체제를 제공해 디바이스의 데이터를 보호하고 무단접근을 차단한다고 합니다.

이것 말고도 많은 기능과 특징이 변경되었다고 합니다. 개발자 버전이 유출되어 이미 설치를 진행해본 사람도 있겠지만, 저는 아직 설치를 하지 않았습니다. 

무료 업그레이드

윈도우 10 사용자는 11으로 무료로 가능합니다. 단, PC 성능을 확인을 하셔야 할 것 같습니다. 이유는 앞에서 이야기한 새로운 보안 기술 설계가 운영체제에 접목 되며 하드웨어 보안을 충족해야 사용이 가능하다고 합니다. 우선 보안 부팅 기능이 있어야 합니다. 보안 부팅은 시스템 펌웨어에 숨어 보안 소프트웨어를 회피하고, 운영 체제 부팅 시 시스템 권한을 탈취하는 악성코드를 차단하는 기능입니다. OEM에서 인증되지 않은 소프트웨어는 부팅에 사용할 수 없기 때문에 부팅 단계에서 발생하는 사이버 공격을 예방할 수 있다고 합니다.

이와 함께 보안 프로세서(TPM2.0)을 탐재해야한다고 합니다. TPM은 암호화 키 등 보안 정보를 저장하는데 사용하는 모듈로, 데이터를 암호화해 유출 사고 시 보호하는 '비트로커' 기능이나 잠금 기능인 윈도우 헬로 등에 필요한 정보를 보관하는 기능이라고합니다.

자기가 사용하는 컴퓨터가 위 기능을 지원하는지 확인하는 방법은 PC설정이나 제어판의 장치보안으로 이동합니다. 여기서 보안 프로세서(TPM) 버전과 보안 부팅 기능이 있는지 확인하면 됩니다. 이를 지원한다면 해당 항목이 표시되면서 '장치가 표준 하드웨어 보안 요구사항을 충족합니다.' 라는 메시지가 표시된다고 하는데, 저는 아래와 같이 아무런 표시가 없고, '표준 하드웨어 보안이 지원되지 않습니다.' 라는 메시지가 표시됩니다. 드디어 PC를 살때가 된것 같습니다. 

이러한 정보를 확인하기 어렵다면 MS의 'windows pc health check'를 설치한 뒤 윈도우 11 설치 가능 여부를 확인 할 수도 있습니다. 하지만 현재(21년6월30일) 관련 프로그램 수정으로 다운로드 경로가 막혀있습니다. 수정이 된 이후 다시 다운로드가 가능할 것으로 보여집니다. 

** 다운로드 링크 : https://www.microsoft.com/ko-kr/windows/windows-11

참고사이트

https://www.microsoft.com/ko-kr/windows/windows-11-specifications

https://m.boannews.com/html/detail.html?idx=98604 

https://namu.wiki/w/Windows%2011

Hoist 라는 사전적 정의는 "(흔히 밧줄이나 장비를 이용하여) 들어 올리다, 끌어 올리다" 입니다. Javascript에서 호이스팅은 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다. 클러저(Closuer)같은 문법들의 효용성을 이해하기 위해서 고전 Javascript가 가졌던 특징입니다. var 이나 let, const 로 정의된 변수나 함수선언문, 함수표현식이 유효범위의 최상단으로 끌어올려지는 것처럼 보여지는 현상인데, 실행 컨텍스트가 활성화 되었을때 해당 영역에서 변수의 이름을 메모리에 먼저 수집하는 현상으로 인해 발생하는 현상이라고 합니다. 

이렇게 이야기하니 너무 어렵네요. 간단하게 '유효범위 코드가 실행되기 전 메모리에 먼저 저장했던 선언문을 사용할 수 있다'는 의미입니다. 간단한 예제를 확인해 보겠습니다.

Javascript가 어떤 코드 구분을 실행하기 전에 함수 선언을 메모리에 저장하는 방식의 장점 중 하나는 코드에 선언하기 전에 함수를 사용할 수 있다는 것입니다. 간단한 예제를 만들어 보았습니다. 아래는 정상적으로 동작하는 코드입니다.

      function printName(name){
        console.log("My name is " + name);
      }

      printName("typiler");

이제, 함수를 작성하기 전에 함수를 호출하면 어떤 일이 있는지 살펴봅시다.

      printName("typiler2222");
      
      function printName(name){
        console.log("My name is " + name);
      }

비록 함수를 작성하기 전에 함수를 호출하였지만, 코드는 여전히 동작합니다. 이는 Javascript에서 컨텍스트 실행이 작동하는 방식 때문입니다. 

호이스팅은 다른 데이터 타입 및 변수와도 잘 작동합니다. 변수는 선언하기 전에 초기화하여 사용될 수 있습니다. 그러나 초기화 없이는 사용할 수 없습니다.

    cnt = 6;
    cnt += 5;
    var cnt;
    console.log(cnt);

cnt가 선언되지 않더라도 에러를 내지 않습니다. Javacript는 초기화가 아닌 선언만 끌어올립니다(Hoist). 만약 변수를 선언한 뒤 나중에 초기화시켜 사용한다면 그 값은 undefined로 지정됩니다. 아래 두 예제는 같은 동작을 보여줍니다.

    var i = 0;
    console.log(i + " " + j);
    var j = 0;

    var x = 7;
    var y;
    console.log(x + " " + y);
    y = 3;

이와 같은 호이스팅 때문에 의도한 결과가 나오지 않을 수도 있으니 개발 시 이부분에 대한 이해가 필요합니다.

더 많은 정보는 아래 사이트를 참고하여 주십시오. 여기까지 간단한 호이스팅에 대한 설명이였습니다. 

참고사이트

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

https://namu.wiki/w/%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85

브라우저는 컴퓨터 혹은 모바일에서 가장 많이 사용하는 소프트웨어일 것 입니다. 그렇다면 브라우저는 정보를 어떠한 과정을 걸쳐 화면에 표시하는것 일까요? 간단하게 알아보도록 하겠습니다.

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 자원은 보통 HTML 문서입니다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정합니다. 브라우저의 구성요소는 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 통신, UI 백엔드, 자바스크립트 해석기, 자료 저장소 등이 있습니다. 여기서 저는 화면을 표시하는 부분인 렌더링 엔진에 대해서 알아보도록 하겠습니다.

렌더링 엔진

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일을 합니다. HTML 및 XML 문서와 이미지를 표시할 수 있습니다. 렌더링 엔진은 브라우저마다 다릅니다. 

렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻은 것으로 시작합니다. 아래는 기본 동작 과정을 요약한 그림입니다.

렌더링 엔진은 HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환합니다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱합니다. 스타일 정보와 HTML 표시 규칙은 "렌더 트리"라고 부르는 또 다른 트리를 생성합니다. 렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시됩니다.

렌더 트리가 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미합니다. 다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정을 합니다. 일련의 과정들이 점진적으로 진행된다는 것을 아는 것이 중요합니다. 

동작 과정 상세 (예: 웹킷)

1. HTML을 파싱하여 DOM 노드를 만듭니다. 이 DOM 노드들을 병합하여 DOM 트리를 만듭니다.
2. CSS를 파싱하여, 스타일 규칙을 만듭니다.
3. DOM 트리와 스타일 규칙을 사용하여, 어테치먼트 라는 처리를 하여 렌더 트리를 생성합니다.
4. 렌더 트리를 배치합니다.
5. 렌더 트리를 화면에 그립니다.

각 단계별로 자세한 설명은 아래의 참고사이트를 이용하면 자세한 설명이 있습니다. 가장 중요한 것은 아래 5단계입니다.

1. DOM 파싱: HTML 마크업을 처리하고 DOM 트리를 생성
2. CSS 파싱: CSS 마크업을 처리하고 스타일규칙 생성
3. 어테치먼트: DOM 트리와 스타일 규칙을 결합하여 렌더 트리 생성
4. 배치: 렌더 트리에서 각 노드의 기하학적 형를 계산
5. 그리기: 개발 노드를 화면에 그림

참고사이트

https://d2.naver.com/helloworld/59361

https://chanyeong.com/blog/post/43

https://beomy.github.io/tech/browser/browser-rendering/

VMware로 만들어진 CentOS 이미지를 기동하니 아래와 같은 에러 나타납니다. 오류 메시지는 아래와 같습니다.

This host supports Intel VT-x, but Intel VT-x is disabled.
(해석) 이 호스트는 Intel VT-x를 지원하지만 Intel VT-x는 비활성화되어 있습니다.

원인은 간단합니다. Intel VT-x 를 지원하는데 이 기능이 비활성화 되었있다는 내용입니다. 그렇다면 Intel VT-x 기능을 어떻게 활성화를 해야할까요? 방법은 간단합니다. 컴퓨터를 재기동하고 부팅화면에서 DEL 키 혹은 F2를 눌러 BIOS 로 진입니다. (PC마다 키는 다를 수 있습니다.)
이곳에서 CPU 설정관련 메뉴를 보면 Intel Virtualiztion Technology 가 Disabled 되어있는 것을 볼 수 있습니다. 이것을 Enabled 로 변경하고 변경을 저장하여 재부팅하면 됩니다. 제 PC의 경우 아래와 같이 변경을 하였습니다.

단, CPU설정에 가도 Intel Virtualiztion Technology 가 없는 경우가 있습니다. 이것은 BIOS를 최신 버전으로 업데이트 해서 나오는 경우가 있고, CPU가 Intel Virtualiztion Technology 를 지원하지 않는 경우 입니다.

CPU 지원 여부는 아래 링크를 통해서 확인 가능합니다.

https://ark.intel.com/content/www/us/en/ark/search/featurefilter.html?productType=873&2_VTX=true

많은 고민 끝에 VMware에 설치할 OS 를 선정하였습니다. CentOS Stream 8 입니다. 우분투를 한번도 사용하지 않아서 설치를 해볼까 했는데, 아무래도 서버를 공부하기에는 우분투보다는 CentOS가 더 좋을 것 같다는 생각이 들었습니다. CentOS는 아래와 같이 설명을 할 수 있습니다.

센트OS(영어: CentOS)는 센트OS 프로젝트에서 레드햇 제휴로 개발한 컴퓨터 운영 체제이다. 업스트림 소스인 레드햇 엔터프라이즈 리눅스와 완벽하게 호환되는 무료 기업용 컴퓨팅 플랫폼을 제공할 목적으로 만들어진 리눅스계 운영 체제 가운데 하나다. 6.4 버전부터 베타 버전은 파워PC에서 사용가능할 것으로 예상되지만, 공식적으로 물리 주소 확장 기능을 가진 x86과 x86-64 아키텍처를 지원한다. 레드햇 엔터프라이즈 리눅스의 소스 코드를 그대로 가져와 빌드해 내놓으며 이 과정에서 이루어지는 변형은 레드햇의 상표가 잘리고 그 자리에 CentOS의 상표가 붙는(상표권 분쟁을 피하기 위해) 정도뿐이다. 판수 또한 레드햇 엔터프라이즈 리눅스의 판수를 그대로 가져오며(소수점 아래 숫자는 업데이트 차수를 가리킨다) 오늘날에는 레드햇 엔터프라이즈 리눅스의 행보를 가장 잘 따라가는 운영 체제라고 알려져 있다. 

그런데 오랫만에 CentOS 설치를 하러 자료를 찾았는데, CentOS가 종료된다 라는 이야기가 있어서 자세히 찾아보았습니다. 내용을 요약을 하자면 아래와 같습니다.

• CentOS 8은 2021년 12월 31일에 지원 중단
• CentOS는 향후 CentOS Stream 으로 전환
• CentOS Stream는 RHEL 업스트림 (개발) 배포판
• CentOS 8 사용자는 앞으로 CentOS Stream로 전환하거나 운영 환경에서 사용한다면 RHEL로 전환
• CentOS 7의 지원 기간은 종전과 동일한 2024년06월 30일

또한, 이전에 레드햇 계열 리눅스 리스주기는 Fedora –> RHEL –> CentOS 였는데, 앞으로의 릴리스는 CentOS Stream 이 Fedora와 RHEL 사이에서 마이너 릴리스를 테스트하는 업스트림 배포판 역할을 한다고 합니다. 즉, Fedora → CentOS Stream → RedHat Enterprise 로 변경되는 것입니다. 자세한 내용은 아래 링크를 참고하십시오.

http://www.opennaru.com/linux/centos-%EC%A2%85%EB%A3%8C/

CentOS 7을 설치하려 했으나, CentOS 공식 사이트에 가보니 CentOS Stream 8이 있어서 최신 버전으로 생각되어 이 버전으로 설치를 진행하려 합니다. 일단 설치에 필요한 ISO 파일을 사이트에서 다운받습니다.

https://www.centos.org/download/

1. 사이트에 접속하여 CentOS Stream 8 의 x86_64를 클릭하여 미러링 사이트(저는 Kaist 선택)를 클릭하여 ISO 파일을 다운로드한다. 다운로드는 "CentOS-Stream-8-x86_64-20210617-dvd1.iso" 파일을 다운로드합니다.

2. 다운로드가 완료되었으면 VMware 에서 새로운 가상머신을 만들어 줍니다. 그리고 설정은 아래의 그림들과 같이 진행을 합니다.

이제 CentOS Stream 8 리눅스를 설치할 가상머신 환경이 만들어 졌습니다. 설치를 지정한 디렉토리에 가보면 여러개의 가상머신 관련 파일이 생성된 것을 확인할 수 있습니다.

다음 포스팅에서는 OS를 설치하는 과정을 알아보도록 하겠습니다.

집PC는 윈도우라서 개발용 환경 리눅스 세팅을 하려합니다. 리눅스 환경으로 개발환경을 잡는 이유는 여러가지가 있습니다. 실제 운영하는 서버는 대부분 리눅스 계열입니다. 물론, 윈도욱 계열을 사용하는 서버도 있지만 비중이 높지는 않습니다. 개발환경을 리눅스로 만들어 적응력을 가지는 것도 많은 도움이 됩니다. 그런데 집PC에 윈도우를 삭제하고 리눅스로 설치를 하는 것은 매우 비효율 적입니다. 그래서 VMware 라는 가상머신을 만들어주는 프로그램을 사용하려 합니다. 

가상머신 소프트웨어란?
컴퓨터에 설치된 운영체제 안에 가상의 컴퓨터를 만들고, 그 가상의 컴퓨터 안에서 또 다른 운영체제를 설치/운영할 수 있도록 제작된 소프트웨어 입니다.

물론 멀티부팅등으로 리눅스를 따로 설치하는 것도 방법이지만, 그렇게 구성하는 것도 쉽지 않기 때문에 가상머신을 만드는 것이 시간이 절약됩니다. 저는 윈도우 10 에 VMware 최신버전(현재 16.1.2)을 설치하도록 하겠습니다.

1. VMware 를 아래 공식 사이트로 이동하여 다운을 받습니다.

https://www.vmware.com/kr.html

사이트로 이동하면 다운로드 메뉴가 [참고자료 -> 제품다운로드] 에 있으니 클릭하여 다운로드 사이트로 이동합니다.

제품은 "VMware Workstation Player" 입니다. 많은 제품중에 해당 제품을 찾아 "Download Product"를 선택하여 줍니다.

해당 페이지에서 자신의 운영체제에 맞는 제품을 찾아서 다운로드 합니다. 저는 윈도우 10 64bit 사용중이기 때문에 아래 그림과 같이 Windows 64-bit Operating-Systems 를 다운로드 하였습니다.

중요한 부분을 체크해봐야 합니다. 바로 라이센스 입니다. Workstation Player 의 경우 개인 사용은 무료라고 합니다. 

2. 설치받은 파일을 실행하여 설치를 진행합니다.

라이센스 관련 부분은 동의를 클릭하여 진행하여 줍니다.

키보드 드라이버 관련 부분을 체크하고 다음으로 넘어갑니다.

시작프로그램으로 제품 업데이트 등록할지, 그리고 사용 개선 프로그램에 참여할건지 묻는 화면인데 저는 둘다 해제하고 진행하였습니다.

VMware 단축아이콘 위치 지정인데 기본값으로 두고 진행합니다.

모슨 설정이 끝났으면 설치 준비가 완료됩니다. "Install" 버튼을 눌러 설치를 진행합니다.

설치가 진행이 되고 완료가 되면 "Finish" 버튼을 클릭합니다. 라이센스가 있는 사용자는 라이센스 버튼을 클릭하여 가지고있는 라이센스를 넣어주면 됩니다. 저는 개인용으로 무료버전이므로 "Finish" 버튼을 클릭하였습니다. 그러니 컴퓨터를 재부팅하라고 나옵니다. 컴퓨터를 재부팅하면 설치는 완료됩니다.

컴퓨터를 재시작 후 프로그램 을 실행하여 보면, 아래와 같은 창을 보게됩니다. 라이센스키를 묻는데 위의 옵션 "Use VMware Workstation 16 Player for free for non-commercial use"를 선택합니다. 그리고 다음 창까지 "Finish" 버튼을 눌러줍니다.

VMware 가 정상적으로 실행이 됩니다. 음, 이제 어떤 리눅스를 깔아야 할지 고민을 해봐야 겠습니다. 

지금까지 VMware 설치 진행방법을 정리해 보았습니다.

지난 글에 이어서 컴포넌트에 대하여 알아보도록 하겠습니다. 이번에는 컴포넌트 간 통신에 대하여 자세히 알아 봅니다.

컴포넌트

- 컴포넌트 통신하기

. 컴포넌트 간 통신과 유효범위

뷰는 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없습니다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위를 갖기 때문입니다. 이것은 뷰 프레임워크 내부적으로 정의된 특징이라고 합니다. 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없다는 것 입니다.

뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 값을 참조할 수 있습니다. 가장 기본적인 데이터 전달 방법은 바로 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법입니다.

상위에서 하위로는 props라는 특별한 속성을 전달합니다. 그리고 하위에서 상위로는 기본적으로 이벤트만 전달할 수 있습니다.

. 상위에서 하위 컴포넌트로 데이터 전달하기

props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성입니다. props 형태는 아래와 같습니다. 아래의 형태를 하위 컴포넌트 속성에 정의를 합니다.

Vue.component('child-component', {
   props : ['props 속성 이름']
});

상위 컴포넌트의 HTML 코드에 등록된 child-component 컴포넌트 태그에 v-bind 속성을 추가합니다. v-bind 속성의 왼쪽 값은 하위 컴포넌트에서 정의한 props 속성을 넣고, 오른쪽 값은 하위 컴포넌트에 전달할 상위 컴포넌트의 data 속성을 지정합니다.

<child-component v-bind:props 속성이름="상위 컴포넌트의 data 속성"></child-component>

아래는 예제 코드 입니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue component registration</title>
  </head>
  <body>
    <div id="app">
      <h3>app 인스턴스 영역</h3>
      <!-- // 4 -->
      <child-component v-bind:propsdata="message"></child-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

// 2
      Vue.component('child-component',{
        // 3
        props : ['propsdata'],
        // 5
        template : '<p>{{ propsdata }}</p>'
      });

// 1
      new Vue({
        el:'#app',
        data: {
          message : 'Test Vue! 상위 컴포넌트를 통한 통신'
        }
      });

    </script>
  </body>
</html>

아래는 실행 화면입니다.

동작 과정 (코드에서 주석에 달린 번호를 참고하십시오)

1. new Vue() 로 인스턴스를 생성
2. Vue.component() 를 이용하여 하위 컴포넌트 child-component를 등록
3. child-component 내용에 props 속성으로 propsdata 를 정의
4. HTML에 컴포넌트 태그 추가
   v-bind 속성 propsdata="message" 는 상위 컴포넌트의 message 속성 값을 하위 컴포넌트의 propsdata로 전달 함
5. child-component 의 template 속성에 정의된 값으로 message 에 정의된 텍스트가 됨

여기서 인스턴스가 상위 컴포넌트가 되며, child-component가 하위 컴포넌트가 됩니다. 이렇게 새 컴포넌트를 등록한 인스턴스를 최상위 첨포넌트라고도 부릅니다.

. 하위에서 상위 컴포넌트로 이벤트 전달하기

이번에는 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 발생시켜 보겠습니다. 상위 컴포넌트는 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출하는 방식 입니다.

이벤트 발생과 수신은 $emit() 과 v-on: 속성을 사용하여 구현합니다. 각각의 형식은 아래와 같습니다.

// 이벤트 발생
this.$emit('이벤트명');

// 이벤트 수신
<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>

$emit()을 호출하면 괄호 안에 정의된 이벤트가 발생합니다. $emit()을 호출하는 위치는 일반적으로 하위 컴포넌트의 특정 메스트 내부입니다. 이때 this는 하위 컴포넌트를 가리킵니다.

호출한 이벤트는 하위 컴포넌트를 등록하는 태그에서 v-on:으로 받습니다. 속성의 값에 이벤트가 발생했을 때 호출될 상위 컴포넌트의 메서드를 지정합니다. 아래는 예제 코드입니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue component registration</title>
  </head>
  <body>
    <div id="app">
      <h3>app 인스턴스 영역</h3>
      <!-- // 3 -->
      <child-component v-on:show-log="printText"></child-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

      Vue.component('child-component',{
        // 1
        template : '<button v-on:click="showLog">show</button>',
        // 2
        methods: {
          showLog: function(){
            this.$emit('show-log');
          }
        }
      });

      new Vue({
        el:'#app',
        data: {
          message : 'Test Vue!'
        },
        // 4
        methods:{
          printText: function(){
            console.log("이벤트 받음");
          }
        }
      });

    </script>
  </body>
</html>

아래는 실행결과 입니다.

동작 과정 (코드에서 주석에 달린 번호를 참고하십시오)

1. [show] 버튼을 클릭하면 클릭 이벤트 showLog() 메서드가 실행
2. showLog() 메서트 안에서 this.$emit('show-log') 가 실행되어 show-log 이벤트가 발생
3. show-log 이벤트는 <child-component> 에 정의한 v-on:show-log 에 전달되고 지정한 printText() 를 실행
4. printText() 에서 콘솔에 로그를 출력

뷰에서는 미리 정의해 놓은 데이터 전달 방식에 따라 일관된 구조로 애플리케이션을 작성하게 됩니다. 그러므로 개발자 개개인의 스타일대로 구정되지 않고, 애플리케이션의 모두 동일한 데이터 흐름을 갖습니다. 이는 다른 사람의 코드를 빠르게 파악할 수 있어서 협업하기에 좋습니다.

. 이벤트 버스

상위에서 하위로 props를 전달하고 하위에서 상위로 이벤트를 전달하는 방법을 알아보았습니다. 이번에는 같은 레벨에 있는 컴포넌트 혹은 관계가 없는 컴포넌트 간 통신은 어떻게 해야할까요?  이럴 경우 이벤트 버스를 활용하면 원하는 컴포넌트에 바로 데이터를 전달할 수 있습니다. 이벤트 버스의 형식은 다음과 같습니다.

// 이벤트 버스를 위한 추가 인스턴스 1개 생성
var eventBus = new Vue();

// 이벤트를 보내는 컴포넌트
methods: {
    메서트명: function(){
        eventBus.$emit('이벤트명', 데이터);
    }
}

// 이벤트를 받는 컴포넌트
methods: {
    created : function(){
       eventBus.$on('이벤트명', function(데이터){
           ...
        });
    }
}

위의 형식을 사용하여 이벤트 버스를 구현하는 코드입니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue component registration</title>
  </head>
  <body>
    <div id="app">
      <h3>app 인스턴스 영역</h3>
      <child-component></child-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 1
      var eventBus = new Vue();

      Vue.component('child-component',{
        // 2
        template : '<div>하위 컴포넌트 영역 : <button v-on:click="showLog">show</button></div>',
        methods: {
          showLog: function(){
            console.log("이벤트 전송 start");
            eventBus.$emit('sendEventBus', 100);
            console.log("이벤트 전송 end");
          }
        }
      });

      var app = new Vue({
        el:'#app',
        created: function(){
          // 3
          eventBus.$on('sendEventBus', function(value){
            console.log("이벤트 전달 받음. 데이터:",value);
          });
        }
      });

    </script>
  </body>
</html>

실행 결과입니다.

동작 과정 (코드에서 주석에 달린 번호를 참고하십시오)

1. 이벤트 버스로 활용할 새 인스턴스 1개를 생성
2. 하위 컴포넌트에 template 속성과 methods 속성을 정의, showLog() 메서드 안에서 eventBus.$emit('sendEventBus', 100)를 선언하여 sendEventBus 라는 이벤트를 발생. 또한, 데이터 100이라는 숫자도 전달
3. 상위 컴포넌트의 created 라이프 사이클 훅에 eventBus.$on() 으로 이벤트를 받는 로직 선언. 발생한 이벤트를 수신할때 데이터 100 도 넘겨받아 로그로 출력

이벤트 버스를 활용하면 props 속성을 이용하지 않고도 원하는 컴포넌트 간의 직접적으로 데이터를 전달할 수 있어 편리하지만 컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 되지 않는 문제가 발생할 수 있습니다.

지금까지 인스턴스와 컴포넌트에 관련하여 학습하였습니다. 가장 기본이 되는 개념이기때문에 확실히 익히고 넘어가야 할 것 입니다.

2021.06.22 - [Programe Note/Vue.js] - [Vue.js] 인스턴스 와 컴포넌트 개념(1)

2021.06.22 - [Programe Note/Vue.js] - [Vue.js] 인스턴스 와 컴포넌트 개념(2)

알고리즘 문제를 풀다보면 정렬을 해야하는 경우가 많이 발생합니다. 기본적으로 제공되는 Arrays.sort() 함수가 있지만 이것만으로 문제를 풀기에는 한계가 있습니다. 특히 다중차순을 요하는 문제는 직접 구현하는 것이 빠르고 이해가 쉽습니다.

기본적인 정렬 코드

아래는 오름차순, 내림차순, 다중차순의 기본 정렬 구현 코드입니다.

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.util.Arrays;
import java.util.Comparator;


class Node implements Comparable<Node>{
	int a;
	int b;
	
	public Node(int a, int b){
		this.a = a;
		this.b = b;
	}

	@Override
	public int compareTo(Node tar) {
		
		// tar 기준으로 tar vs this 중 tar 우선순위가 더 높으면 1
		// tar 기준으로 우선순위가 동등하면 0
		// tar 기준으로 tar vs this 중 tar 우선순위가 더 낮으면 -1
		
		if(tar.a > this.a) return 1;
		if(tar.a < this.a) return -1;
		
		// 첫 수가 우선쉰위가 도등할때 아래 조건을 따른다.
		if (tar.b < this.b) return 1;
		if (tar.b > this.b) return -1;
		
		return 0;
	}
}

public class Sort_ex01 {

	// 정렬
	// 1. 오름차순 
	// 2. 내림차순 
	// 3. 다중차순

	static BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
	static BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

	
    public static void main(String[] args) throws IOException {

        Integer[] arr = {5,4,5,4,4,5};
        
        //1. 오름차순
        Arrays.sort(arr);
        
        //2. 내림차순
        Arrays.sort(arr, Comparator.reverseOrder());
        
        //3. 다중차순
        Node[] arrNode = new Node[6];
        arrNode[0] = new Node(5,8);
        arrNode[1] = new Node(4,2);
        arrNode[2] = new Node(5,1);
        arrNode[3] = new Node(4,9);
        arrNode[4] = new Node(4,7);
        arrNode[5] = new Node(5,3);
        
        // 정렬조건
        // 1) 첫번째 수가 큰수 우선
        // 2) 두번째 수가 작은 수 우선        
        Arrays.sort(arrNode);
        
        int a=1;

		br.close();
		bw.close();

    }
}

오름차순, 내림차순은 Arrays.sort() 함수를 이용하여 구현이 간단합니다. 하지만 다중차순의 경우 정렬 조건이 1) 첫번째 수가 큰수, 2) 두번째 수가 작은 수 우선이라고 한다면 위 코드와 같이 class 를 만들어 Comparable 을 이용하여 구현하여 줍니다. 정렬 우선순위는 compareTo() 함수를 오버라이드 하여 구현하는데, tar 기준으로 tar vs this 중 tar 우선순위가 더 높으면 1,  tar 기준으로 우선순위가 동등하면 0,  tar 기준으로 tar vs this 중 tar 우선순위가 더 낮으면 -1 이 중요합니다. 

이러한 방법을 통하여 "숫자와 문자를 다음과 같은 우선순위 조건으로 맞추어 정렬 후 출력" 하는 문제도 해결이 가능합니다. (ex, 1)짝수 우선 2)숫자 오름차순 3)문자 오름차순)

정렬은 알고리즘에서 응용을 많이 하는 것으로 방법을 꼭 숙지하여야 합니다.

플러드 필 알고리즘은 다차원 배열의 어떤 카과 연결된 영역을 찾는 알고리즘 입니다. 그림 프로그램에서 연결된 비슷한 색을 가지는 영역에 "채우기" 도구에 사용되며, 바둑이나 지뢰 찾기 같은 게임에서 어떤 비어 있는 칸을 표시 할 지를 결정할 때에도 사용됩니다.

동작과정

1. 시작하는 칸을 큐에 넣고 방문했다는 표시를 한다.
2. 큐에 원소를 꺼내어 그 칸에 인접한 칸(ex. 상,하,좌,우)에 대하여 3과 같이 동작한다.
3. 인접한 칸에 대하여 방문여부를 판단하여 처음 방문했다면 방문 표시를 남기고 큐에 넣는다.
4. 큐의 모든 원소가 빌 때까지 2의 행동을 반복한다.

시간복잡도

모든 칸이 큐에 1번 들어가는 것이 보장되므로 칸이 N개일 때 시간복잡도는 O(N) 입니다.

참고사이트

https://choijiuen.tistory.com/99

https://ko.wikipedia.org/wiki/%ED%94%8C%EB%9F%AC%EB%93%9C_%ED%95%84

기본코드

2차원 배열 (4*4) 에서 2,1 에서 시작하여 모든 배열을 도는데 걸리는 cnt를 알아내는 예제입니다.

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.util.LinkedList;
import java.util.Queue;

class PNode {
    int y, x;
    PNode(int a, int b)
    {
        y = a;
        x = b;
    }
}

class Main {
    static BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    static BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

    static int [][]map = new int[4][4];
    static Queue<PNode> q = new LinkedList<PNode>();

    public static void main(String[] args) throws IOException {        

        map[2][1] = 1;
        q.add(new PNode(2, 1));

        int[][] direct = {{-1, 0}, {1, 0}, {0, 1}, {0, -1}};
        int cnt = 0;

        while(!q.isEmpty()) {
            PNode now = q.poll();

            //now에서 다음 퍼지는 길 모두 등록
            for (int t = 0; t<4; t++ ) {
                int ny = now.y + direct[t][0];
                int nx = now.x + direct[t][1];
                if (ny < 0 || nx < 0 || ny >= 4 || nx >= 4) continue;
                if (map[ny][nx] != 0) continue;

                map[ny][nx] = map[now.y][now.x]+ 1;
                if (map[ny][nx] > cnt) cnt = map[ny][nx];

                q.add(new PNode(ny, nx));
            }
        }

        bw.write(cnt + "\n");

        br.close();
        bw.close();
    }
}

실행하여 map 의 변화를 알아보면 처음 map은 (2,1) 에서 시작하기 때문에 아래와 같다.

[0, 0, 0, 0]
[0, 0, 0, 0]
[0, 1, 0, 0]
[0, 0, 0, 0]

전부 완료되었을때 map 은 아래와 같이 변경된다.

[4, 3, 4, 5]
[3, 2, 3, 4]
[2, 1, 2, 3]
[3, 2, 3, 4]

위와 같은 결과로 모든 배열이 채워지는데 마지막 숫자인 5가 결과로 나타난다.