[Project] Muuvi 프로젝트 회고
[ Project ]2025. 12. 11. 15:582025.12.04
오늘은 생성형 ai 경진대회에서 발표했던 Muuvi 프로젝트의 결과가 나와 회고록을 작성해보고자 합니다. 먼저 결과부터 공개하자면~,,

그래도 3등 안에는 무조건 든다! 라는 마음가짐으로 임했던 프로젝트고, 결과물 자체도 나쁘지 않았다고 생각했기에 우수상 이상을 기대하며 결과발표를 하루하루 기다려왔었는데, 너무 충격적이게도 장려상을 받아 정말 한시간동안 무한한 회의감과 박탈감... 그리고 번아웃을 느꼈던 것 같다.
뭔가 이번 학기 내내 진행한 프로젝트들의 결과가 잘 안나왔다고 생각하기도 하고, 공들였던 졸업작품도 우수상에서 멈췄기에 정말정말 번아웃을 많이 느낀 것 같다.
그래서 이번엔 정말 제대로 회고해봐야겠다는 생각이 들어 GPT와 상담을 진행했다. 처음엔 발표 시간 초과가 가장 큰 문제라고만 생각했는데 대화를 통해 내가 놓쳤던 다른 지점들도 꽤 명확해졌다.
첫 번째로, 발표 시간 문제는 확실히 컸다. 다른 팀들도 초과한 경우가 있었지만, 나는 특히 내용이 많다 보니 스토리 구조가 너무 장황해졌고, 핵심을 빠르게 전달하지 못했다. 다시 생각해보니 Muuvi의 핵심 USP가 ‘무드 기반 추천 + 벡터 기반 시맨틱 검색 + 하이브리드 추천’인데, 이 중요한 요소가 발표 후반부에 위치해 있었다는 점이 너무 아쉬웠던 것 같다.
두 번째로, 나는 서비스를 기획할 때 디자인씽킹 기반 구조화를 가장 중요하게 생각한다. 문제 정의 → 인사이트 → 해결 방식 → 기술 적용이라는 흐름인데, 이번 발표에서는 기획·디자인·엔지니어링이 모두 들어가다 보니 오히려 선택과 집중이 흐려져 보였을 가능성이 있다. 심사 기준과 어긋났던 부분이 크다고 느꼈다.
마지막으로, 실무에서는 Pitch Deck / Full Document / Tech Spec처럼 목적에 따라 문서를 분리해 사용한다는 조언을 듣고, 이번 발표에서 내가 너무 많은 것을 한 번에 담으려 했다는 걸 깨달았다. 다음 프로젝트에서는 발표 버전과 기술 문서를 명확히 구분해 더 날카롭게 전달할 수 있도록 해야겠다는 생각이 들었다.
이번 결과는 아쉬웠지만, 덕분에 더 성장할 수 있는 지점을 명확히 볼 수 있었다. 다음에는 더 나은 구조, 더 명확한 메시지, 더 효율적인 발표로 좋은 결과를 만들어보고 싶다!
'[ Project ]' 카테고리의 다른 글
| [Project] React + Tailwind CSS로 구현해본 글래스모피즘 (0) | 2025.11.13 |
|---|
[Project] React + Tailwind CSS로 구현해본 글래스모피즘
[ Project ]2025. 11. 13. 11:182025.11.13
다들 안녕하세요👀 저는 어제 졸업작품 최종 발표를 마쳐 약간 홀가분해진,, 상태랍니다 굉장히 오랜만에 작성하는 글이네요. 다음주 화요일이 교내 AI 경진대회 심사일이라 관련 개발을 진행하는 중인데요, 디자인은 대충 끝내두고 기능 개발을 먼저하고 있는데 이번에 적용하려고 했던 글래스모피즘 효과가 생각보다? 간단하지 않아 정리하려고 합니다.
먼저 하단 네비게이션 바에 글래스모피즘 효과를 적용하려고 구상했고, Tailwind CSS의 backdrop-blur와 bg-white/30만 쓰면 간단히 끝날 줄 알았는데, 생각지도 못한,, 여러 난관을 겪었습니다.
보통의 네비게이션 바를 구현할 때 flex-col과 sticky를 사용하여 구성한다고 생각했었습니다. 따라서 별 생각 없이,, 원래 하던대로 계층 구조를 설정했었습니다.
<div className="w-full h-screen bg-white flex flex-col overflow-hidden">
<div className="flex-1 overflow-y-auto bg-white">
{/* 콘텐츠 */}
</div>
<div className="sticky bottom-0 z-30">
<BottomNavigation />
</div>
</div>
이런식으로 구성을 했었고, 로컬 서버에서 테스트 해보니 음,, 하단을 전부 가리는 일반적인 네비게이션 바를 볼 수 있었습니다.

잠깐 생각을 해보니 이렇게 코드를 작성하게 되면 콘텐츠 영역(flex-1)과 네비게이션 영역(sticky)부분은 형제 관계이기 때문에 flex-1은 네비게이션 바를 제외한 상단 공간까지만 콘텐츠를 채운다는 걸 알았습니다.
콘텐츠 자체가 네비게이션 바 뒤에 없기 때문에 backdrop-blur를 적용해도 흐릿하게 만들 대상이 없어 효과가 나타나지 않았구요.
아 그러면 absolute 써서 오버레이로 띄우면 되겠다~! 싶어서 커서를 사용해
// 1. 최상위 컨테이너에서 flex-col 제거
<div className="w-full h-screen bg-white relative font-pretendard overflow-hidden">
{/* 2. 스크롤 영역이 h-full을 차지하고 스크롤됩니다. */}
{/* pb-24는 하단 네비게이션에 가려지지 않을 여백입니다. */}
<div className="h-full overflow-y-auto bg-white pb-24">
{/* 콘텐츠 */}
</div> {/* 스크롤 영역 끝 */}
{/* 3. 네비게이션이 콘텐츠 '위'에 'absolute'로 떠 있게 됩니다. */}
<div className="absolute bottom-0 left-0 right-0 z-30 pt-4 pb-2 pointer-events-none">
<div className="pointer-events-auto">
<BottomNavigation />
</div>
</div>
</div>
이렇게 코드개선을 진행했습니다.
콘텐츠 영역 자체도 flex-1 대신 h-full을 사용해 부모 높이까지 꽉 채우도록 했고, pb-24를 넣어서 스크롤을 맨 아래까지 내려도 마지막 부분의 콘텐츠가 네비게이션 바 뒤에 가려지지 않도록 설정했습니다.
또한 네비게이션도 sticky대신 absolute bottom-0을 사용해 페이지 하단에 고정시키도록 했구요.
하지만 이렇게 구성을 해도 글래스모피즘이 잘 뜨지 않았습니다,,🥲 아무리 고민을 해도 답이 안나와서 여러 블로그+제미나이와의 토론을 진행했는데, 결과가 생각보다 너무너무 허무했습니다.

초기 설정단계에서 구성했던 요소인 App.tsx의 bg-white가 적용되어 있어 저 부분을 제거하니 잘 표시되는 모습을 확인할 수 있었습니다. 이전에도 몇번 해봤던 작업이였기에 안일하게 생각하던 부분들이 발목을 잡았던 것 같습니다.

도움이 되었길 바라며,, 오늘도 CSS 레이아웃과 DOM 구조는 중요하다는걸 깨닫는 하루였던 것 같습니다.
'[ Project ]' 카테고리의 다른 글
| [Project] Muuvi 프로젝트 회고 (0) | 2025.12.11 |
|---|
[DND] DND 13기 회고록
[ DND ]2025. 10. 2. 14:062025.09.12
너무너무 바쁜 여름을 보내고 늦었지만 DND 회고록과 함께 돌아왔습니다~,,
사실 봄부터 준비해서 호기롭게 여름인턴과 동아리를 많이많이 지원했었는데요. 서류탈락도 락이라고 다 떨어진 줄만 알아서 열심히 학교생활과 개발만 하던 중,,

