231230_WIL | 사이드 프로젝트 종료 + 2023 간단한 회고

231230_WIL

이번주 한 일

• 사이드 프로젝트 끝났다

이번주의 정리

1. (항해99 수료 이후) 첫 사이드 프로젝트 : 징글밍글

• 처음 위 기획은 항해 99를 함께 수료했던 프론트 지인의 제안을 통해 진행하게 됐다. 원래 백엔드 없이 진행하려고 했었지만, 생각보다 규모가 작지는 않을 것 같아, 프론트 지인분의 아는 백엔드 분이 함께하게 되었고 3명이서 함께 프로젝트를 진행하게 되었다.
• 주제는 2년 전 쯤 히트였던 “내 트리를 꾸며줘”에서 착안하여, 최초 기획은 이용자에게 남긴 메세지들이 선물 상자의 형태로 화면(방)에 쌓이는 형태였다.
  • 하지만 시간 + 실력 + 디자이너의 부재로 인해, 난이도를 최소화하여 방선택 / 선물상자 컬러 직접 선택할 수 있게 해주되 선물상자가 쌓이는 애니메이션이나 화면은 진행하지 않는 쪽으로 기획을 확정하게 되었다.
    (이 사이에 기획에 대해 논의를 많이 했지만 다 엎어진 원인은 내가 생각했을 때 시간 + 디자이너의 부재가 제일 컸다.)

• 위에서 언급한 것처럼 디자이너를 구하지 못했기 때문에…. 그나마 관련(???????) 직종에 종사했던 내가 UI 디자인까지 함께하게 되었다. 세상에 마상에..

  • 아래는 내가 열심히 디자인한 피그마 일부.. 진짜 열심히 만들었다 ㅠ(라고 하기엔 무척 별 게 없다 하하..) 기획도 위에 작성한 사항이 다였어서, 혼자 고민해서 추가해야할 내용들은 팀원들 멘션해서 정리 + 픽스했다..
    피그마 캡쳐본 + 내 귀여운 선물상자

    

    왕 기여운 현징 메이드 선물 상자

• 업무는 크게 로그인 전 / 후로 나눠서 진행했고, 나는 로그인 전에 해당하는 부분을 담당해서 진행하게 됐다. 모바일 웹 기준으로 진행했어서, 반응형까지 하는게 맞다고 보지만.. 시간이 부족해서 간단하게 하고 넘어갔다 (좀 아쉬웠다.)

• 그리고 결과는 아래와 같다 (화면 일부 - 아이폰 12 기준 캡쳐)

  • 6번째 캡쳐본은 현재 25일이 지난 관계로 확인이 어려워 로컬 상태에서 캡쳐했다.
  • 2번째 줄의 3개의 캡쳐본의 경우 내방 / 타인의 방 / 25일 전후에 따라 버튼이 다르게 보이는데, 현재 배포된 버전에서는 25일이 지나 캡쳐본에서는 해당 버튼을 확인할 수가 없다.
• 마지막으로… 정말 올리기 싫지만.. 이번 경험으로 다음엔 더 좋은 결과물을 만들 수 있길 바라며 올리는 징글밍글 링크 (아무도 안봤으면 좋겠다 하하하하하하)

2. 아무튼 사이드 프로젝트가 끝났다.(회고 위주)

