원정대 저자 워크숍, step1 미션 시작 - 4/27 ~ 5/1 (1주차)

4/27 원정대 저자 워크숍

4/28 ~ 5/1 step1 미션 진행

원정대 저자 워크숍

  원정대 저자 워크숍이란 level 1의 2번째 원정대를 하면서 공부한 내용 중 블로그로 작성하고 싶은 부분을 글로 작성한다. 그 후, 그 글을 가지고 서로 어떤 활동을 했고, 독자가 해당 글을 읽기 어떤지 피드백해주는 활동이다. 나는 저번 원정대에서 xhr, fetch, axios, ky가 어떻게 변했는지에 대해 공부하였다. 그래서 xhr과 fetch가 내부적으로 어떻게 돌아가는지, fetch가 왜 생겼는지에 대한 글을 작성했다. 원정대 - HTTP Client 해당 글의 링크이다.

  우선, 원정대에서 활동한 내용을 정리하는데 고민이 생겼다. 7명의 원정대원이 각자 궁금했던 것을 이야기하는 형식으로 진행하다보니 공부 순서와 내용이 뒤죽박죽이었다. 그래서, 가장 먼저 생각한 것이 해당 내용을 정리하는 것이었다. 정리를 하다보니 axios와 ky는 각각 xhr과 fetch로 돌아가는데 xhr과 fetch를 알지 못한 채 axios와 ky를 공부하면 이것에 대한 이해가 쉽게 되지 않을 것이라고 생각했다. 또한, 송곳을 만드는 과정이다 보니 범위를 좁혀 xhr과 fetch에 집중해서 정리하고 다시 공부하면 기초를 쌓을 훌륭한 토대가 될 것이라 생각했다. 이러한 이유로 글의 주제를 xhr과 fetch의 내부 동작 방식으로 선정했다.

  xhr과 fetch는 JS로 코드를 작성하는데 내부 동작 방식은 C++언어로 되어 있어서 이해하기 어려웠다. 그래서, JS 코드 한 줄마다 Call Stack, JS 힙 메모리, 브라우저, 외부 서버가 어떻게 동작하는지에 대한 글을 작성했다. 해당 내용을 찾고 이해할 만한 글이 부족하다고 판단하여 학습 도구로 Gemini를 선택했다. 한 줄마다 제미나이한테 내부 동작이 어떻게 이루어지는지 물어보고 그 순서에 대한 답을 받았을 때 이해하기 어려웠다. 이해한 척이 아닌 진짜 이해로 만들기 위해 다이어그램을 도입하기로 했다. 해당 코드로 인해 발생하는 내부 과정을 순서대로 글로 작성하고 그 순서를 다이어그램으로 그리니 내가 이해하지 못한 부분을 확실하게 이해할 수 있었다. 특히, xhr과 fetch가 서버에서 전달한 데이터를 buffer 형식 또는 stream 형식으로 어떻게 가공하는지, 그 데이터를 JS에서 어떻게 받아들이는지에 대해 알 수 있었다. 이러한 내용을 1주간 주어진 방학에 정리를 했다. 한 가지 아쉬운 점은 토익 스피킹을 1주일 동안 준비해야해서 하루의 70%는 토익 스프킹에 시간을 사용하고, 나머지 시간을 해당 글쓰기에 사용했다는 점이다. 토익 스피킹은 좋은 결과를 얻었지만 만약 글쓰기에 나의 시간을 100% 사용할 수 있었다면 어땠는지 궁금하다. 

  저자와의 워크숍은 총 4명으로 구성되었다. 서로의 글을 읽고 피드백과 칭찬을 해주었다. 나의 글을 좋은 점은 천천히 글을 생각했을 때 쉽게 이해할 수 있고, 무엇을 설명하려고 하는지 명확히 들어난다는 점이다. 처음 목표를 어떻게 잡고, 다이어그램으로 나부터 이해를 시키고 글을 작성하는 방식이 해당 칭찬을 듣는데 큰 도움이 되었다. 아쉬운 점은 이론 위주의 설명이라는 점, 다이어그램이 처음 보는 사람한테 조금 더 쉽게 화살표로 순서를 알려주면 좋겠다는 점이었다. 한 때, 나도 다이어그램에 화살표를 넣을까 생각을 했었는데 시간 압박과 충분할 것 같은 생각 때문에 화살표를 넣지 않았다. 확실히 더 자세하게 설명을 할수록 독자가 글의 흐름을 더 쉽게 잡고 읽을 수 있을 것 같다. 이론 위주의 설명은 어쩔 수 없다고 생각한다. 이론이 어려운데 코드를 곁들인 설명을 추가하면 독자가 이해할 수 없을 것이라 생각했다. 최대한 간단한 코드를 작성하여 내부 동작을 완벽하게 이해한 뒤, 더 자세한 코드로 들어가는 것이 나중으로 위해서 더 도움이 될 것이라 생각한다. 

  블로그 글을 전부터 몇 번 작성하였지만 이때까지 작성한 글은 이해한 척을 나타낸 글이 아니었나싶다. 한 개의 글을 만들기 위해 2 ~ 3일 동안 생각하면서 글을 작성하니 언제 읽어도 그 내용을 떠올리고 이해할 수 있었다. AI 시대에 접어들면서 많은 정보를 쉽게 접할 수 있게 되었다. 하지만, 그만큼 우리가 고민하는 시간이 줄어들었다. AI가 제공하는 정보를 한 번은 다시 생각해보고 고민해보는 시간이 나의 발전에 큰 도움이 된다고 생각한다. 

