JUST MOMENT TRIP🦜
놀러오세요 JMT의 숲 클릭클릭 !
실례가 안된다면 회원가입 후 저희 프로젝트 결과물의 좋은점과 아쉬운점을 댓글로 남겨주세요
제가 부처님 찾아뵐때 당신의 몫까지 함께 절드리리라 !
진짜임 ! R E A L ! 전 거짓말 하지 않습니다 ! ㅋㅋㅋㅋ
드디어 완성된 저희 프로젝트 결과물 J-M-T 많 관 부 🍰
모바일도 된답니다 📱
INTRO
끝이다 나의 두번째 프로젝트
정도 많이들고 이런일 저런일 요런일 다 겪은 나의 두번째 프로젝트
욕심내서 기능추가 많이하고 싶었지만 내 실력이 너무 턱없이 부족해서
기본적인 CRUD 기능구현에 모든 것을 쏟아부은덕에 정말로
기본에 충실하게 된 나의 두번째 프로젝트
회고를 쓰자고 마음을 먹었는데 뭐부터 어떻게 풀어서 적어야 하는지 몰라 여지껏 미루다가
이제서야 작성을 시작하게 됐다.
머리
설렘과 긴장과 여러가지 감정을 안은채로 프로젝트에 임하게 되었다.
첫 프로젝트때 함께했던 멤버들과 파이널 프로젝트도 진행하게 되어 어색함은 없었지만,
그래도 처음보단 발전한 모습을 증명해보이고 싶어서 나름 긴장을 한 채로 SR계획을 시작하게 되었다.
우리의 최종 목표는 "기본적인 기능을 에러없이 완벽하게 구현하자"로 정한 후 첫 프로젝트에 만든 틀에서 조금 더 업그레이드 한 결과물을 만들기로 결정하였다. 그래서 무엇을 할지 정하는 기간은 예상처럼 적었다.
계획단계에서는 충돌이 없었지만, Figma를 이용하여 프로토타입을 만들때 의견 조율이 필요했었다.
디자인 때문인데, 나와 같이 프론트엔드를 맡으신 분은 이미 정해진 디자인을 완전히 바꾸자고 말씀하셨다.
나를 포함해 다른 팀원들은 그것보단, 기능구현에 조금 더 시간이 필요할테니 디자인은 3주차가 지나고 CSS를 할 때 다시 합의점을 찾는것도 나쁘지 않다고 말을 하였다.
(결국 그 분께서 까먹으셨는지 디자인에 대한 언급은 그 이후로 하지 않으셨다.)
프로젝트 프로토타입
특히 우리는 이번 프로젝트엔 반드시 기록을 열심히 남기자고 다짐 또 다짐하여 하루에 한 번 DEV-LOG와 블로그 그리고 에러노트등을 작성하였고, 면접대비 겸 에러를 올바르게 잡기 위해 아침에 공부한 것을 발표하는 시간도 가졌다. 이 기록에 관한 규칙을 정할때도 약간의 의견충돌이 있었는데, 나같은 경우는 1부터 100까지 모든 계획을 세밀하게 세운 후 실행하는 것을 선호하지만 다른 팀원 한 분은 당일마다 계획을 세우고 실행하는 것을 선호하기 때문이다. 결국 우리는 매주 월요일 주 단위 계획을 정하고 마일스톤을 만들어서 자율적으로 자기가 맡은 부분을 진행하기로 결정했다.
어깨
원래 있던 웹팩설정이나 바벨, ES Lint 등등을 그대로 셋업한 바탕에서 작업을 시작하게 되었다.
🙈 이전 프로젝트 : 컴포넌트단위로 나눠서 생각하는 것을 코드를 치면서 계획함
🙊 이번 프로젝트 : 코드작성 전 확실하게 컴포넌트 및 폴더를 어떻게 나눌지 계획함과 동시에 로직 또한 어떻게 구현 할 것 인지 계획한 후 코드를 작성함
확실히 세세한 것 까지 계획을 정하고 코드를 작성하니 어느구역에 어떤코드가 있어야하는지 정확하게 알 수 있어서 에러를 찾기도 쉬웠다.
손으로 직접 코드를 작성하며 에러가 왜 나는지 스스로 고민도 해보고
앞서 말했듯, 계획을 세운 후 코드작성을 하였다
난 이번에도 CRUD를 맡게 되었는데, 로그인 구현을 해보지 못해서 매우 아쉽다(제일 못하는 영역이기 때문에 이번 프로젝트때 도전하고 싶었지만, 프론트엔드를 맡으신 다른 한 분의 의사가 적극적이여서 이번에도 일기장 및 가계부 CRUD를 맡게 되었다). 저번 프로젝트에 추가하지 못했던 기능들을 추가하고 어떻게 하면 쉽고 간편하고 재미있게 사용자가 우리의 웹사이트를 이용할 수 있을지에 초점을 맞추어서 개발을 진행하였다. 그래서 CSS를 이용하여 깜짝이벤트를 많이 만들어 넣기도 하였다.
🐘 재미적인 요소를 넣은 이유 ?
내가 그런 것들을 추구하기도 하고, 우리의 프로젝트가 여행하는 순간을 기록하는 웹사이트를 구현하는 것이기 때문에 그런 요소를 넣음으로써 좀 더 사용자의 기억에 잘 남지 않을까...라는 생각도 들었기 때문이다. (TMI 글은 이렇게 썼지만 그냥 내가 재밋는걸 좋아한다 노찌롱마냥 후후)
벨로그의 태그기능을 보고 우리의 프로젝트에도 이런 기능이 있으면 좋겠다는 생각과 더불어, 이미 정해져 있는 카테고리를 사용하는 것 보다 자신이 직접 만든 키워드(태그)가 카테고리 그 자체의 역할을 하는 것이 조금 더 사용자에게 매력적으로 다가간다고 생각했기 때문이다. 태그를 눌렀을 때, 결론적으로 그 태그와 관련된 일기 기록들을 보여주기 위해 백엔드 팀원분들의 도움을 받아 로직을 완성하게 되었다.
해시태그를 눌렀을 때 그에 해당하는 리스트만 보여주기 위해 만든 함수
다이어리 페이지는 이렇게 생겼고 해시태그를 누르면 요로코롬 됩니다
그렇습니다. 다이어리 진정한 킥기능, 아니 우리 프로젝트의 메인기능이라고 생각한다. 백엔드를 맡으신 MAN의 의지를 이은 자가 1부터 100까지 구현하셨다(난 진짜 숟가락만 얹었다). 검색구현을 할거면 이정도는 해야하지 않나.. 라는 대리 자부심을 가져본다 후후
검색한 키워드의 색깔도 바뀐다
초성만 입력해도 검색이 된다 !
내용검색도 마찬가지이다 !!
기존의 검색페이지에서 검색을 하여도 그에 해당하는 카드를 확인할 수 있고, 없는 내용을 검색하면 당연히 0으로 뜬다 !!!!
🐘 가계부의 그래프를 보여주는 기능도 추가하셨군요 ?
첫 프로젝트때는 엄두도 못냈지만 라이브러리를 사용하여 그래프 구현도 성공적으로 하였다. 특히 그래프구현을 하기위해 필요한 로직짜기에서 reduce메소드를 사용해야 하는 것이 매우 부담스러워서 백엔드를 담당하신 킹-갓(구)팀장님의 도움을 많이 받아 해낼 수 있었다.
reduce 메소드를 이용할 줄 이야..!
솔직히 다이어리보다 조금 더 영혼을 갈아넣은 나의 가계부 페이지
글 작성한 장소를 지도로 확인 할 수 도 있다! 지도버튼이 어딧는지는 당신이 찾아보십시오 후후
거의 2주차~3주차는 이런 기능구현을 하는데에 시간을 많이 할애하였다. 이번에는 꼭 내 영역의 기능들은 내가 전부 구현하고 싶었지만, 역시나 시간도 부족하고 실력도 부족해서 백엔드 팀원분들의 도움을 많이 받게 되었다. 이 때 (마일스톤의 sprint1, sprint2)는 CSS를 제외하고 정말 기능적인 부분에 집중을 해서 로컬 서버로 확인 할 때 마다 모양새가 마치 북쪽에 어느 빨간나라 디자인st같아서 웃으면서 코드작성을 했던 기억이 강하다.
무릎
Sprint3, 그러니까 거의 프로젝트가 끝나기 1주전은 내가 만들고자 한 기능들이 모두 구현되어 버그와 콘솔에러를 잡으면서 CSS로 웹페이지 꾸미기에 본격 돌입하였다. 그 때 까지만해도 '우리의 프로젝트는 매우 원만하게 흘러가는구나'라고 생각했지만, 역시 시련없는 파도는 없다는 옛날말은 틀리지 않았다는 것을 증명하는 순간이 찾아왔다.
우리팀은 프론트엔드 2, 백엔드 2, 총 4명으로 구성되어 있는데 프론트엔드를 맡으신 팀원(팀장)분이 이렇게 시간이 흐르는 동안 자신의 진행상황을 제대로 공유하지 않아 CSS는 커녕 기능구현도 프로젝트를 끝내는 날 까지 완성하지 못할 것 같다는 말을 갑작스럽게 꺼냈다. 자신이 만들고자 하는 기능들(로그인, 소셜로그인 그리고 여행을 선택하는 페이지, 마이페이지를 구현하겠다고 SR계획 단계에서 정함)중 새로운 스텍(Redux)를 적용하여 구현하려고 하였으나 시간도 오래걸리고 아무래도 새 스텍을 사용하려고 하다보니 많이 어려웠던 모양이다. 어째서 매일 마무리 회의 시간에 "90% 완성되었다, 밤새면 될 것 같다"라는 말을 하면서 자신의 코드상황을 공유하지 않았는지는 알 수 없으나, 나와 벡엔드팀은 '지금이라도 알아서 다행이다'라는 말을 주고받으며 서로를 다독였고, 그 팀원이 진행도 못한 기능들을 백엔드를 맡으신 팀원분께서 구현하였다. 우리팀 백엔드분들은 능력이 상당히 좋으신분이라 사실 말이 백엔드지 내가봤을땐 풀스텍이라 봐도 무방하다.
이 팀원의 도전과제중 하나가 CSS를 익히는 것이었는데, CSS를 자신이 직접 찾아서 구현한 것도 있지만 여행선택을 하는 페이지는 시간이 부족하셔서 그런지 나의 CSS구현을 많이 참고하여 구현하신 것 같아 매우 아쉬운 부분이 많다. 사실 이분과의 팀플레이는 이 분만의 잘못은 아니라고 생각한다. 같은 프론트엔드를 담당했으면서 이 분의 진행상황을 확실하게 확인하지 못하고 그저 '말을 저렇게 했으니 그 말에 대해 책임을 지겠지'라는 막연한 믿음(왜냐하면 내가 내 기능을 구현하는 것도 바빴기 때문에 저 팀원을 신경쓰지 못하였다) 또한 문제였다고 생각한다.
발
이렇게 저렇게 우리의 프로젝트를 마무리하게 되었다. 발표도 잘 하였고 각자 구현한 기능등을 노션에 정리하기도 하고... 우여곡절이 있었지만 프로젝트가 끝난 날은 정말 실감이 나지 않았다.
우리는 기본기능구현에 충실하였고, 기록또한 충실하게 남겼다
PR기록들
킹-갓 벡엔드 이슈카드 흔적들
프론트엔드 이슈카드 흔적들
1일 1DEV LOG 실천 성공
면접 질문 대비 및 1일 1공부 하여 아침발표를 하자는 취지에서 시행된 하.하.인
우리팀은 매일 하루에 총 4번의 회의를 하는데, 처음에는 기록하지 않다가 중간부터 기록하게 되었다
사실은 이제 시작이라고 말하고 싶다. 왜냐하면 리펙토링을 프로젝트 끝난 이후로 지금까지 진행중이기 때문이다. 이력서 작성 및 면접 준비로 다들 바쁘겠지만 그래도 리펙토링을 조금씩이라도 진행하자는 나의 의견에 백엔드 두분은 흔쾌히 수락을 해주셨고, 프론트엔드를 맡으신 팀원 한 분은 일단 수락은 하셨지만 너무 바쁘셔서 그런지 말이 없으시다 😅 그래서 일단 나와 백엔드팀은 프로젝트-알파라고 이름을 짓고 리펙토링을 한 후 기능추가를 차차 할 계획을 가지기로 하였다.
마일스톤을 하나 만들어서 프로젝트와 매한가지로 계획을 수립하고 각자 할 일을 자율적으로 진행하기로 하였다
프로젝트 알파 회의록
프로젝트 알파 SR
리펙토링은 진행중이다
Adiós JMT !
내가 너무 부족해서 로직짜는데에 시간을 많이 할애한 것이 매우 아쉽다. 그래서 코드수정, 리펙토링, 기능추가등을 진행하며 알고리즘 공부도 진행하고 있다.
역시 손으로 받아쓰면서 공부하는 것이 아직은 더 편하다. 로직을 효율적으로 짜는 법 알려주신 킹-갓 벡엔드 여러분 감사드립니다 ;ㅅ;
에러잡기 진행중
경고알람 없애기 대작전 진행중
여행정보를 입력하는 페이지에 아무것도 입력하지 않아도 전송을 가능하게 해놓은 것을 이제야 발견했다. 서버측에서 걸러줘서 다행이지... 세상에....
끝인사를 어떻게 써야 멋있을까.. 라는 고민을 했지만 역시 담백하고 심플하게 고마움의 인사와 함께 짤로 마무리하는게 좋을 것 같다.
너무나 부족한 나를 프론트엔드로 둬서 함께 고생을 공유당한 백엔드 듀오분들 너무 감사드리고 제 프로젝트가 마무리 되기까지 도움주신 모든 분들, 블로그들, 외궈 친구들 감사하다 !
드디어 하나 해냈다 와와와와!!
고생한 우리 팀원들
백엔드 두분은 풀스텍이라 불러도 될 것 같다
진짜 안녕 !
근데 진짜 몇 마리에요 ?
Gaen Naia Kyri Vi
잘 보고갑니다