1. 유튜브 보면서 그림그리고 있는데 뜬금없이 오프라인이란다. 

그래서 와이파이를 봤더니 와이파이는 멀쩡했고 다른 사이트는 접속이 된다. 

구글만 접속이 안된다. 

구글 관련 링크를 멀웨어로 오폭하고 차단한다고 팝업이 드럽게 올라와서 다른 사람들한테 물어보니 다들 잘 된단다. 

그래서 mzk 돌렸는데도 차단 팝업 뜨길래 URL이랑 IP, 그리고 크롬 폴더 예외까지 추가했는데도 불구하고 차단을 박는다고 난리인 통에 뭘 제대로 하지도 못 할 지경이었다. 아예 구글 접속이 안된다. 

결국 빡쳐서 삭제엔딩. 참고로 디펜더도 돌렸는데 이상 없었다. 

2. 본인은 여기 말고 워드프레스, 미디움, 네이버 블로그도 굴리고 있다. (코딩글도 동시에 올린다)

여기는 좀 덜한데 네이버 블로그는 연식도 오래됐고(거의 16년?), 네이버 블로그의 특성상 불신의 아이콘을 만든 벌레들이 종종 꼬인다. 

대놓고 돈줄테니 글써주세요~ 돈줄테니 블로그 빌려주세요~ 하면 스팸에 걸리니까, 요즘은 매우 지극히 상투적인 인사말을 하면서 접근하는데 그것때문에 이골이 나 있습니다. 

잘 보고 가는 거 알겠으니까, 그런 걸로 댓글 안 달아주셔도 됩니다. 

네이버에서 하도 당한게 많아서 그런 댓글은 의심부터 합니다. 

3. 생활비가 떨어져가서 알바라도 하려고 여기저기 알아보고는 있는데, 면접에서 떨어졌다. 

addEventListener에 대해 설명하면서 스크롤 이벤트도 '있다'고 했는데, 이건 말 그대로 마우스를 스크롤했을 때 일어나는 이벤트이다. 그게 다다.

Reference

https://velog.io/@dunde/Javascript-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%B2%A4%ED%8A%B8

https://velog.io/@dunde/Javascript-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%B2%A4%ED%8A%B8

https://stackoverflow.com/questions/40475155/does-javascript-have-a-method-that-returns-an-array-of-numbers-based-on-start-s

Basic-마우스 스크롤 위치를 화면에 표시하기

See the Pen scroll events-Basics by koreanraichu (@koreanraichu) on CodePen.

여기서는 

let contents = document.querySelector('#content1');

window.addEventListener('scroll', () => { 
  console.log(window.scrollX, window.scrollY);
  let new_pTag = document.createElement('p');
  new_pTag.innerHTML = 'scroll are here: ' + window.scrollY;
  contents.appendChild(new_pTag)
});

를 썼는데 이거는 말 그대로 스크롤을 내렸을 때 X, Y축 위치를 나타낸다. 근데 얘는 스크롤바가 없는 상태에서는 안되더라...

스크롤을 올리고 내릴때마다 색깔 바꾸기

이건 addEventListener가 아니라 windows.onwheel을 사용해서 구현했다. addEventListener('wheel',())와 비슷하다. 일단 블로그를 참고해서 만든 코드부터 보고 가자.

See the Pen Scroll Events-Animation by koreanraichu (@koreanraichu) on CodePen.

HTML이나 CSS는 사실 뭐 특별한 건 없고, 자바스크립트 코드를 보자.

//Reference: https://velog.io/@minkyeong-ko/Javascript-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%97%90-%EB%94%B0%EB%A5%B8-%EB%B0%B0%EA%B2%BD%EC%83%89-%EB%B3%80%EA%B2%BD

var colors = ['#000000', '#333333', '#666666', '#999999', '#CCCCCC', '#FFFFFF'];
var wrapper = document.querySelector('.box');
var title = document.getElementsByTagName('h1')[0];
var text = document.querySelector('#text');

wrapper.onwheel = changeColor;

var colorIndex = 0;
var scrollValue = 0;

function changeColor(e) {
    scrollValue += e.deltaY * 0.01;
    if (scrollValue > 10) {
        colorIndex += 1;
        if (colorIndex > colors.length - 1) {
            colorIndex = 0;
        }
        text.innerText = colors[colorIndex];
        wrapper.style.backgroundColor = colors[colorIndex];
        if (colorIndex >= 3) {
            title.style.color = '#000000'
            text.style.color = '#000000';
        }
        scrollValue = 0;
    }

    if (scrollValue < -10) {
        colorIndex -= 1;
        if (colorIndex < 0) {
            colorIndex = colors.length - 1;
        }
        text.innerText = colors[colorIndex];
        wrapper.style.backgroundColor = colors[colorIndex];
        if (colorIndex >= 3) {
            title.style.color = '#000000';
            text.style.color = '#000000';
        }
        scrollValue = 0;
    }
}

