[220715] Daily Study Note

---

  Today's Plan  

Coding JavaScript ✅

(1) Vanilla JavaScript stopwatch 만들기

(2) 깃허브에 올리고 정리

 

Studying JavaScript knowledge ❌ (계획 분량조절 실패)

(1) 에러 핸들링

(2) 프라미스와 async, await 

(3) 제너레이터와 비동기 이터레이션

 

Training Coding Test with Python ✅

(1) 프로그래머스 LV1 2 문제 풀이

---

 

1.

https://mikkegoes.com/javascript-projects-for-beginners/

22 JavaScript Projects for Beginners For 2022 (With Source Code)

 

(1) Vanilla JavaScript stopwatch 만들기

---

css 셋팅까지는 17분이면 했습니다. 간단한 구현이어서 오래 걸린 편이지만 정말 간만에 하는거라 할 수 있다는 자체에서 안도했습니다. 전반기에 배운게 완전 날라가서 깡통인 그런 상태는 아니구나 다행이다. 어제 안 되는 거 보고 3분만에 머리가 새하얘져서 충격받아서 집에 가서 잤는데. '다행이다. 진짜.'

 

이거 22개 시리즈 다 진행할 거니까 일단 자바스크립트 코드 부분 진행하기 전에 깃허브에 레포 새로 만들고 셋팅하겠습니다. 

 

(10:41 am)

 

---

 

λ git hist
* [2022-07-15] [e02776d] | Init: Timer App: set content structure {{WooYoon-local}}  (HEAD -> master)

깃 셋팅하고 초기화 커밋했습니다. 커밋 메세지 역시 봐도봐도 어떻게 해야할 지 항상 고민됩니다.

원래 프로젝트 시작 전에 팀원들끼리 다 같이 맞춰서 정한 뒤에 시작하거나 기업들에는 제시되는 컨벤션이 있다고 하니까 스타일 자체는 아직은 크게 고민하지는 않아도 되지만, 이렇게 개인 프로젝트할 때 스스로를 위해 프로젝트마다는 통일성 있게 하는게 중요할 것 같습니다.

 

이렇게 정하려고 합니다.

1. 첫 이름은 간단한 단어로 커밋 내용을 나타냅니다.

2. 한 레포지토리 안에 22개의 작은 프로젝트가 들어갈 것 같아 각 커밋 메세지마다 앱 이름 자체를 적어주려고 합니다.

(뭐 타임라인이 섞이게 프로젝트를 진행할 것 같지 않지만요. 혹시나 다시 볼 때 헷갈릴 것 같습니다. 아마 브랜치 개념을 다시 학습해서 브랜치 별로 나눠 주는 것이 이것보다 좋을 것 같습니다. 너무 계획이 커지면 시작이 오래 걸릴 것 같아 일단 이렇게 진행하겠습니다.)

 

3. 마지막에는 구체적인 내용을 작성합니다. 꼭꼭 갓 커밋마다 하나의 기능 단위로 기록되도록 합니다.

 

(11:38 am)

---

진짜 오마이갓.. 확실히 Javascript, html 이용한 코딩을 오랜만에 하는구나 싶었습니다. Javascript에서 html 요소를 못 받아와서 이름 작성하면서 잘못 썼나 계속 아리송해했는데, html 파일에서 js파일을 가져오며 defer를 옵션으로 안 쓰고 body보다 먼저 js script를 import해와서 그런거였습니다. 간단하게 습관처럼 익혔던 건데 이 부분도 놓치네요. 생각난 김에 오늘 js script와 html file의 작동 순서 관련해서 다시 한 번 정리도 해야겠습니다. 

 

그리고 부끄럽지만 addEventListener부분도 버벅대며 작성했습니다.. 후.. Anyway! 클릭 부분 기능하게 했습니다. 

 

(11:55 am)

---

문제가 생깁니다.

let timer;


// let startTimer = (timer) => {
//     timer = setTimeout(function updateTimer(){
//         console.log('tick!');
//         timer = setTimeout(updateTimer,1000);
//     }, 1000);
// };
// let stopTimer = (timer) => {
//     setTimeout(() => clearTimeout(timer),1000);
// };
// let resetTimer = () => {

// };

let startTimer = (timer) => {
    timer = setInterval(function updateTimer(){
        console.log('tick!');
    }, 1000);
};
let stopTimer = (timer) => {
    clearInterval(timer);
};
let resetTimer = () => {

};

함수끼리 timer를 공유해서 구동하고 멈추게 하려는데, 보면 이전 timer는 멈추지만 그 때 뿐이지 새 타이머가 다시 시작됩니다.

 

처음에는 위의 코드에서 주석처리된 부분처럼 nested setTimeout으로 타이머를 만들고자 했습니다. 

nested SetTimeout이 setInterval보다 유연한 특성을 가지고 있는데다가 지연 간격을 보장하는 장점을 갖고 있다고 배웠기 때문입니다.

https://ko.javascript.info/settimeout-setinterval#ref-834

 

그런데 앞서 말한 문제가 생겨 setInterval로 바꿔 일단 끝까지 기능하게 만들어보려고 했습니다.

/* setInterval보다 setTimeout이 정확성이 더 좋다고 해서 nested setTimeout을 쓰고 싶은데 2번째
nested되는 2번째 timer를 멈추지 못하게 하는게 까다롭네요.. 일단 setInterval로 구현해서 완성한 뒤
고쳐보겠습니다. */ 

 

그럼에도 같은 문제가 발생하는 것으로 보아 다른 부분에서 제 접근이 틀렸다고 생각했습니다. 
/* 으 아닛.. setTimeout이고 setInterval이고의 문제가 아닌가봐요.. 아직도 같은 문제가 일어나네요. */

 

