Aloha!

• Event

 자바스크립트에서 가장 동적인 움직임을 줄 수 있는 부분이지 않나 싶다. 웹 사이트에서 우리가 화면의 일부를 클릭하거나 마우스를 갖다대면 여러가지 동작이 일어난다. 이러한 대부분의 동작(이벤트)들을 자바스크립트로 구현할 수 있다.

- addEventListener

 addEventListener를 통해 다양한 동작을 구현할 수 있다.

 위 사진과 같은 경우, link라는 변수에 class가 titlelink인 요소 중 가장 처음 것('Don't start with ~~~')을 넣었다. 그리고 이 link에 addEventListener를 통해 mouseover, 즉 마우스를 오버(갖다댔을 때)했을 때 우리가 원하는 function()이 실행된다. 여기서는 123을 출력하는 것이다.

 또 가장 쉬운 경우는 click이다. rank라는 변수에 class가 rank인 요소의 가장 첫 요소를 넣었다. 그리고 이 rank를 click했을 때 alert를 띄우는 function이 실행되도록 addEventListener를 사용했다.

 즉 addEventListener('a', b)로 어느 요소에 Event를 추가할 수 있는데, a는 어떤 동작이 취해지면 되는지, 즉 트리거가 오면 되고 b에는 그 트리거가 만족되었을 때 실행되었으면 하는 function이 오면 된다. 여기서 a 인자는 event type, b 인자는 event handler 혹은 event listener라고 칭한다.

• Event 객체

 function(), 이 괄호 사이에 event라는 매개 변수를 넣어보자.

 위 코드는 tbody를 클릭했을 때 event가 출력되도록 짠 코드이다. tbody는 news.ycombinator.com의 대부분을 차지하는데 이 공간의 어느 곳을 클릭하든 event라는 매개변수가 출력되는 것이다. 위와 같은 경우 event라는 매개 변수에 내가 클릭한 곳, 동작에 대한 정보가 담기는 것이다.

 x 좌표, y 좌표 등등 여러가지 정보가 담겨 있다. 그 중에서 주로 사용하는 것이 target과 currentTarget이다.

 쉽게 말해서 내가 클릭한 곳이 HTML 파일로 어디에 속하는지를 보여줄 수 있는 정보가 target이다.

 currentTarget은 내가 addEventListener한, 즉 Event를 부여한 곳에 대한 정보가 담겨 있는 것이다. 여기서 우리는 tbody에 대해 function(event)가 일어나도록 했으므로 currentTarget은 tbody태그라고 보면 된다. ycombinator 사이트의 거의 대부분이라고 봐도 된다. event가 일어나게 되는 범위라고 생각하면 이해하기 쉬울 듯 하다.

 위의 코드는 tbody 아무데나 클릭했을 때 currentTarget(여기선 tbody)의 HTML 코드를 <div>123</div>로 바꾸도록 동작하게 하는 코드이다.

 event라고 지어 놓은 매개 변수는 보통 이벤트 객체라고 부른다.

 이벤트 관련 참고 자료 : https://developer.mozilla.org/ko/docs/Web/Events

 MDN에 어떤 이벤트가 가능한지 잘 정리되어 있다. 굳이 외울 필요가 없고 필요할 때 해당 자료를 찾아보면 된다. 엄청 많기 때문에 외우기 어렵다.

• Manipulating Elements, 요소 조종하기

 자바스크립트의 기본적인 목적은 웹사이트에 동적인 움직임을 주기 위함이다. 그러므로 요소를 선택해서 변화시킬 수 있어야 한다. 앞에서 요소를 선택하기 위한 방법으로 querySelector, querySelectorAll, getElementById, get ElementsByClassName, getElementsByTagName을 썼었다.(get을 쓸 때 id를 제외하곤 Element에 s가 붙는다)

 이번에는 선택된 요소에 class를 추가하거나 제거하고, text는 어떻게 추가하는지 등등, 요소를 조종하는 방법을 알아보겠다.

 class를 조종하는 방법에는 기본적으로 add, remove, toggle가 있다.

- add : class에 원하는 class name을 추가한다.

- remove : class에 원하는 class name을 제거한다.

- toggle : class에 원하는 class name이 없다면 추가하고, 원하는 class name이 이미 존재한다면 제거한다. 그리고 전자의 경우에는 true를 출력하고, 후자의 경우에는 false를 출력한다.

 요소 자체를 추가하고 제거하는 방법은 다음과 같다.

- createElement : 요소를 생성할 수 있다.

- setAttribute : 요소에 속성과 그 속성의 값을 부여할 수 있다.

- appendChild : 해당 태그의 맨 끝에 요소를 추가한다.

- textContent : 요소의 text를 제어할 수 있다.

- style : CSS 요소를 제어할 수 있다.

 Quiz

아래 두가지 예제 코드의 차이점을 분별하시오.

1.

const something = document.createElement("p");

for (let i = 0; i < 5; i++) {
  something.textContent = i;
  document.body.appendChild(something);
}

2.

for (let i = 0; i < 5; i++) {
  const something = document.createElement("p");
  something.textContent = i;
  document.body.appendChild(something);
}

 전자의 경우, something이 1번 선언된다. i가 0에서 4까지 5번 반복할 때마다 append는 되지만 반복될 때마다 추가되는 것이 아니라 text가 바뀔 뿐이다. 풀어 쓰면 다음과 같다.

const something = document.createElement('p');

something.textContent = 0;
document.body.appendChild(something);

something.textContent = 1;
document.body.appendChild(something);

something.textContent = 2;
document.body.appendChild(something);

something.textContent = 3;
document.body.appendChild(something);

something.textContent = 4;
document.body.appendChild(something);

 something은 1번 선언되었기 때문에 하나의 something만 추가된다. 처음에는 0이 추가되었겠지만, 0이 1로 바뀌고 2로 바뀌고 3으로 바뀌고 4로 바뀌는 것이다. 웹에는 4만 출력된다.

 이와 다르게 후자의 경우는 something이 5번 선언된다. 그리고 중요한 것은, for문 안에서 선언된 변수는 1번 끝날 때마다 사라지고 다시 새로운 메모리를 할당 받는다. 따라서 i가 0에서 4까지 5번 반복할 동안 새로운 something이 선언된다. 풀어 쓰면 다음과 같다.

const something = document.createElement('p');
something.textContent = '0';
document.body.appendChild(something);

const something = document.createElement('p'); // 기존 something은 사라지고 새로운 something
something.textContent = '1';
document.body.appendChild(something);

const something = document.createElement('p'); // 기존 something은 사라지고 새로운 something
something.textContent = '2';
document.body.appendChild(something);

const something = document.createElement('p'); // 기존 something은 사라지고 새로운 something
something.textContent = '3';
document.body.appendChild(something);

const something = document.createElement('p'); // 기존 something은 사라지고 새로운 something
something.textContent = '4';
document.body.appendChild(something);

 something이 선언될 때마다 text가 바뀌고 body에 추가된다. 웹에는 0부터 4까지의 숫자가 출력된다.

• DOM, Document Object Model

DOM이라고 하면 실제로 화면에 표현된 것들, HTML은 이 DOM을 설계하기 위한 MarkUp 언어 혹은 설계도라고 보면 된다. 이 HTML 문서를 통해 화면에 보여지는 것이 DOM이다. 그리고 이 DOM은 트리구조로 이루어져 있다.

• 요소 선택

사용자가 버튼을 클릭하면 글자가 바뀌는 등, 상호작용이 필요한데 이러한 동적임을 제공해주는 것이 자바스크립트를 통해 가능하다. 일단 무언가를 바꾸려면 선택되는 것이 먼저이기 때문에, 요소를 선택하는 방법을 아는 것이 중요하다. 프렙 가이드에서는 다음 사이트를 통해 예시를 보여주고 있다.

https://news.ycombinator.com 

간단하게, document.querySelector('CSS선택자')를 이용하면 요소를 선택할 수 있다. 위의 경우는 .이 붙었으니 class가 rank인 요소들을 선택한 것이다. 이 사이트에서 class가 rank인 요소는 총 30개가 중복되어 있는데, document.querySelector는 이럴 때 맨 처음 것을 보여준다.

document.querySelectorAll은 말 그대로 선택한 모든 요소를 보여준다. 동시에 배열에 담아서 보여준다.

위처럼 for문을 이용해서 rank의 text를 모두 999로 바꾸어보았다. 그러면 해당 사이트에 뜨는 rank들은 다음과 같이 바뀐다.

querySelector는 id이든 class이든 모두 가져올 수 있다. 그저 .을 붙이느냐, #을 붙이느냐의 차이이다. querySelector가 선택자의 종류와 상관없이 가져오는 반면, 종류에 따라 맞게 써야하는 선택 방법도 있다.

이들은 .이나 #이 붙지 않는다. 그럴 필요가 없으니까. getElementsByClassName의 class가 rank인 것들 모두, getElementsByTagName은 tag가 span인 것들 모두 가져와 배열 형태로 돌려준다. id의 경우는 용도에 걸맞게 1개만 출력시킨다.

개발자들은 주로 querySelector와 querySelectorAll을 사용하는 편이다.

내가 선택한 요소의 '부모 요소' 혹은 '형제 요소'(다음에 위치한)를 선택하는 방법도 있다.

자식의 입장에서 부모를 선택하는 것이 아니라, 부모 입장에서 자식 요소들을 선택하는 방법 또한 있다. children을 사용하는 것이다.

 *저만의 생각을 솔직하게 적었습니다.

 오랜만에 반도체 설비 엔지니어에 대한 글을 써본다. 설비 셋업 업무를 반년 정도 하다가 현재는 양산 업무를 맡고 있다. 설비 셋업이 말그대로 설비를 설치하기 위한 업무를 하는 거라면, 양산 업무는 셋업이 끝난 설비들이(보통 양산 설비라고 한다) 고장이 나면 조치하고, 고장이 나지 않도록 유지 보수하는 업무를 한다. 쉬프트 업무라고도 부르고, 이는 익히 알고 계시듯 교대 근무로 이루어진다.

궁금해

 내가 취업 전까지 교대 근무에 가졌던 궁금증은 다음과 같다. 그리고 그에 대한 답도 다음과 같다.

- 교대 근무는 언제까지 해야 할까?

 10년 이상이다. 극소수로 신입사원때부터 셋업 전문 혹은 다른 오피스 업무를 맡은 인원도 있다. 하지만 이들은 10명 중 1~2명이다. 중간에 부가 업무로 인해 오피스로 빠질 때가 있는데 결국엔 다 교대 근무로 돌아오는 것을 봤다.

- 취미 생활은 할 수 있을까?

 교대 근무에 들어가는 이상, 타인들과 어울리는 취미를 가지기에는 다소 어려움이 있다고 생각했다. 혼자 하는 취미는 충분히 할 수 있겠지만! 

 원래 취미는 주짓수였다. '원래'라는 말을 붙였는데 지금은 안하고 있다. 솔직히 못하고 있다고 말하고 싶다. 주짓수의 경우 헬스와는 달리 정해진 시간에 가서 수업을 듣는 방식인데, 내가 사는 곳 주변에는 아침에 하는 수업이 없다. 이는 GY때나 SW때는 하기 어렵다는 것이다. DAY때만 하기에는 돈이 너무 아까웠다. 시도는 당연히 해봤다. 근데 할 짓이 아니었다. 그래서 지금은 다니지 않고 있다. 지금 취미는 그냥 유투브 시청이 되었다. ㅎㅎㅎ...

- 돈은 정말 많이 줄까?

 돈은 많이 주는 것 같다. 근데 교대라고 그렇게 엄청 불어나진 않는 것 같다.

- 정말 건강이 그렇게 쉽게 나빠질까?

 교대 근무의 가장 큰 단점으로 알려져 있다. 나에게도 가장 큰 단점이다. 다른 이유도 있지만 정신적으로 많이 안좋아졌고 신체도 많이 마모되었다. 운동을 안해서 그런 것도 있겠다. 난 근데 재미 없으면 운동 안한다. 헬스든 머든... 가끔 답답할 땐 조깅 정도는 하는데 그래도 예전 만큼의 신체 능력은 나오지 않는 것 같다.

 돈 많이 벌어도 결국엔 나중에 나이 먹어 든 병을 고치는 데에 쓰게 되지 않을까...?

다시 돌아간다면?

 많은 분들이 교대 근무를 기피한다. 겪어보진 않았지만 익히 알고 있기 때문이다. 라이프가 어떻게 망가질지. 그럼에도 불구하고 설비에 지원한다. 나도 그랬다. 나는 똥된찍이다. 똥인지 된장인지 찍어서 확인해봐야 안다. 그리고 나한텐 똥이라는 걸 깨달았다. ㅎㅎㅎ 정말 칼같이 교대를 하겠어? 내가 가는 곳은 다르지 않을까?라는 생각이 있었기 때문에 끝까지 설비로 밀어부쳤었다. 솔직하게 다시 돌아간다면 지원하지 않을 것 같다.

보람과 장점은 있다

 어떤 일이든 당연히 보람은 있었다. 내가 직접 어떤 액션을 취해 설비를 고쳤을 때, 내가 보수한 장비가 잘 작동될 때이다. 그리고 부서원들과 긴밀하게 소통하면서 한 집단의 일원으로서 몫을 어느정도 하고 있다는 생각이 들기도 한다.

 그리고 은근 근무 시간이 잘 지켜진다. 남아서 가끔 잔업을 할 때도 있지만 선배들도 빨리 집에 가고 싶어서 8시간(정확히는 9~10시간 정도 되겠다)만 채우고 대부분 퇴근한다.

선택

 여기서 나에 대해 많은 걸 깨달았다. 나는 잡담이 가능한 분위기에서 오히려 빠르게 성장한다. 그리고 전체 흐름을 파악하는 데에는 다소 시간이 걸리지만 파악하는 순간 확신을 가지고 누구보다 잘할 수 있다고 확신한다. 그리고 동시에 믿고 최선을 다할 수 있는, 우러러 볼만한 멘토가 아직은 필요한 존재이다.

 나에 대해 조금은 더 알게 되었기에 지금은 선택의 기로에 서있다. 마음이 시키는 대로 할지 말지... 1월이 지나면 어떻게든 결과가 나올 거다. 힘내자.

아직은 푼 사람이 많은 문제부터, 내가 모르는 문법은 필요없을 듯한 문제부터 시간이 날 때 풀고 있다.

 - 문제 설명 : 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 return하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다.

 - 제한 조건

 1. a와 b가 같은 경우는 둘 중 아무 수나 return하세요.

 2. a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다.

 3. a와 b의 대소 관계는 정해져 있지 않습니다.

 - 입출력 예

 - 나의 풀이

function solution(a, b) {
    if (Math.abs((a-b)%2) === 1) {
        var add = (a+b)*(Math.abs(a-b)/2+0.5);
        return add;
    } else if (Math.abs((a-b)%2) === 0) {
        var add = (a+b)*Math.abs(a-b)/2 + (a+b)/2;
        return add;
    } else if (a === b) {
        return a;
    }
}

단순하게 모든 경우의 수를 고려했고 이번엔 Math를 사용했다.

a와 b를 빼서 홀수가 나온다면, a와 b사이에는 짝수 갯수의 숫자가 존재한다는 것이다. 예를 들어 a=3, b=8일 때, a-b는 절대값으로 5이며 그 사이에는 4, 5, 6, 7와 같이 4개로 짝수 갯수의 숫자가 존재한다. 그러면 맨 끝자리 3과 8을 더해주고, 이를 전체 갯수를 2로 나눈 만큼 곱해주면 된다. 전체 갯수는 (a-b)/2+0.5로 구해주면 된다.

a와 b를 더해서 짝수가 나온다면, a와 b사이에는 홀수 갯수의 숫자가 존재한다는 것이다. 예를 들어 a=3, b=7일 때, a-b는 절대값으로 2이며 그 사이에는 4, 5, 6와 같이 3개로 홀수 갯수의 숫자가 존재한다. 그러면 맨 끝자리 3과 7를 더해주고, 이를 전체 갯수를 2로 나눈 만큼 곱해주면 된다. 전체 갯수는 (a-b)/2로 구해주면 된다. 그 이후 중간 숫자 5가 남게 되는데, 이는 (a+b)/2이다. 이를 마지막에 더해주면 된다.

그리고 a와 b가 같은 숫자일 때는 단순하게 a가 출력되도록 했다.

바닐라코딩 프렙 가이드로 프로그래머스에 입문했는데 매일 1문제씩이라도 풀어주면 좋을 것 같다.

- 문제 설명 : 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요.

- 제한 조건

1. num은 int 범위의 정수입니다.

2. 0은 짝수입니다.

- 입출력 예

- 나의 풀이

function solution(num) {
    if ((num%2 === 0) || (num%2 === -0)) {
        return 'Even';
    } else if((num%2 === 1) || (num%2 === -1)) {
        return 'Odd';
    }
}

처음엔 좀 raw하게 작성했다. Math를 처음엔 되도록 쓰지 않는게 좋다고 해서 그랬다. 그리고 int형이라서 -0과 -1이 나머지가 될 수 있다는 것을 간과하기도 했었다.

*int형 : 정수형이고 값의 범위는 –2,147,483,648 ~ 2,147,483,647까지이다.

function solution(num) {
    if (Math.abs(num)%2 === 0) {
        return 'Even';
    } else if (Math.abs(num)%2 === 1)  {
        return 'Odd';
    }
}

위는 Math.abs를 사용했다. 이는 괄호 안의 수를 절대값으로 치환해주는 함수이다.

console.log(Math.abs(0)); // 0
console.log(Math.abs('')); // 0
console.log(Math.abs([])); // 0 
console.log(Math.abs(null)); // 0
console.log(Math.abs({})); // NaN
console.log(Math.abs([1, 2])); // NaN
console.log(Math.abs('abc')); // NaN
console.log(Math.abs()); // NaN

특이점으로, Math.abs()에서 ()안에  null, '' 혹은 []과 같은 빈 배열이 오면 0을 반환한다. 그리고 [1, 2]과 같은 배열, 'abc'와 같은 문자열, {}과 같은 빈 객체(혹은 중괄호), ()과 같은 아예 빈 값이 오면 NaN을 반환한다.