먼저 DND라는 곳은 '프로젝트에 즐거움을, 모두에게 기회를'이라는 슬로건을 가진 IT 비영리 단체이며 8주간 개발자, 디자이너들이 모여 협업하고 프로젝트를 만드는 동아리인데요.
서류심사 이후 따로 테스트 과제나 면접 없이 바로 활동을 시작하는 구조였고, 저는 7월 2일에 슬랙에 들어오게 되었습니다. 그리고 바로 7월 5일에 OT를 진행했는데 아쉽게도 온라인 OT 진행을 희망하는 참여자 분들이 많아 OT는 온라인으로 진행했고, OT에선 간단한 DND 소개와 Q&A 세션, 팀 매칭 발표 이후에 팀별로 디스코드에서 간단한 인사와 스몰토크를 했었어요.
우리 팀의 첫 인상은 '되게 조용하다,,'였는데 백엔드 파트에 계신 한분께서 하트페어링의 우재씨랑 목소리(+사투리)가 너무 비슷해서 깜짝 놀랐습니다,, 그리고 평균 연령도 생각보단 높은 편이였어서 민폐되지 않고 열심히 해야겠단 생각이 컸는데요, 그리고 이때 스몰토크를 하면서 단톡방을 팠었는데 추후에 운영진분께서 '잡담을 제외한 내용은 아카이빙을 위해 슬랙이랑 디스코드를 써야한다'라고 하셔서 규제가 생각보다 많구나 싶었습니다,,🥲

우리 조는 사실 3주차에 기획을 갈아엎었는데 기존 기프티콘 교환 서비스에서 디지털 디톡스 서비스로 바뀌게 되었어요. 사유는 우리가 구상한 MVP모델은 메리트가 많이 없을 것 같기도 했고, 기능구현에 제약이 너무 많아서,,였습니다. 디자이너분께서 요즘에 취업할 때 기획력을 많이 여쭤보고 필요로 하는 편이다. 라고 하셨고, 이전에 주제 선정할 때 나왔던 이 주제를 다뤄보고 싶다고 하셔서 디지털 디톡스 서비스로 바꾸게 되었어요.
하지만 앱으로 기획을 했던 서비스라서 스택이 웹이였던 우리 프론트팀에 문제가 조금 생겼었고, 스크린타임과 앱 별 사용량을 가져올 수가 없었기에 백엔드에서 랜덤값 + 로직 처리 후 스크린타임 api를 구현해서 웹앱에 연동하는 식으로 구현을 진행했습니다. 추가로 글 작성 시점 (25년도 9월 26일) 기준으로는 열심히 pwa 패키징을 하고 있는데요.. 자꾸 말을 안들어서 고민입니다. 어려워요 패키징...



일정이 있으셨던 디자이너, 프론트분을 제외하고 백엔드 두분 + 저까지 이렇게 셋이서 중간발표에 참여했는데요, 발표 이후 퀴즈랑 직군별로 대화할 수 있도록 자리도 만들어주시고, 돌아다니시면서 얘기해주시는거 보고 운영진분들이 고생이 정말 많으시겠구나 싶었습니다,, 이날 전까지 기획을 픽스하고, 기획 관련해서 발표하는 자리였는데 팀장인 제가 발표를 진행하게 되었고, 백엔드 두분은 뒤에 일정이 있어 회식까지 가시진 못했는데 새로운 분들을 많이 만나서 그래도 매우매우 알찼던 하루였습니당.
이후 개발을 쭉 진행했고, 다솜+DND+생일이 겹쳐 너무너무 바쁜 8월을 보냈던 것 같아요...

기능적으로 어렵다!라는건 없었지만 코드 최적화와 협업에서 소통하며 코딩해야하는 점에 있어서 아직 많이 부족한 점이 많아 중간중간 다른 프론트분께 많이 배우기도 했고, 웹 개발의 세계는 넓구나라는걸 정말 뼈저리게 느꼈던 개발 시간이였습니다..

최종발표는 5분정도의 기획안 발표로 진행되었고, 모든 팀(10팀)의 발표 이후 체험부스를 돌아다니며 직접 서비스를 체험하는 식으로 운영되었는데요. 시간이 짧기도 했고, 교대로 돌아가며 우리 부스를 운영해야 했기에 모든 서비스를 체험해 볼 수는 없었다는 점이 조금 아쉬움으로 남습니다,,


너무 좋았던 점은 주차 별로 가이드라인을 제공하고 있어 주차별 회의와 가이드라인만 모두 지켜도 최소한의 결과물은 나온다는 점이였고, 운영진 분들이 정말 좋으신 분들이라는 점. 그리고 현업자:취준생:대학생 비율이 저희 조 기준으로는 3:1:2 였는데 다들 너무 잘하시는 분들이셔서 팀원 분께 코드리뷰도 받고, 팔로우하며 프로젝트를 진행해본게 지금 생각해봐도 귀한 경험으로 느껴집니다. 뭔가 다른 팀플이나 프로젝트에선 늘 이끄는 역할이였는데 여기선 따라가는 역할로 정말 많이 배우고(어려웠지만) 본인의 약점을 잘 찾을 수 있는 시간이였어서 뿌듯함이 많이 남는 것 같아요.
아쉬웠던 점으로는 현직자분들의 비중이 좀 있기에 회의 일정 잡기가 쉽지 않다는 점과.. 다른 조들과 친해질 일이 딱히 없다는 점..?(사실 저희 조도 회의만 많이 했던 것 같아요) 그리고 기간이 8주로 정말정말 짧기 때문에 퀄리티 높은 결과물을 내기 쉽지 않다는 점인 것 같아요. (근데 아마 이건 케바케일거 같긴 합니다,, 잘하시는 분들만 계신다면 충분히 해내지 않을까 싶어요)
또 신기했던 점은 다른 it 동아리 하시는 분들이 많아서 업계가 정말 좁구나 싶었어요,, 어? 저도 여기 했었어요! 저두요! 이랬던 기억이 많습니다. 그리고 저희 팀이 다들 참여도도 좋고 실력도 좋아서 좋은 시간을 보내지 않았나 싶어요,,, 무튼 너무 좋은 경험이였고 다른 분들도 꼭 참여해보시길 추천드립니당

[DASOM] 솜커톤 2기 회고록
[ DASOM ]2025. 7. 13. 04:302025.07.07

전공동아리 다솜에서 솜커톤을 열었던 회고록을 작성해보려고 한다.
시간이 조금 지났기에 잘 적어질지는 모르겠지만,, 기록을 남긴다는데에 의의를 두고 작성해보겠습니다!
2025년도 5월 10일에 예정된 솜커톤은 다솜 학술팀장인 내가 전체적인 기획, 진행 및 총괄을 맡게 되었다.
지난 솜커톤에 참여자로 참여했었을 때에 아쉽다고 생각한 점이 많았고, 구름톤과 프로젝트들을 겪으며 조금이나마 성장한 내가 이끌어볼수 있겠다라는 생각이 컸기에 먼저 총대를 멘 것도 있었다.
먼저 컴소과 만으로 이루어진 해커톤을 진행할때엔 사전에 준비되어야 할 것이 너무 많고(교내엔 해커톤을 해보기엔 준비가 되지 않은 2, 3학년들이 많을거라고 생각했다), 모든 팀의 프로젝트를 코드리뷰까지 하며 진행할 수는 없다고 생각했고, 1학기에 아이디어톤, 2학기엔 개발 해커톤으로 진행하는게 옳다는 생각이 들었다. 이를 바탕으로 1, 2학년들의 경험을 채워주자는 취지로 아이디어톤을 구상하게 되었고, 정규 교과과정에 UI/UX관련 수업이 따로 없기에 시각디자인과 분들도 함께 참여하면 좋을 것 같다는 생각으로 시디과 전공동아리를 조금 찾아보게 되었다.
교내 시디과 전공동아리는 구미래, 애드립, 미디어랩으로 3개의 동아리였으며, 동아리 인스타그램이 가장 잘 활용되는 것 같아보이는 구미래측에게 먼저 연락을 보냈다. (사실 인스타로 연락을 보내면서도 매우 떨면서 보냈던 기억이 있다...) 근데 이틀이 지난 뒤에도 답변이 없으셔서 아 다른 동아리 쪽에 연락드려야하나.. 싶었고, 일단 개인 카톡으로 따로 연락을 드리니 굉장히 긍정적으로 반응해주셔서 나름 한시름 놓은 기분이였다.
그렇게 4월 7일에 연락을 넣었고, 다솜 임원진들과 회의를 하며

이렇게 구상을 진행했다.

그리고 구미래측과 대면 미팅은 4월 10일에 진행했는데 아이디어톤 설명과 진행내용 등 간단하게 준비해서 설명 드린 뒤에 일정 관련해서 디테일한 부분에 대해 얘기 나누고 헤어졌다.

