첫 서비스 개발을 어떻게 잘 할 수 있을까?

첫 서비스 개발을 어떻게 잘 할 수 있을까?

개발자로써 서비스의 한 부분을 맡아 개발을 진행하게 되는데 새로운 서비스를 처음 맡게 되었을 때 어떻게 '잘' 개발 할 수 있지? 에 대한 고민이 있었습니다.

보통 온보딩과 가볍게 회사 간단한 서비스를 개발하면서 스며들긴 하지만 좀 더 빠르게 스며들고 싶다는 저의 욕심을 막을 수 없었습니다. 또한 저희 회사는 정형화된 온보딩 과정이 부족하였고 이런 문제를 겪고 저와 같은 고민을 하시는 분들과 의견을 나누고 싶어 블로그를 켰고 처음 개발 업무를 진행하면서 집중적으로 보면 좋을 것들을 저의 경험을 위주로 글을 작성했습니다.

우선, 저는 JQuary로 되어 있는 관리자 페이지를 Svelte로 전환하는 업무를 맡았습니다.
기존에 JQuary로 되어 있는 페이지는 MPA로 페이지를 넘어갈 때마다 깜빡임이 발생을 하였고 해당 서비스는 안경 관련 서비스다 보니 구형 브라우저를 사용하는 분들이 많았고 이로 인해 속도 문제(jQuary에 비해 getElementById가 10배 빠릅니다.)를 야기하여 Svelte로 전환을 하게 되었습니다.

이 부분에 대해서는 다음에 작성을 하기로 하고 서비스에 대한 개발을 맡았을 때 가볍게 코딩 컨벤션등을 익히고 있었지만 도저히 감이 잡히질 않았습니다.
또한 모르는 것을 모른다라는 말이 딱 맞게 뭘 물어봐야 하는지 잘 몰랐습니다. 그래서 저만의 기준을 세우게 되었고 여러 경험을 해가며 보안해 나가려고 합니다.

큰 틀은 다음과 만들게 되었습니다.

1. 서비스 사용 > 2. 사용 기술 이해 및 세팅 > 3. 파일/폴더 구조 > 4. 개발 흐름 파악

(코딩 컨벤션은 수시로 계속)

 

1 서비스 사용

스타일 & 서비스와 친해지기

 

여기 부분은 이미 조금 준비가 되었다고 생각이 됩니다.
면접을 준비하면서 회사에 대해 엄청 알아보고 실제 배포되고 있는 서비스를 사용해보셨을 겁니다.

이러한 과정을 거쳐 면접을 합격하셨으니 조금은 준비가 되었지만 저와 같이 특정 분들을 위한 서비스를 개발하게 되어 사용에 어려움을 겪을 수 있습니다.
저도 안경사분들을 위한 서비스를 개발을 맡게 되어 일반인이 접하기 쉽지 않습니다. 그러나 사용하기 힘들지만 개발팀에서는 해당 제품을 개발하기 때문에 개발팀에서 코드를 받고 개발 서버로 실행을 시켜볼 수 있습니다.
또한 회사가 살아가기 위해 서비스들을 팔아야 되기 때문에 처음 접하게 되는 분들을 위한 아주 친절한 템플릿이 있을 겁니다.

이러한 것도 없다면 어떻게든 접근해서 혼자 정리를 하는 수밖에 없습니다.

서비스를 사용하면서 중요하게 생각했던 부분은 전반적인 스타일 & 서비스와 친해지기를 익히기 위한 거였습니다.

솔직히 서비스를 조사하고 사용해 봐도 전문 용어, 세부적인 기능들을 파악하기 어려웠습니다. 그래서 그냥 '이런 스타일로 되어 있군', '음 이런 부분을 개발하게 되겠네'라는 식으로 감을 잡기위해 서비스를 사용했습니다.

처음부터 딥하게 파고드는 것보다 간단하게 라도 서비스의 전반적인 흐름을 파악할 수 있었고 서비스의 스타일이 익숙해져 어느 정도 틀이 만들어 지는 듯 했고 이를 통해 회의 과정에 대한 내용들을 조금씩 이해되기 시작하였습니다. 좀 더 나아가 여기 회사가 무엇을 하는 회사인지 파악하는 경험을 할 수 있게 되는 과정입니다.

