[취업] 이직 후 첫번째 프로젝트 웹앱 고도화작업 내용

현재 SI업체에서 재직중인데 프로젝트 진행내용 작성.

 

프로젝트명 : ㅍㅊ

작업자 : 나 및 백엔드(사수), 보조 프론트(사수)

진행일 : 2025-08-01~09-24

1. 웹앱에서 select box들이 checked 적용이 되어있지않아, 선택해도 해당 내용이 선택되어 보이지 않은 부분 수정

2. i18n 적용 잘못되어 있는 부분 수정

3. 신규 고도화 작업 페이지들 atomic구조로 프로젝트 진행 적용. 

 ㄴ 레거시 코드를 유지하기 위해서 내가 작성하는 부분만 추가하고 그외에는 유지.

 ㄴ hook 폴더에 페이지별 호출 구조로 해당 내용 추가
(예약기능이라면 service/reservation, hooks/reservation/create or edit)

 - page - template

             ㄴ hook

 위의 구조로 hook과 ui를 분리하고 이를 합쳐 부르는 곳이 page로 ui layout, 함수 호출을 분리 적용

4. 기존 legarcy 코드들이 대부분 페이지 자체에서 api 및 함수를 합쳐서 호출하므로, 이를 최대한 분리적용 시작

5. react-router-dom을 잘못 설정해서 same component different routes 오류 발생하는 부분 수정.

6. 프론트 api통신 에러처리 안되는 부분 호출포인트 통합 진행

7. 모달창 layout 통일하여 프레임은 고정되고, 컨텐츠만 바꿔서 호출하도록 build frame 구성.

8. 각종 페이지 컴포넌트에서 로컬로 부르던 모달창을 context 호출하도록 적용.

9. 앱-웹에서 카메라 및 위치 권한이 필요한 부분이 있어, 이를 앱에서 권한을 못 받았을 경우 유저에게 알려줄 수 있도록 앱에서 해당 내용 거절시 웹에서 출력하도록 window 함수 호출포인트 구성.

10. 매니저 유저가 선택할 수 있던 과거 일자 및 시간 현재시간 이전의 경우 선택 불가 UI 설정 및 depreacted 된 라이브러리 제거.

11. 이용약관 하드코딩 적용.(api 호출포인트 만들었으나, 백엔드단 요청)

12. 앱내 언어별 지도 호출 한글(네이버) / 영어(구글)

13. 태블릿 가로 모드일 경우 특정 페이지 height 무시로 인해 페이지 UI 깨짐 수정.

14. infinite scroll 사용시 탭 전환 후 재복귀했을때, 현재 호출된 페이지만큼 재호출 하던 부분 수정 진행.

15. 지도에서 내 현재 위치로 이동하기 기능 추가

16. 시간별 예약에서 현재 시간 5분 이내일 경우 현재 시간에서 +5분 적용 및 시간별 경계 55~59분에서 선택 불가설정 후 다음 시간에서 선택시 해당 시간에서 +5분 적용하여 시간 GAP 없도록 적용.
17. 예약 장비 작동시간이 겹치지 않도록, 예약시 5분00초 이내의 경우 시간 예약 수정 불가 적용.
18. 연속 시간 설정 가능한 시간(최대 4시간) 중 다른 사람이 예약 시간이 있다면 해당 시간 이후로는 선택 불가 적용.(단, 예약 시작시간이 지났을 경우만! 아니라면 자유롭게 변경 가능)

 

 

이외에도 이전에 수정 내용이 있었는데,

1. react slider 1개 출력시 3개 출력되는 이슈 - 해당 내용 라이브러리 버그

2. 첫화면 입장시 화면에 출력되는 팝업창 네이버 웹툰 팝업처럼 길게 크기 수정 적용

3. 대회 경우 출력 모달 내용 다르게 출력 적용.

4. 앱내에서 앱 내 이동의 경우와 앱 외부 브라우저 호출시 해당 내용 전환되도록, 서버값 내용 보고 이동하도록 수정

 

 

 - 프로젝트 회고 -

이전 작업자(퇴사)가 호출부위를 꼬아놓은 것도 있고, 나도 실력 모자랄땐 그렇게 해놓았다..
그게 내 실력 최대라서.. 그래서 그 사람 욕은 못하겠다.
나도 그만큼 대단하지 않다고 생각하기도하고, 나 역시 그런때가 있기에 욕하긴 싫다.
다른 사람들이 비판할때 동조하지 않고 듣기만 함 ㅋ
아무튼 그런거 개선하고 왜 ui가 통일되지 않은가? 비사를 물어보니
내가 이직하기전에 발생한 일인데, 프로젝트 진행시 layout을 만들던 퍼블리셔 업체가
해당 퍼블 제작팀에 요구사항 내용을 제대로 전달안해서 모바일부분 UI가 아예 없는 상황이 생겨,

여기저기서 페이지들을 급하게 만들다보니 ui가 통일되지 않아 여기저기 다르게 호출되는 부분이 많았다.

그런거 정리하고, 브라우저 탭 전환시 이미 호출된 내용을 재호출하는 버그 같은 부분을 발견하고,
앱내에서 출력되는 각종 warning 에러로그를 수정적용했다.