델타는 말 그대로 Δ이다. 그... 자 그래서 저 세모 어디서 봤어요? 슈뢰딩거 방정식? 그건 ∇(del operator)임... 저거 미분에 나오잖아여... 변화량. 근데 변화량이랑 스크롤이랑 뭔 상관이냐.... 휠 이벤트는 위에 스크롤과 달리 휠을 올렸는가/내렸는가를 확인해 거기에 맞는 이벤트를 준다. 크게 if문이 두 개인데 위쪽은 스크롤을 올렸을 때, 아래쪽은 스크롤을 내렸을 때. scrollValue라는 변수를 통해 delta, 즉 스크롤의 변화를 누적시킨 다음 어느정도 변화가 생겼다 그러면 다음 색으로 넘긴다.

그리고 원래 코드에는 없던 기능이 하나 있는데, 검정->하양으로 가다 보면 글자 색이 하양일 때 안 보이는 배경색이 당연히 존재한다. 이건 뭐 착한 사람도 안 보이는 배경이여... 그래서 colorIndex 배열에서 #999999부터는 글자색도 흰색으로 바꿨다.

See the Pen Scroll Events-Animation(Gradation) by koreanraichu (@koreanraichu) on CodePen.

얘는 위의 코드를 살짝 응용했다.

function makeArr(startValue, stopValue, cardinality) {
    var arr = [];
    var step = (stopValue - startValue) / (cardinality - 1);
    for (var i = 0; i < cardinality; i++) {
        arr.push(startValue + (step * i));
    }
    return arr;
}

var colors = [];
var red = makeArr(65, 53, 8);
var green = makeArr(184, 73, 8);
var blue = makeArr(131, 94, 8);

for (let i = 0; i < red.length; i++) {
    var red_grad = (Math.floor(red[i]).toString(16).padStart(2, '0'))
    var green_grad = (Math.floor(green[i]).toString(16).padStart(2, '0'))
    var blue_grad = (Math.floor(blue[i]).toString(16).padStart(2, '0'))
    var color_code = '#' + red_grad + green_grad + blue_grad
    colors.push(color_code)
}

배열 관련해서 추가 및 수정된 부분이 이거. 기본 코드는 배열 안에 풀로 색깔 코드가 들어갔는데, 여기서는 좀 자연스러운 변화를 줘야 하는데 인제 그걸 시작과 끝을 이용해서 알아서 만드는? 뭐 그런거다. 예를 들어서 빨강이 255이고 0까지 5개로 만들어달라고 하면 알아서 딱딱 나누는 대충 넘파이의 linspace같은 기능...인데 이제 그게 자바스크립트에 없어요... 그럼 어쩌겠음. 함수 때려박아야지...

그래서 RGB에 대해 일정한 간격을 가지는 배열을 만든 다음 그걸 합해서 색깔 코드를 만든 게 저거다.

참고로 배경 고정값이 Vue.js 로고 컬러다. 그거 이쁘잖음.

See the Pen Scroll Events-Animation(Gradation 2) by koreanraichu (@koreanraichu) on CodePen.

또 응용편이 나왔는데 이거는 처음 색과 끝 색을 지정해서 매우 자연스러운 색 변화를 유도할 수 있다. 좋아 자연스러웠어 그래서 함수가 또 복잡해졌다. 왜냐하면 입력한 색에서 RGB를 또 가져와야 하거든... 

const button = document.getElementById('confirm');
button.addEventListener('click', () => {
    makeColor()
})

function makeColor() {
    var startcolor = document.getElementById('startcolor').value;
    var endcolor = document.getElementById('endcolor').value;

    var start_red = startcolor.substr(0, 2);
    start_red = parseInt(start_red, 16);
    var end_red = endcolor.substr(0, 2);
    end_red = parseInt(end_red, 16);

    var start_green = startcolor.substr(2, 2);
    start_green = parseInt(start_green, 16);
    var end_green = endcolor.substr(2, 2);
    end_green = parseInt(end_green, 16);

    var start_blue = startcolor.substr(4, 2);
    start_blue = parseInt(start_blue, 16);
    var end_blue = endcolor.substr(4, 2);
    end_blue = parseInt(end_blue, 16);

    var red = makeArr(start_red, end_red, 10);
    var green = makeArr(start_green, end_green, 10);
    var blue = makeArr(start_blue, end_blue, 10);

    for (let i = 0; i < red.length; i++) {
        var red_grad = (Math.floor(red[i]).toString(16).padStart(2, '0'))
        var green_grad = (Math.floor(green[i]).toString(16).padStart(2, '0'))
        var blue_grad = (Math.floor(blue[i]).toString(16).padStart(2, '0'))
        var color_code = '#' + red_grad + green_grad + blue_grad
        colors.push(color_code)
    }

    text.innerText = colors[colorIndex];
    wrapper.style.backgroundColor = colors[colorIndex];

    return colors
}

버튼은 뭐... 다들 아실테니 패스하고, 색깔 부분을 살펴보자. 시작색과 끝색의 RGB로 자연스러운 그라데이션을 만들기 위해서는 RGB별로 10진수가 필요하고, 그걸로 등간격인 10개의 요소를 만들게 된다. 그리고 적용하는 건 똑같다. 근데 이제 여기까지는 글자색이 안바꼈었는데...