이후 홍보 포스터도 붙이고,, 원래는 모집을 구글폼을 통해 받으려고 했는데, 아주 강력한 어필을 통해 구글 폼이 아닌 다솜 홈페이지에서 인원을 받았다. (매우 뿌듯했음)
그리고 우리 배너 후보들




구미래 분들이 너무 디자인을 잘해주셔서 기뻤다.. 고르는데 오만시간 쓸뻔......
그리고 키링이랑 스티커랑 명찰도 구매했다.



웰컴키트로 열심히 준비했고, 키링과 명찰 디자인은 구미래 대표님께서 한 80%이상을.. 맡아주셨다.

그리고 PPT 만들어준 수현누나 너무 고생 많았다...
2025.07.12
솜커톤을 마치며

노션엔 이렇게 정리해서 진행했고, 다솜 운영진, 심사위원, EL 운영진, 구미래 운영진 이렇게 4팀과 얘기를 나눠야 했던 총괄 자리였기에 일주일에 회의 3번, 튜터링, 스터디 진행까지 정말정말 바빴던 4월이였다.
해커톤 운영은 처음이였고, 생각보다 많은 인원(54명)이 참여해주셔서 힘들기도 했지만 정말 좋은 경험치를 얻게 된 느낌이였다. 개발보단 뭔가 운영 기획 쪽이 더 적성에 잘 맞는 기분도 들고 그랬고..
사전교육일에는 오랜만에 긴장을 많이하고 발표한 발표였던 것 같다. 자주 발표를 맡게되다보니 한숨쉬며 '또 해야지 어떡해..'라는 생각으로 긴장없이 발표를 하던 최근이였는데, 뭔가 내가 50명이 넘는 자리에서 무언갈 가르치고, 방향성을 잡아줘야한다는 사실이 조금은 무겁게 다가왔던 것 같다. 전공에선 알려주지 않는 기획이란 직무에 대한 내용이기도 했고, 많은 분들이 나를 이정표로 삼아 이번 해커톤의 기획을 진행한다는 점 역시도 가볍게 느껴지진 않았던 것 같다. 근데 한 3개월이 흐른 지금 시점에선 그냥 가볍게 생각해도 됐을 법 하다고 느껴지기도 한다.
기획 가이드 템플릿, 사전교육, 행사 계획서부터 팀 편성, 당일 레크레이션과 발표 진행까지. 많은 일을 맡기도 했고, 함께 진행해주신 구미래, EL 운영진 분들이 너무 잘 대해주셔서 애정이 많이 가는 솜커톤인 것 같고, 그렇게 매끄럽지만은 않은 행사 진행이였고, 비도 오는 바람에 고생을 많이 하셨을 참가자 분들이였겠지만, 나름 뜻 깊은 시간이고 배울 점이 있던 시간이였기를 정말 많이 바랬던 것 같다.
사실 이번 년도엔 아 내가 기준점이라던가 욕심이라던가 그런 부분이 조금 있구나라는걸 체감하고 있는데, 이런 욕심을 잘 따라와주는 다솜 운영진 분들과 졸작 팀원들한테 너무 고맙게 느껴질 때가 종종 있다. 참가자, 운영자, 심사위원 분들까지 다들 너무 고생 많으셨고 다음에도 기회가 된다면 꼭 뵙고 싶다는 말을 하며 이번 회고록을 마치도록 하겠다~!


[토스] CLI 기반 리액트 세팅 툴킷 배포
[ Toss ]2025. 5. 22. 11:322025.05.22
마감일이 정말 코앞으로 다가왔다,, (이틀남음) 정말 마지막으로 추가기능과 배포를 진행하려고 계획을 짰었고,
먼저 Cypress를 사용한 E2E 테스트를 추가하면 어떨까..? 싶었는데 아무래도 오버 엔지니어링이 아닌가 싶어 취소하고 CI/CD 파이프라인 구축을 시작했다.
주요 목표는 Github Actions로 테스트 및 빌드 자동화 + 린트, 포맷팅, 타입 체크 자동화 및 npm 배포 자동화를 잡았다.
먼저 Github Actions 워크플로우 파일을 작성해주었다.


이후 package.json에 테스트 스크립트(jest)를 추가해주고, Jest 설정 파일을 작성했다.

그리고 npm 접근 토큰을 받기 위해 npm 로그인 후 토큰을 생성해주었다.


그 후엔 npm 배포를 진행했다.

이후 package.json에 Github 저장소 url을 업데이트 해주고 아래의 단계로 업데이트 후 배포를 진행했다.

이후 npm publish --dry-run으로 본 배포 전 시뮬레이션 진행

마지막으로 npm publish로 본 배포를 진행했으며 태그 1.1.0과 함께 잘 배포가 되었다.



회고를 조금 해보자면 프론트엔드에서 Github Actions와 npm을 통한 배포는 처음이였는데 새로운 경험이였고, CLI를 구성하면서 많은 고민을 했던 것 같다. 앱/웹 서비스를 제작하는 것과는 다른 느낌이구나라는 것을 몸소 느낄 수 있던 기회였다고 생각한다.
'[ Toss ]' 카테고리의 다른 글
| [토스] CLI 기반 리액트 세팅 툴킷 기능 추가 (1) | 2025.05.20 |
|---|---|
| [토스] CLI 기반 툴 제작하기 (1) | 2025.05.18 |
[GDG] Build with AI in Incheon 회고록
[ GDG ]2025. 5. 20. 16:212025.04.05
GDG Build with AI in Incheon 2025 후기
사실 행사 전날까지도 솜커톤 준비 + 졸작 디자인 끝내기에 바빠 차라리 아침 일찍 준비해서 근처 카페에서 작업하다가 시간 맞춰 들어가는게 좋을 것 같아 아침 일찍 인천으로 출발했다.
역앞 스타벅스에서 졸작 UI/UX를 조금 작업 한 뒤 12시 40분이 되어 만나기로 했던 인하대역 5번 출구 앞으로 이동했다.


세션은 한 타임당 6개의 세션이 진행되며, 호실이 3개로 나뉘어져 있어 한 타임이 끝나고 다른 호실로 자유롭게 이동하여 세션을 들을 수 있도록 설계되어 있었다. 실습이 가능한 워크샵 세션도 있었는데, 듣고싶은 세션과 타임이 겹쳐 아쉽게도 참여하진 못했다.
첫번째 세션
첫번째 세션은 106호 에어프레미아 랩스의 Frontend Lead이신 이승민님의 미국 교환학생 가서 무료 홈스테이 살면서 인턴 취업하기를 듣게 되었다. 토익 500점으로 시작해 교환학생 신분으로 가서 무료 홈스테이를 지내면서 외부인턴까지 하시고, 정말 듣기 쉽지 않은 썰이였던 것 같다,,, 비록 개발과는 직접적 연관이 없어 개발 관련 도움이 되진 않았지만, 도전을 해보는 데에 있어 두려움을 가지면 안되겠다는 생각이 강하게 들었고, 첫 세션이였기에 조금 쉬운 난이도의 세션이였던 것 같다.
두번째 세션

두번째 세션은 무려,, 마이크로소프트 Advocate로 계신 유 저스틴님의 내 PC안의 흑염룡이 AI 에이전트라니를 들었다. 사실 조금 어려운 내용들이 섞여있었는데, 일단 코파일럿은 생산성 도구일 뿐, 앱(서비스)가 똑똑해지는 건 아니라는 말이 되게 인상깊었던 것 같다. 요즘 관심있던 에이전트 얘기가 나와서 집중해서 들었고, 특히 .NET Aspire에서 로컬 모델까지 사용이 가능하다고 실시간으로 보여주신 점이 더욱 집중하게끔 만들었던 것 같다. 이번 졸작에서도 AI 에이전트를 사용할 예정인데, 그냥 LLM을 띡 넣는게 아니라 프롬프트 구조 설계와 역할 분리가 정말 중요하다는 것을 알게 되었다.

