[Javascript] 디자인 패턴 - 싱글톤 패턴

회사에서 수습기간 동안은 JS에 대한 기본 역량을 향상시키라고 해서 당분간은 스터디 위주의 글을 올릴 예정이다. react 공부만 하다보니 바닐라 js에 대한 기억이 모두 증발하는(?) 상황이 발생해서 기초부터 다시 공부하고 있다. 내가 속한 팀은 기존에 개발되어 있는 에디터를 유지 보수하고 더 나은 제품으로 개발하는 팀이기도 해서 에디터를 공부 삼아 개발했는데 이번 스프린트 미션이 싱글톤 패턴 적용이라 공부하게 됐다 . 싱글톤 패턴이란? 싱글톤 패턴은 전체 시스템에서 클래스의 인스턴스를 하나만 존재하도록 하는 패턴이다. 보통 객체를 만들 때, 하나의 생성자로 여러개의 서로 다른 객체를 만들 수 있는데, 싱글톤에서는 단 하나의 객체만 존재하는 것이 보장된다. 가장 간단한 싱글톤 예제는 아래와 같이 객체 ..

• format_list_bulleted 개발
• · 2021. 8. 30.
• textsms

[Javascript] document.Selection 과 Range 정리

Selection selection - Web API | MDN A Selection object represents the range of text selected by the user or the current position of the caret. To obtain a Selection object for examination or manipulation, call window.getSelection(). developer.mozilla.org Selection는 사용자, 캐럿의 현재 위치에 의해 선택된 텍스트의 범위를 나타냅니다. 사용자가 마우스를 통해 드래그하거나, 키보드를 통해 선택한 텍스트의 범위를 나타냅니다. 브라우저에서는 사용자가 선택한 텍스트에 대한 처리를 지원하기 위해 Selecti..

• format_list_bulleted 개발
• · 2021. 8. 16.
• textsms

[Javascript] this에 대해서

This 자바스크립트에서의 this는 c++에서의 this와는 다른 동작을 수행한다. 일반적인 프로그래밍 언어에서 this는 자기 자신을 가리키는 참조 변수이다. Javascript에서 this는 함수 호출 방식에 따라 this가 결정된다. 함수 호출 방식에 따라 다른 this 함수 호출시 this : Window 메소드 호출 시 this : 메소드 객체 내부 함수 호출 시 this : window 엄격 모드에서의 this : undefined 이벤트 리스너 호출 시 this : 이벤트 새 객체 생성자 함수 호출시 this : 생성된 새 객체 화살표 함수는 일반적인 this 바인딩과는 다르게 Lexical this(문맥적 this)를 가진다. 화살표 함수 호출시 this : 함수 선언 시의 상위 스코프의..

• format_list_bulleted 개발
• · 2021. 8. 16.
• textsms

NVM을 이용하여 Node 버전 관리하기

Node.js 버전이 달라..? 개인 프로젝트를 진행하는데 기존에 존재하고 있는 boiler-plate에 추가 작업을 하려고 했었습니다. server와 client단이 나누어져 있기 때문에 각각에 대한 npm을 install 해주고 npm run을 실행하고서 잘 돌아가는지 확인하는데 코드를 만진 것도 없는데 오류가 나서 당황했습니다 😂 오류 코드를 살펴보니 boiler-plate에서 사용하는 노드 버전은 10.16.0이었는데 최신 버전의 node를 사용니까 지원하지 않거나 바뀐 라이브러리들이 있던 것이었습니다. 그렇다고 해서 node버전을 예전 것으로 다운로드하기에는 너무 귀찮겠다고 생각했고.. 언제나 해결책은 있으니까 해결 방법을 찾아보았습니다. 구글에 단순히 노드 버전 관리라고만 쳐도 다양한 정보가 ..

• format_list_bulleted 개발/NPM
• · 2021. 6. 20.
• textsms

[프로그래머스] 방문길이

문제 설명 게임 캐릭터를 4가지 명령어를 통해 움직이려 합니다. 명령어는 다음과 같습니다. U: 위쪽으로 한 칸 가기 D: 아래쪽으로 한 칸 가기 R: 오른쪽으로 한 칸 가기 L: 왼쪽으로 한 칸 가기 캐릭터는 좌표평면의 (0, 0) 위치에서 시작합니다. 좌표평면의 경계는 왼쪽 위(-5, 5), 왼쪽 아래(-5, -5), 오른쪽 위(5, 5), 오른쪽 아래(5, -5)로 이루어져 있습니다. 예를 들어, "ULURRDLLU"로 명령했다면 1번 명령어부터 7번 명령어까지 다음과 같이 움직입니다. 8번 명령어부터 9번 명령어까지 다음과 같이 움직입니다. 이때, 우리는 게임 캐릭터가 지나간 길 중 캐릭터가 처음 걸어본 길의 길이를 구하려고 합니다. 예를 들어 위의 예시에서 게임 캐릭터가 움직인 길이는 9이지만,..

• format_list_bulleted Algorithm
• · 2021. 5. 18.
• textsms

[BOJ/백준] 11000번 강의실 배정

문제 수강신청의 마스터 김종혜 선생님에게 새로운 과제가 주어졌다. 김종혜 선생님한테는 Si에 시작해서 Ti에 끝나는 N개의 수업이 주어지는데, 최소의 강의실을 사용해서 모든 수업을 가능하게 해야 한다. 참고로, 수업이 끝난 직후에 다음 수업을 시작할 수 있다. (즉, Ti ≤ Sj 일 경우 i 수업과 j 수업은 같이 들을 수 있다.) 수강신청 대충 한 게 찔리면, 선생님을 도와드리자! 입력 첫 번째 줄에 N이 주어진다. (1 ≤ N ≤ 200,000) 이후 N개의 줄에 Si, Ti가 주어진다. (1 ≤ Si < Ti ≤ 109) 출력 강의실의 개수를 출력하라. 풀이 import heapq import sys heap = [] tc = int(input()) timetable = [list(map(int,..

• format_list_bulleted Algorithm
• · 2021. 5. 10.
• textsms

<