드디어 한미연합훈련이 끝났다. (만세.....) 인터넷 검색하면 나오는 그 훈련입니다. 보안문제 없어요! 훈련이 끝나고 기존에 웹개발 공부로 하고 있던 유튜브 뮤직 클론코딩을 이어서 진행하기 시작했다. 지금까지는 열심히 구글링하면서 찾아낸 자료로 다음과 같은 화면 구성까지 만들었다. 만들다가 나중에 알게된 건데, PC 유튜브 뮤직과 모바일 유튜브 뮤직 디자인이나 UI구성이 조금 다르다 ㅋㅋㅋ (당연한건가..?) 일단 모바일 버전을 보면서 따라 만들기 시작했으니까 계속 모바일 버전을 참고해서 만들기로 했다. 다크모드는 아직 따로 만들지 않았지만, 나중에 다크모드로 바꿀 예정이다. 내 친구는 저 노란색을 보면서 색이 이상하다고 좀 바꾸라고 했었는데, 저건 Element 영역을 확인하려고 임시로 칠해놓은 색이..

-프로토타입 모든 객체는 각자 부모 역할을 하는 객체를 갖고 있는데, 이 객체를 프로토타입이라고 한다. 객체지향 프로그래밍의 '상속'과 유사하다. 간단하게 객체를 만들어서 출력해보았다. 책이 옛날 책이라 그런지, 책 내용과는 달리 크롬에서도 __proto__ 가 아니라 [[Prototype]] 프로퍼티가 보인다. ECMAScript 명세서에 의하면, 모든 자바스크립트 객체는 자신의 프로토타입 객체를 가리키는 [[Prototype]] 프로퍼티를 가진다. 이 프로토타입 객체의 종류는 여러가지가 있는데, 어떤 종류의 객체를 프로토타입으로 가질지는 사바스크립트 룰에 따라 객체를 생성할 때 결정된다. 예시와 같이 객체 리터럴로 생성한 객체는 Object.prototype 객체를 프로토타입 객체로 가진다. 근데 한..

작년 이맘때부터 만들고 있던 개인사이트가 있다. code-server 설치 테스트 하다가 서버가 맛이 가서 초기화하고 지금은 새로 만들었지만..^^ 한 일주일 전에 깃허브에 레포를 만들어서 형상관리도 시작했다. (왜 진작 깃에 안올렸지..?) 오라클 클라우드에 LEMP 구성을 까는 방법을 설명해둔 블로그 글을 따라 만들면서 freenom.com 사이트를 이용해 무료 도메인도 연결시켜두었었다. 깃허브 레포지토리 이름이기도 한 everdu.tk 이다. 평소처럼 termius 앱으로 서버에 가서 웹사이트랑 유튜브 뮤직 클론코딩을 하고 있었는데, 결과물을 확인하려고 everdu.tk 로 갔는데, 갑자기 DNS 관련 오류가 뜨면서 도메인을 찾을 수 없다고 떴다. 파이어폭스로도 가봤는데 똑같았다. 그래서 1년만에,..

내 블로그에 언제나 응원의 댓글을 달아주시는 코딩워리어 선배님의 정보를 통해 알게된 대회이다. 한번 찍먹으로 참가해봤는데, 생각보다 어렵다고 생각했던 문제가 "엥 이게 된다고?" 하는 느낌으로 풀렸다. A번 N종류의 물약을 모두 사야 하는데, 특정 물약을 먼저사면, 일부 물약을 할인해준다. (할인으로 인한 최소가격은 1) 이 상황에서 물약을 사는 최소 비용을 구하는 문제이다. 당연히 그리디부터 떠올려서 고민해봤는데,,, 물약 종류가 겨우 10개밖에 되지 않았다. 시간제한도 무려 3초로 넉넉했다. 이건 그냥 다해보란 소리겠구나 싶어서 permutation 으로 10종류 물약의 구매 순서를 모두 다 시도해보면서 최소 물약 구매비용을 구했다. 파이썬은 pypy3 제출밖에 안됐는데, 언어별 시간 보너스를 받아 ..

https://www.acmicpc.net/problem/19591 19591번: 독특한 계산기 숫자, '+', '*', '-', '/'로만 이루어진 길이가 106 이하인 수식이 주어진다. 계산 과정 중의 모든 수는 −263 이상 263 미만이며, 0으로 나누는 경우는 없다. 숫자 앞에 불필요한 0이 있을 수 있다. www.acmicpc.net 자료구조를 이용한 깡 구현 문제이다. 구현문제아니랄까 한글자 오타난 걸 디버깅하느라 애를 먹었다. (무수한 assert 문 제출 시도..) 맨 앞의 연산자 / 맨 뒤의 연산자 둘중 하나를 골라서 스택처럼 처리해야하므로 덱을 이용했다. 파이썬으로 풀 때 음수 나눗셈에 주의하고, 음수 하나만 입력으로 들어오는 코너케이스를 주의하면 어렵지 않게 풀 수 있다. from ..

