미리보기

프론트엔드 개발팀으로 한국사회복지사협회 리뉴얼을 참가하였습니다.

첫 개발자 직원으로 회사의 GitLab 서버구축과 AWS ec2를 활용한 테스트서버 구축을 하였고,

부산진구 의료관광 시스템과 코나아이의 동백택시 마마콜신청 및 웹뷰 시스템 구축을 하였습니다.

구분 : 에이전시

프로젝트 참가인원 : BE : 4, FE : 6, 퍼블 : 3, 디자인 : 2, 기획 : 1

기여도 : 20%

라이브러리 : Nuxt3 & ts

현상관리 : GitHub

개발 범위 : CMS, 센터별 페이지

참고 URL :  https://www.welfare.net/

경험

6월부터 기획이 시작된 프로젝트였지만 12월에 입사하여 프로젝트 중간에 투입되었습니다.

처음 경험하는 팀으로 구성된 프론트엔드 프로젝트여서 그런지 기대감을 많이 가지고 시작했습니다.

투입됐을 당시에도 기획이 0.2버전까지만 나와있는 급박한 상황이었고, 3월 초 오픈을 목표로 개발이 진행되고 있었습니다.

그덕에 회사에 취업한지 2주만에 야근과 주말출근 철야를 2번이 연기된 프로젝트 납품일까지 진행하였고 납품 후 퇴사하였습니다.

개발내용

- 5개의 센터와 1개의 cms가 같은 url을 사용하는 포트포워딩 방식으로 개발되어 있었습니다. 로그인 정보를 유지시켜야했고 3000번 포트에서 로그인하여 jwt를 쿠키에 담아 store에서 처리하는 방식으로 구현

- 트리구조의 메뉴 CRUD 구현 하였고 사용자 화면의 햄버거메뉴를 재귀컴포넌트를 사용하여 구현 

   > 메뉴의 레벨이 5레벨까지 들어가 모바일 햄버거메뉴 클릭 시 메뉴가 화면에 노출되는 시간까지 1500ms 가 걸려 사용자 경험에 안좋은 영향을 미쳐 3Lv이후의 데이터들을 v-if문을 통해 화면에 랜더링하여 초기 랜더링속도를 300ms로 개선

- 회원가입 구현 : 문자인증, 간편인증 

- dext5 업로더 구현

- 게시판 조회 시 api통신이 1초이상 지속될 경우 로딩 구현 : api인스턴스에서 setTimeout을 통한 공통처리

- PG결제 모듈 구현

- 영업일 기준 일자 계산 공통코드 구현

  > 기존 5일전까지 환불신청 또는 3일후까지 결제취소 등의 날짜를 주말, 공휴일 상관없이로 계산하였었는데 클라이언트의 요구로 공휴일과 주말은 제외시켜달라는 요청을 받아 공공데이터포털에서 특일정보를 받아와 주말 및 특일을 제외한 날짜 계산 구현하였습니다.

- v-directive를 사용한 input태그 공통 벨리데이션 구현

- 페이지 접근 권한 작업 : middleware를 통한 작업

- 특정 시간에 도달하면 버튼을 노출시키는 기능 구현

  > 기존 setInterval로 매초 현재시간이 해당시간에 도달했는지 체크하던 로직으로 인해 화면의 버벅거림이 있었는데,

     현재시간과 특정시간의 차를 구해 setTimeout의 시간으로 설정하여 화면 버벅거림 개선

느낀점

이번 프로젝트를 진행하며 교훈으로 얻은 것은 크게 팀 리딩의 코드리뷰의 중요성입니다.

전체가 3년이하의 주니어로 구성된 상황에서 12월 중순즘 15년차 백엔드 개발자분이 투입되서 어찌저찌 오픈을 하게 된 프로젝트입니다.

팀 개발의 리딩이 없이 pl이 페이지별로 할당해 같은 작업을 각각의 다른방식으로 작업하여 비효율적으로 진행하게 되었습니다.

팀원들간의 코드리뷰가 있었다면 어떤 페이지에서 어떤 코드를 사용하여 어떻게 흘러가는지 파악하여 개발일정을 조금 앞당길 수 있지 않았을까 하는 생각이 듭니다.

그리고 프로젝트 리딩이 없다보니 중구난방으로 개발되어 데이터가 흘러가지 못해 테스트를 못하고 테스트 해보니 오류가 나는 경험을 수 없이 하게되었습니다.

mock 데이터를 생성하여 테스트환경을 구축했다면 오류를 줄일 수 있었을텐데 하는 아쉬움도 있었습니다.

아쉬움이 가득한 프로젝트였습니다.

이 아쉬움을 기반으로 많은 성장을 할 수 있지 않았나 생각합니다.  

구분 : 에이전시

프로젝트 참가인원 : BE : 4, FE : 1, 퍼블 : 2, 디자인 : 2, 기획 : 3

라이브러리 : Vue2

현상관리 : GitLab

개발 범위 : CMS, Webview

경험

22년 12월 직장동료와 둘이서 여의도로 파견을 나가며 시작합니다.

첫주는 개발에 필요한 환경세팅을 하였습니다.