function makeColor() {
    var startcolor = document.getElementById('startcolor').value;
    var endcolor = document.getElementById('endcolor').value;

    var start_red = startcolor.substr(0, 2);
    start_red = parseInt(start_red, 16);
    var invert_start_red = 255 - start_red;
    var end_red = endcolor.substr(0, 2);
    end_red = parseInt(end_red, 16);
    var invert_end_red = 255 - end_red;

    var start_green = startcolor.substr(2, 2);
    start_green = parseInt(start_green, 16);
    var invert_start_green = 255 - start_green;
    var end_green = endcolor.substr(2, 2);
    end_green = parseInt(end_green, 16);
    var invert_end_green = 255 - end_green;

    var start_blue = startcolor.substr(4, 2);
    start_blue = parseInt(start_blue, 16);
    var invert_start_blue = 255 - start_blue;
    var end_blue = endcolor.substr(4, 2);
    end_blue = parseInt(end_blue, 16);
    var invert_end_blue = 255 - end_blue;

    var red = makeArr(start_red, end_red, 10);
    var invert_red = makeArr(invert_start_red, invert_end_red, 10);
    var green = makeArr(start_green, end_green, 10);
    var invert_green = makeArr(invert_start_green, invert_end_green, 10);
    var blue = makeArr(start_blue, end_blue, 10);
    var invert_blue = makeArr(invert_start_blue, invert_end_blue, 10);

    for (let i = 0; i < red.length; i++) {
        var red_grad = (Math.floor(red[i]).toString(16).padStart(2, '0'));
        var invert_red_grad = (Math.floor(invert_red[i]).toString(16).padStart(2, '0'));
        var green_grad = (Math.floor(green[i]).toString(16).padStart(2, '0'));
        var invert_green_grad = (Math.floor(invert_green[i]).toString(16).padStart(2, '0'));
        var blue_grad = (Math.floor(blue[i]).toString(16).padStart(2, '0'));
        var invert_blue_grad = (Math.floor(invert_blue[i]).toString(16).padStart(2, '0'));
        var color_code = '#' + red_grad + green_grad + blue_grad;
        var invert_color_code = '#' + invert_red_grad + invert_green_grad + invert_blue_grad;
        colors.push(color_code)
        invert_colors.push(invert_color_code)
    }

    text.innerText = colors[colorIndex];
    text.style.color = invert_colors[colorIndex];
    title.style.color = invert_colors[colorIndex];
    button.style.color = colors[colorIndex];
    button.style.backgroundColor = invert_colors[colorIndex];
    wrapper.style.backgroundColor = colors[colorIndex];
    for (let i = 0; i < label.length; i++) {
        label[i].style.color = invert_colors[colorIndex]
    }
    for (let i = 0; i < input.length; i++) {
        input[i].style.border = '2px solid' + invert_colors[colorIndex];
    }

    return colors, invert_colors
}

놀랍게도 글자색도 바뀌게 할 수 있었다. 이것은 매우 놀랍게도 진짜다. 입력값을 RGB로 나눠서 배열로 만들 때 invert_colors라는 배열을 추가로 만들게 되는데, 여기에 들어가는 요소는 시작색의 RGB, 끝색의 RGB의 255의 보수로 만든 배열이 들어간다. 이게 뭐야 우리가 2의 보수 1의 보수가 유명해서 글치 이진법에서만 보수 쓰라는 법은 없음. 아무튼 그래서.. 

이렇게 됐다. 근데 글자색 알고싶은데 어떻게 하냐고? 

text.innerText = 'background-color: ' + colors[colorIndex] + '/' + 'font-color: ' + invert_colors[colorIndex];

이걸로 다 바꿨지... 

참 쉽죠? 

문제

https://www.acmicpc.net/problem/11650

https://www.acmicpc.net/problem/11651

주어진 좌표를 정렬하는 문제. 참고로 두 문제가 정렬 방식이 다른데 11650번은 x좌표 기준, 11651번은 y좌표 기준이다.

Reference

https://haesoo9410.tistory.com/193

풀이

일단 문제의 기본 골자는 XY 좌표를 받아서 요구조건대로 정렬하는 것이다. 그리고 좌표를 어떻게 받을거냐... 2차원 배열로 받을거다.

import sys
N = int(sys.stdin.readline())

array = [[list(map(int,sys.stdin.readline().split()))] for j in range (N)]
array.sort()

for x in array:
    for y in x:
        print(y[0],y[1])

11650번은 이렇게만 해도 알아서 정렬된다. 

import sys
N = int(sys.stdin.readline())

array = [[list(map(int,sys.stdin.readline().split()))] for j in range (N)]
array.sort(key = lambda x:(x[0][1], x[0][0]))

for x in array:
    for y in x:
        print(y[0],y[1])

11651번은 익명함수 김람다씨를 불러야되는데... y좌표를 기준으로 먼저 오름차순 정렬을 하고 y좌표가 같으면 x좌표 오름차순으로 정렬하는거라 이렇게 하면 된다. 저거 여러개 묶을거면 튜플로 해야된다.

근데 하다보니까 자꾸 인덱스 에러나서 봤더니 배열이 ㅋㅋㅋㅋㅋㅋ 삼중이여 ㅋㅋㅋㅋㅋㅋ 원래 이차원 배열이면 [[1,2],[3,4],[1,5]] 이런 식이어야 되는데 저 코드로 만든 배열은 대괄호가 하나 더 있는거라. 그래서 정리했다.

import sys
N = int(sys.stdin.readline())

array = [list(map(int,sys.stdin.readline().split())) for j in range (N)]
array.sort(key = lambda x:(x[1],x[0]))

