
## 시작하기 앞서
이전 회사에서는 총 4개의 프로젝트를 진행하였고 이에 대해서 정리를 해보려고 해요. 2022년 03월 프론트엔드 서비스부서에 입사하게 되었고 수습 3개월의 OJT 기간동안에는 같은 달에 들어왔던 동기들과 직장 선배님들의 도움을 받아 관리자 시스템을 개발하였죠, 그렇게 3개월이 지난 후 '한화생명 코어 프로젝트' 첫 프로젝트를 들어갔었죠.

## 한화생명 코어 프로젝트
```list
생명보험, 손해보험, 운영비, 수수료 지급 등등의 20개가 넘는 수수료 시스템이 존재합니다.
```
개발자로 처음 입문하는 프로젝트라 굉장히 설레이고 떨렸던 것으로 기억해요 제가 담당했던 파트는 '수수료 관리 시스템' 파트이며 한화 생명에 소속되어있는 모든 FP(보험설계사) 분들에게 수수료를 지급하는 것이 궁극적인 목표였죠, 매 월 기간내에 지급되는 시스템을 관리하고 보험 약관에 맞춰 새로운 기능을 개발하고 보수를 하였으며 또한 리뉴얼 개발로 인한 차세대 시스템을 개발하였고 Core에서 받아오는 데이터를 위한 시스템을 개발하였죠.

### 수수료 지급 프로세스
담당했던 수수료 지급의 프로세스는 JopPass와 TeraStream의 프로그램을 이용하여 데이터를 받아왔어요.
```point
- TeraSteream 이란? 
고성능 데이터 통합 ETL 솔루션으로 대용량의 데이터의 추출, 변환, 적재 과정을 효율적으로 처리할 수 있도록 해주는 프로그램이에요.
- JopPass 란?
자동화 관리 솔루션으로 배치, DBMS, 파일 송수신 작업 등을 도와주고 있는 프로그램이에요.
```
받아오는 방식은 총 두가지로 DD(DB to DB), FD(File to DB) 방식이 있죠, 즉 한화생명에서 데이터 파일을 전송해 주면 프로그램을 실행하여 수수료 시스템에 데이터를 적재하고 수수료 계산 로직을 이용하여 수수료를 산출하고 ERP로 전송하는 것이 최종 작업이죠 수수료의 흐름을 정리해보면
```list
1. 데이터 파일 전송
2. ETL 프로그램을 이용하여 데이터 적재
3. 해당 지급 수수료 유형에 맞는 프로시저 실행
4. 지급될 금액과 데이터 검증
5. 데이터 검증 및 결재 후 수수료 지급
```
이러한 단계를 거치고 있어요. 제가 여기서 진행하고 담당했던 부분은 차세대 프로젝트 환경에 맞게 각 지급유형별 수수료 계산 프로시저를 개발하고 배치 시스템 및 인터페이스를 개발하고 보험 정책 변경에 따른 유지보수, 데이터 마이그래이션 등 이렇게 보니 많은 부분을 진행하였네요. 배치시스템 인터페이스에는 일배치, 월배치가 있었으며 특정 스케쥴러 시간 혹은 직접 실행할 수 있었고 이는 SQL MERGE 사용하여 데이터를 적재하는 형식을 갖고 있어요
```point
MERGE문이란?

MERGE INTO Customer AS target
USING CustomerUpdates AS source
ON target.CustomerID = source.CustomerID
WHEN MATCHED THEN
    UPDATE SET 
        target.Name = source.Name,
        target.Email = source.Email,
        target.Phone = source.Phone
WHEN NOT MATCHED THEN
    INSERT (CustomerID, Name, Email, Phone)
    VALUES (source.CustomerID, source.Name, source.Email, source.Phone);

이처럼 두 테이블 간의 데이터를 비교하여 조건에 따라서 INSERT, UPDATE, DELETE를 수행하는 문이에요.
위 예시의 쿼리는 기존 고객 정보가 있는 테이블 Customer, 새로운 고객 정보가 담긴 테이블 CustomerUpdates라는 테이블이 있다고 가정할 때 기존 고객이면 정보를 업데이트하고 없으면 새로 추가하는 쿼리이죠.
```
개발을 진행할 때 다행이도 AS-IS 버전이 존재하여 참고하여 개발했던 것으로 기억해요. 개발을 진행할 때 가장 중요한 것이 테스트 부분이라고 생각해요 내가 완벽하게 개발을 한다 가정을 하여도 나올 수 있는 것이 버그 및 이슈사항이며 다양한 방면으로 테스트를 해야하는 것도 첫 프로젝트 경험에서 얻을 수 있었죠.

