🏢 기업협업 시작

9월 25일 ~ 10월 27일, 그 사이 긴 추석연휴가 있어 약 4주 정도 되는 기간동안 인턴십을 가졌습니다.

🗨️ 내가 선택한 곳과 이유

인턴십을 가기 전에 나는 어떤 회사에서 일하고 싶은지를 고민해보았습니다.
기업이 어떤 것을 추구하느냐가 제게 큰 동기부여가 될 것 같아 가장 중요하게 느껴졌습니다.
리스트 중 희망하는 기업을 작성할 수 있었는데, 저는 그 중 1순위로 작성한 기업에 다녀올 수 있었습니다🙂

💙열다컴퍼니
옷장을 정리하고, 패션 라이프사이클에 맞춰 의류 소비 및 처분을 도와주는 서비스를 운영하는 기업으로, 1인 또는 맞벌이 가구가 늘어나고 있는 현황과, 의류폐기물과 패스트패션에 대한 문제에 공감하고 있던 저에겐 이 회사가 가장 눈에 띄었어요.

기술적으로는 현재 가장 많이 사용되고 있는 next.js와 typescript를 사용하고 있고, 본격적으로 개발을 배우기 전에 혼자 flutter를 찍먹해보기도 했었던지라 회사소개란에 앱 개발 예정이라는 것도 흥미로웠고요.

---

프로젝트 소개

아쉽게도 같이 가게 된 백엔드 개발자 양지은님과는 다른 업무를 맡게 되었습니다.
회사의 매출이 점차 커지면서 사용중인 노코드 툴을 인하우스로 마이그레이션 하고자 하는 페이지가 있었고, 그 페이지를 구현하는 업무를 맡았습니다.

🔧기술 스택

next.js, typescript

---

💻 맡은 업무

1. 어드민 페이지 마이그레이션 (진행 중단)

사내 임직원 및 매니저, 고객의 정보가 저장되는 어드민 페이지로, 예약정보와 진행상태, 그리고 매출을 확인할 수 있습니다.

1-1. UI 기획

당시 디자이너가 없는 관계로 UI 기획을 진행하였습니다.

---

2. 🌟배포완료🌟 서비스 예약 페이지

서비스 예약 페이지는 고객이 직접 구매 예정인 서비스에 필요한 인원 수와 이용 시간을 선택할 수 있고, 선택 및 작성한 내용에 따라 매니저를 배정하여 서비스를 받아볼 수 있게 되어있습니다.
회사가 소비자에게 제공하는 주요 서비스로, 매출과 직결되는 페이지를 마이그레이션 하는 작업이었기 때문에 부담도 되고 열심히 해야겠다는 다짐과 함께 UI 계획부터 시작했습니다.

해당 페이지는 배포가 완료되어 아래 주소에서 확인이 가능합니다!
페이지 바로 보기
또는 메인페이지에서 로그인 후 바로 확인할 수 있습니다.
메인페이지 바로 가기

2-1. UI

웹앱으로 페이지 제작을 진행하였습니다.
서비스에 가장 중요한 선택옵션과 이해를 위한 설명 제공 기준으로 페이지를 나눴습니다. 총 4페이지로 구성되어 있고, 직관적인 이동 버튼을 하단에 두었습니다.

2-2. 기능구현

• 선택한 매니저 인원수에 따라 선택 가능한 시간 버튼 호출
• 선택한 매니저 인원수와 시간에 대한 서비스 안내 표기
• props로 유저가 선택 및 작성한 데이터를 컴포넌트에 전달하여 최종 제출되도록 구현
  처음에는 Context API를 쓰는 것을 생각해 코드를 짰는데, useSatet와 props로 데이터를 전달하는 방식으로 변경하였습니다.
  Context API를 사용하고 싶었으나 Typescript의 에러를 해결하면서 코드를 짜다보니 시간이 지체되기도 했으며 배운대로 적용에 실패하였고😭..
  결국 CEO님께 이 상황을 말씀드리고 props로 전달하는 것으로 코드를 구성하는 것은 어떤지 여쭤보았습니다. 규모가 크지 않으니 props로 넘기는 방법도 간단하고 좋아보인다고 말씀해 주셔서 완성했습니다!
  