폐쇄망이었던 탓에 첫 프로젝트와는 다르게 세팅할 때 개발에 필요한 IDE, 라이브러리, 모듈 등등의 필요한 파일을 모두 정리해야만 했습니다.

물론 중간에 datepicker가 바뀌며 방화벽 요청하여 추가설치하였지만...;;

그리고 프리랜서로 참여할 개발자들의 pc도 세팅해야 했던 탓에 환경세팅도 해 볼 수 있었습니다.

Webview라는 개념이 정확히 잡혀있지 않았고 우리가 작업한 프로젝트와 다른 프로젝트가 통신을 해야했던 탓에 Proxy서버도 경험할 수 있었습니다.

그리고 기존 자사 서버와의 통신도 있어 callback함수의 개념도 이해할 수 있었다.

첫 프로젝트와는 완전히 성격이 달라 많은 것을 배울 수 있는 기회였던 것 같습니다.

개발내용

- 동백택시 앱 내에서 임산부 전용 서비스 신청페이지 구성 및 webview 시스템 구축

- 모바일 기기 갤러리에서 파일 추가

- view 인터렉션 구현

- Webview 진입 시 상태값에 따른 페이지 이동처리

- 문자인증 타이머 구현 :  ios에서 앱이 백그라운드로 넘어갈 시 JS가 동작을 멈추는 현상 때문에 setInterval의 이전 실행시간과 최근 실행시간의 차이로 시간 계산하여 문제해결.

느낀점

퍼블리셔분들은 파견오지 않고 메일로 파일을 받아 작업을 하였는데 형상관리툴의 장점도 확실히 느끼게 되었습니다.

navigator userAgent를 통해 사용자의 기기가 어떤 것인지 파악을 하고 그것으로 함수도 분기처리하여 작업한다는 것도 알게되었고 생각보다 한 프로젝트가 서비스되기까지는 많은 검수과정이 필요하다는 것도 알게되었습니다.

구분 : 에이전시

프로젝트 참가인원 : BE : 1, FE : 1, 퍼블 : 2, 디자인 : 2, 기획 : 1

라이브러리 : Vue2, SpringBoot

현상관리 : GitLab

개발 범위 : CMS, pc, mo, 키오스크, 다국어 지원

참고 URL :  http://jingupc.decons.co.kr/

경험

개발자로써 실무 첫 프로젝트였습니다. 회사에서는 첫 개발자였고, 다른 회사였다면 경험해보지 못할 것들을 많이 해보았습니다.

우선 테스트서버 구축과 형상관리 툴을 선정할 수 있었습니다.

테스트서버는 AWS EC2 Linux환경에서 Apache Tomcat로 환경을 구성할 수 있는 경험을 하였고,

프론트엔드 라이브러리는 정해진 규격이 있어 초심자가 접하기 쉽다는 이유로 vue2를 선정하였습니다.

프로젝트에 들어가며, 백엔드 프리랜서 13년차인 과장님과 협업을 하였습니다.

주로 swaggerUi를 통해 문서를 전달받았으며, axios로 http통신을 하였습니다.

그 당시 처음 프레임워크로 개발을 했기에 왕복 3시간길을 인프런에서 캡틴판교님의 vue2강의를 들으며 공부하고 개발하는 방식으로 프로젝트를 진행했었습니다.

개발내용

- 부산 진구 의료관광 시스템 홈페이지 개발

- 공공데이터포털 api 사용

  -  초기 부산 관광시설 맛집 시장 등등의 데이터를 요청하여 개발 > 요청사항 변경으로 직접 게시물을 추가할 수 있게 요청하여 BE에서 스케쥴링으로 매일 데이터 업데이트

  -  기차와 비행기 시간표를 이용한 조회 구현

- 다음, 네이버 오픈 api 사용

  - 네이버 지도를 통한 시설 위치 조회

  - 길찾기 기능 요청으로 iframe을 통한 다음지도 추가

- 파파고 api를 사용한 실시간 번역기능

  -  과도한 api요청으로 인한 디바운싱을 통해 사용자가 입력마다 요청하던 데이터를 300ms마다 한번씩 요청할 수 있게 변경

- i18n을 통한 5개국어 지원

  - vuex로 사용자가 선택한 국가를 상태관리. > 새로고침 시 언어가 돌아와 vuex-persistedstate를 통해 국가상태코드를 로컬스토리지에 저장하여 문제해결

느낀점

프론트엔드 개발자는 소통할 줄 알아야 한다는 것을 많이 느낄 수 있는 프로젝트였습니다.

기획자와 기획서의 기능들을 검수하고 

처음 html 파일로 전달받던 퍼블리싱 파일들을 퍼블리셔분들과 소통하여 폴더구조와 코드구조를 설명하여 시간을 단축 시킬 수 있었으며 

백엔드 개발자와의 소통으로 예외처리나 변경사항들을 잘 전달하여 프로젝트를 잘 마무리 지을 수 있었습니다.

성악을 하며 공연을 준비하여 공연했던 성취감 만큼

프로젝트를 완료하여 얻은 성취감은 저에게 희열을 느끼게 하였고 개발자로써의 성장욕구를 자극하기에 충분했습니다.