=> 서비스와 가까워지기 위해 필요한 과정입니다.

 

2. 사용 기술 이해 및 세팅

기술 우선순위 & 이해

 

각자의 회사마다 다르겠지만 보통 채용 공고/홈 페이지에 들어가면 기술 스택을 접할 수 있습니다. 여기에도 나와 있지 않으면 직접 물어보면 100% 알려줄 것 입니다.
(기술 블로그가 있는 회사인 경우 새로운 기술을 사용하게 되면 꼭 써놓습니다.)

이 후 회사에 들어가면 세세하게 라이브러리(직접 만든 것 or 아닌 것), 모노레포 등 엄청 다양한 기술들을 접하게 되는데 정형화된 교육을 받으며 개발을 진행해와서 이러한 다양한 기술들을 접하기 쉽지 않았을 겁니다. 추가로 컨벤션, git으로 받은 코드을 보며 'SvelteKit를 사용하지 않고 Svelte만 사용하고 있네 왜지?' 등 기술에 대한 의문점들도 생겨날 것 입니다.

회사에 들어가기 전에 공부해왔던 내용들은 정말 많은 내용을 포함하고 있는 것 같지만 아주 작은 부분에 불과하다는 것을 깨닫고 각 회사 상황에 맞는 기술을 사용해야 해서 엄청나게 다양한 기술을 접하게 될 것입니다. (왜 개발자가 엄청 공부해야하는 이유이기도 합니다.)

(React, Storybook 데브코스에서 배웠던 내용들을 기준으로 다른 것들을 판단하는 편협한 생각을 가졌던 저는 많이 반성합니다. 하하하)

어째든 이런 많은 기술들을 팀으로써 일하기 위해서는 어느 정도 익혀야 하는데 부족한 저로써는 시간을 많이 사용해야 할 것 같아 '어떤 기술이 서비스에 가장 큰 범위에 사용되나요?'등 질문을 통해 우선 순위 를 나열하게 되었습니다.

저희 팀은 Simple 코드를 작성하는 것을 목표로 라이브러리를 직접 만들거나 다른 기술들을 많이 사용하지 않고 HTML, CSS, JavaScript에 집중하고 있어 우선 순위를 보면 Svelte, ag-grid, 프로시저 였습니다.

이렇게 우선 순위를 둔 기술들을 집중적으로 이해하려고 노력하였고 가벼운 테스트들도 해보았습니다.
그리고 배운 것들을 바탕으로 직접 세팅을 하면서 에러가 발생하게 되는데 미리 우선 순위를 둔 것들을 이해하고 있으면 에러등도 잘 해결할 수 있는 긍정적인 효과도 기대합니다. (질문이 안나올 수 없기 때문에 팀원들과 많이 친해질 수 있습니다.)

=> 우선순위를 두고 이해를 해야 문제를 잘 타파할 수 있는 과정입니다.

 

3. 파일/폴더 구조 및 용도

잘 찾기

 

파일/폴더 구조를 보고 어떤 일들을 하는지 익히게 되면 개발의 큰 흐름을 파악할 수 있으며 다른 분들의 코드를 분석 할때 폴더를 통해 어떤 일을 하는 코드인지 크게 파악가능 합니다.

코드를 보게 되면 import 되어 있는 것이 많지만 폴더/파일 구조 및 용도를 보면 어떤 코드인지 감을 잡을 수 있게 됩니다. 그래서 저는 다음과 같이 저의 회사의 폴더/파일 구조를 정리하였는데 한번씩 보면 '아 이것 때문에 이런 파일을 만들게 되었구나' 라는 것도 알게 되었고 흐름을 이해하는데 많은 도움이 되었습니다.

