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

투자대회 관리자 페이지 작업을 하면서 상태 관리 이슈에 부딪혔다.여러 페이지에서 공통으로 사용하는 투자대회 코드 필터 상태를 어떻게 효율적으로 관리할 것인가에 대한 고민이었다.이번에는 그 해결 과정을 정리해보고자 한다. 문제 상황 : 모든 페이지에서 동일한 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을 제공한다고 생각하면 된다. 유틸리티 타입을 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입 변환이 가능하지만 유틸리티 타입을 사용하면 훨씬 더 간결한 문법으로 타입 정의가 가능할 뿐 아니라 이미 정의한 타입을 변환할 때 유용하게 쓸 수 있다..

도커(Docker)란?리눅스 컨테이너에 리눅스 어플리케이션을 프로세스 격리기술을 사용해 쉽게 컨테이너로 실행, 관리할 수 있게 해주는 오픈소스 프로젝트.도커는 일반적으로 도커 엔진(Docker Engine) 혹은 도커에 관련된 모드 프로젝트를 말한다. 도커 엔진(Docker Engine)은 컨테이너를 생성하고 관리하는 주체로서, 자체로도 컨테이너를 제어할 수 있고 다양한 기능을 제공해준다.도커의 생태계에 있는 여러 프로젝트들은 도커 엔진을 좀 더 효율적으로 사용하기 위한 것에 불과하기 때문에, 도커의 핵심은 도커 엔진이라고 할 수 있다.  Vitrual Machine(가상 머신) vs Docker Container(도커 컨테이너) 가상 머신(Virtual Machine) 가상 머신은 하이퍼바이저를 이용해..

Submodule이란일반적으로 하나의 repository에 해당 프로젝트의 모든 내용이 포함된다. 그러나 하나의 repo로 관리하기 어려운 대형 프로젝트 역시 존재한다. 쉽게 shared library(slib)를 가져다 쓰는 경우를 생각해볼 수 있다. 가령 무지성으로 slib의 내용을 싹싹 긁어다가 하나의 main repo로 병합하여 관리한다고 생각해보자.  위 경우 두 가지 문제가 발생할 수 있다:slib의 업데이트가 이뤄졌을 때, 버전 관리가 매우 번거롭다. (Why? main repo와 commit logs를 공유하기 때문에)main repo의 변화에 맞춰 slib의 내용이 변경될 경우, 이를 사용하는 다른 모든 repo의 내용 역시 manually하게 전부 변경 해야 함. 당연히 slib의 내용..

Package란?package: 완성된 프로그램 1. 다른 패키지의 부품으로써 사용되는 package$ var my = require('my-package'); 2. package 자체가 완제품으로써 사용되는 것$ my-package  Package의 특성1. 코드 모듈화공통된 기능을 별도의 코드베이스로 추출하여 npm 패키지로 만듦예로, 여러 레포지토리에서 공통으로 사용하는 함수나 유틸리티를 하나의 패키지로 모을 수 있음 2. 패키지 생성해당 코드를 포함한 새로운 프로젝트를 생성,package.json 파일을 작성하여 npm 패키지로 등록할 준비 3. 배포공통 기능을 npm 레지스트리에 배포 4. 각 프로젝트에서 사용개별 프로젝트에서 이 패키지를 의존성으로 추가npm install  명령어를 사용해 패..