• 1~2달동안 열심히 달렸던 사이드 프로젝트가 끝났다. 일단 개인적으로 생각했던 최소한의 목표는 달성했다.

  • 최소한의 목표로 잡고 진행했던 사항들은 아래의 3가지였는데, 사실 3번은 흐지부지 끝났던 것 같다. 구글링해서 따라쓰는 것 밖에 안된 것 같아서..

    1. 회사 코드 따라치지 말기
    2. auth 코드 이해하고 사용하기
    3. 토스트 컴포넌트 직접 만들어보기

  • 이 외에도 “사용자를 최대한 많이 받아서 버그리포팅을 받고, 트래픽을 경험해보자” 가 최종 목표였는데, 막판에 가면서 뭔가 흐지부지 끝나게 되서 제대로 된 홍보를 하지도 못했다. 프로젝트의 주제 자체가 25일이 지나면 조회만 가능한 형태이다보니, 이래저래 일정은 계속 밀리고, 작업물은 마음에 안들고, 하다보니.. 뭔가 주위에 알리는 것 자체가 민망해져서 사실 제대로 자랑하지도 못했다..(넘 속상하다 내 2달..)

  • 그래도 처음으로 카카오 로그인도 구현해보고, auth 코드 부분에 대해 드디어 이해하게 된 것 같다.(근데 우리 코드에는 리다이렉트도 다 빠져있다 ㅎ..) 근데 cookie 사용하려고 했는데 호출하는 과정에서 계속 에러가 나서…ㅠㅠ 결국 localStorage를 사용하긴 했는데, 아직도 원인파악을 못했다.

  • 겪었던 문제 상황 1,2,3 …

    1. api가 나오고 초반에 조금 머리가 복잡했다

       • 첫 번째는 swagger 프레임워크와 초면인 문제 :(
         • 중 후반부에는 괜찮았지만, 회사에서 진행할 때는 노션 문서 내에 query / path / success 상태에 따라 코드가 다 작성되어 있어 편하게 진행한 반면에, swagger에 익숙치 않아서 그런지는 몰라도 문서만 봤을 때는 query / path를 구분하기 어려워서 url을 작성할 때 좀 애먹었다.
       • 그 중에서도 로그인 때문에 이틀정도는 머리를 쥐어뜯었던 것 같다.
         • authorization이 문제였는데, 이번에 함께하게 된 백엔드 분은 authorization에 access token 과 refresh token을 같이 보내주고 계셨는데, 항상 access token만 받아서 사용하는데에 익숙해졌던지라 둘다 받아야한다는 걸 놓치고 진행하게 되면서 token 사용에 문제가 계속 있었다. (둘다 저장을 하지않으면 이슈가 생겼던 걸로 기억한다.. 시간이 지나서 명확하게 어떤 이슈였는지 기억이 안난다 ㅠㅠ)
           같이 진행한 프론트 분이 도움을 주셔서 위의 두가지 token을 같이 넘겨주면서 이슈를 해결하게 되었지만, 위의 사항에 대한 이해가 되지 않았고 + 어떻게 구글링을 해야할지 감이 안와서 개발자 커뮤니티를 찾아서 질문도 올렸었다. okky에 질문을 올렸다 친절하신 분들이 많으셔서 정말 감사했다. 답답함이 0.001%정도 줄어들었다.(사실 제대로 이해 못해서 100% 시원하지는 않았다. 난 바보얌,,😭)

    2. 카카오 로그인을 연동하면서도 소소한 이슈가 있었는데, 해당 부분은 백엔드분이 확인해주시면서 잘 해결됐다.

       • 해당 이슈의 경우 -> 카카오 로그인을 성공했을 때 redirect url이 잘못되었던 이슈였는데, 해당 url이 백엔드 url로 설정되어 있어, 로컬 url 추가 + 도메인 구매 이후에는 해당 도메인 url 추가를 하면서 해당 이슈는 해결이 되었다.

    3. toast 만들 때 context를 사용해서 진행했는데, 해당 context에 대한 이해가 너무 부족했다.

       • 위와 같은 상태 관리는 보통 전역으로 사용했었는데, 이번 사이드 프로젝트에서는 따로 라이브러리를 추가하지 않았었다. 그래서 구글링을 통해 발견한 context를 사용해서 진행했는데, 사실 제대로 이해하면서 작성한 코드가 아니라서, 해당 부분은 조금 더 공부를 하는 게 맞는 것 같다. 그리고 간헐적으로 페이지가 변경되도 처음에 정해준 fade-out 시간에 도달하지않으면 사라지지 않는데 이 부분도 좀 더 디벨롭 했으면 좋지 않을까 싶다.

    4. 마지막으로 제일 힘들었던 건 스크린이 너무 심각했다.

       • 현재 피그마의 디자인의 경우, 내가 임의로 만들었던 부분이다보니 같은 수치로 css를 설정하게 되면 화면 비율에 잘 안맞는 경우가 발생했고, 내가 담당해서 진행한 페이지들의 경우 내 임의대로 수치를 조절하면서 진행했지만, 함께한 프론트 팀원분의 페이지들은 명확한 수치로 만들어져 있어 모바일 환경에 따라 많이 달라지는 이슈가 생겼다.
       • 함께한 팀원의 경우 css는 조금 어렵다고 말씀주시기도 했고, UI는 내가 짰었다보니, css는 전체적으로 손보려고 했는데, 평소 내가 사용하던 형식과 폴더 구조가 상이하고, 컴포넌트를 타고 들어가다보니 뭐가 뭔지 판단이 되지않아서 결국 디테일한 부분들 수정은 포기할 수 밖에 없었다.
       • 대상을 모바일로 잡고 있었고 스크롤이 최대한 생기지 않도록 진행하는 게 스크린 관련된 내 주 목표 중 하나였는데, 계속해서 발생하는 스크롤때문에 머리가 너무 복잡했고 이 순간부터는 주위에 홍보할 생각을 접었던 것 같다.

• 그럼에도 불구하고

  중략..(잡담 위주)

  • 확실히 이번 기회를 통해 배운 게 많긴 하다. 처음에 언급했던 것처럼 작지만 항해 99 수료 이후에 처음으로 사이드 프로젝트를 진행한거라.. 진짜 2주 가량은 매일 1~2시에 자고주말도 다 반납하면서 작업했던 것 같다. 그리고 다 다른 회사에 재직 중인 사람들끼리 모여있다보니 다양한 코드 형태를 경험할 수 있달까..
  • 그리고 내 의견을 표력을 어떻게 해야할지, 논의할 때 잘 들어야겠다는 생각도 많이 했다. 추가로 초기에 기본적인 컨벤션은 확실히 잡고 가야할 것 같다는 것도..
    프론트팀원과 나 둘 다 서로를 배려하려는 생각 때문에 명확하게 의사표현을 안해서 서로에게 끌려간 느낌이 없지 않아 있는 것 같아 아쉬웠다.
    나의 경우 import 편하게 할수 있도록 theme 설정이나, icon 설정을 다 해뒀는데, 팀원은 전달해줬던 방식과 전혀 다른 방식으로 사용하고 있었다..(서운..) 그리고 폴더 구조를 잡는데에 있어서도각자 컴포넌트 폴더 내의 구조에 대해 생각하는 게 달랐었는데 이에 대한 논의가 없었다보니, 중반부가 지나면서 누가봐도 2명이 각자 작성한 코드가 되었다.
    팀원의 경우는api 때문에 골머리를 앓았다고 프로젝트 후반부에 이야기를 했었는데, api의 수정이 필요하다고 판단해 내게 먼저 물어보셨었는데, 나는 현상 유지에 대한 의견을 내비쳤었다. 팀원분이하시는 코드에 대한 이해가 부족하다보니 생긴 문제였던 것 같다. 그리고 내 반대로 인해 백엔드분께 따로 문의를 드리지 않았다고 말씀 주시면서 해당 부분이 조금 아쉬웠다고 하셨다.이제와서 하는 말이지만, 프론트끼리 코드리뷰하는 시간이 있었으면 좀 더 좋지 않았을까 하는 생각이 들긴 한다. 아마 이것말고도 힘드셨던 점이 많으셨겠지..😞 당시에는 조금 억울해서짜증냈던 것 같은데, 이자리를 빌어 죄송하다는 말씀을 드립니다.. (이 게시물 다 보실 거 압니다 하하)
    명확하게 내 의사를 표현하려면 공부를 진짜 많이 해야겠구나 하는생각도 이백번 했다.
  • 그리고 일요일 오전마다 회의했었는데, 평일엔 일 + 공부로 일요일 오전엔 쉬고 싶으실텐데 회의때마다 다들 열정적이셔서 정말 감탄했다.(내가 제일 불성실했다. 막판엔 제일 열심히 했음 진짜임) 동기부여 킹왕짱

---

12월 마무리를 이렇게 사프로 하게 될 줄은 몰랐다. 생각해보면 작년 이맘떄도 항해 99 끝날 때쯤이라 정신없이 코드짜고 있었던 것 같긴 하다. 항해할 때의 프로젝트는 진짜 아무고토 모르고 완성에만 치우쳐서 진행했다면, 이번 사이드 프로젝트를 진행하면서는 만족감보단 아쉬움이 더 많았다. 그래도 취업해서 일한지 6개월이 지나, 곧 1년이 다돼가는데 이 정도로 밖에 못했다는 사실이 너무 충격적이었다. 혼자 코드를 짜면 할 수 있는게 없구나 싶은.. 복붙쟁인가 싶고..
다음 프로젝트는 일단 혼자 해보려고 생각중이다. 이번엔 테트리스를 스토리북 + next + tdd 로 구현하고 싶은데 너무 욕심쟁인가 싶다. 두달 잡고 주말 갈아넣으려고 생각중.. 세개 중에 제대로 할 줄 아는게 하나도 없어서.. 하핫
1~2달 전에 선임님이 곧 1년차 다돼가는데 내 실력에 대해 어떻게 생각하는지 물어보신 적이 있다. 그 말을 들으면서 생각이 정말 많았는데, 비전공자라고 하더라도 아는 지식의 폭이 너무 좁은 것 같다는 생각을 많이 했다. 잘 모르면 그만큼 공부를 했어야했는데 현실에 안주해버려 올해 중순에 버려버린 4달 가량이 무척 아쉽다.. 그 때 매일 알고리즘이라도 했으면 좀 현타가 덜했을텐데.. 뭔가 자기 합리화를 하면서 주말마다 그냥 쉬어버린 것 같다. 똥멍청이 😢
어쩌다보니 또 언제나처럼 하소연의 게시물이 된 것 같지만.. 내년에 이 글을 보면 또 새롭지 않을까 싶다.
언제나처럼 다시 한 번 마음을 다잡고 갑니다. 내년엔 진짜 저 프론트엔드 1년찬데용 ?ㅇ? 할 수 있는 상태가 됐으면 좋겠다.
입으로 공부 그만하고, 행동으로 실천하기………..!!!!!!!!! 힘내자..!