디자인과 프론트엔드, 백엔드가 연계된 모바일 웹 서비스 제작 챌린지에 대한 회고록을 통해 각종 경험과 배운 점을 정리해 보았습니다. 제가 직접 체크해본 결과, 이 프로젝트는 제 개발 역량을 사고의 폭을 넓히고, 다양한 기술을 사용해보는 좋은 기회가 되었어요.
1. 팀 프로젝트의 시작과 도전
1.1 팀프로젝트의 애초 상황
이 프로젝트를 시작하기 전까지는 제대로된 팀프로젝트를 해본 적이 없어서 아쉬움이 컸어요. 제가 지원하게 된 이유는 넘블에서의 팀 프로젝트는 설계부터 구현까지 전반적인 과정을 아우르는 만큼, 많은 것을 배울 수 있을 것이라는 확신이 들었기 때문입니다.
진행 기간은 22년 4월 15일부터 5월 15일까지 한 달간 이어졌고, 주요 주제는 숏폼 모바일 웹 서비스 만들기로 정해졌어요. 제가 직접 기여한 부분은 회원가입 페이지, 영상 재생 페이지, 마이페이지로, React 그리고 Typescript을 사용했어요.
1.2 진행 중의 재미와 도전
저는 프로젝트의 난처함과 그걸 해결하는 즐거움이 공존했다는 느낌을 많이 받았어요. 특히 Axios를 활용하여 데이터 요청하고, 동영상을 재생하는 기능을 구현할 때는 큰 성취감을 느꼈답니다.
| 기여 내용 | 기술 스택 |
|---|---|
| 회원가입 페이지 | React |
| 영상 재생 페이지 | Typescript |
| 마이 페이지 | Axios |
2. 배운 점과 성장한 경험
2.1 정규표현식의 활용
이번 프로젝트에서 가장 새롭게 배운 건 정규표현식이었어요. 이메일 유효성 검사부터 입력값 검증까지, 여러 상황에서 유용하게 활용할 수 있을 것 같아요.
예를 들어, 저희는 이메일의 올바른 포맷을 검사하기 위해 아래와 같은 정규표현식을 사용했어요.
javascript
const emailRegexp = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
이렇게 간단하게 코드로 조건을 정의하여 사용하니까 훨씬 더 쉽게 이메일 유효성을 체크할 수 있었답니다.
2.2 개발 역량의 한계와 해결 방안
반면, 개발을 하면서 느꼈던 고충도 많았어요. 특히 직장과 병행하면서 프로젝트를 진행하다보니 시간이 부족하다는 것이 가장 큰 문제였어요. 퇴근 후 개발에 매달린 후에도 시간 부족으로 인해 프로토타입 개발이 지연되었습니다.
어떻게 더욱 시간을 효율적으로 활용할 수 있을지 고민을 많이 해봤어요. 예를 들어, 매일 하루의 일과를 정리하고 하루에 할 일을 구체적으로 계획하며 프로그래밍 시간을 최대한 활용할 수 있도록 노력했어요.
3. 디자인과 개발 간의 간극
3.1 협업의 중요성
이번 프로젝트에서 특히 느낀 것은 디자인과 개발 간의 불일치였어요. 초반에 전달받았던 목업 디자인이 개발 중 변경되었을 때, 정말 혼란스러웠어요. 시간이 촉박해진 상태에서 디자인 변경이 이루어졌기 때문에, 처리하기에는 벅차다고 느꼈어요.
디자이너와 미리 의사소통하여 변동 사항을 함께 공유하고 해결점을 찾아야겠다는 교훈을 얻었어요. 실제로, 디자이너에게 디자인이 어떻게 진행되고 있는지 문의하고 피드백을 받을 필요성이 있다고 느꼈습니다.
3.2 순응의 과정
디자인이 변경되었을 때, 저는 순응해야 했어요. 결국 기존의 작업을 수정하는 시간도 부족했기 때문에, 많은 스트레스를 경험하게 되었답니다. 그런 상황을 초래한 것은 어느 정도 서로 간의 소통이 부족했지 않았나 하는 생각이 들어요.
- 따져보고 싶었지만, 팀워크를 잃고 싶지 않았어요.
- 이와 같은 상황이 벌어진다면 사전에 조율하도록 하여, 다음번에는 더욱 원활한 협업을 이루고 싶어요.
4. 프론트엔드와 백엔드 간의 소통
4.1 긴밀한 협업의 필요성
프로젝트 기간 동안, 프론트엔드와 백엔드 간의 소통 부족으로 인해 여러 문제가 발생했어요. 특히 백엔드 서버의 준비 상태를 알지 못해 애가 타는 상황이 많았답니다. 실제 서비스 흐름을 타고 테스트해 보려면 백엔드가 완료되어야 했기에 서로간의 기대와 진행 상황을 더 공고히 만들어야겠다는 생각이 들었어요.
4.2 경험적 통찰
이런 경험에서, 다음 프로젝트에는 반드시 백엔드와의 긴밀한 협업을 통해서 미리 데이터를 준비해놓고 모든 흐름을 테스트하는 것이 중요하다고 느꼈어요. 데이터 지연으로 인한 불안함을 미연에 방지할 수 있는 협업이 필요하다고 생각합니다.
5. 향후 계획과 다짐
5.1 기술 스택의 중요성
프로젝트 후 느꼈던 점은, 기술 스택의 중요성이에요. 저는 React만 가지고 있으면서, 더 나은 기술적인 도전이 필요하다고 생각이 들었습니다. Next.js와 Typescript를 포함한 기술 스택을 더 적극적으로 배우고 활용해야겠다는 다짐을 하게 되었어요.
5.2 더 나은 개발자로
이 프로젝트를 통해 많은 것을 배우며, 개발자로서 성장할 수 있는 기회를 얻었어요. 앞으로의 개발 과정에서도 이렇게 많은 경험을 쌓아가며 더 발전할 수 있도록 노력해야겠어요. 실질적인 기술이 Learning으로 연결되고, 이를 다시 실제 프로젝트에 적용하면서 제 실력을 끌어올리는 방식으로 나아가고자 합니다.
자주 묻는 질문 (FAQ)
프로젝트의 기대 효과는 무엇인가요?
프로젝트를 통해 팀워크와 협업의 중요성을 배우고, 실제 웹 서비스 개발 경험을 쌓을 수 있었어요.
어떤 기술 스택을 사용했나요?
React, Typescript, Axios를 사용하여 개발하였답니다.
개발 중 어려웠던 점은 무엇이었나요?
디자인 변경, 협업의 소통 부족 등 여러 가지 어려움이 있었답니다.
다음 프로젝트의 계획은 어떻게 되나요?
Next.js와 Typescript를 더 배우고 활용한 프로젝트를 경험할 계획이랍니다.
위의 경험들을 토대로 앞으로 더 나은 개발자가 되어, 계속해서 성장해나가고 싶어요.
키워드: 팀프로젝트, 웹 서비스, 개발 경험, 협업, 디자인, 프론트엔드, 백엔드, React, Typescript, Axios, Next.js