📦dir_structure
 ┣ 📂public //static 한 것들
 ┣ 📂src
 ┃ ┣ 📂config // 운영 / Test 구분하기 위한 설정 (.real: 실제 환경 / .test: 개발 환경)
 ┃ ┃ ┣ 📜config.real
 ┃ ┃ ┗ 📜config.test
 ┃ ┣ 📂js //공통으로 사용할 JavaScript 함수들
 ┃ ┃ ┣ 📂common // 전체 공통 JavaScript 함수들
 ┃ ┃ ┃ ┗ 📜common.js
 ┃ ┃ ┣ 📂groups // 해당 그룹 공통 JavaScript 함수들
 ┃ ┃ ┃ ┗ 📜groups.js
 ┃ ┃ ┗ 📂libs // 특정 버전을 사용해야 하는 라이브러리 넣기
 ┃ ┗ 📂pages // Page 부분
 ┃ ┃ ┣ 📂common // 전체 공통된 컴포넌트
 ┃ ┃ ┃ ┗ 📜Component.svelte
 ┃ ┃ ┣ 📂dev // Storybook과 같이 만들어진 것들을 보면서 테스트 하기 위한 폴더 (sample 코드 사용법, 컴포넌트 사용 통일을 위함)
 ┃ ┃ ┃ ┗ 📜css_test.svelte
 ┃ ┃ ┗ 📂groups // 해당 그룹 페이지
 ┃ ┃ ┃ ┣ 📂common //해당 그룹 공통 컴포넌트
 ┃ ┃ ┃ ┗ 📜groups.svelte
 ┗ 📜explain.md

=> 공동 사용 코드를 잘 파악하기 위한 과정

 

4. 개발 흐름 파악

페어 프로그래밍

 

팀의 컨벤션을 맞추면서 JQuary를 Svelte로 변환하는 과정에서 공통된 함수, 공통된 스타일을 파악하였지만 노하우가 없어 해맸던 기억이 있습니다.
해매고 있는 와중에 팀원 분들이 한분씩 와줘서 '이거 쓰면 되잖아', '이거 여기 있잖아'등 하나씩 도움을 주셔서 노하우를 터득해 나아갔지만 뭔가 하나씩 배워서 아쉬웠고 '뭔가 더 있을 것 같다'는 의심? 이 있었습니다.

그래서 몰래 팀원분들의 개발 방법을 어깨 넘어로 배운다는 식으로 지켜보니 역시 끝이 아니였고 각종 plugin, 개발자들을 위해서 개발팀 내부에서 자체적으로 만든 웹등 이러한 기능들을 사용하여 개발을 할 때의 속도가 붙어 기술에 대한 고민을 깊게 할 수 있는 시간이 마련하게 되었습니다.

주니어가 개발을 하게 되면 다음과 같은 상황이 나오게 된다는데 팀원들의 노하우를 통해 개발을 진행하게 되면 더 도움이 되는 팀원이 되지 않을까 생각합니다.

=> 효율적으로 코드를 짜기위한 과정

 

마치며

1. 서비스 사용 > 2. 사용 기술 이해 및 세팅 > 3. 파일/폴더 구조 > 4. 개발 흐름 파악 이라는 저만의 언어로 표현을 하였지만 더 좋은 방법들도 많다고 생각이 되며 상황에 맞게 자신만의 방법을 찾아나아가면 좋겠습니다. 또한 다른 분들에게 또는 저의 미래에게 도움이 되길 바라며 주니어 개발자의 입장으로 글을 작성하여 다른분들이 일을 더 효율적으로 하는데 도움이 되었으면 합니다.

또한 온보딩 과정을 통해 하나씩 나아갈 수 있도록 도움을 주지만 없을 수도 있고 있더라도 부족할 수 있기에 더 좋은 고민을 하셨으면 좋겠습니다.

개발자를 하면서 개발을 잘하는 것도 좋지만 개발을 잘 하기 위해 고민하는 과정도 다시 한번 돌아보는 경험을 주고 내가 일을 어떻게 하는지 파악을 하는 순간을 느끼게 해줘 좋은 고민이었습니다.

앞으로도 더 효율적인 상황, 성장을 하기 위해 많이 고민하고 글을 작성하여 나 자신을 만들어 가는 개발자가 되고 싶습니다.

긴 글 읽어주셔서 감사합니다.