• Next Auth, useSession Hook으로 유저 확인 및 정보 자동기입
  소셜로그인을 관리하는 라이브러리로 JWT 방식의 인증을 사용하는 Next Auth를 활용. 유저의 Id 여부를 판단하여 없을 경우 로그인 페이지로 이동하고, 정보가 있다면 이름, 전화번호를 input과 state에 자동으로 업데이트 되도록 하였습니다.
  
• enum 사용하여 상수데이터 가져오기
• useRef를 활용해 경우에 따라 input창으로 자동 포커싱
  프로모션 코드를 입력해야하는 옵션을 선택했을 경우 자동으로 코드 입력 input에 포커싱 되도록 구현
• 다음 주소검색 API를 사용하여 주소 입력창 구현
  고객으로부터 입력에 대한 불편 컴플레인이 접수되어 주소 검색 버튼 클릭 시 팝업으로 띄우던 것을 모달로 변경
• useEffect를 사용해 쿼리 파라미터 여부 확인하고, 파라미터를 가져와 프로모션 코드 자동 입력, 알게된 경로 옵션 자동 선택되도록 구현

2-3. 문제 해결

• 문항에 따른 옵션 버튼을 누르면 쿼리스트링이 생기면서 제출되는 현상
  해당 문제에 대해 포스트를 작성했습니다.
  button 문제 해결
  
• 상수데이터의 value를 호출했을 때 개행이 되지 않는 현상
  해당 문제에 대해 포스트를 작성했습니다.
  개행 문제 해결
  
• Module not found: Can't resolve 'child_process'
  시간을 ISO형식으로 변환하여 보내고자 했는데, 만들어둔 메서드 함수가 있어서 이를 사용해달라는 요청이 들어와 적용했더니 나타난 에러.
  nods.js의 내장모듈로 클라이언트 측에서 사용이 불가능해서 나타난 거라고 하는데 즉 서버에서 사용중인 컴포넌트라서 안된다는 거! 이런 일이 생길거라곤 생각도 못했다...
  최대한 제 선에서 해결해보고자 하여 api 엔드포인트를 생성해보라는 말이 있길래 시도해봤으나 404 에러가 발생했습니다.
  결국 CTO님께 말씀드려서 프론트단에서 변환하여 보내는 것으로 해결했습니다.
• TypeError: Cannot read properties of undefined
  값이 정의되지 않아 읽을 수 없을 때 나타난다고 합니다.
  여러 방법이 있지만 저의 경우 옵셔널 체이닝을 써주어 해결했습니다.

2-4. 피드백 반영

• useEffect를 쓰지 않고 스크롤바 위치 초기화
  컴포넌트가 전환될 때 스크롤바가 이전 컴포넌트에 있던 위치에 그대로 머물러있어 스크롤을 올려야 하는 불편함이 있었습니다.
  때문에 useEffect에 코드를 넣어주었는데 잦은 useEffect 사용을 지양하고자 useEffect 없이도 가능한 지 검토해보라는 피드백을 받았습니다.
  
  이동 버튼을 눌렀을 때 다음 또는 이전 컴포넌트로 변경되도록 만든 함수가 있었는데, 해당 함수로 코드를 옮겼습니다.
  
  찾아보니 공식문서에 ScrollRestoration를 이용한 스크롤 위치 초기화 방법이 있는데 라우트 했을 때 작동되는 것 같아 기회가 된다면 사용해 봐야겠습니다.
  ScrollRestoration - 공식 문서

2-5. 기억나거나 고민 많았던 코드

• useEffect를 사용하지 않고 스크롤을 초기화하는 코드
  조금 더 깊게 고민했었다면 useEffect를 안 썼어도 됐었겠구나 했습니다..

const next = () => {
		if (current < 5) {
			setCurrent((prev) => prev + 1);
			window.scrollTo(0, 0);
		}
	};

