하나씩 배워나가는 개발일지

디프만 17기에서 프론트엔드 프로젝트를 배포하면서 겪은 시행착오와 해결 과정을 기록해보고자 한다.원래 계획은 Vercel로 배포한 후 시간이 남으면 직접 배포를 해보는 것이었다. 하지만 프로젝트 처음부터 끝까지 배포를 직접 경험해보고 싶어서 도전하게 되었다.회사에서는 Dockerfile, docker-compose.yml, workflow/deploy.yml 파일을 작성하고 서버에 접속해서 nginx conf 파일을 작성해서 자동 배포 플로우를 구축해본 경험이 있다. 하지만 회사 서버는 IDC를 쓰고 데브옵스에게 프론트 서버와 도메인만 알려주면 알아서 도메인 작업을 해주는 구조였다. 내가 하는 건 위에서 말한 Dockerfile, compose, yml 그리고 서버 접속해서 conf nginx 파일 작성..

DND 활동 중 디프만에 지원하여 서류를 통과하고 면접을 거쳐 최종 합격하게 되었다.디프만은 이번이 세 번째 지원이었다. 15기 때는 면접에서 떨어졌고 16기 때는 서류에서 떨어졌었다. 그럼에도 포기하지 않고 다시 도전한 결과, 드디어 17기에서 합격할 수 있게 되었다.원래 계획은 DND 활동에만 집중하는 것이었지만 디프만 모집 공고를 보고 "이번에는 꼭 붙어보자"는 마음으로 지원하게 되었다. 이전 두 번의 실패 경험을 통해 무엇이 부족했는지 돌아보고 이번에는 더 준비된 상태로 도전하고 싶었다. 디프만이란? 디프만 - Depromeet오직 디자이너와 프로그래머의 동반성장을 위해서www.depromeet.com 디프만(DEPROMEET)은 '디자이너와 프로그래머가 만났을 때'의 약자로, 디자이너와 프로그..

DND 지원 동기와 목표이전부터 사이드프로젝트 동아리에 참여하고 싶어서 YAPP, 매시업, 넥스터즈, 디프만 등 여러 동아리에 지원했지만 모두 떨어졌었다. 그래서 한동안은 지원을 하지 않다가 DND가 모집한다는 소식을 듣고 지원하게 되었다.입사 후 주어진 기능을 안정적으로 개발하는 데는 익숙해졌지만, 다양한 배경을 가진 사람들과 아이디어 발상부터 기획, 설계, 개발까지 함께하는 협업 경험은 부족했다. 실무에서는 이미 정해진 구조 안에서 일하는 경우가 많아, 팀원 각자의 사고방식이나 판단 기준을 알아가며 방향을 함께 결정해보는 기회가 거의 없었다. 이러한 점에서 DND는 현재 나에게 꼭 필요한 환경이라고 생각했다.프론트엔드 개발자로서 사용자 흐름과 인터랙션을 주도적으로 설계하고 서로 다른 관점을 가진 팀원..

투자대회 관리자 페이지 작업을 하면서 상태 관리 이슈에 부딪혔다.여러 페이지에서 공통으로 사용하는 투자대회 코드 필터 상태를 어떻게 효율적으로 관리할 것인가에 대한 고민이었다.이번에는 그 해결 과정을 정리해보고자 한다. 문제 상황 : 모든 페이지에서 동일한 API 중복 호출프로젝트 구조상 대시보드 메인 페이지(/dashboard)와 여러 서브 페이지들(/dashboard/analytics, /dashboard/reports 등)이 있었고 모든 페이지에서 투자대회 코드 필터를 선택할 수 있어야 했다.초기에는 각 페이지에서 필터바를 위해 동일한 투자대회 코드 목록 API를 호출하고 있었다. // 모든 페이지에서 이런 식으로export default async function AnalyticsPage() { ..

