팀 프로젝트
엘리스 SW 트랙에는 2번의 팀 프로젝트가 있습니다.
그중 7주간 학습한 Vanilla JS와 Node.js를 활용해 2주가 조금 안 되는 기간 웹 서비스를 제작하는 첫 번째 팀 프로젝트를 진행 중입니다.
저번 주 화요일(14일)부터 시작해 이번 주 토요일(25일)까지 코드를 완성하고, 다음 주 월요일(27일)에 발표가 이뤄집니다. 일정을 보시면 아시겠지만, 프로젝트를 진행하기엔 아주 촉박한 시간이고, 덕분에 전 여가와 잠 등을 잃은 시간을 보내고 있습니다. 온종일 앉아있었더니 목, 어깨, 척추 등이 뽑힐 것 같네요.
사실 이런 거 쓰고 있을 시간도 없긴 한데, 며칠 동안 씨름했더니 골이 아파서 식히기도 할 겸 포스팅 시작해봤습니다.
이걸 잡담 카테고리에 넣어야 할지, 제작일지 카테고리에 넣어야 할지 고민하다 코드도 있는 김에 제작일지로 넣었습니다.
나름 웹 서비스 제작일지기도 한데다, 코드까지 있으니 충분히 제작일지로 볼 수 있지 않을까...싶네요.
어쩌다 팀장
낯도 가리고, 언변이 그리 훌륭하지도 않거니와, 통솔력이 있는 것도 아닌데 어쩌다 보니 팀장이 되었습니다.
내향적이고 소심한 사람도 외향적이게 되는 버튼 같은 게 있다고 생각하는데, 코딩이라는 분야, 팀이 구성됐을 때 다들 어색해서 일이 더디게 진행되는 상황이 제 버튼이 아닌가 싶네요.
기본이 내향적인 사람이다 보니 뭐 한 번 할 때마다 외향성 한 두어 달 치 가불받아 쓰는데, 알고리즘 스터디에서도 팀장을 맡고 있다 보니 지금 엘리스 트랙 들으면서 한 3년 치는 가불로 다 써버린 것 같습니다.
끝나면 어디 산에 들어가거나 성향이 조금 바뀌어 있거나 둘 중 하나지 않을까 싶네요. 😅
상황을 확인하고, 일을 분배하는 일도 해야 하는데, 여러 쓰레드에 작업 분배해서 최적화한다고 괜히 일 어중간하게 분배하면 오히려 쓰레드 하나가 혹사할 때보다 효율이 떨어지는 것처럼 일을 분배해서 해본 적 없는 사람이 이런 역할을 차지하고 있으니 당장 저도 혼자 할 때보다 효율이 떨어지고, 팀원 분들도 그러실 것 같아 걱정이 많습니다.
팀원 분들이 역량을 펼치는 길을 제가 막고 있나 걱정도 되어, 일을 크게 보는 시야를 가져야겠단 다짐도 많이 하는 요즘입니다.
코드 리뷰
엘리스 sw 트랙에 지원한 계기가
- 내가 작성한 코드 리뷰 받아보기
- 혼자만 학습해와 균형이 무너졌을 수 있으니 확인해보기
- 다른 사람들은 어떻게 코딩하고 사나 보기
- 팀 프로젝트로 협업 해보기
정돈데, 드디어 1번을 이뤘습니다.
코치님이 직접 제가 작성한 코드를 확인하시며 좋은 점, 개선할 수 있는 점, 고쳐야 할 점 등을 짚어주시니 코드를 개선해갈 방향이 명확히 보이는 것 같아 아주 만족스럽습니다.
돔 생성 팩토리 함수
바닐라로 웹 앱 만들기를 즐겨오면서도, createElement 등을 사용해 돔을 조작하는 건 꽤 귀찮은 일이었습니다.
관련 자료들을 찾아보며 팩토리 함수 관련 예제를 몇 번 보고도 '편할 거면 React를 쓰는 게 나을 것이고, 바닐라에선 이런 방식으로 작업하는 게 맞을 것'이란 - 아집이란 것이 다 그렇겠지만 - 돌이켜보면 왜 그랬는지 모르겠는 아집에 사로잡혀 있었습니다.
코치님께서 제가 사용해오던 방식은 유지 보수가 어렵다 말씀하시며, Jason Miller: Preact: Into the void 0 | JSConf EU 2017이란 동영상을 참고해 팩토리 함수를 만들어보라 조언해주셨고, 덕분에 아집에서 벗어나 팩토리 함수를 작성해봤습니다.
export default function el(nodeName, attributes, ...children) { const node = nodeName === "fragment" ? document.createDocumentFragment() : document.createElement(nodeName);
Object.entries(attributes).forEach(([key, value]) => { if (key === "events") { Object.entries(value).forEach(([type, listener]) => { node.addEventListener(type, listener); });
return; }
if (key in node) { try { node[key] = value; } catch (err) { node.setAttribute(key, value); } } else { node.setAttribute(key, value); } });
children.forEach((childNode) => { if (typeof childNode === "string") { node.appendChild(document.createTextNode(childNode)); } else { node.appendChild(childNode); } });
return node;}
구조 자체는 꽤 간단합니다. nodeName, attributes와 자식 노드들을 인자로 받아 element를 반환하는 형태입니다.
하나 단점이 간단한 이벤트 리스너도 등록하기가 꽤 불편했으나, events란 객체를 추가해 이를 해결했습니다.
import { addClickEvent } from "../router";import "../../css/SignInPage.css";
export default function SignInPage() { const container = document.createElement("div"); const logoWrap = document.createElement("div"); const logo = document.createElement("img"); const signInWrap = document.createElement("div"); const signInTitle = document.createElement("h2"); const signInInfo = document.createElement("p"); const signInButton = document.createElement("button"); const googleIcon = document.createElement("img"); const signInText = document.createElement("span");
container.classList.add("sign-in");
// Logo logoWrap.classList.add("sign-in__logo"); logo.src = "/static/images/logo.svg"; logoWrap.append(logo);
// Sign In Container // Title signInWrap.classList.add("sign-in__container"); signInTitle.classList.add("sign-in__title"); signInInfo.classList.add("sign-in__info"); signInTitle.innerText = "로그인"; signInInfo.innerText = "구글로 간편하게 로그인 하고 맛식 저장, 공유 하세요!";
// Button signInButton.classList.add("sign-in__button"); googleIcon.src = "/static/images/google.svg"; signInText.innerText = "Google 계정으로 로그인"; signInButton.append(googleIcon, signInText); addClickEvent(signInButton, "/user");
signInWrap.append(signInTitle, signInInfo, signInButton);
// Append container.append(logoWrap, signInWrap);
return container;}
제가 사용해오던 방식은 이랬습니다.
import el from "../utils/dom";import { addClickEvent } from "../router";import "../../css/SignInPage.css";
export default function SignInPage() { const signInButton = el( "button", { className: "sign-in__button", }, el("img", { src: "/static/images/google.svg" }), el("span", {}, "Google 계정으로 로그인"), );
addClickEvent(signInButton, "/user");
return el( "div", { className: "sign-in" }, el( "div", { className: "sign-in__logo" }, el("img", { src: "/static/images/logo.svg" }), ), el( "div", { className: "sign-in__container" }, el("h2", { className: "sign-in__title" }, "로그인"), el( "p", { className: "sign-in__info" }, "구글로 간편하게 로그인 하고 맛식 저장, 공유 하세요!", ), signInButton, ), );}
비약적으로 향상된 가독성이 보이시나요…
전 눈물이 흐를 뻔한 걸 얼마 안 나온 크리스마스에 찾아오실 산타할아버지를 생각하며 가까스로 참았습니다. 🥺
외에도 다양한 말씀을 많이 해주셨고, '좋은 코드란 무엇일까', '더 유지 보수하기 쉽게 작성하는 방법은 없을까' 등 다양한 생각할 거리를 얻는 계기가 되었습니다.
제가 프로그래밍에서 손을 떼기 전까진 놓지 못할, 놓지 않아야할 고민거리기도 한 것 같습니다. 주어진 기간 안에 프로젝트를 끝내는 게 더 급한 목표니 프로젝트부터 끝내두고 조금 더 깊이 고민해보며 이 고민을 이어갈 수 있을 것 같네요.
팀 프로젝트가 끝나면 위 고민과 코드 리뷰를 통해 얻은 지식을 바탕으로 지금까지 해왔던 사이드 프로젝트들 모조리 뜯어고칠 생각 하니 벌써 걱정과 기쁨이 동시에 몰려오는데, 이 감정을 도무지 어떻게 설명해야 할지...😅
나아가 저도 실력자가 되면 제가 리뷰를 받으며 느낀 이 벅찬 감정을 누군가에게 느끼게 해주고 싶다는 다짐도 했습니다.
물론 일단 실력자부터 돼야겠지만요.
마지막까지
이만 줄이고 이 글을 작성하는 와중에도 가까워지는 데드라인 내에 팀 프로젝트를 잘 마무리하기 위해 vsc로 돌아가 보겠습니다.
행복한 연말 되시고, 저는 프로젝트 끝내느라 바쁠 크리스마스 부디 제 몫까지 즐겨주시길…