• date 유형의 input 태그
  배포 후 아이폰으로 보니 date 유형인 input창이 사이즈도 이상하고, 선택 날짜를 제한하고자 넣은 min 속성이 안돼서 많은 수정을 거쳤습니다.
  알고보니 iOS에서는 min 속성을 지원하지 않는다고...
  그래서 최소 선택 가능 날짜 이전으로 선택하면 선택이 되지 않고, 경고문을 띄워주는 함수를 만들었습니다.
  input의 width도 도저히 해결이 안되어서 고민하던 찰나, date 유형의 input에 opacity: 0을 주어서 해결할 수 있었습니다.
  가짜 input에 선택한 값을 보여주도록 설정해 주고요.
  웹브라우저마다 지원이 다르다는 것은 익숙한데, 디바이스까지는 미처 생각을 못했는데 모바일 디바이스도 꼭꼭 테스트를 해야겠습니다..!😢
  
  
• 프로모션 코드를 기입하는 input 위치 변경
  유저의 경험을 생각하여 기존 폼과 다르게 코드 입력 input의 노출 조건과 위치를 변경해 보았습니다.
  프로모션 코드는 알게 된 경로를 선택하는 옵션에 따라 필수 기재 사항인데, 기존 폼대로 만들었을 땐 기입하는 칸이 옵션보다 위에 있어서 옵션을 선택하면 useRef로 코드 입력칸에 포커싱 되도록 했고, 입력이 필요없는 옵션을 선택했다면 입력이 되지 않도록 로직을 구현했습니다.
  그렇게 만들고나니 코드를 입력할 필요가 없는 유저라면 혼란스러울 것 같기도 하고, 코드를 입력할 유저도 다시 상단으로 옮겨야하니 불편하겠단 생각이 들었습니다.
  위치만 바꿔준다면 좀 더 편리해질 거 같단 생각이 들었고, 코드 입력창이 옵션을 눌렀을 때 뜨면 혼동이 없을 거 같아 CEO님께 말씀드려서 위치를 변경했습니다. 여기에 추가로 코드 입력이 필요한 옵션을 선택했을 때에만 input이 뜨도록 해 구현을 마쳤습니다🙂

3. 매니저 - 서비스 결과 제출 페이지 (85% 완료)

서비스를 제공 완료한 매니저가 결과에 대한 정보를 기입하여 제출하는 페이지입니다.

해당 페이지는 제출된 데이터를 받을 API가 완성되지 않아 제출 기능은 되지 않지만 이를 제외하고 배포가 된 상태입니다!
로컬에서 테스트 했을 땐 크게 문제가 없었으니..😂

3-1. UI

서비스 결과 보고 페이지이므로 공개가 어렵습니다🙂

3-2. 기능구현

• 쿼리 파라미터로 예약정보를 불러오는 id값을 확인하여, 해당 예약 정보를 제공하도록 구현
  router.isReady를 사용해 쿼리 파라미터에 접근
• 서비스 전과 후의 사진을 S3에 업로드, 각각의 디렉토리에 저장되도록 구현

3-3. 문제 해결

• Cors Error
  Cross-Origin Resource Sharing
  브라우저에서 동일 출처가 아니면 에러가 발생하는데, 서버에서 헤더에 허용할 출처를 기재해 클라이언트에 응답해주면 된다고 합니다.
  크롬 확장 프로그램을 설치해서 해결하는 방법도 있는데, 여러모로 복잡해지는 것 같아 API로부터 받아오는 JSON 데이터를 mockdata로 만들어 테스트해보고, 배포하여 문제 발생 시 해결하는 것으로 진행했습니다.
  종종 발생하는 에러인 거 같아 기억해두어야겠습니다!
  
  
  413 Request Entity Too Large
  서버에서 지정한 용량보다 큰 용량의 이미지를 업로드 해서 그런 것으로 알고 CTO님께 말씀드렸는데 알고보니 업로드 할 버킷 패스를 잘못 입력을 했다는 것을 알게 되었습니다. 알맞은 디렉토리를 입력해주니 해결된..😂

🤩 배포가 되었다 !

