멋쟁이사자처럼 중앙에서 지원서는 구글폼으로 받는다고 이야기가 나왔지만,
우리는 우리가 직접 사이트를 만들어서 그 사이트에서 받으면 어떨까? 라는 생각이 있었다.
그래서 운영진들과 함께 프론트, 백엔드를 나누어 지원서 사이트를 제작하였다.
나는 회사도 다니고, 프론트와 백 스터디도 진행을 하였지만, 개발에 대해서도 욕심이 있기때문에 프론트 개발을 참여하였다.
사실 난 next.js도 모르고 typescript도 잘 모른다.
react로 한 첫 프로젝트인데, 이것을 실제로 배포까지하고 운영을 해야한다니 많이 떨렸고 걱정이었지만,
아무것도 모른다고 참여를 안하면 언제 내가 개발을 시작하나 싶었다.
모르는것은 물어봐가면서 해결해야지 라는 마음으로 개발에 참여하였다.
초기세팅은 같이 하는 현직 웹 개발자분께서 해주셨다.
디자인은 피그마로 만들었기 때문에, 피그마를 참고하여 styled-component를 이용하여 메인페이지를 만들었다.
오랜만에 개발을 진행하니 css가 많이 어려웠던 것 같다.
해보면서 열심히 익숙해져야겠다.
최종 완성된 메인 페이지이다.
로그인 한 회원이 운영진이냐, 회원이냐에 따라 네브바에 표시된 모습이 다르게 나타나고, 연결된 버튼 또한 다르게 표시된다.
내가 맡은 지원서 페이지이다.
처음 개발했기에, 지원서리스트 페이지 하나도 너무 어려웠던 것 같다.
특히 처음이라 안그래도 서툴렀는데, 타입스크립트를 잘 모르는채로 진행을 하다보니, 자꾸 타입에러도 많이 났기에 힘들었던 것 같다.
그래도 개발하면서 열심히 부딪치고 많이 배운 것 같다!
처음에는, 디자인을 피그마에 맞게 만들었다.
나는 디자인만 하고, api가 배포되었을 때 하면 되는 줄 알았으나, 목업 데이터가 필요했던 것이다!
목업 데이터를 만들어서, 테스트를 해보곤 하였다.
하지만, 현황 직종 등의 체크 기능과 페이지네이션은 어떻게 하지 못하였다.
그래도, 현황 및 직종은 리액트쿼리에 잘 들어가있어서 잘 해결된 것 같았다.
페이지네이션 역시, 처음에는 디자인부터 약간의 고민이 있었지만, 같이 개발하시는 분께서 도움을 줘서 해결할 수 있었다.
styled-components로 디자인한 컴포넌트에서 props로 전달 받은 값에 의해서 수정을 하도록 반영하였다. (페이지에 따라 밑줄이 쳐지는것)
const PageLi = styled.li<{ selected: boolean }>`
display: inline-block;
width: 20px;
text-align: center;
${(props) => props.selected && `border-bottom: 3px solid #0087d1;`}
&:hover {
cursor: pointer;
}
`;위와 같이 해당 페이지가 선택이 되었을 때의 값으로 밑줄을 쳐줬다.
정말 많은 것이 부족한 첫 개발이었지만 지원서 리스트페이지를 잘 끝낼 수 있었다.
이름을 가리는 부분 역시 많이 서툴었던 것 같다.
props로 이름 가리는 변수를 주면서, 부모컴포넌트와 자식 컴포넌트의 값이 동일하게 가지고 오고, 변경할 수 있었다.
성을 제외하고 나머지를 *처리 하도록 하였는데 이 부분도 많이 서툴렀다.
이것은 블로그에 정리할 예정이므로 해당 블로그를 보면 좋을 것 같다.
3월 2일 지원서 사이트가 공개되는 날이다.
우리는 3월 1일 버그도 많이 고치고, 아쉬운 부분들을 고쳤지만 2일로 넘어가는 12시까지 다 고칠 수 없었기에, 페이지 오픈 시간을 17시로 미뤘다.
평일인만큼, 현 개발자들은 고칠 수 없었기에 프론트에서 터지는 문제들을 내가 다 고쳐나가야했다.
우선 제일 급한 부분들을 고치려고 노력했다.
우리는 중앙에서 주전공과 복수전공을 받으라고 하였지만, 복수전공에 대한 필드가 없다는 것을 하루 전에 깨달았다.
그래서 급한 대응책으로 주전공과 복수전공을 한 번에 받았다.
정규식으로 '과', '학과', '학부'로 끝나야만 하는 부분과 ,가 들어가지 않아야만 했었다.
처음에는 내가 짠 코드가 아니고, 잘 모르는 내용이었기에 어떻게 수정을 해야할까 고민을 많이했다.
회원가입 페이지에 검증 부분에 정규식으로 쓰여져있던 부분에서 , 조건을 안주고 계속 왜 안되는걸까? 생각했었다.
알고보니, 정규식에서 내가 ,조건 없이 글자수만 늘렸던 것이었다..!
간단한거지만, 복수전공을 위해 정규식을 수정하면서 정규식을 조금이나마 더 이해할 수 있었다.
급한 내용들을 수정하고, 수정한 내용을 기반으로 작성하였던 테스트 케이스 목록을 보고 qa를 돌렸다.
같이 웹 개발을 한 개발자분께서, 나에게 테스트 케이스 목록을 짜보라고 하였다.
첫 개발에, 테스트케이스까지 짜다니 조금 막막하였지만, 테스트케이스를 검색을 통해 열심히 짜보려고 노력했다.
사이트 개발에 참여하지 않은 사람도 이해를 할 수 있도록 말을 풀어나가면서 테스트 시나리오를 작성했다.
개발하지 않은 분에게도 부탁하여 qa를 돌리고, db도 초기화하고, 대망의 17시가 되었다.
17시가 되자마자 지원하려고 기다리던 사람들이 접속을 하였지만, 우리에게 많은 문의가 들어왔다.
그것은 바로 '파트 선택 이후 다음으로 넘어가려는데, 질문에 대한 답변을 쓰라는 창이 뜬다' 였다.
우리는 그 말이 이해가 되지 않았다.
파트 선택과 동시에 질문에 대한 답변을 써야만 넘어갈 수 있는데 어떻게 1-2분만에 모든 것을 다 작성한 것일까?
그냥 제출만 해보려는걸까? 라는 생각이 들었다.
그래서, 운영진들이 직접 가입을 시작했다.
db를 초기화하면서 db에 입력해놨던 질문들이 사라져서 질문 내용과, 답변창이 아예 안뜬채로, 파트만 선택할 수 있도록 뜬 것이었다.
그러면 당연히 사용자는 다음으로 넘어갈 수 밖에 없었을 것이다.
그래서 얼른 사이트를 닫고, 백엔드 개발자가 db에 질문을 적고,
다시 테스트하여 정상적으로 질문들이 뜨는 것을 확인할 수 있었으며 문의들을 해결할 수 있었다.
처음으로 실제 사용자가 사용해볼 수 있던 개발이었는데, 배포하자마자 문제가 생겼기 때문에 너무나도 당황스러웠고 기다리던 지원자분들에게도 죄송했다.
다음부터는 이런 일이 일어나지 않도록, 더 시간에 맞게 개발을 하고, db 초기화를 하더라도, 하나의 사용자를 만들더라도, 운영진이 먼저 테스트를 하고 페이지 오픈을 해야겠다고 느꼈다.
우리는 그때 시간이 촉박하여 db초기화하고, 바로 배포를 하여 일어난 문제였다.
그래도 한달간의 기간동안 웹과 서버 개발자분들이 열심히 해준덕에 배포도하고,
실제로 운영도 하며 지원자를 받아볼 수 있는 좋은 기회였다고 생각한다.
QA도 돌리고, GA를 추가하면서 사용자가 얼마나 방문했는지 알 수 있었다.
방문 횟수에 비해서, 지원률은 조금 더 적으나, 최종 지원자만 해도 7-80명으로 사이트를 운영해볼 수 있던 좋은 기회였다고 생각한다.