[D&D 동아리 4기] 프론트엔드 개발자 회고

[D&D 4기 회고] 기획부터 디자이너와 협업까지 경험하는 사이드 프로젝트

• DND: https://dnd.ac/

2021년 1월부터 2월까지 8주간 DND 동아리에서 프론트엔드 개발자로 사이드 프로젝트를 진행했습니다.
회사 일이 끝나고 병행해야 하는 어려움도 있었고 배운 점들도 많습니다. 그래서 (좀 많이)늦었지만 개인적으로 회고를 적어 보겠습니다.

개요

1. 프로젝트 소개
2. 디자이너와 협업
3. 백엔드 개발자와 협업
4. 개인 회고

1. 프로젝트 소개

• 프로젝트 주제부터 팀원들의 의견에서 투표를 진행해 선정했습니다. 웹 서비스를 기반하고 있기 때문에 가볍게 즐기고 정보를 얻을 수 있는 세 가지 키워드를 선택했습니다.
• 회원 등록 기능을 통해 월간 추천 식물 서비스 메일링 등 비즈니스 모델도 생각해 보았지만, 짧은 시간에 완성된 기능을 보여주기 위해 이렇게 결정하였습니다. 추후 이런 서비스도 제공할 수 있다면 좋겠네요.

배포 주소

https://www.seeat-plant.com/

• See-at 페이지에서 '테스트'와 '식물도감' 메뉴를 체험해 보실 수 있습니다.

2. 디자이너와 협업

디자인 툴 활용하기

• 디자인 팀과는 디자인 툴인 Figma 를 사용하여 협업하였습니다.
• 현업에서는 퍼블리싱 팀이 따로 있기 때문에 디자인 툴을 처음 다룬 것이었습니다. 디자인 작업물을 직접 받아서 하니 컴포넌트와 반응형 작업을 할 때 디자인을 염두에 두고 할 수 있었습니다. 다만, 처음에 export하는 방법이나 color group 기능을 몰라 헤매기도 했었네요.

디자인 유지보수 대응하기

• CSS는 styled-component를 사용했습니다. ThemeProvider, GlobalStyle 등 라이브러리에서 리액트를 위해 제공하는 기능을 적용했습니다. 초반에 공통적으로 사용하는 color, fontSize, fontWeight를 객체로 묶었습니다. 그리고 중간에 색상값이나 간격 등이 바뀐 적이 있는데, 이 때 공통화의 중요성을 많이 느꼈습니다. 왜냐하면 나중에 추가된 새로운 폰트의 경우에는 공통화를 진행하지 못해 수정될 때마다 스타일 하나씩 변경해 주어야 했기 때문입니다. 무언가 패턴이 보이는 스타일이라면 공통화를 시도해야겠다는 생각이 많이 들었습니다.
• styled-component를 사용하면서 개인적으로 많이 느꼈던 것은 props 계속 넘겨주고 받는 게 너무 귀찮다! 였습니다. '컴포넌트'처럼 css를 적용하는 것은 좋은데 코드가 너무 많아지고 관리도 어려웠습니다. 저만의 생각은 아닌지 CSS in CSS 를 추천하고 단점을 설명하는 아티클들이 발견되네요. 다음 프로젝트에서는 다른 방법을 적용해 보려고 합니다.최근 본 아티클 중 하나인 The Power of Composition with CSS Variables는 CSS variable을 합성하여 사용하면서 css in js를 사용하면서도 스파게티 코드를 줄이는 방법을 설명하고 있습니다.
• 아티클 참고: 참고 1 참고 2
• 그리고 가장 아쉬웠던 부분은 반응형 작업을 할 때 공통적인 부분을 조금 더 래핑할 수 있었는데 하드코딩을 많이 한 느낌입니다. 작년에 작업해 둔 리액트 프로젝트용 보일러플레이트를 디자인 작업이 용이하게끔 업데이트 해야겠습니다.

3. 프로젝트 회고

리액트에 대한 이해

• 현업에서는 Vue 2를 중점적으로 사용하고 있습니다. Vue와 React는 뷰(View)가 중심이 되는 프레임워크라는 점에서 라이프사이클, 템플릿 사용 방법에서 비슷한 요소가 많습니다. 현업에서 다양한 상황의 코드를 접한 후 리액트를 사용하니 리액트도 직관적으로 더 잘 이해하고 사용하게 되었습니다. custom hook, useCallback 등을 적절하게 분리하고 적용한 것이 그 예입니다.

Component 설계에 대한 고민

• 리액트와 같은 View 중심 프레임워크는 비슷한 화면을 재사용하여 사용할 수 있다는 점이 큰 특징입니다. 이번 프로젝트에서는 콘텐츠 크기와 간격 등을 반응형으로 변할 수 있게 하는 Container 역할을 하는 Section 컴포넌트를 가장 많이 재사용했는데요. 이것을 사용하다 보니 몇 가지 문제가 있었습니다. width는 같은데 배경색이 다르다던가 하는 경우의 수가 많았던 것이죠. 그래서 아래와 같이 점점 prop이 우후죽순 많아지고 역할을 모두 정의하지도 못하는 문제가 있었습니다.
• 처음에 시작할 때 디자인과 페이지 구성을 보고 변화하는 부분을 캐치해서 옵션을 만들어 활용했으면 나중에 봤을 때 의미를 더 잘 알 수 있지 않을까 싶은 생각이 듭니다. 시간이 조금 촉박했어서 분석과 설계를 많이 하지 못해서 생긴 문제 같아서 다음에 더 유의해야겠습니다.

4. 개인 회고

개발자로 취업을 한 후에 사이드 프로젝트를 진행하는 것이 처음이었는데요. 프로젝트 전체 기간인 8주 중에 3주 정도는 설 연휴와 주말을 모두 코딩에만 몰두해야 했습니다. '코딩만 하다가 죽겠구나!' 싶은 생각이 정말 많이 들었던 3주였습니다.. 일 + 코딩 + 관련 회의 등등... 물리적인 시간이 정말 부족했어서 힘들었고 프로젝트가 끝나고 3월부터는 정말 일 외에 거의 코딩을 하지 않았습니다.

일단 해결책으로는 하고싶지 않으면 정말 조금만 하거나 하지 말고 다른 취미생활을 하자는 결론으로 되었습니다. 재택근무를 하고 있는데 코딩하는 시간도 길어지니 집 밖 뿐만 아니라 방 밖으로도 나가지 않게 되서 더 스트레스를 많이 받는 것 같았습니다. 그래서 요즘은 일주일에 3일 이상은 밖에서 운동을 하고 있고 여가 생활도 하고 있습니다.

지금은 새로운 뭔가를 많이 계속 하는 것보다는 근무를 열심히 하고 자연스럽게 새로 알게 되는 것들을 잘 기록하는 것을 목표로 해야겠습니다. 최근에 타입스크립트를 사용하면서 이에 대해 느낀 점이 있는데 다음 포스팅은 타입스크립트에 대해 적어 봐야겠네요! 그리고 프로젝트를 빠르게 시작할 수 있는 보일러 플레이트로 꼭 업데이트할 것!(다짐)(제발)