step1 미션 진행

  Payment 페이지를 React로 설계하는 미션을 진행했다. 페어와 미션을 같이 수행했다. 2달 동안 React를 사용하지 않다가 이제 다시 사용을 하려니 어색했다. 폴더 구조, 컴포넌트 설계 등의 부분에서 감각이 떨어졌다. 그래서 해당 미션동안 React의 감각을 끌어올릴 목적으로 미션에 임했다. 나는 React에서 공통적인 부분이 있으면 최대한 합쳐 추상화를 진행한다. 그렇게 하면 코드와 폴더의 양을 줄일 수 있고, 코드를 보기 훨씬 깔끔해지며, 나중에 기능이 추가되어도 쉽게 추가할 수 있다고 생각한다. 이 미션을 혼자 집에서 해보았을 때는 괜찮게 코드가 계속 작성되었다. 그런데 페어와 함께 진행을 하려다 보니 추상화까지의 과정을 어떻게 끌어내야 하는지 막막했다. 정해진 시간에서 storybook을 작성하면서 페어와 협의하면서 진행하려다 보니 미션을 완성하기도 힘들었다. 그래서 일단 공통적인 컴포넌트와 handle 함수를 잡지 못하고 이번 페어 프로그래밍을 마쳤다. 생각한 문제에 대한 원인은 아직 나의 코드 실력이 부족하다는 것이다. 해당 피그마를 보고 어떻게 설계를 하고 어떤 식으로 코드를 작성하는지 바로 나오면 좋다. 하지만, 어떻게 설계를 하는지에 대한 답은 떠오르는데 그것을 코드로 옮기려니 막히는 부분이 생겼다. 이 부분은 React에 대해 공부하고, 프로젝트를 계속 하면서 보충해야겠다. 두 번재 원인은 부족한 설명이다. 아직 나의 생각을 100% 설명하지 못한다고 판단한다. 내가 알고 설명할 수 있는 부분에 대해서 최대한 설명을 하려고 하지만 내가 설명을 하면서 이것이 맞는지에 대한 의문이 생긴다. 설명을 하면서 궁금한 부분이 생기니 자신있게 설명할 수 없다고 생각한다. level 1부터 지속적인 문제이지만 계속 의식하고 고치려고 하고 있다. level 2에서도 설명을 조리있게 하려고 노력해야겠다.

 

level 2를 시작했다. 1주차에 좋은 소식이 여러 번 들려왔다. 토익 스피밍 점수를 잘 받은 것, 6기(?)부터 이어져온 크루위키 팀에 합류하게 된 소식, 우테코 크루와 좋은 프로젝트를 시작하게 된 소식 등등. level 1보다는 많이 바쁠 것으로 생각되지만 그만큼 성장할 수 있는 기회이니 오히려 더 좋다. 이번주의 회고는 여기서 마치고 다음 주를 더 열심히 생활해야겠다.