- 객체의 생성 방법 1. Object() 생성자 이용 : var foo = new Object(); 2. 객체 리터럴 방식 이용 : var foo = { "property": value } 3. 생성자 함수 이용 : 객체를 생성하는 생성자 함수를 이용한 개체 생성 - 객체의 프로퍼티 읽고 쓰기 1. [ ] 를 이용한 접근 => 프로퍼티명을 '문자열' 형태로 대괄호에 담아 접근. 프로퍼티명을 그대로 입력하면 그 이름의 변수 값을 toString() 으로 바꾸어 접근하려고 시도하므로 문제가 발생할 수 있다. 프로퍼티명에 변수명으로 쓸 수 없는 특수문자가 있는 경우,대괄호를 이용한 접근만 가능하다. ('-' 등, 책에서는 프로퍼티명이 '표현식' 이거나 '예약어' 일 경우라고 설명하고 있다.) 또 변수의 값을..

1장에서 자바스크립트는 number, string, boolean, null, undefined 이외의 모든 것들은 객체라고 했었다. 자바스크립트의 데이터 타입 종류도 이에 맞게 구분된다. - 기본타입 객체가 아닌 number, string boolean, null, undefined 는 '기본타입' 으로서 그 자체가 하나의 '값'을 나타낸다는 특징이 있다. 자바스크립트의 'typeof' 연산자를 이용해 각 데이터 별 기본타입을 확인할 수 있다. (함수가 아니라 연산자이므로 사용법에 주의) 각 타입별로 알아두면 좋은 부분을 짚고 가보자. -Number 자바스크립트의 모든 숫자형 데이터는 64비트 부동소수점 형태로 저장된다. (C의 double과 유사) 그래서 5/2 의 연산값이 c와 다르게 2가 아니라 ..

Inside Javascript 책의 1, 2장을 읽고, 책을 참고하여 직접 정리한 내용입니다. 객체 자바스크립트에서 객체가 아닌 것 : number, boolean, string, null, undefined 그 이외에는 모두 객체이다. 하지만 기본 데이터 타입인 number, boolean, string 은 객체처럼 다룰 수도 있다. 함수 자바스크립트에서는 함수도 객체이다. 함수는 조금 특별하게 '일급객체 (First Class Object)' 로 다뤄진다. 프로토타입 모든 객체는 '프로토타입 객체'와 연결(Link)되어있다. 어떤 유튜브 영상에서는 프로토타입을 '유전자'로 묘사하기도 했다. 실행 컨텍스트와 클로저 자바스크립트는 실행 컨텍스트를 만들고 그 안에서 실행되는데, 이 실행 컨텍스트가 갖는 ..

https://www.acmicpc.net/problem/16566 16566번: 카드 게임 첫째 줄에 세 개의 자연수 N, M, K가 주어진다. (1 ≤ M ≤ N ≤ 4,000,000, 1 ≤ K ≤ min(M, 10,000)) 다음 줄에 카드의 번호를 나타내는 M개의 자연수가 주어진다. 각각의 수들은 1 이상이고 N 이하이며 서로 www.acmicpc.net 이분 탐색을 쓰면 좋겠다고 떠올렸지만, 한번 쓴 카드를 다시 쓰지 않도록 체크하는 부분을 어떻게 해야할지 떠올리지 못했던 문제이다. 결국 알고리즘 분류를 통해 힌트를 얻고 풀었다. 분리집합을 보고 처음에는 어떻게 분리집합을 이용해서 풀 수 있을지 감이 안잡혔는데, 노트에 생각을 정리하다보니 아이디어가 떠올랐다. 이분탐색, 특히 upper bou..

https://www.acmicpc.net/problem/14244 14244번: 트리 만들기 n과 m이 주어졌을 때, n개의 노드로 이루어져 있고, m개의 리프로 이루어져 있는 트리를 만드는 프로그램을 작성하시오. 항상 정답이 존재하는 경우만 입력으로 주어진다. 트리는 사이클이 없는 www.acmicpc.net 난이도는 쉽지 않아보이는데 의외로 쉽다. 알고리즘 분류에 나와있듯 트리를 이용한 구성적인 문제다. 트리가 어떻게 구성되는지 일반화 될 수 있는 규칙을 찾아 문제를 풀면 된다. 문제 조건에 의해 리프노드는 항상 최소 2개이고, 답이 항상 존재한다. 리프노드가 2개인 경우는 딱 한가지다. 모든 노드가 일직선으로 연결되면 된다. 리프노드가 3개 이상인 경우는 하나의 중심 노드에 대해 리프노드를 3개 ..