for x in array:
    print(x[0],x[1])

강제로 고차원행 된 배열에 묵념을 표합시다.

자료구조 하면서 많이 들어봤다 그죠? 그겁니다. 네.

이거 진짜 생각보다 간단하다. 아니 진짜임.

쉽게 말하자면 스택은 부페 접시고, 큐는 대기열이다. 회계로 치자면 스택은 후입선출법이고, 큐는 선입선출법이다. 

회계에서 물건 들어오고 나간 걸 기장하는 방식 중에 선입선출법, 후입선출법이 있다. 이건 뭐냐면 먼저 산 물건이 먼저 나간걸로 기장하느냐, 나중에 산 물건이 먼저 나간걸로 기장하느냐의 차이. 

예를 들어서 내가 어제는 카스테라 100개를 하나당 1000원에 샀고, 오늘은 카스테라 100개를 하나당 900원에 샀다. 그리고 150개를 팔았을 때 선입선출법은 어제 들여온 천원짜리 100개+오늘 들여온 900원짜리 50개가 나가고 후입선출법은 오늘 들여온 카스테라 900원짜리 100개+어제 들여온 카스테라 천원짜리 100개가 나간다. 카스테라를 개당 1200원에 팔았다 치면 18만원이고, 선입선출법일 때는 나간 카스테라에 대한 원가가 10만원+45000원 해서 14만 5천원이지만 후입선출법일 때는 9만원+5만원 해서 14만원이다.

부페 접시와 스택

스택은 후입선출법이라고 했는데, 부페 접시를 예로 들어보자.

1. 부추엄마(나임) 친구의 결혼식에 가게 된 김부추씨, 결혼식장 부페에는 각종 산해진미가 있었다. 김부추씨는 일단 초밥을 먹기 위해 접시를 들었다. -> 팝

2. 김부추씨와 같이 초밥을 먹기 위해 접시를 들려던 김배추씨, 그 때 직원이 갓 설거지+건조를 마친 따끈따끈한 접시를 들고 와 접시 더미 위에 쌓았다. -> 푸시

스택에서 뭘 꺼내가는 건 팝, 스택에 뭘 올리는건 푸시라고 한다. 접시 더미를 예시로 들자면 쌓여있는 접시 더미에서 맨 위에 있는 접시를 꺼내는 건 팝, 접시 더미 위에 접시를 또 올리는 건 푸시.

스택에는 크기가 정해져 있는데, 이것도 접시에 비유할 수 있다. 접시를 너무 높게 쌓으면 접시 더미가 무너져서 깨질 수도 있고(접시장창), 만약 사람들이 많은 부페에서 접시가 우르르 꺠진다면 안전상의 문제도 문제지만 사람들이 음식을 먹을 수 없게 된다. 만약 접시 더미가 매우 안정해서 깨지지 않는다고 가정하고 사람 키만큼 쌓는다면, 최홍만이나 야오밍같은 장신이 아닌 이상 접시 더미에서 접시를 꺼낼 수 없다. 그래서 부페에서도 접시 더미를 여러 개 두고, 갓 건조를 마친 따끈따끈한 접시를 쌓을 때도 크기가 제일 작은 접시 더미에 쌓는다. 

여담이지만 스택이 넘치는 것을 스택 오버플로우라고 한다. 예, 그 사이트 맞아요.

대기열과 큐

큐는 대기열을 예시로 들 수 있다.

1. 교양수업 과제때문에 친구와 함께 전시회에 가기로 한 화강도르마무. 오늘은 주말인데다가 하필 전시회가 또 유명한 화가의 전시회라 대기열이 엄청 길었다. -> 큐

2. 20분정도 기다리고 있으니 조금씩 줄이 줄어들고, 앞에 서 있던 사람들이 들어가는 게 보인다. -> 디큐

3. 화강도르마무와 같이 전시회를 보러 갔던 김양상추씨가 뒤를 보니, 사람들이 김양상추씨의 뒤로 줄을 서고 있었다. -> 인큐

수강신청이나 게임 대기열, 은행 대기열(줄을 서지는 않지만 오는 순서대로 번호표를 뽑고번호순으로 처리한다), 콘서트 대기열, 팝업스토어 대기열도 일종의 큐라고 할 수 있다. 내 뒤로 누군가 줄을 서는 것은 인큐, 내 앞에 있던 사람이 들어가는 것은 디큐.

DOM은 Document Object Model의 약어로, XML이나 HTML에 접근하기 위한 일종의 인터페이스이다. 자바스크립트는 프론트엔드에서 많이 사용하는 언어의 특성인지는 모르겠지만 아무튼 이 DOM들을 지지고 볶는 게 가능하다. 이벤트 추가는 기본이고 생성 삭제 CSS 클래스 부여까지 다 된다. 남자친구 못 만드는 것만 빼면 만능... 어차피 여욱이도 못 구함 질량이 0이라 

document.querySelector()

얘는 같이 다니는(?) 친구가 하나 있는데 바로 querySelectorAll()이다. 그럼 같은 역할인가요? 기본적으로는 그렇다. 기본적으로는 그런데 친구인 쿼리셀렉터올은 해당하는 요소를 죄다 가져온다. 예를 들어서 어떤 문서에 p태그가 6개 있다 그러면 쿼리셀렉터는 맨 위에꺼 하나만 가져오는데 쿼리셀렉터올은 p태그를 다 가져온다.

