마이구미의 HelloWorld 마이구미의 HelloWorld

이 글은 SSL 인증서를 무료로 적용할 수 있는 Let's Encrypt 을 다뤄본다.웹 사이트를 운영하기에 있어, 필수적인 기능이라고 볼 수 있다.실습환경은 Amazon Linux AMI 이다. 현재 본인도 Github Pages 를 통해 포트폴리오 사이트에 SSL 적용하고 있다.Github Page 에서는 다른 서버와 통신을 위해 https 프로토콜을 사용했기 때문이다.포트폴리오 사이트 - https://hotehrud.github.io/portfolio-vue 우선 용어의 개념을 간단히 살펴보자. HTTP, HTTPS 의 차이는 무엇인가? HTTP와 HTTPS 의 차이는 Secure 로써, 보안이라고 볼 수 있다.HTTPS 프로토콜은 전송되는 데이터를 암호화해서 보냄으로써, 데이터 노출의 안전이 보..

이 글은 자바스크립트 내부에서의 setTimeout, setInterval 과 같은 타이머들의 동작을 알아본다.타이머들은 비동기로 처리되는데 이와 관련된 싱글 스레드, 비동기 처리등과 같은 또한 얻을 수 있을 것이다.참고 자료 - https://johnresig.com/blog/how-javascript-timers-work/ 글의 주제는 두 가지 의문을 가지고 글을 진행할 것이다. 첫번째 의문은 다음과 같다. 자바스크립트에서 타이머 관련 함수는 2가지로 볼 수 있다. setTimeout() - 일정 시간 뒤에 함수가 실행된다. * ms(1000분의 1초)setInterval() - 일정 시간마다 함수가 실행된다. 즉, 지연시간(delay)을 조작할 수 있다.하지만 100ms 후 실행을 원하는 함수가 있..

이 글은 버블링(bubbling) 그리고 캡처링(capturing) 을 다뤄본다. 글에 앞서, 다음과 같은 경우를 보자.중첩된 요소에 있어, 이벤트를 발생시킨다면 어떻게 될까?다음 예제를 확인해보자. See the Pen bubbling capturing by leejunghyun (@mygumi) on CodePen. target 을 클릭하게 되면, target -> child -> parent -> root -> body 순으로 알림창을 뜨는 것을 확인할 수 있다.보다시피 이벤트 핸들이 등록된 중첩된 요소들이 하위에서 상위순으로 이벤트가 전파되었다. 위와 같이 중첩된 요소에서 이벤트가 발생할 때, HTML DOM API 의 이벤트 전파(Event Propagation) 는 두 가지 방식으로 구분된다...

이 글은 백준 알고리즘 문제 15686번 "치킨 배달" 을 풀이한다.2018 삼성 SW 역량 테스트 문제이다.접근 방법은 브루트포스와 DFS 를 통해 풀이한다.문제 링크 - https://www.acmicpc.net/problem/15686DFS - http://mygumi.tistory.com/102 크기가 N×N인 도시가 있다. 도시는 1×1크기의 칸으로 나누어져 있다. 도시의 각 칸은 빈 칸, 치킨집, 집 중 하나이다. 도시의 칸은 (r, c)와 같은 형태로 나타내고, r행 c열 또는 위에서부터 r번째 칸, 왼쪽에서부터 c번째 칸을 의미한다. r과 c는 1부터 시작한다.이 도시에 사는 사람들은 치킨을 매우 좋아한다. 따라서, 사람들은 "치킨 거리"라는 말을 주로 사용한다. 치킨 거리는 집과 가장 가..

이 글은 백준 알고리즘 문제 15683번 "감시" 를 풀이한다.2018 삼성 SW 역량 테스트 문제이다.접근 방법은 브루트포스와 DFS 를 통해 풀이한다.문제 링크 - https://www.acmicpc.net/problem/15683DFS - http://mygumi.tistory.com/102 스타트링크의 사무실은 1×1크기의 정사각형으로 나누어져 있는 N×M 크기의 직사각형으로 나타낼 수 있다. 사무실에는 총 K개의 CCTV가 설치되어져 있는데, CCTV는 5가지 종류가 있다. 각 CCTV가 감시할 수 있는 방법은 다음과 같다.1번2번3번4번5번1번 CCTV는 한 쪽 방향만 감시할 수 있다. 2번과 3번은 두 방향을 감시할 수 있는데, 2번은 감시하는 방향이 서로 반대방향이어야 하고, 3번은 직각 ..

자바스크립트의 프로토타입(prototype) 에 대해 다뤄본다. 항상 필요할때마다 찾는 모습을 보니 완전히 내것이 아니라고 느껴 정리하게 되었다. 참고한 글은 오래된 글이지만 아직까지도 가장 잘 정리된 글이라고 생각한다. 참고 링크 - http://insanehong.kr/post/javascript-prototype/ 자바스크립트는 프로토타입이라는 용어를 뗄 수 없다. 그만큼 매우 중요하기에 확실히 이해해야한다. 하지만 자바스크립트 프로토타입은 많은 이들에게 혼란을 주기도 한다. 이유는 천천히 읽어보자. "자바스크립트의 프로토타입(Prototype)은 무엇인가?" 일반적으로 프로토타입(prototype)이란 시제품, 견본 등과 같은 의미로 일반적으로 원형이라는 뜻을 가진다. 질문은 "C++, JAVA ..

이 글은 Vue.js 의 computed 속성이 어떻게 동작하는지에 대해 다뤄본다.computed 속성의 동작 원리를 알기 위해서는 Vue 의 반응형 시스템에 대한 사전 지식이 필요하다.큰 범위에서는 Vue 의 반응형 시스템의 관한 주제가 된다.참고한 링크의 번역이 아닌 본인이 재구성한 점을 참고바란다.참고 링크 - https://skyronic.com/blog/vuejs-internals-computed-properties See the Pen computed in vue.js by leejunghyun (@mygumi) on CodePen. 위 코드는 버튼을 클릭할때마다 count 변수가 1씩 증가한다. (네트워크 환경에 따라 로딩이 지연될 수 있으니 조금만 기다려주길..)결과적으로 각각 다른 3가지..

이 글은 힙 정렬(heap sort), 힙 소트 라고 불리는 정렬 알고리즘을 다룬다.누구나 한번쯤은 들어봤고, 구현해본 정렬 중 하나이다.빠른 정렬에 분류되고, 시간복잡도가 같은 퀵정렬과 합병정렬과 함께 언급된다.퀵정렬 - http://mygumi.tistory.com/308합병정렬 - http://mygumi.tistory.com/309참고 링크 - https://www.geeksforgeeks.org/heap-sort/ 1. 힙 정렬이란 무엇인가?2. 힙 정렬은 어떻게 구현하는가?3. 힙 정렬은 어디에서 사용하는가? 힙 정렬은 완전 이진 트리를 기본으로 하는 힙(Heap) 자료구조를 기반으로한 정렬 방식이다.완전 이진 트리는 삽입할 때 왼쪽부터 차례대로 추가하는 이진 트리를 말한다.힙에는 부모 노드의..