세번째 세션
세번째 세션은 GDG 인천의 이종훈님이 연사를 진행해주셨고, 세션명은 Spring 지식으로 C# 백엔드도 가져가기였다. SpringBoot의 특징인 POJO 기반, DI, AOP 등등 전부 C#에서도 가능하고, 코드를 직접 보며 구조가 비슷한 걸 파악하니 그렇게 차이가 없다고 느꼈다. 또한 MS의 생태계와 스프링 생태계의 미묘한 차이도 알게되어 좋았던 것 같다. 조금 아쉬웠던 점이라면,, 발표에 있어 진행이 매끄럽진 않았던 점이 조금 아쉬웠다. 아직은 쓸 일이 없겠지만 나중에 백엔드 작업을 할 때 사용하게 될 수도 있을 것 같다.
네번째 세션
코드트리 CEO의 이승용님께서 AI 시대의 코딩테스트 준비법에 대해 알려주셨고, 아는 내용 반, 모르는 내용 반이였어서 재밌게 들었던 것 같다. 개념공부 - 적용 - AI 활용 흐름으로 코테 준비를 하는 것이 좋다고 하셨고, 실전처럼 연습하고 AI로 피드백을 받는 과정이 좋다고 느꼈던 것 같다. 또한, 그냥 코드의 답만 물어보는 것이 아니라, 왜 이 방식인지, 내 로직이 비효율적인 이유를 AI한테 물어보는 루틴을 만드는 것이 중요하다고 말씀하셨다.

다섯번째 세션
PostMath 백엔드 엔지니어 정현서님의 Go와 LLM으로 시작하는 두근두근 가상연애 도전기,,이였는데 정말정말 레전드세션이였다. 직접 좋아하는 애니의 캐릭터를 AI에게 학습시켜서 챗봇,,을 만든 건데 그 안에 RAG와 실제 구현 얘기가 인상 깊었다. Go에 대해서 무지했기에 흥미를 가지는 세션이였던 것 같다. 그리고 감기에 걸리신 상태로,, 작업을 마무리 하셨다는게 정말 대단하다 싶었다.


마지막 세션

마지막으론 에어프리미아 랩스의 김석용님의 플러터를 사용해 본 네이티브 개발자의 소회를 들었다. 거의 유일한 앱 개발 관련 세션이였고, 아는 내용이 많아 재밌게 들었다(그리고 벽도 느꼈다). 초창기 플러터 코리아의 설립자이시기도 했고, 네이티브 개발자에서 넘어가셨다는 점이 진짜 인상깊었다. 다트 언어 자체는 JIT와 AoT로 속도를 커버하고, Impeller로 컴파일을 최적화 한다면 문제 없이 사용 가능하며, 비지니스 로직까진 플러터로도 커버 가능하다는 점을 알게 되었는데, 결국 헤비한 기능은 네이티브를 사용하는게 좋을 것 같다고 하셨다. 이 세션 덕에 크로스 플랫폼 언어들을 어디까지 쓰고, 어디부턴 네이티브로 넘길지 기준을 조금 잡을 수 있었던 것 같다.
이번 GDG 인천은 재밌게 들었던 세미나였던 것 같다. 가끔 혼자 온/오프라인 세미나에 가곤 했었는데 확실히 같이 듣는 친구들이 있고, 세션마다 느낀점 공유도 가능하니 더 재밌었던 것 같다. 각자 분야도 다르고, 사용하는 기술도 달랐지만 결국 공통된 키워드는 도전, 시도, 배움이였던 것 같다. 마지막으로 느낀 점은,,, 공부 더 열심히 해야겟지,,, 뭐든 일단 부딪쳐보도록 해야겠다...? 무튼 언젠간 나도 저런 세미나에서 연사를 하는 날이 오게끔 발전해야할 것 같다. 이번 달도 파이팅~,,
[토스] CLI 기반 리액트 세팅 툴킷 기능 추가
[ Toss ]2025. 5. 20. 12:382025.05.20
지난 번 만들었던 react-kit-cli가 기능적으로 아직 부족한 부분이 많다고 생각되어 상태관리 툴인 redux, recoil에 대한 세팅까지 추가로 자동화 시키는 기능을 추가했다.
먼저 package.json에 관련 의존성을 추가하고, Redux Store 설정을 위한 기본 템플릿을 생성했다.


카운터 슬라이스 예제와 같은 경우엔 아래와 같이 작성해주었다.

이후 Recoil 설정을 위한 기본 템플릿을 지정해주었고, CLI에도 상태 관리 옵션을 추가해주었다.(bin/index.ts)


react-kit init test-redux-project --with-redux --with-tailwind 명령어로 새 프로젝트를 생성해주었고,

이후 npm install, npm run dev를 통해 브라우저 환경에서 테스트를 진행했다.

기본적인 예제를 추가해줌으로서 처음 접하는 개발자들도 빠르게 설정을 완료할 수 있도록 작업하였고, 타입스크립트와 함께 설정이 가능하다는 점이 장점이라고 생각한다.! 다행히 이번 기능 추가는 어렵지 않아 빠르게 작업할 수 있었던 것 같다,,,
'[ Toss ]' 카테고리의 다른 글
| [토스] CLI 기반 리액트 세팅 툴킷 배포 (5) | 2025.05.22 |
|---|---|
| [토스] CLI 기반 툴 제작하기 (1) | 2025.05.18 |
[토스] CLI 기반 툴 제작하기
[ Toss ]2025. 5. 18. 15:522025.05.16
[토스] 25년도 1학기 Frontend Platform Assistant 모집 공지를 우연찮게 SNS를 통해 접하게 되었고, 이번 전형은 이력서 없이 리포지토리를 제출하는 모집 전형이란 걸 알게되었다. 제출 가이드는 아래 내용과 동일하다.
- 서비스가 아닌 라이브러리 또는 CLI 도구를 다루는 리포지토리이면 좋아요.
- 프로젝트가 어떤 문제를 해결하고자 하는지 알 수 있는 README가 있으면 좋아요.
- 빌드 또는 린트, 의존성 설정을 올바르게 하기 위해 노력한 리포지토리이면 좋아요.
- 코드에 버그가 없도록 추가한 CI Check 및 테스트가 있으면 좋아요.
- 라이브러리 또는 CLI 도구의 레퍼런스 및 가이드를 포함하고 있으면 좋아요.
- 코드 파일을 수정하기 쉽도록 디렉토리 구조 및 코드 품질을 고민한 리포지토리면 좋아요.
- TypeScript를 정확하게 사용하기 위해 고민한 리포지토리면 좋아요.
인턴십은 필수라고 생각하기도 했고, 토스 인턴 공고를 본 것도 기회라고 생각해 열심히 준비해야겠다는 생각이 들었다. 그래서 기존에 진행했던 서비스를 제출하는 것 대신, 라이브러리나 CLI 도구를 다루는 리포지토리를 한번 만들어보자는 생각으로 툴을 제작하기 시작했다.
먼저, 기간이 일주일밖에 없기 때문에 기획을 빠르게 진행했다. LLM을 활용해서 무언갈 만들면 좋겠다는 생각이 먼저 들었는데, 현실적으로 불가능 할 것 같아 리액트 프로젝트를 빠르게 만들어주는 CLI를 구성해보기로 결심했다. 보일러플레이트를 만든 기억도 있고, 팀 프로젝트에선 늘상 초기 빌드 및 환경설정을 담당했기에 익숙하지 않을까해서 이 주제를 고르게 되었다.
프로젝트명은 react-kit-cli로 정했고, 내가 원하는 프론트엔드 세팅을 한번에 세팅해주는 CLI 툴로 기획을 좁혔다. 먼저 깃허브 리포를 생성하고, 초기 설정을 진행해주었다. ts-node로 CLI를 실행하려다 ERR_UNKNOWN_FILE_EXTENSION 오류가 발생했고, 이는 type: module 설정과 CommonJS 실행 방식 간의 충돌 때문이었다는 것을 확인하게 되었다. 이후 CLI 도구 특성상 CommonJS가 더 안정적이라는 커뮤니티의 조언을 반영해 ESM 설정을 제거하고 해결했다.