1) HTML 요소를 가져올 때 -> document.querySelector('p')
2) 클래스 이름으로 가져올 때 -> document.querySelector('.classname')
3) 아이디로 가져올 때 -> document.querySelector('#id')

왜 이렇게 쓰냐면 쟤는 종류불문 저거랑 맞는 걸 가져오기 때문. 클래스건 아이디건 종류 안 가리고 지명이 가능하다. 

See the Pen document.querySelector by koreanraichu (@koreanraichu) on CodePen.

(document.querySelector)

See the Pen document.querySelectorAll by koreanraichu (@koreanraichu) on CodePen.

(document.querySelectorAll)

아, 한가지 중요한 게 있다. querySelectorAll()로 요소를 가져올 때는 배열로 가져온다. 위 예시의 경우 div 세 개를 배열로 가져왔는데, 이 경우 내용이나 CSS를 바꾸기 위해 위의 querySelector에서 했던 것처럼 하게 되면 자바스크립트가 미쳤습니까 휴먼? 하게 된다. 그래서 querySelectorAll로 가져온 것은 for 혹은 foreach 등의 반복문을 돌려서 적용해야 한다.

document.getElement~ 

위에 있는 쿼리 시리즈는 조건이 일치하면 아이디건 클래스건 지명이 되지만, 얘네들은 종류에 따라 쓰는 게 다르다.

1) 클래스명으로 부를때는 document.getElementsByClassName('class')
2) 아이디로 부를때는 document.getElementById('id')
3) 태그 네임으로 부를때는 document.getElementsByTagName('p)

쿼리시리즈랑 달리 이쪽은 아이디로 가져올래, 클래스명으로 가져올래, 태그명으로 가져올래가 정해져 있어서 뒤에 가져올 게 뭔지만 쓰면 된다. 즉, 쿼리셀렉터와 달리 클래스나 아이디명으로 넣지 않는 이상 .이나 #이 들어갈 필요가 없다.

See the Pen document.getElement~ by koreanraichu (@koreanraichu) on CodePen.

한가지 중요한 게 있다. 아이디는 HTML 내에서 동일할 수가 없는 대신 요소나 클래스명은 동일할 수가 있다. HTML에 p태그 여러개 넣잖아요? 그래서 클래스 이름이나 태그명으로 가져오는 게 Elements인것. 그리고 얘네들은 '배열로' 가져오기 때문에 쿼리셀렉터올마냥 반복문을 써야 한다.

근데 생각해보니까 이거 전에 픽하는게 먼저 와야 하지 않나... 뭐 아무튼.

뭔가 기깔나는 것을 구현하기 위해 이 블로그 혹은 다른 블로그를 보다 보면 그런 게 있다. 어? HTML에서 온클릭도 안 줬는데 작동하네? 어? 이거 더블클릭 하니까 작동하네? 어? 스크롤 내리니까 작동하네?

를 알아보자.

굳이 버튼에 온클릭을 안 줘도 작동하는 비결이 바로 addEventListener()이다. getElementByID나 querySelector같은 걸로 DOM(쉽게 말하자면 문서의 어떤 요소)을 가져와서 addEventListener()로 이벤트를 추가할 수 있다. 이 추가라는 게 단순히 알림이나 콘솔 이런걸 떠나서 뭐 모달 소환 곱하기 이런 함수까지 된다. 

See the Pen Eventlistner by koreanraichu (@koreanraichu) on CodePen.

참 쉽죠? 저 코드는 간단하다. h1을 가져온다->h1을 클릭하면 알림이 뜨게 만든다. 끝. 오케이? 그럼 클릭만 되나요? ㄴㄴ 그건 아니다.

See the Pen Untitled by koreanraichu (@koreanraichu) on CodePen.

더블클릭도 된다. 그럼 클릭이나 더블클릭 말고 키를 눌러서 입력하는 건 어떻게 할까? addEventListener()에 keydown을 주면 된다. 예전에는 키프레스를 썼었는데 요즘은 키다운/키업이라고... (키다운: 눌렀을 때/키업: 뗐을 때)

See the Pen Untitled by koreanraichu (@koreanraichu) on CodePen.

clear버튼에도 addEventListener를 통해 입력된 것을 전부 지우는 기능을 추가했다. 아무 키나 눌렀을 때 표시되는 것은 e.key와 e.code, 그리고 e.keyCode인데

e.key a & e.code KeyA & e.Keycode 65

이렇게 뜬다. 솔직히 무슨 차이인지는 모르겠다.

그럼... 스크롤도 되나요...? 네, 됩니다. 그런데 그건 설명할 게 많아서 이 글에서는 다루지 않을 예정이다. 나중에 스크롤 이벤트 하면서 다뤄보겠듬...

일단 나는 우마무스메를 안함. 애니도 안 봄. 게임 과금도 그렇게 많이 하는 편이 아니라서 좀 오래 할 것 같은 게임이랑 포고 빼고는 대부분 무과금이기도 하고... 근데 말딸 유명하잖음?

일단 본인은 카톡을 별로 좋아하지 않는데, 그 이유는 1) 무겁고(...) 2) 리눅스 지원을 안해줌. 일단 내 폰이 아이폰 XS Max인데 가끔 열다가 프리징 걸리기도 하고 예전에는 대화방 다른거 가야지->프리징 걸렸던 적도 있었음. 지금도 좀 버벅거릴 때가 있음. 그런데다가 쓸데없이 광고는 왜 뜨는지 모르겠음. 카카오 돈 잘 벌지 않나? 두번째는 내가 공부할 때 연락이 잘 안 되는 이유가 스터디카페에서 하기 때문인데, 그러려면 핸드폰을 진동으로 해야 하고+노트북 2호 OS가 우분투(리눅스)라 카톡이 안됨. 디스코드나 슬랙이라면 몰라도... (텔레그램은 안 쓴 지 오래됐음...)