회사에서 투자대회 관리자 페이지를 새로 만들고 있다.내가 원하는 스택(Next.js 15, React 19, TypeScript, Tailwind 등)으로 설계했고 새 프로젝트에 기존 서비스 + 관리자 기능을 붙이는 작업이었다.작업하면서 마주친 2가지 이슈에 대해 정리해보고자 한다. 동적 API 비동기화 이슈Next.js 15로 올리면서 가장 먼저 마주친 건 params, searchParams 등 동적 API가 비동기(Promise)로 바뀐 것이었다. 기존에는 참가자 계좌 현황 페이지에서 아래처럼 코드를 짰었다.export default function AccountPage({ searchParams }) { const competitionCode = searchParams?.code; // ....

바쁜 취준을 이어가던 도중 구름톤 12기 해커톤 공고가 올라와서 지원했다. 구름톤이란? 구름톤은 카카오와 구름이 주최하는 제주에서 약 3박 4일동안 이루어지는 해커톤이다.  구름톤 in JEJUkakao x goorm 제주에서 펼쳐지는 해커톤9oormthon.goorm.io 오직 지원서 하나로 참가자를 선발하며, 포지션(기획자, 프론트엔드 개발자, 백엔드 개발자, 디자이너)을 선택하고 주어진 공통 질문에 답변해야 한다. 나는 프론트엔드 개발자로 지원했고, 이번 12기 질문은 다음과 같았다. 1. 구름톤 참여 동기 (300자) 2. 제주도가 직면한 사회문제는 무엇이라고 생각하나요? (300자) 3. 해당 문제를 해결하기 위한 서비스 아이디어 (500자) 4. 팀원과의 협업을 이끌어 나갈 나만의 장점 (30..

연사를 하게 된 계기 구름톤 유니브는 카카오, 구름이 주관하는 대학생들을 위한 온·오프라인 연합 전국 IT 동아리이다.구름톤 유니브에서는 매 기수마다 해커톤을 진행하는데, 참가자들이 팀을 꾸려 직접 아이디어를 기획하고 주어진 시간 안에 MVP를 구현해낸다.단순히 ‘개발자 모임’을 넘어서 실전에서의 협업과 프로덕트 완성 경험을 만들어주는 자리다.나는 작년 구름톤 유니브 3기 프론트엔드 파트로 활동했고 그중에서도 학교 대표로 활동하면서 교내 프로그램을 운영하고 해커톤에 참가해 해커톤 팀을 이끌었던 경험이 있다. 이번 4기에서 연사로 참여하게 된 건 운영진의 제안 때문이었다.갑작스럽긴 했지만 고민은 오래 하지 않았다.내가 뭘 가르칠 수 있을 정도로 잘한다고 생각하진 않았지만, 예전의 해커톤을 잘 몰랐을 때,..

지난 번 SOPT 에 떨어지고 난 후, 사이드 프로젝트를 2개 정도 진행하면서 다른 IT 연합동아리도 알아보았다. 대외활동 1 - 2024 관광데이터 활용 공모전 참가우선 4월 말, 같은 학교 졸업유예 친구들 및 4학년 학생들과 한국관광공사 x Kakao 에서 주최한 '2024 관광데이터 활용 공모전' 에 참가하기로 했다. 아이디에이션 과정을 거쳐, '여행기와 여행 OOTD를 공유하는 블로그, 트리피' 라는 웹어플리케이션을 개발하기로 결정했다.우리는 여행 관련 정보를 제공하기 위해 TourAPI 와 공공데이터를 활용할 계획이고 나는 이 프로젝트에서 프론트엔드 팀장 역할을 맡았다. 우선 개발하기 전, 제안서 작성을 파트별로 나눠 진행하며 제안배경 및 필요성, 서비스 설명, 공공데이터 활용 방안, 서비스 차..

웹 부트캠프를 끝마치고 코딩테스트와 사이드 프로젝트를 진행하면서 어딘가에 소속되어 있지 않은 것이 자꾸 불안함을 만들었다.제대로된 프로젝트를 더 해보고싶은 마음에 IT 연합 동아리 SOPT의 YB 34기에 지원했지만, 아쉽게도 면접에서 탈락하게 되었다. 면접에서 떨어졌기에 후기를 쓸지 말지 고민했지만 다음 기수에 SOPT 를 지원할 다른 개발자 분들에게 조금이나마 도움이 되었으면 하는 마음과 복기를 통해 스스로 성장하고자 하는 마음으로 서류 및 면접 후기를 남기려 한다. SOPT는 대학생 연합 IT 벤처 창업 동아리로 국내 최대 규모의 대학생 IT 연합 동아리이다.그만큼 경쟁률도 높고 서류합격도 힘들다고 들어서 이번 기수에서 중요하게 생각하는 핵심 가치를 기준으로 자소서를 작성하기로 했다. 이번 기수의 ..

STO 조각투자 큐레이션 플랫폼을 개발하면서 주요 상품 현황에서 데이터들을 보여주고 있는데, 캐시된 데이터로 인해 북마크 상태가 반영이 제대로 안되는 문제를 해결한 경험을 적어보려 한다.   위 사진을 보면, 처음에 탭을 누를 때 API를 호출하고 한 번 호출을 하면 캐시된 데이터를 보여줘서 불필요한 API 호출을 방지해서 서버 호출 낭비를 최적화하였다. 전체 탭에는 부동산, 음악저작권, 한우, 미술품, 콘텐츠 총 5가지의 카테고리 중 하나의 카테고리가 나오게 되는데, 문제는 북마크를 추가했을 때 해당 데이터가 속한 특정 카테고리의 캐시만 무효화해야 하는데 그렇지 못해서 상태가 제대로 반영되지 않았다. 예로 전체 탭에 사진과 같이 음악저작권 데이터가 호출된 상태라고 가정해보면, 전체탭에서 데이터를 북마크..