여태 프로젝트들을 전부 로컬에서만 봤던지라 실제로 서비스에 사용되는 것은 처음이어서 설레기도 했고, 메인에서 바로 이어지고 매출과 직결되는 페이지이기 때문에 긴장도 컸습니다.
그래서 바로 터져버린 date 형식의 input 문제로 멘붕이 왔었네요😢

고객의 예약신청이 완료되면 메시지로 받아볼 수 있는데 하나 둘씩 올라오는 예약완료 메시지가 뜰 때마다 신기하고, 이 맛에 개발한다는 생각이 들었어요. 개발자가 되고 싶었던 이유 중 하나였거든요.

유저플로우를 나름 신경써서 만들었다고 생각했으므로, input 문제까지 해결하고 나서부터는 할 일을 다 마쳤다고 생각했는데 그건 크나큰 오산이었다는 거..

문제발생 및 해결

1. 🙎‍♂️🙎‍♀️ : 팝업창이 불편해요.
주소를 검색할 때 팝업창이 뜨도록 했는데 모바일에서는 팝업을 허용하지 않으면 설정에 들어가서 허용해줘야하는 번거로움이 있어 이 부분이 불편하다는 고객의 의견이 있었습니다.
인턴십 막바지였어서 그런지 CTO님이 팝업이 아닌 다른 방식으로 가능한 지 여부만 알아보라고 하셨는데, 모달창으로 충분히 구현이 가능한 부분이라고 생각을 했고, 최대한 제 손으로 끝내고 싶어서 구현을 마친 후 모달창이 뜨도록 개선된 화면을 보여드렸고 좋은 반응을 얻을 수 있었습니다.

2. 예약신청 제출 중복 클릭 문제
제출 버튼을 누르고 정상적으로 데이터가 서버로 전달되면 다음 페이지로 넘어가게끔 했기 때문에 테스트 할 땐 당연히 다음 페이지로 넘어가기를 기다렸었는데 유저 입장에선 그게 아니라는 것을 미처 생각하지 못했었습니다..😨
유효성 검사를 거쳐 버튼 활성화 여부를 바꿔주고 있었는데, 위와 같은 문제가 발생하여 제출 버튼을 클릭하면 활성화 되어있던 버튼의 disabled 속성을 비활성화 해주는 코드를 추가해 주었습니다.

느낀 점

1. 질문을 두려워 하지 말자.
CEO님께 프론트엔드 업무를 여쭤보고 있었는데, 잦은 미팅으로 뵙기가 어려웠습니다. 때문에 CTO님과 같이 있는 시간이 길었는데 CTO님은 프론트엔드를 잘 모른다고 하셔서 코드를 치다가 어려움이 있을 때 누구에게 질문해야할 지 막막했었습니다.
두 번째로 진행한 서비스 결과 제출 페이지를 만들 때 S3에 이미지 업로드를 하는 부분에서 막혔었는데 혼자 하루동안 고민하며 해결하려고 했었습니다.
CTO님께서 진행하다가 어려운 점은 없었냐고 하셔서 그제서야 말씀을 드렸고, 너무나도 간단하게 답을 주셔서 막혔던 진행이 술술 풀리기 시작했습니다.
S3를 이전부터 사용하고 있었던지라 당연히 CTO님께 여쭤봤으면 금방 해결했을텐데 이 부분을 간과하고 혼자 너무 오랜 시간을 고민했던 거 같습니다.
후에는 혼자 해볼 수 있는데까지 해보고, 그럼에도 해결이 어려울 때에 어떠한 문제에서 어디까지 해봤는데도 해결되지 않았는지 말씀을 드리며 질문을 했습니다.
그렇게하니 혼자 하루 꼬박 고민하는 것보다 빠르고 명쾌하게 해결할 수 있었고, 서로 잘 모르는 문제라면 함께 고민하며 해결해주려고 하셔서 감사했습니다!
나중에 알게 된 것이, 서버에서 해결이 가능하거나 쉽게 확인이 가능한 부분도 혼자 끙끙거리며 고민하고 있었더라고요. 이 때 팀원과의 소통의 중요성도 깨닫게 되었습니다🙂