그리고 카카오 요즘 하는 짓도 별로 좋아하지 않음. 문어발식으로 독점하고 뭐하고 이런건 별로 신경 안 쓰고 있었는데 그것도 개같은 건 맞고, 그거랑은 별개로 카카오페이도 개같아서 안 씀. 카드를 두고 나갔으면 다른 카드로 긁거나 페이코를 쓰고 말지. 카톡 잠금 여는것도 거지같은데 밖에서는 마스크때문에 FaceID도 인식 안되고(그 마스크 쓴 얼굴 인식하는 기능이 내 기종에 없음), 인식 안 되는거 뻔히 알면서 계속 FaceID 물어보는것도 짜증나는데 심지어 버벅거려서 적립 받는것도 귀찮음. 물론 잠금이 귀찮으면 일차적으로 그건 잠금을 안 하면 해결되는 문제이긴 함. 근데 그거랑 별개로 카카오페이를 적립에만 쓰는 이유는 보상이 너무 짠데 온갖 개생쇼는 다 해서 아주 현란함.

반면 네이버페이는 애드포스트로 벌어서 전환도 되고(...), 그걸 음원을 사든 편의점에서 쓰든 쓰면 바로 보상을 주는데 일단 카카오페이보다는 많이 줬음. 다이소에서 네이버페이 포인트로 생필품 사면 10원~20원 적립해주고 그걸로 쇼핑하면 가격 바이 가격인데 보통 100원정도? 리뷰 쓰면 더 줌. 카카오페이로 편의점에서 3000원 긁어봐야 뽑기로 2원 8원 이렇게 주는거랑은 다르지. 그리고 네이버페이도 이펙트는 있는데 카카오페이처럼 2원 8원 이렇게 주면서 현란하게 눈뽕은 안 함. 다이소에서 2000원 썼더라? 여기 10원 받아. 여기서 에코백 샀는데 리뷰도 남겼네? 좀 더 얹어줄게. 반면 카카오페이는 오예 질러쓰 예쓰 가는거야!!! 해놓고 딸랑 2원...ㅋㅋㅋㅋㅋㅋㅋㅋ

솔직히 카카오에 정 떨어진 사람 많을거다. 네카라쿠배의 카인 거 누가 부정함? 돈 X나 잘 벌었잖아. 다음도 인수했고. 근데 지금 카카오에게 가산점 줄 만한 건 티스토리 코드블록이 언어별로 되는거 말고는 없다. (네이버는 언어별로 안됨) 게임 운영도 조졌는데 대처도 조졌다. ㅋㅋㅋㅋㅋ 블라인드에서 비유한 거 보고 되게 웃겼다니까?

나는 3N도 별로 좋아하지는 않는다. 그래도 넥슨이나 넷마블은 IP, 게임성, 캐릭터성 이런 게 괜찮으면 찍먹 내지는 무과금으로 할 용의는 있다. NC는 트릭스터M 이후로 걸렀구요^^ 죄다 리니지에 과금도 무슨 용암불사조볶음면맛이라 난 못하겠음. 근데 이번 일로 거를 회사가 하나 더 늘었다. 카카오게임즈. NC는 과금때문에 거르고, 카카오는 그 거지같은 운영때문에 거른다. 다르게 말하자면 NC게임은 그럴 일은 없겠지만 게임이 스킨만 바꾼 리니지가 아니고 과금만 용암불사조볶음면맛이 아니면 찍먹정도는 해볼 용의가 있지만, 카카오게임즈는 게임성이고 뭐고 운영 조지고 게임 말아먹은 전적때문에 그냥 거른다. 

니네는 강선이형 하는 거 보고 뭐 배웠냐?

요즘은 처서 지났는데 모기가 나대요... 

오늘도 트리플킬 했는데 곧 쿼드라킬 각 나왔음... 

전기모기채는 에어컨에 이은 최고의 발명품입니다. 

문제

https://www.acmicpc.net/problem/25501

회문 판독을 재귀함수로 한다. 문제 제목도 회문. 

Reference

https://my-coding-notes.tistory.com/580

풀이

일단 회문은 거꾸로 해도 같은 게 회문이다. 스위스 기러기 토마토 이런것도 회문이고, 여보 안경 안보여도 회문. 띄어쓰기 빼고 보면 회문 맞다. 근데... 이거... 거꾸로 뒤집은거랑 같으면 회문 콜 하면 되는거 아니었냐... 왜 재귀맛이...

참고로 제한효소 시퀀스도 회문이다. 예? 왜죠? 