1. bin/index.ts에 타입스크립트로 CLI 코드를 작성
2. npm run build 명령어로 타입스크립트를 자바스크립트로 컴파일
3. 컴파일 된 dist/bin/index.js를 실제로 실행하는 구조로 설계했다.
index.ts의 코드를 보자면
#!/usr/bin/env node
import { Command } from "commander";
import chalk from "chalk";
import path from "path";
import fs from "fs-extra";
const program = new Command();
program
.name("react-kit")
.description("리액트 프로젝트 세팅 도구")
.version("1.0.0");
//기본 명령어(init)
program
.command("init")
.description("기본 템플릿 적용")
.argument("[projectName]", "프로젝트 이름")
.option("--with-tailwind", "Tailwind CSS 포함")
.option("--with-vitest", "Vitest 포함")
.action(async (projectName, options) => {
try {
// 1. 프로젝트 이름 확인
if (!projectName) {
console.log(chalk.red("프로젝트 이름을 입력해주세요."));
process.exit(1);
}
// 2. 프로젝트 폴더 생성
const projectPath = path.join(process.cwd(), projectName);
if (fs.existsSync(projectPath)) {
console.log(chalk.red(`'${projectName}' 폴더가 이미 존재합니다.`));
process.exit(1);
}
console.log(chalk.green(`'${projectName}' 프로젝트를 생성합니다...`));
await fs.mkdir(projectPath);
// 3. 템플릿 복사
const templatePath = path.join(__dirname, "../templates/base");
await fs.copy(templatePath, projectPath);
// 4. 옵션에 따른 추가 설정
if (options.withTailwind) {
console.log(chalk.blue("Tailwind CSS 설정을 추가합니다..."));
// TODO: Tailwind 설정 추가
}
if (options.withVitest) {
console.log(chalk.blue("Vitest 설정을 추가합니다..."));
// TODO: Vitest 설정 추가
}
console.log(chalk.green("\n프로젝트 생성이 완료되었습니다!"));
console.log(chalk.yellow("\n다음 명령어로 시작하세요:"));
console.log(chalk.cyan(` cd ${projectName}`));
console.log(chalk.cyan(" npm install"));
console.log(chalk.cyan(" npm run dev"));
} catch (error) {
console.error(chalk.red("프로젝트 생성 중 오류가 발생했습니다:"), error);
process.exit(1);
}
});
program.parse();
이렇게 작성되었다.
`commander`와 `chalk`로 CLI 툴을 구성했으며, Tailwind와 Vitest에 대한 설정도 추후에 추가 할 예정이다.
위에 index.ts로 생성된 프로젝트는 아래의 폴더 구조를 가진다.
my-project/
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── src/
├── App.tsx
├── App.css
├── main.tsx
└── index.css
2025.05.17
Tailwind와 Vitest에 대한 설정을 진행했다.
옵션 조합에 따라 템플릿 디렉토리에서 설정 파일을 복사한다.
처음엔 tsc 빌드 시에 templates 폴더까지 컴파일 되어 문제가 생겼는데, tsconfig.json에서 제외시키고 빌드 후에 npm run copy-templates로 수동 복사하게 처리했더니 빌드 문제가 해결되었다. 또한, fs.copyFileSync는 디렉토리 복사가 안되어 fs-extra의 copySync로 변경해주었다.
이후 테스트를 진행해주었다.

cd test-cli/my-test-project && npm run dev로 경로 이동 후 테스트를 진행했으며 다행히 문제 없이 빌드되었다.

이후 테스트 파일을 환경설정해주었다. Tailwind CSS와 Vitest 테스트 환경을 설정하고, Vite 설정 파일을 ESM 방식으로 변환했고, 중복되는 JS 파일을 제거하고, tsconfig에 테스트 파일도 포함되도록 수정하면서 전체 프로젝트를 TypeScript 중심으로 정리했다. Vitest를 통해 아래와 같은 테스트 설정 파일도 만들어주었다.

2025.05.18
오늘은 ESLint, Prettier 설정 자동화 및 코드 리팩토링을 진행 할 예정이다.
먼저 ESLint, Prettier 관련 플러그인과 설정 패키지 설정을 진행해주었고, .eslintrc.json을 추가하여 React, TypeScript, Prettier와 연동된 린트 규칙 적용해주었다.

또한 Prettier 설정 파일인 .prettierrc도 추가해주었고, 세미콜론, 따옴표, 줄 길이등을 명시해주었다.

이후 npm run lint로 코드 검사를 진행했다.

이후 오류들을 npm run lint:fix로 자동 수정해주었고,

마지막으로 npm run format으로 Prettier로 코드 포맷팅을 진행하였다.

이후 코드 리팩토링을 진행했다. 코드를 모듈화 하는 것을 첫번째 목표로 잡았다, 타입 정의, 설정, 유틸리티 함수들을 각각 src/types, src/config, src/utils로 분리했고, 타입스크립트를 사용한 이유를 보여주고 싶었기에 타입 안정성을 높이려고 해봤다. 입터페이스를 통한 타입 정의를 진행했고, 함수의 반환 타입을 명시해주었다. 마지막으로는 에러처리 개선에 신경썼다. 일관된 에러 처리 패턴을 적용하려고 했고, 이를 진행하며 중복 코드도 여럿 제거했다.

아래는 깃허브 링크 첨부합니당
https://github.com/dohy-eon/react-kit-cli
GitHub - dohy-eon/react-kit-cli
Contribute to dohy-eon/react-kit-cli development by creating an account on GitHub.
github.com
'[ Toss ]' 카테고리의 다른 글
| [토스] CLI 기반 리액트 세팅 툴킷 배포 (5) | 2025.05.22 |
|---|---|
| [토스] CLI 기반 리액트 세팅 툴킷 기능 추가 (1) | 2025.05.20 |
[AWS] 스프링부트 프로젝트 배포하기
[ AWS ]2025. 5. 15. 10:012025.04.18

지난번에 ec2를 사용한 db 클라우드화를 진행했는데 이후 백엔드쪽 배포도 ec2를 사용해 진행하려고 하니 프리티어로는 버틸 수 없다는 결론이 나왔다. 그래서 두가지의 해결책을 찾았는데 첫번째는 인스턴스를 따로 생성해 스프링부트 배포용 인스턴스 한개, db배포용 인스턴스 한개를 사용하는 방법과 기존 ec2로 배포한 db서버를 rds로 마이그레이션을 진행하고, ec2를 스프링부트 배포용으로 사용하는 방법이였다. 고민 끝에 이 김에 rds도 사용해보는게 좋을 것 같다고 생각했고, 마이그레이션을 진행하였다.
마이그레이션을 마친 뒤 해야 할 일이 조금 남았는데 정리하자면
1. 도커설정
2. Github Actions 워크플로우 설정
3. EC2 환경설정
정도이다.
첫번째로 docker 설정을 해주었다.


도커파일은 자바21버전, OpenJDK중 가장 많이 쓰이는 eclipse-temurin을 사용해서 베이스 이미지를 작성해주었고, /tmp 디렉토리를 볼륨으로 마운트해서 build/libs 안의 jar 파일을 app.jar로 컨테이너에 복사하도록 설정해주었다. 관련 자료가 많았기에 큰 어려움은 없었다. docker-compose 같은 경우엔 추후 DB를 로컬에서 띄우는 경우나 redis 같은 부분을 함께 사용하고 싶을때 간편하다는 얘기가 있어 작성하게 되었고, 일단은 .env파일 사용하여 데이터를 넣는 식으로 진행했다.
2025.05.12
두번째로 자동배포를 위해 Github Actions 워크플로우 설정을 해주었다. deploy.yml로 설정해준 뒤, 설정에서 시크릿 키 몇개를 설정해주었다.

코드 자체는 아래처럼 작성하였다.
name: Docker Deploy to EC2
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
# 1. 코드 체크아웃
- name: Checkout code
uses: actions/checkout@v3
# 2. JDK 21 설치
- name: Set up JDK 21
uses: actions/setup-java@v3
with:
java-version: '21'
distribution: 'temurin'
# 3. gradlew 실행 권한 부여
- name: Add execute permission to gradlew
run: chmod +x gradlew
# 4. Gradle build (테스트 제외)
- name: Build with Gradle
run: ./gradlew clean build -x test
# 5. Docker build
- name: Build Docker Image
run: |
docker build -t ${{ secrets.DOCKER_USERNAME }}/moonrabbit-app:latest .
# 6. DockerHub 로그인
- name: Login to DockerHub
run: |
echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
# 7. Docker 이미지 푸시
- name: Push Docker Image to DockerHub
run: |
docker push ${{ secrets.DOCKER_USERNAME }}/moonrabbit-app:latest
# 8. EC2용 pem 키 파일 생성
- name: Generate PEM key
run: |
echo "${{ secrets.EC2_PRIVATE_KEY }}" > private_key.pem
chmod 600 private_key.pem
# env 파일 생성
- name: Generate .env file
run: |
echo "${{ secrets.MOONRABBIT_ENV }}" > moonrabbit.env
# 8.5. EC2에 .env 전송
- name: Copy env file to EC2
run: |
scp -o StrictHostKeyChecking=no -i private_key.pem moonrabbit.env ${{ secrets.EC2_USER }}@${{ secrets.EC2_HOST }}:~/moonrabbit.env
# 9. EC2에 SSH 접속 후 컨테이너 재시작
- name: Deploy on EC2
run: |
ssh -o StrictHostKeyChecking=no -i private_key.pem ${{ secrets.EC2_USER }}@${{ secrets.EC2_HOST }} << EOF
echo "DockerHub 로그인"
echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
echo "기존 컨테이너 중지 및 삭제"
docker stop moonrabbit-app || true
docker rm moonrabbit-app || true
echo "Docker 이미지 Pull"
docker pull ${{ secrets.DOCKER_USERNAME }}/moonrabbit-app:latest
echo "컨테이너 실행"
docker run -d --name moonrabbit-app -p 8080:8080 \
--env-file moonrabbit.env \
${{ secrets.DOCKER_USERNAME }}/moonrabbit-app:latest
EOF
사실 백엔드 배포는 처음이였는데, Docker 관련 공부가 어려웠던 것 같고, 구조파악 하는데 시간을 오래 사용했던 것 같다. 추후엔 이런 이슈를 반복하지 않을 생각으로 주석도 열심히 달며 코드를 짠 기억이 있다.. (이 단계에서 3주정도 걸렸다,,)
어찌저찌 배포는 마치게 되었고, 이제 도메인 할당만 남았는데, 아마 추후에 진행할 듯 하다.

