김성원의 코딩 일기

형제와 부모 노드 - 같은 부모를 가진 노드는 현제 노드라고 한다. 대표적으로 와 가 있다. nextSibling - 다음 형제 노드 정보를 알 수 있다. previousSibling - 이전 형제 노드 정보를 찾는다. parentNode - 부모 노드 정보를 알 수 있다. 요소 간 이동 - childNodes를 이용하면 텍스트 노드, 요소 노드, 심지어 주석 노드까지 참조할 수 있다. 하지만 실무에서 텍스트 노드나 주석 노드는 잘 다루지 않는다. 웹 페이지를 구성하는 태그의 문신인 요소 노드를 조작하는 작업이 대다수다. - 챕터 앞쪽에서 다뤘던 관계와 유사해 보인다. Element라는 단어가 추가된 점이 다르다. children - 프로퍼티는 해당 요소의 자식 노드 중 요소 노드만을 가리킴. first..

문제 설명 과일 장수가 사과 상자를 포장하고 있습니다. 사과는 상태에 따라 1점부터 k점까지의 점수로 분류하며, k점이 최상품의 사과이고 1점이 최하품의 사과입니다. 사과 한 상자의 가격은 다음과 같이 결정됩니다. 한 상자에 사과를 m개씩 담아 포장합니다. 상자에 담긴 사과 중 가장 낮은 점수가 p (1 ≤ p ≤ k)점인 경우, 사과 한 상자의 가격은 p * m 입니다. 과일 장수가 가능한 많은 사과를 팔았을 때, 얻을 수 있는 최대 이익을 계산하고자 합니다.(사과는 상자 단위로만 판매하며, 남는 사과는 버립니다) 예를 들어, k = 3, m = 4, 사과 7개의 점수가 [1, 2, 3, 1, 2, 3, 1]이라면, 다음과 같이 [2, 3, 2, 3]으로 구성된 사과 상자 1개를 만들어 판매하여 최대 ..

문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participant completion return ["leo", "kik..

DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있다. 하지만 무엇가를 하기 전엔, 당연히 조작하고자 하는 DOM 객체에 접근하는 것이 선행되어야 한다. DOM에 수행하는 모든 연산은 document 객체로 시작하면 된다. documentElement와 body, head = document.documentElement document를 제외하고 DOM 트리 꼭대기에 있는 문서 노드는 태그에 해당하는 document.documentElement입니다. = document.body document.body는 요소에 해당하는 DOM 노드로, 자주 쓰이는 노드 중 하나입니다. = document.head 태그는 document.head로 접근할 수 있습니다. ※ DOM의 null은 '존재하지 않음' ..

문제 설명 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다. 전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함수를..

문제 설명 문자열 s가 주어졌을 때, s의 각 위치마다 자신보다 앞에 나왔으면서, 자신과 가장 가까운 곳에 있는 같은 글자가 어디 있는지 알고 싶습니다. 예를 들어, s="banana"라고 할 때, 각 글자들을 왼쪽부터 오른쪽으로 읽어 나가면서 다음과 같이 진행할 수 있습니다. b는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. a는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. n은 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. a는 자신보다 두 칸 앞에 a가 있습니다. 이는 2로 표현합니다. n도 자신보다 두 칸 앞에 n이 있습니다. 이는 2로 표현합니다. a는 자신보다 두 칸, 네 칸 앞에 a가 있..

DOM 구조 직접 보기 Live DOM Viewer에 들어가면 실시간으로 DOM 구조를 볼 수 있고 웹에서는 대방자 도구를 이용해면 DOM을 탐색할 수 있다. 개발자 도구에서 Elements 패널로 이동하면 DOM을 볼 수 있으며 임의로 바꿔 볼 수 도 있다. 내가 원하는 부분을 보고 싶으면 를 누르면 원하는 웹에서 원하는 위치를 누르면 DOM을 보여준다. Elements 패널 우측엔 여러 하위 패널들이 있다. Styles – 내장 규칙(회색 배경)을 포함하여 현재 선택한 요소에 적용된 CSS 규칙을 일률적으로 봐준다. 하단부 박스에 있는 크기(dimension), 마진(margin), 패딩(padding)을 비롯한 스타일 대부분을 Styles 패널에서 바로 수정해 볼 수 있다. Computed – 현재..

문제 설명 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 순위 당첨 내용 1 6개 번호가 모두 일치 2 5개 번호가 일치 3 4개 번호가 일치 4 3개 번호가 일치 5 2개 번호가 일치 6(낙첨) 그 외 로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최저 순위를 알아보고 싶어 졌습니다. 알아볼 수 없는 번호를 0으로 표기하기로 하고, 민우가 구매한 로또 번호 6개가 44, 1, 0, 0, 31 25라고 가정해보겠습니다...

- DOM 따르면 모든 html 태그는 객체이다. 태그 하나가 감싸고 있는 자식 태그는 중첩 태그라고 부르고 내그 내의 문자 역시 객체이다. 이런 모듬 객체는 JS로 접근, 조작할 수 있다. 조작은 document를 이용하면 된다. 예) (퍼옴) document.body.style.background = 'red'; // 배경을 붉은색으로 변경하기 setTimeout(() => document.body.style.background = '', 3000); // 원상태로 복구하기 이 외에도 다양한 프로처티가 존재한다. inerHTML - 해당 노드의 HTML 콘텐츠 offsetWidth - 해당 노드의 너비 등등 DOM 예제 트리에 있는 노드는 모두 객체이다. 태그는 요소 노드(element node) (..

문제 설명 수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼쪽에 있는 음식부터 오른쪽으로, 다른 선수는 제일 오른쪽에 있는 음식부터 왼쪽으로 순서대로 먹는 방식으로 진행됩니다. 중앙에는 물을 배치하고, 물을 먼저 먹는 선수가 승리하게 됩니다. 이때, 대회의 공정성을 위해 두 선수가 먹는 음식의 종류와 양이 같아야 하며, 음식을 먹는 순서도 같아야 합니다. 또한, 이번 대회부터는 칼로리가 낮은 음식을 먼저 먹을 수 있게 배치하여 선수들이 음식을 더 잘 먹을 수 있게 하려고 합니다. 이번 대회를 위해 수웅이는 음식을 주문했는데, 대회의 조건..