5'-GAATTC-3'
3'-CTTAAG-5'

각각 5'에서 3' 방향으로 읽어보자.

참고로 이번 문제는 떠먹여주는 힌트가 있는데, 그걸 고대로 내면 안 되고 두 가지 요소를 추가해야 한다. 첫번째가 몇 번 호출했나이고 두번째가 입력 반복문으로 받는거다.

def recursion(s, l, r):
    if l >= r: return 1
    elif s[l] != s[r]: return 0
    else: return recursion(s, l+1, r-1)

def isPalindrome(s):
    return recursion(s, 0, len(s)-1)

print('ABBA:', isPalindrome('ABBA'))
print('ABC:', isPalindrome('ABC'))

이게 그 떠먹여주는 코드. 

일단 저 두 함수가 뭐 하는거냐... 아래 함수는 입력받아서 인자로 넘겨주는 함수고 위 함수는 인자로 넘겨받은 문자가 회문인지 판독해준다. 근데 문자열 하나 받는데 인자가 3개가 넘어간다? 맨 오른쪽건 문자열 길이-1이다. 어? 인덱싱??? 그렇다.

예시에 나온 ABBA를 예로 들어보면 ABBA, 0, 3이 넘어가게 되는데

1) ABBA, 0, 3 -> 0번째랑 3번재가 같네? -> 0 < 3이므로 크거나 같지 않음 -> ABBA, 1, 2
2) ABBA, 1, 2 -> 1번째랑 2번째가 같네? -> 1 < 2이므로 크거나 같지 않음 -> ABBA, 2, 1
3) ABBA, 2, 1 -> 2 > 1이므로 리턴 1

이렇게 된다. (홀수일때는 0,4->1,3->2로 같아지기때문에 끝)

for i in range(T):
    S = sys.stdin.readline().strip()
    print(isPalindrome(S))

입력 여러개 받는 건 그냥 이렇게만 해도 된다. 단, sys.stdin.readline()으로 받을때는 공백을 반드시 떼주자. 

import sys 
T = int(sys.stdin.readline())

def recursion(s, l, r):
    global count
    count += 1

    if l >= r: 
        return 1
    elif s[l] != s[r]: 
        return 0
    else: 
        return recursion(s, l+1, r-1)

def isPalindrome(s):
    return recursion(s, 0, len(s)-1)

for i in range(T):
    count = 0
    S = sys.stdin.readline().strip()
    print(isPalindrome(S), count)

횟수 세 주는건 유서깊은 count인데... 이제 문제가 있다. 저걸 함수 안에서 선언하고 더하면 괴랄하게 된다. 그리고 for문에서 선언해버리면 함수 입장에서 count는 없는 변수가 돼서 미쳤습니까 휴먼? 한다. 그래서 global로 전역 번수 선언을 해 줘야 한다.

근데 말이 간단이지 헐 나 이것도 못해 개발자 하면 안되나봐 ㅠㅠ 이럴 정도는 아닙니다…

Reference

https://blogpack.tistory.com/1117

https://www.w3schools.com/howto/howto_css_switch.asp

https://codechacha.com/ko/javascript-foreach/

들어가기 전에: 딥-다크-모드

요즘은 많이 쓰이고 있는 다크모드는 배경이 어두운 색인 모드로, 다크 테마라고도 한다. OS나 브라우저, 각종 앱(게임 말고)에서도 지원하는 기능으로, 개발자들 IDE는 다크테마가 국룰. 밝으면 벌레가 꼬인다나... 본인은 PC에서는 디스코드만 다크모드고 폰/패드는 일출/일몰 시간에 따라 다르다. 그래서 내 폰은 해 떨어지면 다크모드가 된다.

그런데 왜 이놈을 쓰는거죠? 일단 나도 가끔 개발하시는 분들을 보는데 다 IDE가 어두운 색이라 한번 물어본 적 있었다.

https://okky.kr/articles/1088381

다크모드가 익숙해서, 기본 설정이라서 쓰시는 분들도 계셨지만 눈이 덜 피곤해서 쓰신다고...

낮에는 햇빛이 있으니까 상관 없지만 밤에 캄캄한데 계속 밝은 화면을 보면

이렇게 된다. 그리고 밝은 화면을 계속 보여주게 되면 배터리도 훅훅 떨어진다. 자고로 빛의 혼합은 가산 혼합이라서 흰색 배경을 띄울 때 RGB를 풀로 쏴제껴야 흰색이 되거든... 

물론 CSS에서 색깔 잘못 잡으면 라이트모드에서는 잘 보이던 UI가 다크모드로 바꿨더니 안 보이는 경우도 있다.

초간단 다크모드 토글하기

그래서 이번에는 뭘 만들거냐... 

이거요. 이미지를 잘 보면 글이랑 슬라이드 버튼이 있고, 글상자 두개 밑에 보이는 버튼도 다크모드를 토글할 때 색깔이 바뀐다.

<html>