'[ AWS ]' 카테고리의 다른 글
| [AWS] EC2에 mysql 연결하기 (0) | 2025.03.28 |
|---|
[AWS] EC2에 mysql 연결하기
[ AWS ]2025. 3. 28. 11:00
2025.03.28
팀 프로젝트에서 DB를 사용할 때 공용DB를 사용해야하는 경우가 많은데, 그 중에서 제일 많이 사용하는 mysql과 AWS EC2를 연결하는 작업을 정리하려고 한다.
먼저 EC2 인스턴스(리눅스)를 생성한 뒤, mysql 세팅을 진행했다.
sudo apt update 명령어로 apt 업데이트를 진행,
sudo apt install mysql-server 명령어로 mysql을 설치했다.
이후 sudo systemctl start mysql.service 명령어로 구동을 시키고 외부에서 mysql에 접근이 가능하게끔 설정해준다.
먼저 cd /etc/mysql/mysql.conf.d 경로로 이동하고, sudo nano mysqld.cnf 명령어를 사용해 파일을 열어준다.

bind-address를 변경했다면 mysql -u root -p 명령어를 통해 mysql에 접속해주면 되고, 아래의 명령어를 차례로 입력해 새 유저를 만들어준다. (이 프로젝트에선 username은 rabbitHyeon, 비밀번호 1로 설정했다)

이후 생성한 인스턴스를 탄력적 IP에 연결해준다.

마지막으로 mySQL 포트(3306)을 열어준다.


'[ AWS ]' 카테고리의 다른 글
| [AWS] 스프링부트 프로젝트 배포하기 (2) | 2025.05.15 |
|---|
[goorm] 미르미 기록장 - NOV/2024
[ kakao x goorm ]2024. 11. 29. 09:42
2024.11.01
중간고사 끝~,,
사실 이번 중간고사는 정말 신경을 쓰지 못했었다. 시험 전날까지도 해커톤 기능명세서를 작성하고 있었고, 따로 듣는 강의들도 있었기에, 그리고 무엇보다 한두과목을 제외하고는 강의에서 흥미를 느끼지 못했던 점이 컸던 것 같다. 거의 벼락치기 식으로 준비를 했는데... 나쁘지 않은 경험이였다. 이러다 맛들리겠어😥
2024.11.02
단풍톤 첫 회의!
시험이 끝난 바로 다음날 오전 11시, 첫 (공식)회의를 하게 되었다. 기존의 기획안에서 수정이 많이 있을 것 같아 추가기능과 보완점 등을 생각해서 기획을 픽스하자는 의견이였다. 뭔가 백엔드...를 맡고 계시지만 전체적인 부분에서 인호님이 많이 고생하시는게 보여 죄송한 기분이 없지않아 있는데 사실 너무 정신없이 살고 있어 크게 신경써드리진 못할 것 같다. 그래도 맡은 일은 열심히 해야지...
2024.11.05
9UCON 발표일!

프엔팀 발표를 맡게 되었기에 전날에 급하게 대본을 작성하고 발표를 하게 되었다. 발표 자체는 잘 마쳤던 것 같고, 운영진 분들이 준비해주신 스티커, 간식 등 웰컴키트(?)도 너무 귀여웠던 것 같다(아직도 패드에 고양이 스티커 붙여놨답니다)... 막상 이렇게 집에와서 정리하려니까 사진을 못 찍어둔게 한이다... 이걸 다 읽으실진 모르겠지만 감사인사를 하자면 키트 정말 잘 받았다고 하고싶다.
다른 팀들도 스터디를 잘 마친 것 같고 우리팀만 두가지 강의를 들었던 것 같아 뭔가 으쓱했던..? 기억이 있다. 깃헙 사용법도 익히고 좋은 마무리로 남았지만 기간이 짧았기에, 그리고 뭔가 팀원간의 교류는 거의 없었기에 조금 아쉬웠다.
2024.11.08
전공 동아리 프로젝트 심사일
사실 이번 2학기에 동아리를 옮기게 되어 지금 팀들이 하고 있는 프로젝트를 실질적으로 참여하진 않지만 임원진이기에 심사를 하러 가게 되었다. 두팀이 발표를 했고, 아이디어로는 My Closet(온라인 옷 찜목록? 앱) 과 학교 정보 앱이 있었는데 학교 건물들을 직접 그려서 시각화한 부분이라던가 리액트로 앱을 구현했다는게 조금 신기했다. 아이디어가 조금 좋았던 것 같다. (이것두 사진을 안찍어둔게 조금 아쉽네)
2024.11.15
단풍톤 프론트엔드 개발환경 세팅
같은 단풍톤 팀원분이 리액트 네이티브가 처음이시기도 했고, 에뮬레이터 설정에서 헤매고 계셔서 만나서 도와드리기로 했다. 정말정말 둘이서 3시간을 붙잡고 있다가 대여섯번의 노트북 재시작을 한 뒤에야 원인을 해결했다... 리액트 네이티브 cli 사용하시는 분들 환경변수 조심하세요ㅜ
또한 원래 expo를 사용할 생각이였는데 카카오 로그인에서 막힌다는 얘길 듣고 혼자 조금 찾아봤었다. 가능은 한 것 같지만 막상 내가 해보니 로그인 창으로 넘어갈 시에 노트북이 꺼지는... 프로그램을 만들어버려서, 결국 cli로 넘어오게 되었는데 cli는 처음이라 좀 무섭기도 하다.
2024.11.17
빅데이터 분석기사(필기) 수강 완료일

사실 이 재미없는... 강의를 왜 들었는지 막상 다 듣고나니 의문이 생겼다.
어째서,,, 이걸 선택했을까ㅜ 웹이나 앱 부분의 다른 프레임워크나 언어 강의를 들었으면 더 좋았을 것 같고, 어떻게 다 들은지 조금 의문이다... (사실은 내일부터 단풍톤 사전 개발기간이 시작되기에 무조건 오늘까진 다 들어야 했었다..)
그래도 배운점이라고는 음.. 모수 분석 비모수 분석... 많은 그래프들과 이론들...? 예전에 ADsP 공부 할 때랑 조금 비슷한 기분이다. 공부하면서 느낀거지만 아마 빅데이터(이론)쪽으로는 진로를 잡진 않을 것 같다...
2024.11.26
단풍톤 후기
23일 오후 5시에 시작해 24일 12시경에 끝난 첫 개발 해커톤이였다. 우리팀은 조금 일찍 만나 점심먹고, 카페도 들렸다가 여유롭게 현장에 도착했다. 디자인과 백엔드는 90%이상이 끝난 상태였기에 조금 분위기가 여유로웠던 것 같다.(프론트는 아니였다.) 도착하자마자 개발하기 시작했고, 점심도 늦게 먹었던 터라 프론트 팀원분과 저녁을 거르고 남아서 개발을 진행했었다. 참고로 우리 팀은 유학생을 위한 SNS를 개발하게 되었다.


