기업협업?
wecode의 교육과정중 마지막 4주를 기업협업으로 보내게 되었다.
다들 2개월동안 열심히 프로젝트 및 공부한 내용을 가지고 실제 기업에서 협업 형식으로 실무에 적응하는 능력을 기르는 기간.
물론 wecode에 남아서 추가 프로젝트를 진행하거나 공부를 더해도 되는 방향도 있었지만 실무는 어떻게 진행되는지, 실무에 내가 잘 적응할수 있을지 궁금해서 기업협업을 선택하게 되었다.
yarz?
yarz(와이어즈) 회사는 가치중심 브랜드빌딩 컴퍼니이다.
위치는 강남구청쪽에 위치해있었는데 이전한지 4달? 정도 되었다고 들었다.
처음 회사에 갔었을때 분위기도 자유로운 분위기 였다.
진행한 프로젝트
엔덴
위코드 출신 인턴으로 우리는 프론트 3명으로 구성되었다.
그리고 프론트엔드 사수 1분 그리고 백엔드 사수 1분으로 구성되어서
총 프론트 4명 백엔드 1명으로 프로젝트가 진행되었다.
우리가 제작하는 것은 가치소비 공유 플랫폼으로 모바일 웹 플랫폼을 제작하는 것이었다.
와디즈 같은 플랫폼처럼 가치소비의 이벤트, 제품 등의 펀딩을 받는 사이트 였다.
제작을 위해 사용된 기술 스택으로는 리액트, 스타일 컴포넌트 를 사용하였다.
4주차의 경험
1주차
우리의 목표 : 개인의 역량 체크 !
첫날 어색한 분위기에서 우선 회사의 분위기를 파악하기 위해서 노력했다.
회사 자체로 일에 집중하셔서 그런지 조용하지만 점심도 혼자 먹을수도 있고 도시락을 싸와서 먹을수도 있고 운동하러갈수도 있고 자유로운 분위기가 물씬 느껴졌었다.
처음 미팅을 하게 된것은 점심을 먹고 난 이후..
우리는 처음에 모바일 버전이 아닌 PC버전의 웹페이지를 만드는 것이 작업으로 주어졌었다. 기획팀과 디자인팀이 있어서 그런지 같이 협업을 할수 있는 경험을 가질수 있었다.
제플린이라는 앱을 통해서 디자인팀이 미리 제작한 시안을 웹으로 구현하게 되었고 처음 접하는 앱이었지만 개발에 정말 많은 도움이 되었다.
회사에서는 우리의 역량을 체크하기 위해서 처음에는 협업을 하지 않고 개인으로 접근방향과 코드의 빠르기를 체크하기위해서 개인으로 작업을 시켰다.
협업을 하러 온건데.. 개인끼리 경쟁을 해야 해서 처음에는 많이 당황스러웠었다.
그래도 위코드에서 많이 작업하였던 슬라이드, 메인페이지라서 어렵지 않게 진행할수 있었고 우리는 위코드로 끈끈히 다져졌기에 몰래몰래 어려운 부분이면 조금씩 도와서 진행 하였다.
그래도 7시 이후에는 커밋 및 푸쉬를 할수 없는 조건이 있어서 동일한 조건에서 작업을 한다는 것에 다행이었고 진짜 내실력을 평가받을수 있겠다 라는 생각에 열심히 작업하게 되었다.
2주차
우리의 목표 : 개인의 역량 체크 부터 협업까지 ..
2주동안 개인을 작업하는게 이어졌기 때문에 계속 작업을 하다가 금요일에 대표님이 투자를 받으러 가시는데 우리들의 작업으로 투자를 받으셔야 한다고 말씀하셔서 하루 전날 부터 협업을 진행하게 되었다. 이 당시 즈음 모바일로 작업이 전환되었는데 다들 처음부터 반응형으로 제작을 안했기 때문에 모바일 버전으로 css를 바꿔야 하는 작업에 몰두하게 되었다. 우리들중 진행사항이 빨랐던 팀원 희열님의 작업사항으로 결과를 마무리 해야했었고 발표시간 까지 깨지는 css를 수정하느냐고 진땀을 빼게 되었고 점심을 미뤄가면서 까지 작업에 몰두하게 되었다. 이날 우리 때문에 투자가 떨어질까 조마조마 하게 되었다.
깃에 올린 이미지들이 다 깨져서 페이지에서의 이미지도 다 깨져서 보이는 상황에 오류를 수정하느냐고 진땀을 뺐었지만 다행히도 투자 발표를 대표님이 잘 하시고 오시게 되었다.
이 주 이후 우리의 평가는 끝이 났고 3주차에는 협업으로 엔덴 모바일 앱 완성이 목표가 되었다.
3주차
우리의 목표 : 엔덴 앱 모바일 페이지 만들기 !
본격적인 협업이 시작 되었기에 우리는 repository를 새로 구축하였고 본격적으로 페이지를 나눠서 작업을 진행하게 되었다.
우리가 제작해야할 페이지는 메인,로그인,회원가입,결제 페이지
내가 맡게된 페이지는 결제 페이지로 결제연동을 처음해보는것인데 도전 해보고 싶어서 제작해보고 싶다고 말씀드렸고 결국 결제페이지를 맡게 되었다.
주문서 작성 페이지와 결제페이지로 이어지도록 하는 기능, 결제 완료 페이지를 제작하게 되었다.
주문서 작성 페이지는 이렇게 생겼다.
디자인 자체는 쉽게 제작할수 있었지만 위와 동일하게 채우기 기능에서 좀 애를 먹었었다. 주문자, 배송자가 다를때도 있어서 입력 데이터를 다 받았어야 했었다. onchange 기능을 사용하면 되었지만 내가 쓸데없이 컴포넌트를 너무 많이 나눠놓아서 props로 전달하는 것에 더 지저분해지고 복잡한 코드가 완성되었다.. 나중에 리팩토링할때 다듬긴 하였지만 시간만 더 있었으면 리덕스를 적용하여서 쉽게 정리하고 싶었다.
문제의 위와 동일하게 채우기 기능.. 지금은 리팩토링해서 괜찮아 졌다.
처음에도 useState값을 하나씩 줘서 제작하였지만 멘토님의 조언을 받아서 하나의 useState값을 객체로 관리하여서 useState값들을 줄일수 있었다.
그리고 진행하게 된 주소 기능 !
상당히 어려운 부분이라고 생각했었는데 구글링의 도움으로 라이브러리를 활용하여 쉽게 제작할수 있었다. 간단한 부분이었는데 다 완성되고 나서 뿌듯하였다.
그리고 앞에서 고객들이 선택한 제품들의 가격을 받아 오는 것에서 서버에 api가 따로 마련되지 않아서 어렵게 생각했었는데
localStorage를 사용하여서 받아올수 있었다. localStorage에 대해서 알게 되고 좋은 경험이 되었다.
localStorage에 대한 자세한 내용은 따로 벨로그로 정리를 하였다.
localstrage 정리 페이지
그리고 대망의 결제 연동 기능 !
주문서를 다 작성하게 되면 결제 페이지로 이어지는데 우리는 아임포트의 기능을 사용하였다.
주문을 하게 되면 결제를 위해 자주 보는 페이지 !
아임포트 사이트에서 어떻게 코드를 작성하면 되는지 자세하게 알려주어서 쉽게 기능을 구현할수 있었는데 이런 기능이 fetch함수 하나로 작동된다는 것에 다시한번 놀라게 되었다.
특히 모바일은 fetch의 콜백함수를 사용할수 없어서 결제가 취소되거나 완료 되었을때 주소의 쿼리 파라미터로 관리를 해야 했었는데 그 부분이 처음에는 이해가 안되어서 많이 어려웠었다. 주소를 파싱처리하여서 조건을 주어 관리하는 것이었는데 사수님과 동료의 도움을 통해서 이해하고 처리할수 있었다.
처음에는 결제를 취소해도 결제완료로 이동이 되었는데 지금은 취소하면 주문서 작성 페이지로 다시 이동한다.
거의 한주 동안 작업을 하게 되었고 배포를 위해서 오류 수정 때문에 야근도 하면서 정신없는 시간이었지만 많은 것을 배울수 있는 시간이 되었다.
마지막 4주차
마지막 주 에는 실제 홈페이지가 개시를 하면서 오류 수정을 조금하다가 호스트모집 페이지, 브랜드 모집 페이지 제작을 맡게 되었다.
간단하게 진행되었고 마지막에는 우리 위코드 인턴들을 위해 회사에서 회식을 열어주었고 잘 마무리 할수 있었다.
아래는 우리팀이 제작한 페이지의 전체 모습이다.
현재 배포가 되어서 실제로 모바일로 접속이 가능하다.
(구글에 '엔덴'이라고 검색)
작업의 완성본
웹으로 접속하면 모바일 기기로 유도하게 된다.
사이트 홍보글이 아님을 알려드립니다.
메인 페이지
인스타그램 피드의 사진을 불러왔으며 클릭시 인스타그램으로 바로 연결이 된다.
실제 작업때 맡지않고 혼자 작업때 인스타그램의 피드를 불러오는 작업을했었는데 인스타그램의 피드를 불러오는것도 공부가 되었다.
브랜드 모집 , 호스트 모집 페이지
지원 하기,신청하기 버튼을 클릭하면 지원서 작성 페이지로 이동이 된다.
로그인 하기
로그인도 무난하게 된다. 회원가입도 가능하다 !
주문하기
주문서 작성하기
주문서 작성 기능들은 위에서 작성하였기에 넘어간다.
또한 시간 절약상 미리 작성해두었다.
약관 보기 기능도 되며 필수 정보를 채우지 않았거나 동의에 체크하지 않았을 경우 모달창이 등장한다.
총평
회사 분위기도 무척 좋았으며 대표님과 팀원분들이 정말 친절하게 대해주셨다.
간식들도 챙겨주셨으며 복지 또한 무척 좋았다.
4주간의 짧다면 짧은 기간이었지만 내가 모르고 있었던 내 코드에 대한 잘못된 것들도 피드백 받을 수 있었고 좋은 분위기에서 많이 배우고 돌아 간것 같다.
시간이 더 많았으면 더 잘하고 많은 기능들도 할수 있었을것 같아서 아쉽긴하지만 4주간의 경험과 시간들은 절대 잊지 못할것 같다.
