부트캠프 항해99 진행 중에 작성했던 TIL(이라고 쓰고 일기라고 읽어야 하는...)들을 쭉 읽다 보니, 마치 내가 아닌 다른 사람이 쓴 것마냥 신기하다. 이 때 내가 이렇게 느꼈었구나, 하는 걸 다시금 깨닫기도 하고. 다른 사람이 뭘 했는지 구경하는 것처럼, 내가 쓴 내 일기인데 내가 엿보는 것만 같은 기분이 든다. 아무튼 신기한 경험이다.
그래서 말인데, 항해가 끝난 후에는 TIL을 나중에 찾아보기 쉽게 주제별로 정리하려고 했다. 하지만 예전에 쓴 TIL들을 보니 주제별로 정리하는 것도 물론 중요하지만 그때그때 무슨 생각을 했는지를 볼 수 있는 것도 그에 못지 않게 중요한 것 같다. 지금의 내가 주제별로 정리한 지식으로부터 나중에 얻게 되는 것도 있겠지만, 지금의 내가 잘 적어내려간 지금의 감정과 행동들로부터 미래의 내가 배우게 되는 것 또한 있을 것이다.
그래서, 개발일기라고 따로 적기로 했다. 여기에는 공부했던 내용을 정리하는 것보다는 개발하면서 든 생각들, 내가 어떤 상황에서 뭘 어떻게 했는지, 그런 것들을 일기처럼 편하게 적으려고 한다. 나중에 열어보면 재밌겠지, 뭐. 열어는 보겠지...?
오늘은 면접을 봤다. 개발자로서의 나의 첫 면접이었고, 또 첫 화상 면접이기도 했다. 마침 코로나 시국이어서인지는 모르겠지만, 내가 코딩을 시작하지 않았더라면 비대면으로 이렇게 많은 활동들을 할 수 있다는 걸 결코 알 수 없었을 것 같다. 심지어 면접까지! 나는 우물 안 개구리!
지금 시점에 후기를 어느 선까지 자세하게 남겨야 할지 모르겠어서 일단은 간단하게 적겠다. 1시간 30분에 달하는 면접에서 나는 시간이 어떻게 지나가는지도 몰랐고(면접 왜 재밌지?), 작은 포인트 하나하나까지도 나를 배려해주시는 게 느껴져서 매 순간이 감동이었다. 마치 실전 프로젝트 직후 발표회에서 나 혼자 프론트였던 우리 팀의 프로덕트에 대해 칭찬 받았을 때와 같았다. 계속 많이 웃게 돼서 이번엔 눈물을 일부러 참을 필요는 없었지만 난 항상 참 운도 좋다.
문제는 그게 아니다. 아직도 자꾸 서류 합격 소식이 날아오고, 다음 일정을 조율하자고 하고, 아니면 뭐 일방적으로 안내 받고, 등등.ㅊ.. 저 이제 24시간이 모자랄 것 같은데!? 이렇게까지 일정이 빡빡해지면 모든 스케줄에 대해 내가 충실하게 준비할 수는 없지 않을까, 하는 걱정마저 들기 시작하면서 혹시 이보다 더 연락이 오게 되면 이제는 거절해야 하는 걸까 고민이 된다ㅠㅠ 마음이 너무 복잡하다. 이랬는데 면접 본 데 다 떨어지면 나는 어떻게 되는 거야!
내일 할 일
내일은 일단 과제를 좀 하고, 서울 가서 사용할 노트북에 프로그램도 설치해놓고, 만반의 준비를 해놓자.
게더에서 항해99 2기의 마지막 공식 행사인 수료식에 참가했다. 다음 주에 있을 모의면접을 간단하게 안내 받았고, 지금까지 있었던 모든 일정들을 마무리하는 시간을 가졌다. 분야(?)별로 시상식도 있었다. 나는 '여기서 나만 정상'을 받았다. 동료평가 평균 6.8점 이상을 받고, 자기평가 점수도 5점 이상(부끄럽게 이건 대체 왜...)인 사람들에게 주는 상이었다. 지금까지 모든 프로젝트들을 돌이켜봤을 때 과연 내가 이런 좋은 평가를 받을 만 했었는지 다시 한 번 생각해보게 되었다.
서류 통과 이후의 연락은 오늘도 이어졌다. 두 군데서는 면접 제안, 한 군데서는 과제 안내를 받았다. 아무래도 곧 추석이라 일정이 다음주에 몰리는 것 같다. 서울에 머물 곳이 없는 건 아니지만 서울 소재 회사의 면접을 보려면 일단 지방에서 출발해야 하는 탓에, 항해에서 다음주 화요일에 예정해 놓은 온라인 모의면접은 시간상 취소하는 게 낫겠다는 판단을 내렸다. 모의면접은 집에서 봐야 하고 실제 면접은 서울에서 봐야 하는데, 일정이 빡빡해질수록 모의면접에 시간을 내기가 애매해질 수밖에. 내가 아무리 에너자이저여도 서울에서 볼 면접을 하루에 세 개씩 잡을 수는 없다.. 좋은 기회라 아쉽지만 모의면접을 취소하고 가능하다면 그 날에도 '진짜' 면접에 시간을 할애하는 것이 나을 듯하다.
내일부터는 누군가 일정을 공지해주지 않는, 가이드라인이 없는 나만의 항해를 시작해야 한다. 당분간은 쌓여 있는 면접과 과제 일정으로 딱히 계획을 짜지 않아도 충분히 바쁜 시간을 보내겠지만, 추석 연휴가 지나고 나면 제대로 고민해봐야 할 것이다. 근데 왜 96일에서 끝나요!?
자바스크립트는 싱글 스레드 언어이므로 한 번에 한 가지 작업을 처리하지만, 비동기로 동작하면 동시에 여러 작업을 수행할 수 있다.
비동기 동작 원리
call stack에 함수가 추가되어 실행 → 브라우저가 제공하는 web API 호출 → call stack에 추가된 함수는 제거되지만 함수가 전달한 콜백함수가 callback queue에 추가 → event loop는 call stack을 계속 감시하고 있다가 call stack이 빈 것을 보고 callback queue를 확인 → event loop는 callback queue에 추가된 콜백함수를 발견하고 call stack에 추가 → 콜백함수 실행
이벤트 루프(Event Loop)
call stack이 비어 있을 경우, callback queue에서 함수를 꺼내 call stack에 추가한다.
한 요소에 이벤트가 발생하면, 최상단의 조상 요소까지 계속해서 부모 요소들의 핸들러가 동작한다.
거의 모든 이벤트는 버블링 된다.
이벤트가 발생한 가장 안쪽의 요소는 target이며, event.target으로 접근할 수 있다. event.currentTarget(=this)는 핸들러가 실제로 할당된 요소이다.
버블링 중단하기
이벤트 버블링은 target에서 시작해 document 객체 또는 window 객체를 만날 때까지 각 노드에서 모두 발생하며, 그 과정에서 모든 핸들러가 호출된다. 핸들러가 이벤트를 처리한 후에 버블링을 중단하도록 하려면, event.stopPropagation()을 사용한다. 하지만 반드시 필요한 경우가 아니라면 버블링을 막는 것은 권장되지 않는다.
이벤트 캡처링(Event Capturing)
이벤트 버블링 이외에도 이벤트가 하위 요소로 전파되는 단계인 캡처링이 있다.
캡처링 단계에서 이벤트를 잡아내려면 addEventListener capture 옵션을 true로 설정한다. capture 옵션의 값이 false(default 값)일 때에는 버블링 단계에서 동작한다.
elem.addEventListener(..., {capture: true})
// 아니면, 아래 같이 {capture: true} 대신, true를 써줘도 됩니다.
elem.addEventListener(..., true)
// 예를 들면, 이렇게!
elem.addEventListener("click", e => alert(`캡쳐링: ${elem.tagName}`), true);
elem.addEventListener("click", e => alert(`버블링: ${elem.tagName}`));
addEventListener(..., true)로 할당된 핸들러는 removeEventListener(..., true)를 같은 단계에 설정하면 지워진다.
현재 이벤트의 흐름 단계를 알고 싶다면, event.eventPhase로 반환되는 정숫값을 확인하면 된다. (1=캡처링, 2=타깃, 3=버블링)
