사건의 발단(2. 문제 해결 과정과 학습 계기(3. 주요 개념( - GitHub Permalink( - Git Blame( - Git Log와 GitHub History(4. 세 가지 개념 비교(5. 간단한 그림으로 전체 요약(6. 결론(회사에서 리팩토링을

타입스크립트를 공부하다 보면 단순한 문법을 넘어서 트릭처럼 느껴지는 문법 패턴들을 만나게 됩니다.이 글에서는 그중에서도 유니온 추출 / 매핑 후 값 유니온화 / 튜플 원소 타입 뽑기 같은 핵심 패턴을 정리합니다. 배열 타입 T에 \[number]를 붙이면, 해당 배열

TypeScript에서 extends는 두 가지 문맥에서 사용됩니다.1) 제네릭 제약(Constraint)2) 조건부 타입(Conditional Type) 겉보기엔 똑같아 보여도, 의미와 쓰임새는 전혀 다릅니다. 이번 글에서는 이 둘을 확실히 구분해보고, 마지막에 실

Day 3에서는 실무 스타일 패턴 학습을 주제로, 단순 문법 암기에서 벗어나 실제 프론트엔드 개발에서 자주 맞닥뜨리는 타입 문제를 연습했습니다.이 글은 문제 풀이 과정과, 풀면서 생긴 궁금증을 정리한 Q&A 심화 정리까지 모두 담고 있습니다. 주어진 타입 T가 str

콜백 함수란 무엇인가?(2. 콜백 기반 비동기 처리의 한계(3. Promise란 무엇인가?(4. Promise의 상태와 흐름(5. Promise의 생성 및 기본 사용법(6. Promise 체이닝: then, catch, finally(7. 주요 Promise 유틸 메서

TypeScript의 강력한 타입 시스템을 이해하고 활용하기 위한 첫 걸음으로, Day 1에서는 keyof, typeof, Record, Omit, Exclude, Extract, 조건부 타입, infer, 템플릿 리터럴 타입 등 실무에서도 매우 자주 사용하는 핵심 문

타입스크립트의 기본 문법 너머에는 실무에서 빛을 발하는 '타입 설계'의 영역이 있다는 것을 깨달았습니다. 이 문서는 AI라는 페어 프로그래머와 함께, 수박 겉핥기 수준에 머물러 있던 저의 타입스크립트 지식을 실무에 바로 적용할 수 있는 단단한 역량으로 발전시키는 여정을

저는 Myfit이라는 네이버 클라우드 해커톤 프로젝트를 진행하면서, 서버 없이 프론트엔드만 개발하는 환경이였습니다.이 과정에서 네이버 클라우드의 클로바 AI API를 호출해야 했는데, CORS 에러가 발생했습니다.CORS 는 다른 출처에서 리소스를 공유할 때 발생하는

> 창업 아이템에 고민이 많은 창업자들에게 맞춤형 ‘제품 시장 적합성’을 찾아주는 프로젝트를 진행하며, 사용자 설문조사 화면을 제작했습니다. 예상보다 어려운 부분이 많았던 만큼, 그 과정을 기록으로 남기고자 이 글을 작성하게 되었습니다. 시작 > 가장 먼저 진

기존 달리기 응원의 경우 이모지 모달이 늦게 렌더링 되어 어색한 모습이였다.해당 이슈의 원인은 이모지 모달 높이 값을 빨리 구하지 못해서 였다.이모지 모달의 높이는 기기 높이 - 키보드 높이 - textinput의 높이로 이루어져있는데 이모지 모달의 높이를 구하는 과정

이전에 진행했던 프로젝트를 회고하면서, 발생했던 트러블슈팅을 뒤늦게나마 정리하는 글입니다.Input 컴포넌트에서 검색어를 입력하면 InputResult 컴포넌트에서 받아온 data를 자동완성 해서 보여줍니다.이때 Input 컴포넌트에서 방향키를 통해 InputResul

이전에 학습한 Parallel Routes 와 Intercepting Routes 를 사용해서 Modal을 만들수 있다고 문서에 작성돼있어서 직접 한번 만들어 보았다.시작하기에 앞서, Parallel Routes 는 한 화면에 두개의 페이지를 띄우는 것이고, Inter

Intercepting routes는 현재 레이아웃 내에서 애플리케이션의 다른 부분의 라우트를 로드할 수 있게 한다.이러한 라우팅 패러다임은 사용자가 다른 컨텍스트로 전환하지 않고도 라우트의 내용을 표시하고자 할 때 유용하다.예를 들어, 피드에서 사진을 클릭할 때, 사

앱 디렉토리에서는 중첩된 폴더가 일반적으로 URL 경로에 매핑됩니다. 그러나 폴더를 Route Group으로 표시하면 해당 폴더가 경로의 URL 경로에 포함되지 않도록 할 수 있습니다.이를 통해 URL 경로 구조에 영향을 주지 않으면서 경로 세그먼트와 프로젝트 파일을

패러렐 라우트는 동시에 또는 조건부로 동일한 레이아웃 내에서 하나 이상의 페이지를 렌더링할 수 있게 합니다.이는 대시보드나 소셜 사이트의 피드와 같이 매우 동적인 앱 섹션에 유용합니다.패러렐 라우트는 이름이 지정된 슬롯(named slots)을 사용하여 생성됩니다. 슬

레이아웃은 여러 경로 사이에서 공유되는 UI입니다. 레이아웃은 내비게이션 시 상태를 보존하고 상호작용이 가능하며, 다시 렌더링되지 않습니다. 또한 레이아웃은 중첩될 수도 있습니다.레이아웃을 정의하려면 layout.js 파일에서 React 컴포넌트를 기본으로 내보내면 됩

프로젝트를 진행하던 중 API가 정상적으로 작동하지 않는 문제를 발견했습니다. 이 상황을 백엔드 담당자에게 전달하자, 담당자는 재현 가능한 요청을 보내달라고 요청했습니다. 당시에는 '재현 가능한 요청'이 무엇을 의미하는지 몰랐기 때문에 단순히 실패하는 요청을 다시 보냈

이슈 배경 달리기 앱에서 타이머를 구현하고 사용하던 중 장시간 타이머를 사용시 실제시간과 타이머 표시시간 사이에 오차가 발생하는 것을 알게 돼었습니다. 이슈 원인 찾기 타이머 정확성 관련해서 구글링을 했고, javascript의 이벤트 루프와 taskqueue

문제링크: https://www.acmicpc.net/problem/29792각각의 캐릭터당 최대 보상으로 보스를 잡는 dp를 생성하고 최대 보상값을 res에 저장res를 내림차순으로 정렬해서 m번째 캐릭터까지 합하여 정답출력각각의 캐릭터 별로 보스를 잡는 데

vscode로 파일명을 대소문자만 변경해서 push를 했는 데 왠걸 원격 브랜치의 파일명이 그대로 유지되는 일이 있었습니다.해당 문제를 파악하지 못한채 pr을 올려버렸고 merge 된 main을 실행해보면 파일명과 import 한 파일의 대소문자가 달라 에러가 발생하는