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

디프만 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; // ....

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

대부분의 백엔드 개발자가 갖춰야 할 기본 스킬 중 하나가 Nginx다. 하지만 프론트엔드 개발자도 백엔드 개발자와의 원활한 협업을 위해서는 Nginx에 대한 기본 개념을 어느정도 알고있어야 한다고 생각이 들어서 Nginx에 대해 공부해보고자 한다. [ Nginx 공부 전 알아야 할 CS ]클라이언트서비스를 이용하기 위해 네트워크를 통해 요청을 보내는 주체웹 개발 영역에서 보통 클라이언트라 하면 크롬, 사파리, 익스플로러 등 웹 브라우저를 의미 웹 서버클라이언트의 요청에 따라 HTML, CSS, JS, 이미지 파일과 같은 정적 파일을 응답하여 제공하는 소프트웨어HTTP 프로토콜을 사용해 클라이언트와 통신대표 : Nginx, Apache 등 WAS클라이언트 요청에 대해 동적인 처리를 담당하는 영역웹 서버와 ..

[타입스크립트] 맵드 타입타입스크립트의 고급 타입인 맵드 타입(mapped type)이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 기능을 말한다. 예를 들어 인터페이스에 있는 모든 속성을 루프문 같이 순회해서 optional(?) 로 바꾸거나 readonly 로 지정할수 있으며 아예 지정된 타입을 바꿔서 변경된 타입을 반환할 수도 있다.   아직 맵드 타입에 대해 문법을 배우지는 않았지만 간단하게 살펴보자면 다음과 같다.interface Obj { prop1: string; prop2: string;}type ChangeType = { [K in keyof T]: number;};type Result = ChangeType;/*{ prop1: number; prop2: nu..

[타입스크립트] 조건부 타입조건부 타입(conditional type)이란 입력된 제네릭 타입에 따라 타입을 결정하는 기능을 말한다.위와 같이 조건부 타입 문법은 extends 키워드와 물음표 ? 기호를 사용하는데 보자마자 삼항 연산자가 생각 났을 것이다.유추한 바와 같이 자바스크립트의 삼항 연산자는 변수의 값을 조건에 따라 결정하는 것이라면, 타입스크립트의 조건부 타입은 값 대신 타입을 조건에 따라 결정하는 것이라고 보면 된다. 위의 조건부 타입 코드 문법을 풀이해보자면 타입은 T가 U에 할당될 수 있으면 타입은 X가 되고 그렇지 않다면 타입이 Y가 된다는 것을 의미한다.착각하지 말아야 할점은 조건부 타입도 유니온처럼 하나의 타입이라는 것이다.extends 키워드가 들어가서 제네릭 꺾쇠 괄호  안에 써..

[타입스크립트] 유틸리티 타입TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다.예를 들어 JS에서 배열을 다룰 때 for, while문이면 충분하겠지만 따로 forEach문이나 배열 생성하는 map, 배열요소를 찾는 find나 filter와 같이 배열을 다루는데 편리하게 이용가능한 루프 헬퍼 함수를 지원하듯이, 타입스크립트에서도 타입 변경을 쉽고 용이하게 하기위해 헬퍼함수처럼 Utility Type을 제공한다고 생각하면 된다. 유틸리티 타입을 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입 변환이 가능하지만 유틸리티 타입을 사용하면 훨씬 더 간결한 문법으로 타입 정의가 가능할 뿐 아니라 이미 정의한 타입을 변환할 때 유용하게 쓸 수 있다..