하루를 마무리 하기 전, 오늘 있었던 일들을 잔잔히 되짚어봅니다.
성공과 실패의 모든 요소에서 '배울 점'을 찾아내어 기록하고,
더 성장하는 내일의 나를 위해 'action plan'을 세웁니다.
어제 홀맨님이 자바스크립트에서 let 을 쓰지 말라고 하셔서 조금 헷갈린다는 답을 달았는데...
선언형/명령형 프로그래밍에 대한 이야기를 하시면서 본인의 코드를 디스코드에 공유해주셨다.
마침 이 때 피보나치 수열 과제에 대해 'map'을 사용해서 해결해보라는 노아님의 피드백을 보고있었고 어떻게 해야할지 감은 잘 안왔지만 리팩토링 하려 화면을 켜놓고 있던 상태였는데...!!
홀맨님의 코드와 내 피보나치 어레이 과제를 두리번 거리듯 왔다갔다 오가며 보다가 문득 엉뚱한 상상을 하게 되었다.
'홀맨님이 쓰신 코드 중에 .map((v, i) => i % 2 == 0? 이 부분이 이해가 잘 안가긴 하는데... 만약 map으로 분해한 요소의 인덱스 값을 받아올 수 있는거라면 그걸 활용해서 피보나치 어레이 문제를 해결할 순 없을까?'
마침 같이 공부하고 있던 동료가 저 코드를 보고는 MDN 공식 사이트의 튜토리얼 링크를 가져왔고 새로운 사실을 알게되었다.
아. map을 적용할 때 애로우함수 전에 1개의 인수만 가져올 수 있다고 생각했는데.. 당연한게 아니었다.
실제 튜토리얼을 보고 나니 optional로 가져올 수 있는 인수가 추가로 더 있었다.
그 중에 하나가 array를 대상으로 map을 적용할 때 각 요소의 index값을 같이 가져올 수 있다는 점이었다.
나도 홀맨님의 코드를 보고는 활용해보고 싶어서 이런 저런 실험을 해봤는데 우선 다 실패했다.
그래서 다른 사람들의 블로그 글을 통해서 이와 비슷한 사례가 있는지를 찾아봤는데...
역시 정보가 잘 나오지 않았다.
우선
(1) 튜토리얼에 설명은 나와있지만 그에 대한 예시(예제)는 없기 때문인 것 같다. 대부분 사람들이 튜토리얼을 읽고 공부할 때 예제문제 까지는 공부를 하고 또 그 내용을 블로그 글로 쓰긴 하지만 그 이상의 것을 쓰지는 않더라. 나 역시도 마찬가지다. (오히려 코드와 관련된 내용은 안써서 문제 ;;)
(2) 그래도 엇비슷한 내용이 있으면 따다가 쓰겠는데.. 내가 못찾은건지 진짜 정보가 없어서 그런지 잘 모르겠지만 시간을 들여서 찾아도 비슷한 모양새도 찾지 못했다.
이 내용이었다. 이걸 보고... 과연 쓸 수 있을까! ㅎㅎㅎ
위에서 이야기 했듯이 이런 저런 실험을 해보았지만 모두 실패.
사실 이 부분에 대해서는 약간의 트라우마(;;) 같은게 있다.
얼마전 Todo List라는 과제를 해결하기 위해 하루 이틀 머리를 싸매고 있을 때
질문에 대한 답변을 해주시던 노아님이 직접 젭에 오셔서 어떻게 해결하면 되는지 직접 보여주셨는데
나중에 그 코드를 살펴보니 내가 구글링하던 MDN 홈페이지, 즉 크롬 탭으로 띄워져있던 탭에
거의 똑같은 코드가 적혀있었던 것이다.
정말 맥이 쭉 빠지면서... 사실 그때부터 아무것도 하고싶지 않은 감정이 지금까지 이어진 것 같다.
눈 앞에 정답을 두고도 눈을 가리고 허공에 손을 내저으며 걸어가는 느낌이었다.
왜 그렇게까지 생각했는지는 모르겠지만...
너무 절망적이고 나 자신이 비참해진 기분이라 아무것도 하고싶지 않았다.
그 감정을 주체하지 못하고 침울해하고 있을 때 마침 동료가
그냥 가서 자라고 다독여주는 바람에 엉엉 울면서 고맙다고 말하고 자러갔다. 새벽 한시.. ㅎㅎ 그리 이른 시간도 아니었는데...
그리고 그 날 동료들은 새벽 네시까지 머리를 싸매고 결국 또다른 문제까지 모두 해결한 뒤 다같이 자러 갔던 것 같다.
여러모로 마음이 좋지 않았던 기억이다.
그 떄 그 감정이 또다시 불쑥 튀어나와서. MDN 튜토리얼을 보는데 불쑥 화도 나고 마음도 복잡해지고. 그런 상황이었다.
그렇게 고민 고민하고 있는데 갑자기 젭에 보이는 닉네임, [트레이너] 노아.
그저 빛...
다짜고짜 달려가서 손가락으로 쿡쿡 찔렀다.
"노아님 바쁘세요? ㅋㅋ..."
그렇게 이어진 질문.
"노아님. 홀맨님 코드를 보니까 map으로 어레이의 한 요소 뿐만이 아니라 인덱스와 같은 다른 요소를 불러올 수 있는 것 같아요. 조금 엉뚱하지만 저걸 제 과제에 활용해보고 싶은데요.
근데 그걸 어떻게 써야 할지 모르겠어요.
지금 제가 실험중이라 이런 모양새로 짜 봤는데 돌아가질 않네요ㅠㅠ"
노아님은 어떤 상황인지 단번에 파악하시고, 생각보다 너무나도 쿨하고 가볍게
해당 튜토리얼이 어떻게 활용될 수 있는지, 그리고 내 코드에서 어떻게 하면 작동될 수 있는지를 코드로 알려주셨다.
모양새는 아래와 같다.
const array = [...Array(number)].map((_, index) => fibonacciNumber(index + 1));맵 괄호 안에 있는 언더바(_) 자리에는 공백을 제외한 다른 단어 등을 사용해도 되지만, 우리가 네이밍 컨벤션을 사용하듯이 컨벤션이라고 이해하면 된다고 알려주셨다.
전체 코드에서 부분을 떼어와서 의미전달이 잘 되는 편은 아니지만, 간단하게 해셕해보면
입력받은 number라는 인수(숫자) 크기의 Array를 생성하고, 이 array에 map을 적용하여 2개의 인수를 받아온다.
즉 언더바 자리에는 array의 각 원소, 그리고 index 자리에는 해당 원소의 index를 받아오는 것이다.
그리고 arrow 함수로 array의 원래 원소를 어떻게 바꾸어줄 것인지를 선언해주는데, 별도로 만들어 둔 fibonacciNumber() 함수에 map을 통해 받아온 index 값에 1을 더한 값을 인자로 넣어준다.
이 리턴값이 원래 array의 원소를 대신하여 새롭게 배열을 구성하는 것이다.
정말정말 신기하고 기분이 좋았다.
정말 오랜만에 '와!! 나 이거 새롭게 배웠어!!' 하는 기분이었다.
밤을 새가면서 todo list의 함수를 해결했던 동료들의 마음은 이것보다 더 즐거웠겠지!!
사실 이번 경험을 통해 내가 크게 오해하고 있는 사실을 하나 발견했다.
바로 내가 '질문에 대한 답변을 받지 못하고 있다'라고 생각하는 점이었다.
질문게시판에 무거운 마음으로 질문을 한 적이 있는데 답변이 이어지지 않았던 적이 있다.
두 번 정도 답변이 이어지지 않는 경험을 하고나니 그 때 부터 '아, 트레이너님들이 바쁘구나', 또는
'이건 그냥 내가 혼자 해결해보라는 의미로 답변을 안달아주는건가...' 라고 생각하고 질문을 하지 않았던 것 같다.
크나큰 오해였다.
노아님이 얼마전에 디스코드에 멘션을 남겼듯이
현업 개발자들이기 때문에 매일 질문게시판만 스크리닝을 하는게 아니라서 본인들 역시 답변이 되었는지 안되었는지를 확인하기 어렵다는 것이었다.
그래서 답변이 충분히 된 질문에는 꼭 이모지를 달아달라는 요청이었는데...
내 코가 석자이고 부정적인 감정에 갇혀있을 때에는 그것 조차 눈에 들어오지 않다가
문제가 해결되고 처한 상황에서 한걸음 뒤로 물러나보니 어떤 의미에서 그런 요청을 했으며,
내가 하고 있는 것과 비슷한 오해들을 불식시키기 위한 조치임을 알게 되었다.
자바스크립트의 map에 대한 지식이 +1 된 것도 기분이 좋았지만
내가 갖고있던 오해의 프레임에서 벗어난 것도 좀 홀가분했다. 이제 좀 더 가벼운 마음으로 질문해야지..
튜토리얼을 보고 공부하다보면 예시로 나오지 않는 부분들이 있는데, 이런 것들은 한 데 모아두었다가 이번처럼 내가 작성해야 할 코드에서 구현할 일이 생길 때
반드시 트레이너님들께 물어보고 실제로 활용하면서 공부하고자 한다.
조금 과장해서 이야기하면 정말 나락으로 떨어졌던 이번 한주.
그래도 마지막 날 의미있는 경험을 만들어주신 홀맨님과 노아님께 감사드리며..
내일을 기약해본다. 더 나은 내일. 내일. 내일.
