두 달만에 회고글을 작성하게 되었다.
10월에는 작성할 시간이 그렇게 많지 않아서 11월에 한번에 쓰겠다는 다짐과 함께 돌아왔다.
업무에 관하여
10월
10월에는 추석연휴가 끝나자마자 일본으로 여행을 가서 빠르게 지나갔던 것 같다.
여행을 다녀와서는 9월에 진행해왔던 Battle Crush 이벤트 페이지의 변경사항을 대응하고 크나큰 일없이 11월이 되었다. 10월에는 회사 일이나 사이드 프로젝트나 그렇게 크게 바쁘지 않았던 달이여서 11월에 함께 쓰려고 했던 것 같기도 하다. 10월 말에는 테오의 컨퍼런스도 다녀와 후기도 작성했었다.
11월
11월에는 개인적으로는 사이드 프로젝트 개발을 진행했다. 본격적으로 사이드 프로젝트 개편사항을 반영하였다.
유저의 허들을 낮추기 위한 작업을 개발하였고 지금은 개발 서버에 배포하기 위해 다른 팀원의 작업을 기다리는 중이고 모두 완료되면 라이브 서버에도 반영할 예정이다.
회사에서는 이벤트성 페이지를 각 게임마다 매번 단발성으로 제작하였는데 이번에 공통화 작업을 하면서 새로 개발하고 있다. 자세한 개발 내용은 언급할 수 없지만 기존에 Vue.js로 되어있던 프로젝트를 새로 개발 환경을 구축해서 React를 사용해 재사용성을 높은 프로젝트로 개편하였다. 개발은 거의 끝난 상태이고 QA와 함께 이슈를 고쳐 나가고 있다.
재사용성을 높게 개발하면서 느낀점은 기획이나 디자인 부분도 고려할 사항이 많았다고 느꼈다. 여러 이벤트에 계속해서 사용하기 위해서는 어디까지 공통화를 고려해야할 것인가?, 어디까지 디자인 요소를 공통 레이아웃으로 가져갈 것인가? 문구는 어떻게 자유롭게 받고 어느 문구는 고정으로 사용할 것인가? 등 생각할 것이 꽤 많았다.
그러면서 프론트엔드 개발에서도 위 고려사항을 반영해서 컴포넌트를 어떻게 나눠서 가져갈 것인지, 구조는 어떻게 구성할 것인지 등을 생각해서 고차원적으로 생각할 수 있는 개발이였던 것 같다.
지금 생각나는 개발적인 이슈
위에서 언급한 프로젝트에서 현재 스타일로는
sass만 사용하고 있었다. 그런데 스타일에 사용하는 포인트 컬러들을 동적으로 받아서 사용하고 싶었다. 그래서 생각한 방법은 CSS custom properties를 사용하는 것이다.
const JSON = {
colors: {
main_color: "brown"
...
}
}react에서 최상위 태그에 인라인 스타일로 속성을 지정하는 것이다.
<div style={cssSuffix(JSON.colors) as CSSProperties}>
...
</div>export const cssSuffix = (obj: Record<string, string> | string): Record<string, string> => {
if (typeof obj === "object") {
const newObj: Record<string, string> = {};
for (const key in obj) {
const modifiedKey = `--${key.replace("_", "-")}`;
newObj[modifiedKey] = obj[key];
}
return newObj;
}
return {};
};
cssSuffix 함수는 객체로 선언된 컬러들을 style속성으로 변환해주는 util 함수이다.
결국 이렇게 되면 최상위 태그에 인라인 스타일로 이렇게 선언되는데 그럼 sass에서도 포인트 컬러를 var 키워드를 사용하면 재사용성이 높게 포인트 컬러를 사용할 수 있다.
element.style {
--main-color: brown;
}
// 사용할 때
.some-class {
color: var(--main-color) // 메인컬러 사용
}위처럼 동적으로 사용할 요소들을 고려해 개발을 하였다.
기타
22일(수)에는 구름(Goorm)에서 진행하는 컨퍼런스(COMMIT)에 오프라인에 추첨되어서 다녀왔다.
클린 코드의 책에 관해 전반적인 내용을 다뤘다. 핵심적인 주제는 '클린 코드는 우리가 생각하는 단지 코드에 관한 내용이 아니다'가 주요 내용이었다. 강연을 들으면서 테스트 코드를 작성하게 되면 코드의 유연성이 늘어나고 그에 따라 코드의 안정성 또한 같이 높아진다 라는 얘기를 했었는데 아직까지 테스트 코드를 작성해보지 못한 나를 되돌아 보게 해주었다. 이번에 회사에서 진행하는 프로젝트에 테스트 코드를 적용해볼 생각이다.
생각해보면 요구사항이 늘어날때마다 사이드 이펙트를 확인하는 시간이 많았고 그런점을 생각하면 테스트 코드를 공부하는 것은 이러한 시간을 단축시키는데에 가장 큰 이점이 아닐까 생각이 든다.
마무리
남은 한달도 잘 마무리하고 올해 내가 해왔던 일을 되돌아보면서 조금 더 성장하는 한해가 되길 바라며 화이팅