그래도 생각보다 순조롭게 진행되었고, 시간도 충분히 맞출 수 있었던 것 같은데 새벽 3시쯤에 문제가 생겼다,,, 상대방과의 실시간 채팅 기능을 구현하려다 상대방 프로필 페이지 채팅버튼 클릭 -> 채팅목록 -> 1대1 채팅으로 넘어가야 하는데, 자꾸 채팅목록 -> 상대방 프로필 페이지로 콜백되는 오류였다😢
api연동 부분의 함수는 전날 새벽 전부 테스트를 마치고 갔었기에 정말 모르겠었고, 로그를 다 찍어봐도 알 수가 없었어서 멘토님한테 여쭤보러 갔지만... 리액트 네이티브를 다루는 멘토분이 한분도 안계셔서 다른 프론트 멘토님과의 20분간 토론 끝에도 결국 해결하지 못하고 내려오게 되었는데 아직도 왜 그랬던 건진 잘 모르겠다.. (사실 이때 정말 멘탈이 나갔었고,,, 해야하는데 안되니까 너무너무 힘들었었다...)
결국 더미데이터를 넣어 마무리 하게되었고, 애니메이션 json파일을 받아 추가하려고 하였지만 이 역시 라이브러리와 충돌하는 문제로 빼게 되었고, 결국 백엔드에서 준비해준 알림, 번역, 웹소캣 api와 디자이너분이 열심히 수정하신 디자인 수정을 다 끝마치지 못한 채로 날이 밝게 되었다..
그래도 시연과 발표는 어찌저찌 잘 마무리 되었던 것 같고, 아쉬웠던 점은 SNS다 보니 타 SNS와의 차별점을 강조했어야 하는데 그 부분이 조금 어필이 덜 되었던 것 같고, 내 개발 역량에 대해 아쉽다고 생각했던 것 같다. 사실 우리팀의 PM이 조금 서툴렀어서 기획과 이러저러한 부분을 많이 신경썼었는데, 진행하면서 PM이 더 편한 것 같다라는 생각을 조금 하기도 했다. 다음 해커톤은,,, 기획으로 참여해볼까 생각도 해봐야겠다.


당일 시연이 끝나고나서도 뭔가 정신이 멀쩡했었고 끝났다는 실감이 들지 않았었다. 프론트 팀원분이랑 웃으면서 꿈같다고 했던 기억이 생생하다. 아쉽게 본선 진출은 실패했지만 이렇게 끝났다는게 오히려 나쁘지 않다는 생각도 하고, 팀원분들한테 너무너무 고마웠고 백엔드와 디자이너분한텐 조금 미안한 감정도 남아있긴 하지만 다음엔 더 잘해야겠다는 생각이다.
마지막으론 막상 개발기간엔 "아... 왜 살지" 하면서 하루하루를 살았던 것 같은데, 데모부스 운영하면서 다른 프론트분들이 오셔서 막 이거 어떻게 구현했는지 여쭤보시고, 고생 많이 하셨을거 같다, 대단하다, 이런 얘기를 들으니까 너무 감격스러웠던 것 같다. 그리고 다 끝나고 나니 뭔가 행복했던 것 같고 ㅎㅋㅋㅋ 좋은 기억만 남은 것 같다.


2024.11.28
전공 동아리 마지막 임원 회의
동아리 연말행사 + 내년도 임원 관련해서 회의를 진행했다. 현재는 기획 부분에서 임원 역할을 맡고 있는데, 내년도는 학술 부분에서 임원 역할을 맡기로 하였다. 현재 학술부장이 굉장히 고수분이셔서 많이 배울 것 같은데, 설레기도 하지만 뭔가 너무 바빠지진 않을까 걱정도 된다. 파이팅...
2024.11.26 - 2024.11.29
11월의 회고록 정리
동아리 임원활동, 팀프로젝트와 단풍톤으로 너무너무 바빴던 11월이다. 다시 생각해보면 어떻게 지나갔는지도 모르겠고, 정말 운이 좋게도 좋은 사람들과 해커톤이라는 굉장히 값진 경험을 할 수 있어 즐거웠던 것 같다. 구름톤 유니브에 지원하게 된 계기에 나 자신에 대한 성장을 위한 것도 있었는데, 이번 기회로 다양한 사람들을 만나고 성장할 수 있는 좋은 기회를 얻은 것 같아 만족한다. 해커톤 경험만이 아니라도 이렇게 회고록을 작성하는 것도 좋은 것 같고, 11월을 마무리하며 운영진분들, 그리고 미르미분들에게 수고 많으셨다고 전해드리고 싶다.


'[ kakao x goorm ]' 카테고리의 다른 글
| [goorm] 미르미 기록장 - OCT/2024 (1) | 2024.10.25 |
|---|---|
| [goorm] 미르미 기록장 - SEP/2024 (3) | 2024.09.24 |
| [goorm] 미르미 기록장 - AUG/2024 (1) | 2024.08.30 |
[goorm] 미르미 기록장 - OCT/2024
[ kakao x goorm ]2024. 10. 25. 16:47
2024.10.04
백엔드 실습 웹 프로젝트 기획서 제출일

기획서와 와이어프레임 제출을 완료했다. 뭔가 지난 프로젝트들로 열심히 굴렀던,,, 덕이였을까? 기획서 작성과 피그마 화면설계가 순탄하게 척척 완료되었던 것 같다. 벌써 시험이 한달도 안남았다는게 믿기지가 않지만,,, 어떻게든 되지 않을까?라는 생각이긴 하다.
2024.10.09
단풍톤 PR 페이지 작성일

이번에 구름 x 카카오에서 진행하는 단풍톤이라는 해커톤에 나가게 되었는데, 해커톤 전, 참여자들끼리 팀을 구성해 해커톤에 참여하는 방식이다. 이를 위해 각자 PR 페이지를 만들게 되었는데,, 막상 진짜 해커톤이 코앞으로 다가온다는 느낌이 들어 괜찮을까라는 우려가 들었던 것 같다. 좋은 팀원들과 함께 했음 좋을 것 같다.
2024.10.11
전공동아리 다솜 임원회의
어쩌다보니 서기가 아닌 기획부장으로 전공동아리 임원에 들어오게 되었다. 구름톤, 그리고 따로 진행하는 프로젝트가 있었기에 이대로 가다간 동아리 활동을 안할거 같아, 나를 강제해야겠다 싶어 임원진에 들어오게 되었고 첫 임원회의는 나쁘지 않았던 것 같다. 뭔가 체계적이고 질서가 잡힌 체계는 아닌 것 같아 보였지만... 이 기회로 무언가 배울 점이 있을거라고 생각한다. 또한 선배님 한분한테 데이터베이스와 백엔드 서버배포쪽을 배우기로 하였는데 많이 기대가 된다 😊
2024.10.17
구름톤 FE 스터디 종료일

코딩애플에서 진행하는 Next.js 강의 수강을 완료했고, 이번 세미나 발표만 남았다. 백엔드와 프론트엔드를 같이 배운 느낌이라고 해야하나..? 무튼 신기한 경험이였고(다크모드 구현이 재밌었다), 마지막 주는 너무 바빠 실습을 완벽하게 하지 못했는데, 추후에 다시 해봐야겠다고 생각했다.마지막 세미나 발표도 준비 잘 해가서 좋은 마무리로 매듭짓기를.
2024.10.23
KES (한국 전자전) 후기

학교 프로젝트 멤버들과 함께 아이디어 수집 차원과 학교 동아리 출품작들 구경할 겸 한국 전자전에 다녀왔다. 평일임에도 불구하고 외국인들도 많았고 여러 단체에서 왔던 것 같다. LG와 삼성 부스의 규모가 가장 컸었는데, 인공지능을 기반으로 하는 스마트홈 기기들과 투명한 디스플레이, 4K 빔프로젝터(?)가 가장 기억에 남았던 것 같다. 소프트웨어쪽은 생각보다 볼거리가 없어 아쉬웠었다.
2024.10.24
2022 빅데이터 분석기사(필기) 후기3

기초적이라 재미가 없던,, 느낌이 있었기에 열심히 듣긴 했었는데, 요즘은 내용이 점점 어려워져서 더 재미가 없어지는 느낌..? 양도 많아 가볍게 듣긴 힘든 것 같다. 추후에 빅데이터 분석기사 자격증을 준비하게 된다면 도움이 많이 될 것 같은데, 지금 학교에서 배우고 있는 빅데이터 분석이랑은 다른 결의 강의라서 집중도가 떨어지는 감이 없지 않아 있다. 남은 반절을 어떻게 듣지,,,
2024.10.25
10월의 회고록 정리
단풍톤 준비와 시험준비로 바빴던 시월이다. 벌써 세번째 회고록을 쓴다고 생각하니 시간이 정말 빠르게 느껴지고, 뭔가 이래저래 고민이 많아지는데, 중간고사 잘 마무리하고 기쁜 마음으로 11월이 되었음 좋을 것 같다. 파이팅..!