<head>
    <title>딥-다크-모드</title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    <script src="https://kit.fontawesome.com/dc58858c96.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="wrap">

        <div class="title">
            <h1>Deep-Dark-mode</h1>
            <p>아래 슬라이드 버튼을 눌러 라이트모드와 다크모드를 테스트해보세요! </p>
            <label class="switch" id="toggle">
                <input type="checkbox">
                <span class="slider round"></span>
            </label>
        </div>

        <div class="article">
            <h1>Title: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Lacinia at quis risus sed vulputate. Et tortor consequat id porta nibh venenatis.
                Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. At lectus urna duis convallis.
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Nec feugiat nisl pretium fusce id velit ut
                tortor. Nulla facilisi cras fermentum odio eu feugiat pretium. Consequat semper viverra nam libero justo
                laoreet sit amet cursus. Orci sagittis eu volutpat odio facilisis mauris sit amet. Pellentesque sit amet
                porttitor eget dolor morbi non arcu. Et netus et malesuada fames ac turpis egestas. Pellentesque
                habitant morbi tristique senectus et netus et malesuada fames. Augue interdum velit euismod in. Urna
                cursus eget nunc scelerisque viverra mauris in aliquam sem. Ac tortor dignissim convallis aenean et
                tortor at risus. Pulvinar elementum integer enim neque volutpat ac tincidunt.</p>
            <h1>Title: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Commodo nulla facilisi nullam vehicula ipsum. Nullam ac tortor vitae purus faucibus
                ornare suspendisse. Tortor at auctor urna nunc id cursus metus. Diam vulputate ut pharetra sit amet
                aliquam id. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius. In est ante in nibh
                mauris cursus mattis molestie a. Scelerisque purus semper eget duis at tellus. Pharetra massa massa
                ultricies mi quis hendrerit dolor. Neque ornare aenean euismod elementum nisi.</p>
        </div>
        <button class="button" type="button">Button 1</button>
        <button class="button" type="button">Button 2</button>
        <button class="button" type="button">Button 3</button>
    </div>
    <script src="script.js"></script>
</body>

</html>

HTML(슬라이드 버튼은 W3schools에 있는 소스 갖다 배경색만 바꿨음)

@font-face {
    font-family: 'KyoboHand';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --dark-color: #32475e;
    --green-color: #41b883;
    --white-color: #f9f9f9;
    --yellow-color: #ffd41d;
}

* {
    font-family: 'KyoboHand';
    font-size: 16pt;
    margin: 0;
    padding: 0;
    line-height: 1.5em;
}

body {
    background-color: var(--white-color);
    color: var(--dark-color);
}

.dark-mode {
    background-color: var(--dark-color);
    color: var(--white-color);
}

h1,
p {
    margin-bottom: 5px;
}

h1 {
    font-size: 1.5em;
}

.wrap {
    width: 1280px;
    margin: 0 auto;
}

.title,
.article {
    border: 5px solid var(--green-color);
    border-radius: 7.5px;
    margin: 20px auto;
    padding: 10px;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-top: 10px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dark-color);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--white-color);
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--green-color);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--green-color);
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

button {
    border: 0;
    width: 150px;
    height: 50px;
    border-radius: 7.5px;
    background-color: var(--yellow-color);
    margin-right: 10px;
}

button:hover {
    background-color: var(--yellow-color);
}

CSS

let button = document.getElementById('toggle');

button.addEventListener("click", function() {
    if(document.querySelector('body').classList.contains('dark-mode')){
        document.body.classList.remove("dark-mode");
    }else{
        document.body.classList.add("dark-mode");
    }
},false);

JS

슬라이드 버튼은 버튼이 쇽쇽 밀려나가는 것 말고 사실상 체크박스나 라디오버튼이랑 다를 게 없다. 자바스크립트 코드는 버튼을 눌렀을 때 클래스에 dark-mode가 있으면 지우고(라이트모드로) 아니면 붙여라(다크모드). 근데 위 코드대로 하면 어떻게 되느냐... 글이랑 배경은 바뀌는데 버튼 색이 그대로예요. 그러면 버튼에도 이걸 줘야 하는데...

button.dark-mode {
    color: var(--white-color);
    background-color: var(--green-color);
}

버튼에도 dark-mode를 추가하고... 위 코드대로 주면 에러난다. 버튼이 세 개니까 다 바꾸려면 querySelector가 아니라 querySelectorAll로 가져와야 하는데 문제가 뭐냐면 저걸로 갖고오면 배열이 된다. 그래서 자바스크립트 입장에서는 아니 배열인데 클래스가 어딨음? 착한 사람만 보임? 이렇게 되기 때문에 반복문으로 배열을 순회해서 볼거다.

let togglebutton = document.getElementById('toggle');
let button = document.querySelectorAll('button')

togglebutton.addEventListener("click", function () {
    console.log('버튼!')
    if (document.querySelector('body').classList.contains('dark-mode')) {
        document.body.classList.remove("dark-mode");
    } else {
        document.body.classList.add("dark-mode");
    }
    button.forEach(function(item){
        if (item.classList.contains('dark-mode')) {
            item.classList.remove('dark-mode');
        }
        else {
            item.classList.add('dark-mode');
        }
    })
}, false);

버튼을 querySelectorAll로 가져오게 되면 배열이라고 했는데 그러면 못 주느냐? 놉. 반복문 주면 가능하다. 배열 안의 요소들에 dark-mode가 있으면 지우고(라이트모르도) 반대로 없으면 붙이게(다크모드로) 하면 된다. 하나가 아니라 뭉텅이라 배열로 들고 온 것 뿐이지 내용물이 변하는 건 아니거든.