저는 회사 내부에서 부득이하게 혼자서 해당 프로젝트를 들어갔었죠, 첫 프로젝트이고 개발자의 첫 발걸음이 비록 쉽지만은 않았어요. 이전에 배웠던 개발은 기초중에 기초였고 실무는 정말 다르다는 것을 알았죠. 한화생명은 보험회사이며 가장 어색했던 것이 보험에 관련한 명칭들이었어요 `예로 보험설계사는 FP`로 불리는 등 이러한 명칭들을 모르면 업무를 진행하기가 힘들어 개발뿐만 아니라 보험에 관련된 명칭들을 프린트로 뽑아 4장정도 되는 명칭들을 출퇴근할때 외웠던 것으로 기억이 나요. 모든 것이 처음이여서 적응을 하는데 힘이들었지만 좋은 팀원분들 덕분에 실력도 많이 늘고 해당 프로젝트를 마칠 때는 웃으면서 철수할 수 있었던 것 같아요.

## 사내 홈페이지 신규개발
한화생명 프로젝트에서 철수한 뒤 회사 홈페이지를 새롭게 만드는 프로젝트를 진행하였어요. 기존 홈페이지 UI는 정말 오래된 옛날 홈페이지의 UI이었고 동료 2분과 함께 총 3명에서 사내 홈페이지를 개발했죠. 저를 많이 아껴주시는 이사님께서 제 주도하에 홈페이지를 구축하라고 전달하셨고 저는 홈페이지를 기획 및 개발까지 모두 참여하였어요. 가장먼저 홈페이지를 개발할 때 요구사항은 세가지였어요.
```list
1. 관리자페이지를 통하여 홈페이지를 관리할 수 있도록 함
2. 최신 홈페이지에 맞게 스크롤링을 통한 UI가 구성될 수 있도록 함
3. 한글, 영문페이지가 있도록 함
```
이러한 요구사항이 들어왔고 이사님, 동료분들이랑 회의를 한 결과 OJT 때 만들었던 관리자 시스템을 이용하여 홈페이지를 관리할 수 있도록 했어요. 이후 다음으로는 IT 회사에 맞게 홈페이지의 템플릿과 레퍼런스 찾아갔죠. 레퍼런스를 찾았으면 홈페이지의 사이트맵을 최대한 자세히 만드려고 했어요.

