[기업인턴 회고] 옷장정리 서비스

기업협업은 한 달동안(09.25~10.27) 기업에서 인턴십 경험을 하는 기간으로

실제 기업에서 사용하고 있는 기술을 배워 기업에 추가 기능을 구현하거나 기업에서 제공하는 프로젝트를 작업하여 실무 경험을 쌓을 수 있는 프로그램이다.

우리팀은 프론트엔드 1명, 백엔드 1명이 참가했다.

열다컴퍼니의 구성인원은 총 2명으로 대표님과 CTO님이 계셨으며 현업 기간동안 백엔드 개발자이신 CTO님과 직접 소통했다.

 

 

🏢 1주차

1주차는 방문키를 발급받고 열다컴퍼니의 전체적인 서비스 구조와 매출 유형을 파악하는 시간을 가졌다.

열다컴퍼니는 옷장정리 서비스 규모가 커지면서 Supabase로 DB를 옮기는 과정에서 추가로 보완할 기능을 개발하고 완료되면 추후에

내부어드민 페이지를 구현하는 것을 목표로 했다.

서비스 과정에서 개선해야할 점을 나열하고 우선순위 위주로 기능을 구현하기로 했다.

 

flow chart 작성

이 기업은 일반고객과 서비스매니저 두 부류의 user가 있으며 각각 서비스에 맞게 알림톡을 발송한다.

회원가입부터 서비스 결제까지의 flow chart를 작성하고 기업협업 기간동안 추가해야 할 서비스를 추가하였다.

 

API 기능요구 정의서 작성

flow chart를 기준으로 각각 기능에 대한 정의를 기재했다.

추가로 기업의 코드를 보면서 API 목록도 함께 만들었다.

처음 접해보는 Typescript와 Next.js기반의 코드를 보면서 빠르게 기능을 파악하고 정리하는게 쉽진 않았지만 최대한 검색하고 코드를 해석해가며 작성을 수월하게 할 수 있었다.

 

확실히 3개의 문서를 직접 작성해보니 누군가 이 회사의 서비스를 물어봤을 때 flow가 머릿속에 단번에 그려져 바로 설명할 수 있었다.

개발 프로젝트를 효율적으로 관리하는 중요한 문서를 실제로 작성해보니 개발자들이 목표를 이해하고 달성하기에 유용하겠다고 느꼈다.

 

 

---

🏢 2주차

Supabase는 오픈 소스 백엔드 서비스와 데이터베이스를 제공하는 플랫폼으로, 개발자와 기업들이 웹 애플리케이션과 모바일 앱을 빠르게 개발하고 배포하는데 도움을 주는 툴이다.

PostgreSQL 데이터베이스를 기반으로 하며 데이터베이스의 변경 사항을 실시간으로 감지하고 실시간 업데이트를 제공한다.

프론트엔드 개발자가 백엔드 개발자 대신으로 Supabase를 사용하기도 하는 서비스라고 한다.

 

Supabase Local 개발환경 셋팅

2023.10.06 - [👩‍💻/Back] - Supabase Local 개발환경 셋팅

개발 환경 셋팅은 Supabase에서 제공한 가이드를 보며 어렵지 않게 따라할 수 있었다.

그러나 프로젝트와 연결하는 과정에서 Supabase의 임시데이터가 로컬 환경으로 연결되지 않아 반나절을 찾아보다가 CTO님께 도움을 요청했고 CTO님도 셋팅을 해보신 적이 없어 다른 방법을 생각해보는 것으로 하고 2주차를 마무리했다.

 

 

---

🏢 3주차

Dev DB로 원격 데이터 연결 확인

지난주의 Local 연결 문제는 열다의 develop 코드를 clone 받아서 새 branch를 생성해서 작업을 진행하기로 했다.
기능 구현을 Local 환경에서 해도 되고 Dev DB에 붙어서 진행해도 되니 Dev 기준으로 진행을 하고
Supabase를 통해 Dev DB에 데이터를 삽입하여 서버와 잘 연결되는지 console.log로 확인하였다.

 

test.ts 파일을 생성하여 코드를 작성한다.

 

import { getUserById } from '@/services/supabase-service';
import { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
	try {
		const { headers, body } = req;
		const headerHost = headers.host;
		const bodyDataFields = body.data.fields;
		const queryParam = req.query.param;
		console.log('headerHost', headerHost);
		console.log('bodyDataFields', bodyDataFields);
		console.log('queryParam', queryParam);
		const user = await getUserById('a630ccd5-c94a-4517-a75e-1f86dd39f6b4');
		console.log('user', user);
		res.status(200).json({ success: true });
	} catch (error) {
		console.error(error);
		res.status(500).json({ success: false });
	}
}

 