뭐니뭐니해도 제일 어려운건 시간 수정 부분이었다.
원청에서 시간 수정 기능 추가라고 말하는건 쉬워도 어떻게 막을것인지,
요구조건을 현실화할때 내가 설정해야하는 부분은 무엇인지 정의하기가 제일 어려웠다.
그래서 추가하는 부분을 보면서 내용을 엄청 많이 쓰고,
정리하면서 뭘 정리해야할지 주석으로 쓰면서 요구조건을 정의함.

 - 수정 페이지 접속시
 1. 기존 저장된 시작시간과 끝시간을 받아오기.

 2. 해당 받아온 내용과 시간을 기존 Legacy ui에 밀어넣어 자동 checked 적용하기.

 3. 전체 시간 중 내가 예약한 id와 같으면 내가 예약한 시간이므로 checked는 유지하되, disabled 풀어주기(기존 코드는 disabled되도록 적용되어 있었음 - 수정기능 없어서)

 4. 아니라면 남의 시간이므로 checked는 미적용 및 선택불가되도록 disabled 적용.

 5. 시작시간이 현재시간에서 지나지 않았다면, 자유롭게 수정 가능.
 6. 시작시간이 지났다면 시작시간은 고정하고 최대 4시간 범위만(시간 확장 및 축소) 설정 가능하게 적용.

 7. 시작시간 이후 4시간 내에 남의 예약이 있다면, 해당 버튼은 disabled 적용 및 그 이후 선택 불가하게 적용.

 8. 만약 시작시간이 현재시간과 5분 이내라면, 해당 현재 시간에서 +5분 후 시작하게 적용.

 9. 종료시간이 충분한지 체크 설정.
 10. 시작시간과 종료시간의 시간을 체크해서 해당 시간간격이 충분한지 확인.

 11. 시작시간이 지나고나서 전체 관리 페이지에서 시간수정 버튼 클릭시 페이지 재접속하지 않을 경우
api값이 갱신되는 부분이 없어 해당 부분 재호출하도록 추가 적용.

 12. 종료시간 15분미만인 경우 시간 수정 불가능하게 적용

 13. 해당 내용이 종료되었을 경우 버튼 출력 분기점 설정해서 해당 내용 미출력되도록 설정.

이게 시간 수정하게 해주세요 라는 고도화 작업요청중 단 한마디로 발생한 내용이다.

이걸 생각으로만 진행했다면 나 역시 스파게티로 코드를 꼬아 버렸겠지...
이전 직장에서 경험해봤기에 계속 글로 쓰고 정리해서 진행해서 안 꽈버렸다.

역시나 이번에도 많은 방법을 배웠는데,
특히 고객사의 요구사항에서 내가 뭘 해야할지 내용을 정의하는 것과
시간 설정할때, 경계값 00초, 바뀌는 부분의 경계될때 어떻게 할건지. 
시간 테스트는 어떻게 하는지 이런걸 배우게 되었다.

"2025-09-29 01:02:00" 넣거나
"2025-09-29 01:01:59" 이렇게 넣거나하면서 
시간 경계값 분석을 넣어 해당 값이 어떻게 출력되는지 확인하면서 진행하는 걸 배웠다.
아니면 무식하게 시간 일일히 지나가면서 어떻값을 반환하는지 확인하거나...
거의 종료단계에서 깨달은 방식...

13분 59초는 허용되고, 14분 00초는 막을건지 이런걸 정의해야했고,

locale 방식에 따라 바꿨다가 웹 페이지에서 쓰는 00시 00분 이런걸로 바꿨다가 정신없드라...
근데, 시간 테스트방식을 잘 몰라서... 어떻게 해야할까해서 그냥 시간 직접 지나갈때 일일히 테스트해서 진행했다.
보통 개발하면서 테스트하니까 8시간 넘게 개발하면서 종종 테스트 진행.

무엇보다 기존 호출방식이 리액트에서 Jquery방식과 dom을 직접 건드리는 방식을 쓰고 있어서,
이부분은 chatgpt 아니었으면 수정하지 못했다. 싶다.
아무것도 없는 상태에서 이거 어떻게 만들었지 하는...
0에서 시작했다면, 내가 아직 그런걸 만들 실력은 아니다 싶드라..

 

신입때 카운트 다운 런칭 작업시 이런거 했는데, 지금것보다 더 어려웠다.
해당 사이트가 코드이그나이터3 썼는데, php단에서 카운트다운을 컨트롤하고, js에서 컨트롤하는건데,
무능한 사람이 CTO이자 대표하고 있어서 이걸 왜 못하냐고 나한테 원망하더라..
php에서 시간 체크해서 카운트다운해야하고...
js가 받아서 하는걸 서버사이드와 프론트 사이드 컨트롤을 신입이 혼자 어떻게해...

심지어 사수인 팀장도 대표랑 같이 c++ 펌웨어 개발하다가  백엔드 개발로 이직한 사람이라
프론트 모른다고 코드리뷰나 이런거 하나도 지원 못받고 방치...
대표가 이걸 이해를 못하던때, 그때 도망쳤어야 하는데...
프로젝트 망한게 나때문인 것 같아 괜히 의리지킨다고 같이 일하면서 3년 물경력 만드는 바람에
진짜 개고생했지.. 진짜 생각해보니 내가 혼날일이 아니었네...;;;;