### 사내 홈페이지 기획단계
![사이트맵.png](https://d2ut7x8yqv441q.cloudfront.net/posts/사이트맵.png)

이처럼 구체적으로 전체 페이지를 잡고 회사의 얼굴이 될 메인페이지와 각 서브페이지를 기획하였어요 각 사업부에 부장님들에게 사진 및 사업부 소개에 들어갈 자료들을 받았죠.
다행이도 로그인을하여 무엇을 판매, 구매 및 글을 작성하고 이러한 이커머스 속성이 없는 홈페이지며 회사를 얼마나 아름답게 표현할 수 있느냐만 홈페이지에 담기만 하면 되기때문에 복잡하고 어려운 기능들이 없었어요. 즉 홈페이지의 UI 디자인적 요소가 가장 중요한 것이죠.

한글 및 영문페이지 같은 경우 회사 내부 영어를 잘 하시는 분께 번역한 내용을 컨펌 받았으며 쿠키값을 이용하여 한글 및 영문페이지를 변경할 수 있도록 개발을 진행했어요.

메인페이지나 서브페이지의 디자인이 모두 완료되었으면 각 부서에서 받은 자료를 참고삼아 내용을 입력하였고 홈페이지의 들어갈 이모티콘이나 고화질사진의 결제를 진행하였으며 1차적으로 홈페이지가 완성된 후 본사에 들려 대표님과 각 사업부의 부장님들에게 변경될 홈페이지를 소개하였어요. 이러한 과정의 이유는 각 사업부마다 개선사항이 분명히 있을 것으로 생각되어 회의를 진행하게 되었죠. 

마지막으로 SEO 및 Analytics를 개발하여 홈페이지에 적용시켜 최종적으로 개발이 끝나게 되었어요.

도메인같은 경우 기존에 사용하고 있던 카페24의 도메인을 그대로 이용하였어요. 배포를 진행할 때 ROOT 파일만 교체하면 되기 때문에 큰 어려움은 없었어요. 혹여나 운영서버에서 이슈사항이 발생할 수 있음으로 사용하지 않는 도메인을 개발서버로 이용하여 테스트를 진행하였어요.

개발 경력이 많지 않은 저에게 이런 프로젝트를 주도할 수 있게 해주신 이사님에게 감사하면서도 부담을 많이 갖게 됐어요. 개인 프로젝트가 아닌 회사의 얼굴이 되며 내가 회사를 떠난다고 해도 커밋 히스토리와 주석에 저의 이름이 적혀있으므로 보다 더 완벽하게 할 수 있길 원했어요. 프로젝트를 진행하면서 가벼운 마음으로 임한적이 한번도 없었으며 이러한 다짐들이 아웃풋을 만들고 자신감을 북돋아주었어요. 부담은 되었지만 정말 행복하고 즐겁게 개발을 했어요. 제가 지금까지 좌절하지 않고 개발을 할 수 있었던 이유도 해당 프로젝트 경험이 있기 때문이 아닐까 할 정도로요. 같이 프로젝트를 진행했던 사내 직원분들이랑은 자주 만날 정도로 친한 사이가 되었죠.

## 이커머스 프론트엔드 리뉴얼개발 및 유지보수
이커머스 프로젝트에 투입되기 전 정확한 날짜는 정해지지 않았지만 React를 이용하여 리뉴얼개발이 진행된다는 소식을 듣고 프로젝트에 투입되었어요. 홈페이지의 전체적인 흐름을 알아야 리뉴얼개발이 진행될 때 어려움없이 개발을 진행할 수 있기 때문이죠. 그렇기 때문에 먼저 유지보수 인력으로 투입되었죠. 해당 프로젝트는 크게 3개로 나뉘었어요. `이커머스, 마이페이지, 리뷰 및 문의` 이를 관리하고 신규 개발 건이 있을 경우 진행하였죠.

```point
먼저 구분을 위해 리뉴얼 개발 전을 AS-IS 리뉴얼 개발 후를 TO-BE 라고 지정할게요.
```

### AS-IS 프로젝트
AS-IS 프로젝트는 낯선 기술들이 정말 많았어요. `Php, Rxjs, Twig` 등 들어는 봤지만 한번도 접해보지 못한 기술들을 사용했어요. 또한 소스의 구조가 이해하기 힘들었고 데이터의 흐름이 정말 복잡하였죠. 해당 프로젝트의 회사의 본사는 일본에 있으며 국제적인 회사에요. 중국, 독일, 프랑스 등 여러 나라에 있죠. 일본에 있는 서버의 API를 이용하여 데이터를 받아오며 백엔드는 Php를 프론트엔드는 Javascript, Jquery 가 기본이 되며 Rxjs, Twig를 사용하고 있죠. 여기서 Rxjs와 Twig란 무엇일까요?
```point
- Rxjs란?
JavaScript에서 사용할 수 있게 해주는 라이브러리입니다. 다양한 비동기 이벤트 스트림을 효율적으로 처리할 수 있도록 도와줍니다.

- Twig란?
Twig는 PHP를 위한 템플릿 엔진입니다. HTML 문서 안에 PHP 로직을 깔끔하게 삽입할 수 있도록 도와줍니다.
```
이 중 Rxjs의 개념을 익히고 이를 적용하는데에 시간이 오래걸린 것 같아요.

해당 프로젝트에 이전부터 계신 PM님께서는 자신의 밑에 있는 개발자들에게 자신이 원하는 수준까지 올라오지 않으면 일을 주지 않으셨어요. 저는 PM님에게 인정받고 싶어 정말 많이 노력한 결과 3~4개월 정도가 지나서야 개발을 할 수 있었죠. 이전에는 간단한 수정 건만 진행했다면 이후에는 하나의 파트를 맡아 책임을 질 수 있었어요. 새로운 개발 건이나 UI/UX 개선이 들어올 경우 일본에서 오는 문서를 확인하여 개발을 진행하였죠. 

신규 개발 건이 발생하면 필요한 API가 있는 경우 직접 필요한 데이터 구조를 정의해서 일본 본사에 요청한 뒤 데이터를 받아 개발하는 방식으로 진행했어요. 즉 단순히 요청만 하는 게 아니라 어떤 데이터가 필요한지 어떤 형식으로 오는 게 효율적인지까지 고민해서 정의해야 했기 때문에 처음에는 시간이 좀 걸렸지만 점점 속도를 높일 수 있었어요. GA4(Google Analytics 4), 리뷰 및 문의 페이지의 Admin 기능을 개선하는 작업도 진행했어요. CAD 파일 다운로드 대기 기능도 개발했는데요 CAD 파일 용량이 크기 때문에 바로 다운로드할 수 없는 상황을 고려해 다운로드 요청 시 상태값을 관리하고 파일이 준비되었을 때 다운로드가 가능하도록 비동기 처리 구조로 개발했어요. 또 하나는 검색창, 상품 카테고리, 상품 상세페이지에 적용된 상품 추천 기능을 개발했어요. 이 기능은 사용자가 특정 상품을 검색하거나 조회했을 때 같은 카테고리 내 유사 상품 유형(예: 브랜드, 타입, 가격대 등)을 기반으로 추천 상품 리스트를 보여주는 구조예요. 이때 단순히 카테고리 매칭만 하는 게 아니라 관련성 높은 상품을 우선적으로 노출하는 것이죠. 상품 추천 기능을 실제로 적용한 이후 다양한 상품의 조회수나 구매 수가 눈에 띄게 증가하는 걸 보면서 꽤 뿌듯했어요. 단순히 기능을 구현하는 걸 넘어서 실제 비즈니스 성과로 연결되는 개발을 경험한 건 이번이 처음이라 의미가 컸던 것 같아요.

### TO-BE 프로젝트
어떻게 보면 이번 AS-IS 프로젝트는 TO-BE React 프로젝트를 진행하기 위한 준비 과정이었다고 생각해요. 모든 구조를 정확히 파악했을 때쯤 바로 TO-BE 프로젝트가 시작됐어요. TO-BE 프로젝트의 개발 환경은 크게 `React, TypeScript, Next.js, Redux`로 구성되어 있었어요. 현재 가장 인기 있고 실제로 많이 쓰이는 기술들이라 그런지 굉장히 설레기도 했고 한편으로는 긴장도 많이 됐어요. 

각 기술은 단순히 강의에만 의존하지 않고 강의나 유튜브로 기초를 다진 다음 공식 Document를 최대한 많이 참고하려고 했어요. 그리고 공부한 내용을 바탕으로 동일한 환경의 간단한 개인 프로젝트도 직접 진행해봤어요. 그렇게 공부하다 보니 처음엔 많이 어렵던 것들도 점점 익숙해졌어요. 프로젝트 초반과는 다르게 PM님께서는 저에게 많은 부분을 개발할 수 있도록 맡겨주었죠. 덕분에 다양한 경험을 할 수 있었고 개발에 대한 자신감도 조금씩 쌓였어요. TO-BE 프로젝트는 총 5개월로 계획되었어요. 처음 3개월 동안은 개발을 이후 2개월 동안은 테스트를 진행하면서 기능들을 다듬었으며 본 서버로 릴리즈가 완료된 이후에는 안정화 기간에 들어섰어요.

TO-BE 프로젝트에서 제가 맡게 된 주요 개발 항목들도 정리해볼게요.
```list
* 공통 Header 개발: 로고, 문구, 견적/주문, 장바구니, 문의,로그인/로그아웃 등 구현
* 카테고리 페이지 및 서브·말단 카테고리 UI 설계 및 개발
* 검색 기능 개발: 검색창, 주문, 장바구니, 배너, 상품 정보 미게재 주문 지원
* 공통 플로팅 바 구현: 상품 추천, CAD, 비교하기, 견적/주문 등 기능 개발
* 공통 유저 기능 개발: 권한 관리, 가격 확인, 장바구니, 마이부품표, 회원 정보 및 배송 정보 관리
* 메인 페이지 설계 및 개발
* 브랜드 페이지 UI 개발
* 상품 비교 기능 및 비교 페이지 구현
* AA 및 GA 연동 및 데이터 분석 기능 개발
```
홈페이지를 개발할 때는 영역별로 우선순위가 있죠. 해당 리스트를 참고해서 1순위, 2순위를 정하면 모든 페이지에 공통으로 들어가야 하는 Header, 플로팅 바, 공통 유저 기능 같은 것들이 1순위가 되고 그 외 기능들은 2~3순위로 나뉘게 됩니다. 그래서 제가 맡은 공통 컴포넌트들을 빠르고 완성도 높게 개발해야 이후 다른 기능들도 문제없이 진행될 수 있었어요.

이번 프로젝트가 이전 사내 홈페이지 개발과 다른 점은 예전에는 제가 주도해서 기획서를 만들고 개발을 진행했는데 이번에는 기획서나 설계서를 받은 뒤 그것을 토대로 개발을 해야 했다는 점이에요. 특히 일본 본사에서 전달받은 문서들이 모두 일본어로 되어 있어서 정확하게 분석하고 이해하는 데 생각보다 시간이 많이 걸렸어요. 단순히 번역하는 게 아니라 요구사항의 의도까지 파악해야 했기 때문에 더 꼼꼼하게 문서를 읽어야 했어요.
게다가 이번에는 실무에 바로 적용되는 새로운 기술들을 사용해야 해서 쉬운 작업은 아니었어요. 개발과 테스트를 병행하면서 5개월 동안 거의 매일 야근을 했지만 새로운 기술을 배우고 적용하는 재미 덕분에 힘들면서도 시간 가는 줄 몰랐어요.

TO-BE 프로젝트는 PC버전과 Mobile버전으로 구분되어 있었고 각 버전별로 따로 개발을 진행해야 했어요. 로컬스토리지를 활용해 사용자의 디바이스 정보를 저장하고 Next.js를 기준으로 _app.tsx 파일을 _app.pc.tsx, _app.mobile.tsx처럼 구분해서 각 디바이스에 맞는 타겟을 호출할 수 있도록 설정했어요. 버전이 분리되다 보니 파일 수도 많아지고 자연스럽게 속도 문제가 생길 수 있었는데 이런 부분을 고려해서 공통 모듈, UI 컴포넌트, 공통 함수 등 자주 사용하는 부분은 최대한 모듈화하려고 노력했어요.

이커머스 홈페이지 특성상 하나의 페이지에 많게는 수백 개의 이미지가 들어가야 하는데 이렇게 되면 렌더링 속도가 느려지는 문제가 발생할 수밖에 없었어요. 위 개발 목록중 메인페이지, 카테고리 페이지, 브랜드 페이지가 이에 속했죠. 이를 해결하기 위해 아마존 S3를 이용한 CDN 방식을 적용하거나 BASE64로 이미지를 변환해 불러오는 방법을 사용했어요. 또한 이벤트를 통해 불러오는 이미지들은 Lazyload를 적용해서 초기 렌더링 속도를 최대한 빠르게 당길 수 있도록 했어요.

가장 오래걸렸던 개발 건은 GA(Google Analytics), AA(Adobe Analytics) 이 두가지에요. 모든 페이지와 각 이벤트별로 개발을 진행해야 했으며 해당 기능의 설계서또한 명확하지 않아 일본에 있는 본사 직원분과 소통을 하는데에도 어려움이 있었고 개발이 완료된 후 제대로 수집이 되고있는지 확인을 해야하기 때문에 시간이 오래 걸렸죠. 오래 걸리더라도 확실하고 정확하게하자 라는 마음가짐으로 해당 기능을 개발했던 것 같아요.

## 마지막으로
모든 프로젝트의 경험은 개발자라는 길에 있어서 뼈와 살이 되는 것 같아요. 제가 요즘에 스스로에게도 하는 말이며 고민을 갖고 있는 분들에게 항상 하는 말이 있어요.
`기회는 찾아오는 것이 아니며 계속 움직이는 나에게 다가오는 것이다.`
마지막 프로젝트를 진행하면서 스스로에게 부족한 부분이 보이며 제자리인 느낌이 계속 들었어요. 저는 이 순간에도 가만히 방황하지 않으며 무엇인가 하려고 했죠. 이것이 독서일 수도 개인 프로젝트가 될 수도 있죠. 저는 진행했던 React 프로젝트를 복습하고 제 것으로 만들고싶어 같은 환경으로 경력기술서와 지금의 블로그를 만들었죠. 바위처럼 클 수도 소금처럼 작을 수도 있지만 이렇게 쌓다보면 언젠가는 제가 원하는 탑의 모양이 나오지 않을까요?

이전 회사에서 진행했던 모든 프로젝트를 정리해 보았어요. 이를 통해 복습도 하고 초심을 가꿔보려고요

지금까지 진행했던 프로젝트에 관하여