'[ kakao x goorm ]' 카테고리의 다른 글
| [goorm] 미르미 기록장 - NOV/2024 (5) | 2024.11.29 |
|---|---|
| [goorm] 미르미 기록장 - SEP/2024 (3) | 2024.09.24 |
| [goorm] 미르미 기록장 - AUG/2024 (1) | 2024.08.30 |
[goorm] 미르미 기록장 - SEP/2024
[ kakao x goorm ]2024. 9. 24. 18:57
2024.09.07
코딩애플 Next.js 강의 수강 시작일

지난 '타입스크립트로 블록체인 만들기 - 노마드 코더' 강의의 수강을 마치고, 팀원들끼리 회의한 결과 타입스크립트도 배워본 겸, 이 강의에서 얘기해주던 Next.js 도 한번 도전해보자는 의견이 나와 타입스크립트를 활용하여 Next.js를 배워보기로 하였다. 아직까진 리액트를 배우는 기분이고, 뚜렷한 장점이 보이거나 하진 않지만 이후에 있을 강의들이 기대된다.
2024.09.09
구름edu 2022 빅데이터 분석기사(필기) 강의 후기2

빅데이터 분석이 무엇인지를 계속 배우고 있는데, 필기 시험 강의인 점이 한 몫한 것인지, 빅데이터라는 과목이 재미가 없는 것인지는 잘 모르겠지만, 너무 이론적인 부분만 다루어 점점 흥미도가 떨어지고 있다😥. 또한, 실습을 다루는 부분이 파트3, 4부분에 몰려있어 강의를 수강할 분들은 참고하였음 좋을 것 같다..
2024.09.21
카카오테크 부트캠프 - 온보딩 세미나 후기


이후에 있을 단풍톤에 참여하게 될 텐데, 내 스스로 이러한 해커톤에 참여하기엔 역량이 충분하지 못하다 생각해 조금이나마 배우고, 팁 같은 걸 얻기 위해 세미나를 들으러 가게 되었다.
이번 온보딩 세미나에선 총 세 분의 연사자분이 연사를 진행하여 주었는데, Hectodata API 개발팀의 변해빈님, Petnow 개발자 최윤한님, Wavve 프론트엔드 개발자 최다인님이 참여해주셨다.
아무래도 이번 해커톤에는 프론트엔드 파트로 참여한 만큼, 최다인님의 나쁜 프론트엔드 개발자가 끌리는 이유라는 연사가 되게 와닿았는데, 어떤식으로 해커톤을 참여해야 하는지를 알게 된 좋은 시간이였던 것 같다. 또한, 이후에 있던 비어네트워킹에서도 다른 분들과 대화를 나누며 되게 유익하고, 좋았던 시간이라고 생각했다.
2024.09.23~2024.09.24
9월의 회고록 정리
현재 16학점을 듣고 있는데 개인적으로 22학점을 들었던 저번 학기보다 조금 더 바쁘게 살고 있는 듯 하다. 진행 중인 프로젝트들이 순조롭게 흘러갔음 좋겠고, 9월 30일, 단풍톤 주제 공개를 시작으로 본격적으로 아이디어톤, 팀 빌딩, 단풍톤이 이어질 예정인데, 무리 없이 따라갈 수 있었음 좋겠다.
또한, 지난 달에 생각했듯 앞으로의 일정이 점점 바빠지는 것 같은데, 끝맺음을 잘 지을 수 있다면 좋을 것 같다. 앞으로 7일도 채 안남은 9월이지만 별 탈 없이 마무리 되기를.


'[ kakao x goorm ]' 카테고리의 다른 글
| [goorm] 미르미 기록장 - NOV/2024 (5) | 2024.11.29 |
|---|---|
| [goorm] 미르미 기록장 - OCT/2024 (1) | 2024.10.25 |
| [goorm] 미르미 기록장 - AUG/2024 (1) | 2024.08.30 |
[goorm] 미르미 기록장 - AUG/2024
[ kakao x goorm ]2024. 8. 30. 11:362024.08.05
구름톤 유니브 3기 지원 및 오리엔테이션 후기

팀 프로젝트에서 무언가 내가 주축이 되어 활동하기보단 보다 경험이 많은 선배 분, 혹은 멘토 분과 함께 조언을 얻으며 배워가고 알아가는 경험을 해보고 싶었고, 소위 말하는 '맨 땅에 헤딩' 식의 프로젝트에 지쳐있었기에 이러한 기회가 절실했다고 느꼈다. 또한, 인프런 강의를 할인된 가격으로 들을 수 있다는 점 역시 큰 메리트로 보여 지원하게 되었다.
이번에 지원한 파트는 프런트엔드 파트로, 프런트엔드 쪽의 지식이 조금 부족하다고 느껴 공부해 보자는 마음가짐으로 지원했고, 백엔드 온라인 강의를 들으며 두 마리 토끼를 잡을 생각으로 프런트파트를 지원하게 된 거 같다.
아는 얼굴들이 몇 명 보여서 편한 마음으로 오티를 들었던 것 같고, 럭키드로우 상품과 아이스 브레이킹 타임 등을 보며 '아 임원분들이 열심히 준비하셨겠구나..' 하며 집중해서 들었었다. 저녁약속이 있어 비어네트워킹에는 참여하진 못했기에 약간 아쉬움이 남았지만, 알찬 시간이었다고 생각되었던 오티날이었다.


2024.08.16
구름톤 유니브 3기 Web Frontend 파트 팀스터디 시작일
많은 언어 중, 자바스크립트에서 파생된 언어인 타입스크립트를 주제로 정하여 스터디를 시작하였다.

타입스크립트의 장단점을 알게 되었고, TypeScript라는 이름답게 타입을 명시할 수 있다는 것이 자바스크립트와의 차이점이란 것을 알게 되었다. 노마드 코더의 강의는 처음 들어보았는데, 생각보다 발음도 귀에 잘 들리고, 설명이 친절한 편이라 듣기가 편했다. (분량이 적어서였던 이유도 크게 작용했던 것 같다)
2024.08.19
구름edu 강의 시작일!
구름톤 유니브 구르미 대상으로 구름EDU 강의 하나를 무료로 볼 수 있는 기회가 생겨서 강의를 고민하다, 2학기 과목에도 있는 빅데이터 분석이 생각나 2022 빅데이터 분석기사(필기) 강의를 고르게 되었다.
2024.08.20
구름edu 2022 빅데이터 분석기사(필기) 강의 후기
빅데이터 분석이 무엇인지, 학교에서 짧게나마 다뤘던 내용을 제외하고 조금 더 세세하게 배울 수 있어 좋게 들었던 것 같고, 중간에 강사분이 바뀌셔서 '엥..? 잘못 튼 건가' 하며 들었던 기억이 있다 🤭

2024.08.27 - 2024.08.29
8월의 회고록 정리
팀스터디 같은 경우엔 멤버 중 4학년 선배님이 한분 계시는데, 회의 준비도 깔끔하게 잘해주시고, 참여도도 너무 좋으셔서 따라가며 공부하기 편한 환경인 것 같고, 아무래도 다 같이 진도를 맞추어 공부해야 하니까 자극도 역시나 되는 것 같다.
또한, 개인적으로 진행하고 있는 빅데이터 분석기사 강의 스터디도 강의의 질이 괜찮아서 듣기에 좋은 것 같고, 조금 어려운 부분도 있지만 강의 분량이 학업과 같이 병행하기에 무리가 없지 않을까 싶었다.
프로젝트 회의들과, 자격증 시험. 약속도 많았고, 생일까지 겹쳐있던. 바쁘던 8월이여서였을지는 모르겠지만, 너무나 빠르게 지나간 8월이었던 것 같다. 또, 앞으로의 일정이 더 바빠질 것이라고 생각하는데, 미래의 내가 보기에 현재의 시간이 의미 없는 시간으로 안 느껴졌으면 좋을 것 같다. 마지막으로 마음에 드는 사진 두장을 끝으로 8월의 미르미 기록을 마무리하려고 한다.


'[ kakao x goorm ]' 카테고리의 다른 글
| [goorm] 미르미 기록장 - NOV/2024 (5) | 2024.11.29 |
|---|---|
| [goorm] 미르미 기록장 - OCT/2024 (1) | 2024.10.25 |
| [goorm] 미르미 기록장 - SEP/2024 (3) | 2024.09.24 |