숏폼 모바일 팀프로젝트
[마감] 디자인-프론트-백엔드 연계 모바일용 웹 서비스 만들기 챌린지
챌린지 일정표
www.numble.it
1. ❓상황
해당 팀프로젝트 하기 전까지 제대로된 팀프로젝트를 해보지 못해서 아쉬웠었는데, 넘블에서 디자인-프론트-백엔드 연계하여 팀프로젝트를 진행한다고 해서 지원하게 되었다.
2. 🏫 전체 과정
- 진행 기간 : 22. 4. 15. 금 ~ 22. 5. 15. 일 (31일간)
- 챌린지 주제 : 숏폼 모바일용 웹 서비스 만들기
- 내가 기여한 개발내용 : 회원가입 페이지, 영상 재생 페이지, 마이페이지
- 사용한 기술스택 : React, Typescript, Axios
- 결과 및 성과
- 느낀점
3. 🎥 진행 기간
4. 🗒️ 주요 내용
숏폼 모바일용 웹 서비스 만들기
5. 🚀 본인이 기여한 점
5.1. 회원가입 페이지
5.2. 영상 재생 페이지
5.3. 마이 프로필 페이지
6. 🔡 사용한 기술스택
React, Typescript, Axios
7. 🎥 결과 및 성과
URL : https://myungsang-frontend.vercel.app/
전체 3등 선정 : https://thoughtful-arch-8c2.notion.site/a544bc8c94a3406f9941c83296bfa42c
8. 🎞️ 느낀점
8.1. 👍 알게 된 점
8.1.1. 1. 정규표현식
# 이메일 정규표현식
const emailRegexp = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
# 영어만
const checkEng = /[a-zA-Z]/;
# 숫자만
const checkNum = /[0-9]/;
8.1.2. 2. Axios default 설정
axios.defaults.headers.common['Authorzation'] = value;
8.1.3. 3. 절대경로 설정
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@pages/*": ["src/pages/*"],
}
}
8.2. 🧡 좋았던 점
8.2.1. 1. 챌린지 동료이자, 내 사수같은 프론트엔드 개발자분...
나와 같이 프론트엔드단을 맡게된 동료분은 개발경력이 3년이 된다고 하신다.
그래서, 그분이 개발한것을 보면서 개발역량을 향상시키는데 도움이 많이 되었던거 같았다.
특히, atomic 디자인을 그때 처음 알게되면서 디자인에 맞게 개발을 하다보니, 내 개발능력이 조금 더 향상되었다고 스스로 느꼈다.
같이 챌린지를 진행해면서 동료분께 조금 죄송스러웠던 것은, 내가 PR을 하면 동료분은 코드리뷰를 남겨주셨는데 나는 코드리뷰를 하려고해도 뭐가 더 나은 방법인지 알지 못해 코드리뷰를 남겨드리지 못했던 죄송스러운 감정이 남아있다.
특히, 내가 개발페이지를 3개정도 맡았다면, 동료분께서는 처음 리액트 구조설계부터 페이지 개발까지 거의 도맡아서 개발을 하셨기때문에 너무 고마우면서도 같은 프론트엔드 개발자로서 최대한 도와드리지 못해 죄송스럽다.
8.3. 💢 힘들었던 점
8.3.1. 1. 직장과 병행
전체적인 개발역량이 부족하여, 남들보다 시간을 더써서 개발을 해야 개발이 진척이 되는데, 퇴근하고 저녁을 먹으면 오후 8시가 되고 밤 12시까지 의자에 앉아 개발을 진행해도 개발시간이 너무 부족했다.
결국, 마감일 마지막 주차에 휴가를 내서 하루종일 개발을 몰두하게 되었다.
시간과 노력을 들여서 개발을 완료했지만, 시간이 조금더 여유로웠으면 더 깔끔한 코드를 작성할 수 있었지 않을까하는 스스로 아쉬움이 남아있다.
8.3.2. 2. 프론트엔드와 디자이너
직장과 병행했기때문에 시간은 시간대로 부족하고, 개발역량도 부족해서 내가 개발하는데 굉장히 오래걸렸다.
그래서 바로 개발을 해도 시간이 모자란데, 모르는 부분이 나오면 인터넷 검색을 통해 찾고, 공부하고, 개발하고, 버그를 수정하는데 시간낭비를 많이 했다고 생각한다.
특히, 스스로 더 시간을 낭비했다고 생각하는 것은 디자인(style)을 잡는 것이었다.
넘블측에서는 목업 레이아웃과 디자인을 만들어서, 이것을 토대로 만드시고 필요하다면 바뀌어도 상관없다고 하셨다.
처음 프론트엔드 개발할때는 우선 목업 레이아웃과 디자인대로 개발을 우선 하고, 디자이너분이 디자인을 figma로 보여주면 디자인을 입혀야겠다고 생각했다.
개발 기간은 약 한달이고, 약 20일 정도 지났을때 디자인된 페이지는 약 1/5정도 진행이 되었었다.
이때, 10일만에 디자인이 만들어진다한들, 내가 디자인을 입힐 시간이 되게 부족하다고 생각했다.
나는 디자이너분이 디자인이 늦어진만큼 넘블측에서 전달해준 목업 레이아웃은 그대로이고 색상과 같은 간단한 디자인을 하겠지라고 생각했다.
그러나 이후 디자이너분께 디자인을 받았을때, 간단한 디자인뿐만아니라 전체적인 레이아웃이 바뀐것을 보게되었고 허탈감이 느껴졌다.
전체적인 레이아웃이 바뀌면, 내가 디자인뿐만아니라, 개발 페이지를 전부 교체해야했기때문에 스트레스가 급 상승했다...
또한, 내가 개발할 페이지가 남아있고, 내게 주어진 시간도 촉박했기때문에 속은 굉장히 상했다.
디자이너분께 따지고 싶었지만 싸우려고 팀프로젝트를 한게 아니기때문에, 그냥 순응하고 개발 페이지와 디자인을 새로 하게 되었다.
특히 화룡점정이었던것은, 마감일날에 디자인이 바뀌게되었고, 바뀐것을 저녁 11시쯤에 알게되었다.
그때 우리는 오후 1시~저녁 6시까지 모여서 개발을 진행했고, 나는 집에와서 미완성된 개발 페이지를 계속 작업하고 있어서, 디자인이 바뀐것을 훨씬 나중에 알게되었다.
즉, 디자인을 수정하기위한 시간이 부족했다.
결국, 디자이너분께서 만드신 디자인으로 페이지를 수정하지 못한채, 그대로 개발된 웹 서비스를 넘블측에 제출했다.
그때, 서운했던 점은 디자이너분이 디자인이 바뀔것이라는 언질을 해줬다면, 내가 그것을 할 수 있을지 말지 의견을 낼 수 있었을텐데, 아무말 도 없이 디자인이 휙 바뀌고, 디자인이 바뀌었다고 나에게 말도 안했다는 것이다.
물론, 내가 개발역량이 뛰어나서 실시간으로 바뀌어도 바로 개발을 진행할 정도의 실력을 갖추게 된다면 속으로 욕한번하고 개발을 진행해도 되지만, 그렇지가 않아서 스스로도 많이 자책했다.
그래도 만약 나중에 디자이너분과 협업을 하게된다면, 디자이너분께 디자인이 어느정도 진척이 되었는지, 나에게 보여준 디자인이 바뀌게되면 말을 해달라고 얘기를 해야겠다고 교훈을 얻게되었다.
8.3.3. 3. 프론트엔드와 백엔드
웹 서비스 개발기간이 한달이었고, 백엔드는 한달동안 계속 개발을 진행하였고 마감일날에 마무리지었다.
즉, 제출 마감일에 서버가 열였다는 의미이다.
프론트엔드단의 동료분께서는 백엔드단에, 서버는 언제열리는지, 로그인하기 위한 토큰은 언제 구현이 되는지 등 계속 여쭤보셨지만 돌아오는 대답은 개발진행중이다라는 답변을 받으셨다.
그때 당시는, 내가 아무것도 몰라서 왜 자꾸 여쭤보시는 거지? 라고 생각이 들었다.
axios를 이용하여 백엔드에서 준 데이터로 동영상을 켜고, 좋아요 기능 개발을 시작했을때 그때 왜 프론트엔드분이 그렇게 초조하게 계속 여쭤보게 되었는지 어렴풋이 알게되었다.
왜냐하면 회원가입과 로그인을 직접해보고, 프론트엔드단에서 개발한 부분이 정상적으로 작동하는지 확인하는 test 절차가 필요한데, 그게 없어 답답해서 계속 말씀하신거 같다는 생각이 들었다.
그래서 나중에 백엔드분과 협업을 하게된다면, 목업 데이터 서버를 만들어 달라는 등 테스트할 수 있도록 요청을 해야겠다고 생각하게 되었다.
8.4. ❗ 보완할 점
- Atomic 디자인
- 전체적인 개발 능력
8.5. 💬 나의 다짐
위의 아쉬운점들은 나중에 협업을 할때, 중요한 것이라고 생각하고 협업이 끝난 지금은 개인 개발역량을 향상시키는 것이 중요하다고 생각한다.
나와같이 프론트엔드단을 맡은 동료 개발자분은 처음에 나와 얘기할때, next.js와 typescript를 이용하여 개발을 하자고 의견을 냈었다.
근데 나는, next.js를 잘 모른다고 했고, 그 동료분은 나의 기술과 맞추어 next.js를 포기하고 react로 개발을 진행했다.
그때, 동료분께서 next.js와 typescript는 실무에서 가장 많이 쓰인다고 말씀하셨기때문에
언젠간 next.js와 typescript을 합쳐 공부하고, 프로젝트를 진행해봐야겠다고 생각하게 되었다.
또한, next.js를 하기 전 선수지식으로 강의와 토이 프로젝트를 통해 React 개발능력을 향상시켜야겠다고 생각하게 되었다.
'수근수근' 카테고리의 다른 글
| [잡담] 노션글을 티스토리로 옮기기 (0) | 2024.04.09 |
|---|---|
| [잡담] 공부하는데 지친 마음을 다잡아 주는 글귀 (0) | 2022.05.23 |
| [잡담] 프로그래밍 책 구매시 확인 할 것 (0) | 2022.03.08 |
| [잡담] 개발자 이력서 작성하는 법 (0) | 2022.01.19 |