2. 유저의 행동이 나와 같다고 생각하지 말자.
저는 스스로 UI/UX를 신경써서 계획하고 코드를 짠다고 생각했었는데 이번 배포 경험으로 개발자인 본인 위주로 생각을 많이 했다는 것을 깨달았습니다. 사소한 버그가 유저에게 불편함을 느끼게 할 수 있다는 것은 물론이거니와, 불편했을 팀원들에게도 죄송한 마음이 들었습니다😭
설마 유저가 이렇게까지 행동하겠어? 라는 생각이 든다면 그냥 넘기지 말고 처리를 해야겠습니다.

3. 직접 해봐야 는다.
next.js와 typescript는 협업에서 처음 사용해 보았는데, 협업에 나서기 전에 강의를 들으며 공부를 하긴 했지만 역시나 직접 해보는 것만큼 좋은 것이 없다는 걸 느꼈습니다.
이미 다른 프론트엔드 개발자분이 짜둔 코드가 있어 그 코드를 보며 왜 이렇게 짠 것인지 고민해보고, 직접 적용해보기도 하고, 에러메시지들을 해결하며 강의에서는 보지 못한 지식을 습득할 수 있었습니다🙂

아쉬웠던 것은

1. 질문을 망설였다
처음부터 계획과정에 질문을 하지 않아 계속 추가되는 로직에 추가와 수정하는 시간이 길었고, 모르는 것을 혼자 해결하겠다고 많은 시간을 허비한 것입니다.
처음에는 바쁜 팀원들을 위한 배려라고 생각했는데 CTO님과 대화를 하면서부터 작업속도가 붙는 것을 보고 잘못된 판단으로 쪼개어 알차게 써야하는 시간을 허투루 소비한 것 같아 아쉬움이 남습니다.

2. 남들에게 이해가 되는 코드를 쳤는가
유저나 팀원들에게 좋은 코드를 짜는 개발자가 되고 싶은데 나는 그런 사람이었는가? 스스로 묻는다면 아니었다고 답할 수 있는 시간이었습니다..
점점 늘어나고 쪼개지는 변수로 변수명을 어떻게 작성해주어야 할 지 모르겠고, 그 과정에 나만 알 수 있는, 명확하지 않는 변수명으로 코드를 쳐온 거 같습니다.
리팩토링하여 가독성을 높이고 싶었는데 시간적 여유가 없었다고 하면 변명이겠죠?😢 스스로 찝찝한 코드로 협업을 마무리하게 되어 아쉬움이 납습니다.

👍결과

서비스 예약 페이지를 마이그레이션 한 이후 예약건수가 전환 전 대비 1.5배 상승하였습니다. First Paint가 2.6초에서 1.0초로, Speed Index는 3.5초에서 1.3초로 단축되었음을 확인했습니다!
조금 더 성능을 높이는 작업을 할 수 있었을텐데 그러지 못해 아쉽습니다.

잘한 것이 있다면

책임감을 가지고 마지막까지 임했다고 생각합니다!🙂
비록 깔끔하게 코드를 작성하지 못한 채로 마무리하긴 했으나, 주어진 task를 최대한 끝내고 싶었기 때문에 마지막날 퇴근시간이 지나도 혼자 남아 코드를 쳤던 기억이 남습니다.

그 결과 하나는 실제 서비스에 배포가 되었고, 결과 제출 페이지는 마지막까지 실제 배포를 하진 못 했지만 폼 제출 API만 있다면 사용할 수 있도록 QA까지 진행하여 완성해 두었기 때문에 조만간 완전히 배포될 거 같습니다!

기간은 짧지만 일하고 싶단 생각이 드는 회사에 합류하게 되어 기뻤고, 두 대표님의 열정에 저 또한 자극이 되었던 협업시간이었습니다.
많이 미흡했다고 생각하는데 잘 하고 있다며 칭찬해 주시고😭 좋은 말씀과 조언을 아끼지 않고 해주신 CEO, CTO님께 감사하다는 말씀을 이미 드렸지만..! 여기서도 적어봅니다.

앞으로의 목표

우선, 적용하지 못한 Context API를 배우고 싶습니다. 배포는 불가능하겠지만 학습을 목적으로 혼자 리팩토링을 진행해보려고 합니다.