잠시 쉬고 다시 문제 해결해보겠습니다.   

(12:23 pm)

---

잠깐 스친 해결법인데 수정 사항이 맞았습니다. startTimer()나 stopTimer()에 인자로 timer를 건네주었는데, 이로 인해 각 timer가 따로 동작한 것 같습니다. 각 함수의 scope내에서 timer를 찾을 수 없어야 밖에 있는 timer를 가져와 사용할텐데 인자로 이 timer를 넘겨주니 해당 timer를 사용한 것 같고, 사실 이 timer가 동일한 개체로 만들어주지 않은 것 같습니다.

정리(학습)해야할 건 2가지가 됩니다.

1. 그렇다면 인자로 timer를 건네는 식으로 하려면 어떻게 리턴하고 다시 넘기는 식으로 구현해야할까?

2. 1의 구현을 위해 timer들이 분리된 개체인지, 같은 개체인지는 확인해야하는데 이걸 어떻게 증명할까?

3. 왜 에러는 안 나고 별도로 움직일 수 있었던 걸까?

(1:58pm)

---

위의 시간 업데이트를 해결한 뒤로 인터페이스의 글자를 바꿔주는 기능은 어렵지 않게 구현했습니다.

다만, 지금 확인해보니 예제를 올려준 작성자 분은 innerHTML로 구현했는데, 저는 textContent로 구현했네요.

둘의 차이가 어떻게 다르고, 어떨 때 각각을 쓰는지 역시 정리해야할 것 같습니다. 왜? 모르니까요. 기본적인 개념 모르는 것에 스스로 너무 실망하지 말고 다만 약간의 부끄러움을 가지고 어서 익혀나가겠습니다.

(2:25pm)

---

 

 

(2) 깃허브에 올리고 정리

 

✔ 깃허브 올리기

깃 역시 오랜만에 사용하니 처음 초기화 단계부터 꼬였습니다.

그 뒤 깃허브 host에 local의 파일들을 push하는 과정에서 또 에러가 생겨 시간 소요를 했습니다.

일단 에러는 git origin branch를 만들어 github에 있는 파일들을 pull해준 뒤, 합쳐 push하는 식으로 origin branch를 host에 올리는 식으로 해결은 했습니다.

 

https://proprotrainee.tistory.com/68?category=1110380 

[Git] 로컬 폴더 - 깃허브 레포 연결

 

 

전체적인 폴더 간 구조와 깃허브 구성과 이용방식, push, pull, local, host, branch, file들의 개념이 정리가 안되어 뒤죽박죽된 느낌이 듭니다. 알긴 아는데 딱 명확히 쓰기에 미숙한 느낌입니다.

계획되지 않은 어려움이므로 당장은 넘기고 밤에 시간 있으면 오늘/ 없으면 내일 다시 한꺼번에 정리하도록 하겠습니다.

 

 

(5:33pm)

---

✔ 공부하며 나온 의문/ 헷갈렸던 것들 정리

 

1. '그렇다면 인자로 timer를 건네는 식으로 하려면 어떻게 리턴하고 다시 넘기는 식으로 구현해야할까?'

 

1-2. '1의 구현을 위해 timer들이 분리된 개체인지, 같은 개체인지는 확인해야하는데 이걸 어떻게 증명할까?'

 

1-3. '왜 에러는 안 나고 2개의 중첩타이머가 별도로 움직일 수 있었던 걸까?'

 

모르겠습니다. 1, 1-2, 1-3... 이게 멘토의 필요성인가요.. 하.. 나중에 개념 정리가 더 쌓이면 해결해보겠습니다. 1주일 내로 돌아옵니다. 

 

4.  'innerHTML과 textContent.둘의 차이가 어떻게 다르고, 어떨 때 각각을 쓰는지 역시 정리해야할 것 같습니다.'

  : 아래가 정리한 링크입니다. MDN사이트를 참고해 차이를 확인했습니다.    textContent가 성능이 더 괜찮다고 하고 운 좋게 제가 innerHTML이 아닌 textContent를 사용했었습니다.

https://proprotrainee.tistory.com/70

textContent vs innerText vs innerHTML

 

---

 

오늘의 JavaScript 프로젝트, 완성 모습

 

 

 

---

 

2.

https://ko.javascript.info/

모던 JavaScript 튜토리얼

 

 

(1) 에러 핸들링

'try..catch' 파트 보는데도 1시간이 걸렸습니다. 풀집중이었는데도요. 첫 진도가 아닌 복습을 위주로 몇 일 하다보니 첫 진도 나갈 때의 학습 속도를 생각하지 못 한 것 같습니다. 아는 개념도 되게 깊게 들어가는 자료이기 때문에 시간이 은근 걸리네요. 야심차게 계획한 오늘 분량(3챕터)을 마칠 수 있을까 염려되어 당황스럽습니다. 하지만 불안해하지 않고 진도에 집중하지 않고 내용을 익히는 것에 집중하겠습니다. 안다고 생각하는 지식들이 딥하게 정리되어있지 않으면 실전에서 쓸 때는 어리버리해지면서 불안해지는 것보다 처음에 시간 걸리는 게 나은 것을 이제 느끼기 때문입니다. 그리고 복습할 때 시간이 짧아집니다. 조급해하지 않고 기본을 다지는데 시간을 더 투자하도록 하겠습니다. 

 

(2) 프라미스와 async, await

(3) 제너레이터와 비동기 이터레이션

 

3.

(1) 프로그래머스 LV1 2 문제 풀이

 

2문제 풀이 관련하여 작성한 글입니다. 

 

https://proprotrainee.tistory.com/69

[ 프로그래머스 ] 스킬체크 탄탄한 비기너