대규모 업데이트

배경

우리 회사는 이전에 3.0 Product에서 4.0으로 대규모 업데이트를 예고하고(기사 배포) 진행하게 되었다. 3.0까지 Product은 사실 백엔드와 프론트 엔드가 함께 개발된 형태라서 이를 분리 개발을 진행하고, 디자이너와 기획자가 새로 팀에 합류하게 되어서 디자인에서 힘듬을 느꼈던 개발자에게 너무 감사하게 느껴졌다.
다만 프론트 개발자는 1년차 (글쓴이) 와 0년차 (컴공전공자) 2명에서 모든 것을 만들어야 했다.
여기서 모든 것이란.. 개발에 필요한 스택.. 하다 못해 React 를 사용해서 개발할지, TypeScript , 순수 자바스크립트로 개발을 할지를 결정부터 시작해야 했다. (물론 무지성으로 이것으로 우리가 한다고 하면 된다는 것은 아니다. 왜 이것을 사용해서 개발을 해야하는지 배경과 장단점을 파악해서 보고드리고 컨펌을 받아야했다.)
그래서 나는 주니어 프론트 개발자 둘이서 ... 꾸역꾸역 해내기 위해서 노력했던 내용을 중심으로, 다른 팀들과 현업하는 과정, 어려웠던 점 등을 회고 형식으로 글을 써볼까 한다.
사실 개발자로서 이력을 기록하는 목적이 조금 더 크다.... 내가 다니는 회사는 깃허브를 회사 계정으로 사용해야 하기 때문에, 회사를 만약 퇴사하면 깃헙 기록이...없어진다. ㅠㅠ

팀 구성

우리가 일하는 방식

내가 다니는 회사는 OKR에 기반한 가치중심적인 개발을 진행하고 있다. 스타트업이랑 특성상 한 팀원이 하나의 일만 할 수 있는 구조는 아니라, 하고자 하는 일과, 가고자 하는 방향을 설정하는 미팅을 모든 팀원이 참여하게 된다. 하나의 방법으로 북극성 지표를 설정하는 일 같은 것을 한다. 목적을 가치 중심적인 문장으로 뽑고(가고자 하는 방향 설정 이라고 이해하면 편하겠다.) 모든 팀원이 목적에 얼라인된 상태에서 에픽과 스토리를 뽑아낸다. 에픽과 스토리에 대한 자세한 설명은 생략하겠다. 그리고 Jira를 통해 에픽과 스토리 테스크 단위로 세팅을 한다.

기획

PM 조직(사실 조직이라고 하지만, PM1명과 회사 대표)이 목적을 기반으로 에픽과 스토리 단위까지 일의 우선 순위를 정하게 된다.

디자인

디자인팀(디자이너 1명) 디자이너는 스토리까지 나온 것을 보고, 와이어프레임을 그리게 된다. 와이어 프레임을 만드는 작업은 사실 디자이너 혼자하는 작업은 아니고 PM과 함께 (2명에서) 진행을 하게 된다.
와이퍼 프레임나오면 디자인 툴로 내가 다니는 회사는 피그마 라는 디자인 툴을 사용해서 디자인이 완성되면 프론트 엔드 팀에 핸드오프 하게 된다.

프론트엔드

프론트엔드팀(글쓴이 포함 2명)은 기획단계에서부터 사실 각 파트에 참여하고 있는 상태이기 때문에 디자이너가 피그마를 통해 디자인이 나오기 이전까지 (사실 이전 까지 많은 시간이 없다. 하루 정도 시간이 생긴다) 우리가 원하는 것을 Product에 구현하기 위해서 필요한 세팅을 하게 된다.

백엔드

백엔드팀(3명)은 기획에서 나온 내용을 바탕으로 DB구성을 먼저 세팅하게 되고 기획팀에서 에픽과 스토리가 나오게 되면 API 개발 계획도 하게 된다. 우리 회사는 API가 상당히 중요하기 때문에 백엔드 팀은... 많은 어려움이 있다. 자세한 이야기는 나중에 API의 중요성 같은 글을 작성하면서 적어 볼까 한다. 글쓴이 본인 또한 지금 회사에 입사하고 Python을 활용해서 API를 개발해본경험이 있어서 말이다.

프론트엔트

이번 프로젝트에서 우리 프론트엔드 팀은 사실상 무에서 유를 만들어내야했다. 선임개발자가 없었기때문에 자료조사부터 스택 선정 까지 주니어 개발자 단 둘이서 해내야 했고, 주니어 개발자 둘이서 한다는 걱정을 덜어줘야 했기에 하나부터 열까지 왜 이렇게 했는지 근거가 어느정도 명확해야 했다.

스택

선정에 가장 중요한 요소는 정해진 기간안에 정해진 범위까지 개발이 이루어져야 한다. 기획부터 시장 릴리즈 까지 2달에 시간이고, 순수하게 개발한 할 수 있는 시간은 1달정도 밖에 되지 않는다.
언어는 JS로 진행한다.
프레임워크는 React와 TS와 무척고민이 많았다. TS로 진행을 하고 싶었지만, 프론트 개발자 두명 모두 TS를 개인, 팀 프로젝트 단위에서만 진행해봤기때문에 문제가 있을때 이를 대처하는데 어려움이 있을 것이라 판단했다.(프론트에 대해 깊은 이해가 있는 선임개발자가 없는 이유도 있다.) 조금 더 자신있고 친숙한 React로 선정하기로 했다.
그밖에 CSS는 스타일드컴퍼넌트를 사용하고 초기 세팅은 CRA로 진행한다. 초기 세팅을 CRA로 진행한 이유는 나중에 eject을 통해서 CRA가 자동으로 해줬던 webpack, babel 등의 설정들을 해줄 수 있기때문이다.

다음으로 린트규칙을 설정하기 위해서 린트 설정을 해줬다. 나 혼자 개발을 하는것이 아니기때문에 이런 기본적인 규칙을 정하고 설정하는게 무척이나 중요하다.

다음으로 컨벤션 규칙을 정한다.

네이밍 컨벤션
함수명 : CamelCase

클래스명 : PascalCase

폴더명 : CamelCase

파일명 : PascalCase

import 규칙
라이브러리

React 관련 패키지

외부 라이브러리

컴포넌트

가까운 컴포넌트 to 먼 컴포넌트

함수, 변수 및 설정 파일

사진 등 미디어 파일(.png)

css 파일 (.scss styled)

CSS 순서
Layout Properties (position, float, clear, display, align-items, justify-content)

Box Model Properties (width, height, margin, padding)

Visual Properties (color, background, border, box-shadow, outline)

Typography Properties (font-size, font-family, text-align, text-transform, vertical-align)

Misc Properties (cursor, overflow, z-index)

유저플로우