console.log가 찍히지 않아 여러 방법을 시도하다가

놓치고 있었던 두 가지 사항을 수정하니 정상적으로 확인되었다.

 

✎ 파일의 위치를 pages로 할 것 (pages/api/test.ts)

✎ req.query.param 코드와 postman key를 동일하게 설정할 것

 

 

Supabase에 데이터 넣기
users 테이블에 insert row 데이터를 넣고 vscode에서 원격 데이터 연결되는지 확인

 

 

 

Test - Params

 

 

 

 

Test - Headers

 

 

 

 

Test - Body

 

 

 

 

결과 확인

 

 

---

🏢 4주차

알림톡 전송 API

✔️ 유저가 예약 신청한 서비스에 매니저와 매칭이 되면 matches 데이터에 확정된 일정 데이터가 쌓이게 되는데 기존 일정이 변경되었을 때 변경된 내용을 매니저에게 알림톡 전송하는 API를 구현해야 한다.

 

알림톡 전송은 SOLAPI를 이용하는데 이는 API 연동으로 알림톡이나 메시지를 전송하여 업무를 자동화하는 서비스를 제공한다.

우선 matches에 test 데이터를 삽입하여 알림톡이 전송되는지 확인했다.

 

 

Postman에서 send 버튼을 누르자마자 알림톡이 전송되었다.

 

 

너무너무 신기했다! 그동안 내가 받았던 다른 서비스에서의 알림톡들도 API를 통해 수신되고 있었다는 것을 처음 눈으로 확인했다.

 

 

일정이 변경되었을 때 알림톡을 전송하는 기능을 추가하면 되기 때문에 날짜나 시간이 변경될 경우를 생각하고 코드를 생각하고 있었다.

기능 구현은 쉽지 않았다.

여기저기 다양하게 연결된 변수 선언을 이해하기 위해 한 줄 한 줄 살펴봤으나 그래도 이해가지 않아 멘토님들께서 코드 해석에 도움을 주셔서 코드를 이해해가며 기능을 구현하던 중 CTO님께서 중간에 나의 진도를 확인하셨다.

 

여기서 '일정 변경'에 대한 이해 차이가 있었다.

CTO님이 말씀하신 일정 변경은 매니저 투입인원이 다른 사람으로 변경되었을 때 새롭게 투입된 매니저에게 알림톡을 보내는 API를 요청하셨던 것이라고 한다.

 

문제.

일정이라는 것은 날짜, 시간 등 다양한 상황이 있을 수 있는데 날짜와 시간으로만 한정해서 생각했다.

 

개선 방안.

앞으로 이런 상황이 발생하지 않도록 개선 방안을 생각해보고 비슷한 상황에서 이렇게 대처하려고 한다.

1. 문서화한 내용 확인

    미팅 내용을 기록하는 것으로 끝내지 않고 명확한 목표를 문서화하여 일관된 정보를 공유한다.

2. 업무 상황 공유

    효과적인 의사 소통을 위해 진행 상황을 공유하고 피드백 받는 시간을 가진다.

3. 프로세스 개선

    현재의 업무 프로세스를 검토하고, 비효율적인 부분을 수정하고 개선한다.

 

느낀점.

해당 API는 우선순위를 미뤄두고 reservations 테이블의 예약정보를 보고 manager_number 수를 고려해서 수를 초과할 경우 err를 띄워 업데이트되지 않도록 예외처리하는 Update 기능을 구현하다가 다음 기수에게 인수인계하게 되었다.

해당 기업에 가장 처음으로 협엽에 참가한 기수이다 보니 flow chart부터 작성하고 CTO님과 직접 소통할 수 있어서 값진 경험이였다.

실제 기업의 코드를 보니 정말 가독성이 좋고 구조화 되어있으며 다양한 기능을 코드로 녹여놓은 것에 놀랐다.

덕분에 Typescript와 Next.js도 맛보고 실제로 개발자가 어떻게 근무하는지 경험할 수 있는 좋은 기회였다.

패션과 쇼핑에 관심이 많아 현재 서비스 개편에 도움될 수 있도록 자유롭고 편하게 의견을 드릴 수 있는 점도 좋았다.
서로에게 도움주고 받으며 기업협업을 잘 마무리했다.