열정 넘치는 프론트엔드 개발자의 블로그! https://kasterra.github.io/ Mon, 16 Mar 2026 03:55:16 +0000 Mon, 16 Mar 2026 03:55:16 +0000 Jekyll v3.10.0 <h2 id="들어가며">들어가며</h2> <p><a href="/typescript-infer-explained">infer와 extends를 설명한 글</a>, 그리고 <a href="/typescript-controlling-type-inference">as const와 as 타입단언을 설명한 글</a> 다음으로 이어지는 세번째 글입니다.</p> <p>이전 글들에서는 TypeScript가 타입을 “어떻게 추론하고 계산하는지”에 초점을 맞추었습니다. <code class="language-plaintext highlighter-rouge">infer</code>, <code class="language-plaintext highlighter-rouge">extends</code>, <code class="language-plaintext highlighter-rouge">as const</code> 같은 문법들을 활용하면 상당히 복잡한 타입 관계도 표현할 수 있고, 대부분의 상황에서는 이것만으로도 충분히 타입 안정성을 확보할 수 있습니다.</p> <p>하지만 실무에서 코드를 작성하다 보면 한 가지 미묘한 문제가 등장합니다. <strong>런타임에서 실제로 사용되는 값의 타입과, TypeScript가 알고 있는 타입 사이에 어긋남이 생기는 상황</strong>입니다. Typescript는 런타임 정보를 알고 있지 않고, 컴파일 타임에만 검사를 하기 때문이죠.</p> <p>이 문제는 처음에는 다소 엣지 케이스처럼 느껴질 수 있습니다.... Mon, 16 Mar 2026 00:00:00 +0000 https://kasterra.github.io/typescript-satisfies-explained/ https://kasterra.github.io/typescript-satisfies-explained/ typescript <h2 id="들어가며">들어가며</h2> <p><a href="/typescript-infer-explained">지난 TS 고급 타입 글</a>에서는 단순한 원시 타입을 넘어서, 타입에서 새로운 타입을 이끌어내는 <strong>제네릭 타입</strong>에 대한 이야기를 주로 다루었습니다. 해당 제네릭 타입에서 템플릿 변수를 제약하는 <code class="language-plaintext highlighter-rouge">extends</code> 키워드와, 타입에서 타입을 이끌어내는 <code class="language-plaintext highlighter-rouge">infer</code> 키워드도 다루었죠.</p> <p>이번 글에서는 그렇게 정의한 타입들을, 실제 TS 런타임 변수들에 어떻게 잘 넣을 수 있을지에 대한 이야기를 해보려고 합니다.</p> <h2 id="가장-간단한-방법---타입-주석-type-annotation">가장 간단한 방법 - 타입 주석 (type annotation)</h2> <p>우선 변수 자체에 ‘너는 어떤 타입을 받아’ 라고 알려주는 타입 주석이 있습니다. 아래의 코드에서 <code class="language-plaintext highlighter-rouge">myVal</code>이라는 변수에 <code class="language-plaintext highlighter-rouge">string</code>이라는 타입을 설명하는 것이 타입 주석 이지요.</p> <div class="language-ts highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">let</span>... Sun, 15 Mar 2026 00:00:00 +0000 https://kasterra.github.io/typescript-controlling-type-inference/ https://kasterra.github.io/typescript-controlling-type-inference/ typescript <h2 id="들어가며">들어가며</h2> <p>요즈음 저는 구현우선주의라는 안좋은 습관을 끊어내기 위해서 여러 노력을 하고 있습니다. 최근 글들도, 아키텍처에 직간접적으로 관련이 있는 글들을 적으면서, 보완하려고 노력을 하고 있죠.</p> <p>이번 글은 ‘타입적으로 단단한 코드’를 적기 위한 문법적 도구에 대해 다루어 보고자 합니다. 개발을 하다 보면 ‘타입을 정한다’ 라는 것이, 그리 간단한 일이 아닐 때가 종종 있는데, 그러한 ‘개발 서사’의 일부와, 그런 서사속의 문제해결을 다루어 보고자 합니다.</p> <h2 id="간단한-상황---계산할-것이-없는-타입">간단한 상황 - 계산할 것이 없는 타입</h2> <p>저의 과거 이야기로 시작하고자 합니다. JS는 타입이 없기 때문에, 그러한 문제를 해결하기 위해서 TS가 등장했다 라는 것을 FE 개발을 처음 시작할 때 배웠습니다. 당시 학교에서 C언어나 Java같은 강타입 언어들을 배웠기... Sat, 14 Mar 2026 00:00:00 +0000 https://kasterra.github.io/typescript-infer-explained/ https://kasterra.github.io/typescript-infer-explained/ typescript <h2 id="들어가며">들어가며</h2> <p>AI 시대라는 표현이 더 이상 과장이 아닌 시점이 되었습니다. 개발자 블로그를 운영하면서 개인적인 생각을 정리하는 <code class="language-plaintext highlighter-rouge">short essay</code> 카테고리를 유지하고 있는 입장에서, 이 주제에 대해 한 번쯤은 글을 남기고 싶었습니다.</p> <p>다만 이 글은 어디까지나 개인적인 의견에 가깝습니다. 레이 커즈와일 같은 미래학자의 통찰이라기보다는, 현장에서 개발을 하며 느낀 인상을 정리한 정도에 가깝습니다. 이 글을 읽는 분들이 “아, 이 사람은 이렇게 생각하는구나” 정도로 받아들여 주신다면 충분할 것 같습니다.</p> <h2 id="2020년대-초반의-ai와-환각">2020년대 초반의 AI와 ‘환각’</h2> <p>2016년 알파고와 이세돌 九단의 대국 이후, AI가 사회 전반에 큰 변화를 가져올 것이라는 전망은 많은 사람들에게 자연스러운 인식이 되었습니다. 그 대국 자체도 여러모로 상징적인 사건이었지만, 개인적으로 흥미롭게... Sun, 08 Mar 2026 00:00:00 +0000 https://kasterra.github.io/my-opinion-about-vibe-coding/ https://kasterra.github.io/my-opinion-about-vibe-coding/ short essay <h2 id="들어가며---구현은-당연히-할-줄-알아야하죠-그-다음은">들어가며 - 구현은 당연히 할 줄 알아야하죠. 그 다음은</h2> <p>이 글의 제목으로 꼭 쓰고 싶었던 문장이었습니다. 당연한 이야기지만, 개발자라면 주어진 기능을 구현해낼 수 있어야 합니다. 요리사가 칼을 다룰 줄 알아야 하듯, 구현 능력은 개발자의 가장 기본적인 도구이기 때문입니다.</p> <p>하지만 제목에서도 말했듯이, 단순히 “돌아간다”는 것만으로 충분하지는 않습니다.</p> <p>이론적으로는 유튜브나 인스타그램 같은 거대한 서비스도 하나의 <code class="language-plaintext highlighter-rouge">index.js</code> 파일 안에 모든 로직을 몰아 넣어 구현할 수 있습니다. 물론 실제로 그렇게 하지는 않습니다. 대신 기능별로 파일을 나누고, 계층을 만들고, 구조를 설계합니다.</p> <p>왜일까요?</p> <p>여러 이유가 있겠지만, 저는 그중에서도 <strong>유지보수성</strong>이라는 관점이 가장 중요하다고 생각합니다. 새로운 기능 하나를 추가하기 위해 수십만 줄의 코드가 뒤엉킨 숲을... Sat, 07 Mar 2026 00:00:00 +0000 https://kasterra.github.io/architecture-and-headless-ui/ https://kasterra.github.io/architecture-and-headless-ui/ frontend <h2 id="들어가며---비슷한-성격의-query를-한데-묶어보기">들어가며 - 비슷한 성격의 Query를 한데 묶어보기</h2> <p>일반론적인 이야기를 해봅시다. 구직시장의 JD를 살펴보면 Tanstack query를 사용해서 Data fetching을 관리해본 사람이 필수 혹은 우대사항으로 있는 것을 찾아보기 어렵지 않을 정도로, 사실상의 업계 표준으로 자리 잡았습니다.</p> <p>그리고 어떤 기술을 사용하던 간에, 소프트웨어 개발에 있어서, 여러 모듈들의 독립성을 높혀서 유지보수를 원활히 하는 것이 본질적으로 중요한 것이지요. 관련 개념이 낯설거나, 배운지 오래되서 가물거리시는 분들은 <a href="https://inpa.tistory.com/entry/OOP-💠-객체의-결합도-응집도-의미와-단계-이해하기-쉽게-정리">inpa님의 글</a>을 보고 오시면 좋을 것 같습니다.</p> <p>이 두가지 이야기를 듣고 예측하셨을 수 있겠지만, 이번 글에서는 react 프로젝트에서 tanstack query를 사용할때에, 소프트웨어 모듈 관점에서 어떻게 작성하면 좋을까에 대한 내용을 다루고자 합니다.</p> <h2 id="비슷한-역할을-묶는-고전적-도구---class">비슷한 역할을 묶는 고전적 도구 -... Mon, 02 Mar 2026 00:00:00 +0000 https://kasterra.github.io/react-compiler-tanstack-query-structure/ https://kasterra.github.io/react-compiler-tanstack-query-structure/ react <h2 id="들어가며---react-생명주기와-외부-상태의-충돌">들어가며 - React 생명주기와 외부 상태의 충돌</h2> <p>React의 생명주기라는 제약사항이자 규칙은, 프론트엔드 코드를 작성할 때, 예측가능성을 준다는 점에서 인지적 부담을 줄여주는 꽤 괜찮은 도구라고 저는 생각합니다.</p> <p>다만 React를 통한 개발에서 사용하는 상태는 모두 개발자의 로직에서 오지는 않습니다. 웹 FE 환경을 놓고 보자면, 사용자가 인터넷에 연결되어 있는지(<code class="language-plaintext highlighter-rouge">navigator.onLine</code>)도 있겠고, 화면의 크기 등을 활용하는 media query(<code class="language-plaintext highlighter-rouge">window.matchMedia(query)</code>)도 있을 수 있겠습니다. React의 입장에서는 ‘외부’의 상태이지만, React를 통해 웹 FE 개발을 한다고 하여, UI에 대해 관련성이 높을 수 있는 해당 요소들을 사용하지 못하는것은 상당히 불편하죠.</p> <p>이러한 문제를 해결하기 위해서 React에서는 <code class="language-plaintext highlighter-rouge">useSyncExternalStore</code>라는 외부의 상태를 구독할 수 있는 hook을 제공합니다.</p> <h3... Sun, 01 Mar 2026 00:00:00 +0000 https://kasterra.github.io/react-useSyncExternalStore/ https://kasterra.github.io/react-useSyncExternalStore/ react <h2 id="들어가며---css-변수의-유용함">들어가며 - CSS 변수의 유용함</h2> <p>웹 프론트엔드 개발에서는 뷰를 특정한 형태로 보여주는 스타일링을 위해 CSS를 사용합니다. CSS에는 퍼블리싱에서 유용하게 쓸 수 있는 여러 기능들이 있지만, 이 글에서는 반복적으로 쓰이는 값들에 이름을 붙일 수 있는 ‘CSS 변수’에 대하여 이야기해보려 합니다.</p> <p>사실 CSS 변수라는 개념 자체는 오래전부터 알고 있었지만, 저에게는 전역 테마 토큰 정도로만 인식되어 있었습니다. 그러던 중, 마크다운을 렌더링하는 페이지에서 ToC(목차)를 구현하다가 “이건 전역이 아니라 컴포넌트 스코프에서도 충분히 쓰일 수 있겠는데?”라는 순간을 맞이하게 되었고, 그 경험을 짧게 정리해보고자 합니다.</p> <h2 id="나의-고정관념---css-변수는-전역만-가능하다">나의 고정관념 - CSS 변수는 전역만 가능하다</h2> <p>대부분 css 변수를 사용할 때에는, 여러 페이지에서 통틀어 사용되는 브랜드 컬러나, 색상 팔레트... Sun, 01 Mar 2026 00:00:00 +0000 https://kasterra.github.io/about-css-var/ https://kasterra.github.io/about-css-var/ frontend <h2 id="들어가며">들어가며</h2> <p><strong>브랜드 컬러는 못 바꾼다는데 WCAG는 맞춰야 했다.</strong></p> <p>디자인은 이미 확정되어 있었고, 색 또한 브랜드 가이드에 따라 정해져 있었습니다. 화면에서는 충분히 보기 좋아 보였지만, 대비(contrast) 비율을 계산해보니 WCAG 기준에 미달하는 경우가 있었습니다. 색을 완전히 변경할 수는 없었고, 그렇다고 접근성 기준을 무시할 수도 없는 상황이었습니다.</p> <p>프론트엔드에서 색은 단순히 화면을 꾸미는 요소라고 생각했던 적도 있었습니다. 하지만 실제로는 텍스트가 읽히는지, 상태가 명확히 구분되는지, 정보가 제대로 전달되는지를 좌우하는 기능적 요소에 가까웠습니다. 특히 이미 정해진 색 체계 안에서 작업해야 할 때는, 감각보다는 기준과 계산이 더 중요하다는 점을 체감하게 되었습니다.</p> <p>이 글은 “예쁜 색을 고르는 방법”에 대한 이야기가 아닙니다. 제한된 조건 안에서 WCAG 대비 기준을... Sun, 22 Feb 2026 00:00:00 +0000 https://kasterra.github.io/brand-color-accessibility-variant/ https://kasterra.github.io/brand-color-accessibility-variant/ frontend <h2 id="들어가며">들어가며</h2> <p>이 블로그는 분명 프론트엔드 개발자의 블로그면서 SSR을 깊게 다룬 글은 많지 않았던 것 같습니다. 이번 글에서는 사실상 업계 표준에 가까운 Next.js와, 그 런타임 기반이 되는 Node.js의 이야기를 해보려 합니다.</p> <p>웹 서비스에서 사용자 인증은 보통 세션 기반 인증이나 토큰 기반 인증으로 이루어집니다. 클라이언트는 API 요청에 자신의 인증 정보를 함께 실어 보내고, 서버는 이를 검증하여 “이 사용자가 누구인지”를 식별합니다.</p> <p>Next.js와 같은 SSR 프레임워크를 사용하는 이유 중 하나는, 비어 있는 HTML이 아니라 미리 데이터가 채워진 마크업을 반환함으로써 SEO와 초기 UX를 개선하기 위함입니다. 그렇다면, 그 “미리 불러와야 하는 데이터”가 인증을 필요로 하는 데이터라면 어떻게 처리해야 할까요?</p> <p>SSR 구조에서는 서버가 하나이고, 동시에 여러... Sat, 21 Feb 2026 00:00:00 +0000 https://kasterra.github.io/async-local-storage/ https://kasterra.github.io/async-local-storage/ node <h2 id="들어가며">들어가며</h2> <p>이 글을 쓸 수 있다는 것이 정말로 감격이군요. 사회에 좋은 영향력을 주는 사람이 되는 것을 목표로 이래저래 노력을 다해왔던 제가, 중간 체크포인트를 달성한 순간이니까요. <a href="/boostcamp-accepted">부캠 합격 후기 글</a>를 적은지 3년이 훌쩍 넘어버린 시점에, 수료생들을 대상으로 앞으로의 취준 생활에 대해 함께 고민해줄 커피챗 호스트로서 참가한 후기를 적을 수 있다는 것은 크나큰 영광입니다.</p> <h2 id="커피챗-호스트를-하기까지">커피챗 호스트를 하기까지</h2> <p>사실 커피챗 호스트는 2024년 11월 쯤에서도 커피챗 관련 메일을 부스트캠프 수료생으로서 수신 하기도 하였습니다. 다만 그때는, 정규 취준을 거치지 않고, 학교 산학 인턴에서 연장된 형태로서의 근무였던지라, ‘취준’을 거치지 않은 제가 참가하기에는 어렵다라는 그러한 현실을 마주할 수 있었습니다. 정말로 안타까움이 약간은 있었다만, 나중에... Tue, 17 Feb 2026 00:00:00 +0000 https://kasterra.github.io/boostcamp-coffeechat-host/ https://kasterra.github.io/boostcamp-coffeechat-host/ short essay <h1 id="들어가며">들어가며</h1> <p>오랜만에 글을 쓰는군요. ‘돈을 받으면서 하는 일’을 시작하다 보니, 그간 바쁘다는 이유로 글을 제대로 쓰지 못한 것 같습니다. 오랜만에 온 글인 만큼, 생산성 그리고 JSX의 본질 활용이라는 두 마리 토끼를 한 번에 잡아보는 토픽으로 이야기를 나눠보려 합니다.</p> <h1 id="vue를-써보셨습니까">vue를 써보셨습니까?</h1> <p>사실 저는 안 써 봤습니다. 그치만, 제가 vue에 대해서 아는 것은 <code class="language-plaintext highlighter-rouge">v-if</code>, <code class="language-plaintext highlighter-rouge">v-for</code> 등의 키워드를 통해서 선언적으로 렌더하는 프레임워크라는 사실입니다. vue의 이런 ‘확실히 정해져 있는 문법’이라는 성격은 코드가 일정하게 나오게 만들고, react가 사실상 판을 잡은 현재에도 이 깔끔함은 꽤 매력적입니다.</p> <p>react는 반면 같은 조건부 렌더링을 하더라도 <code class="language-plaintext highlighter-rouge">? :</code>의 삼항 연산자로도, <code class="language-plaintext... Sat, 07 Feb 2026 00:00:00 +0000 https://kasterra.github.io/react-imperative-conditional-rendering/ https://kasterra.github.io/react-imperative-conditional-rendering/ react <h1 id="들어가며">들어가며</h1> <p>최근 글들을 돌아보면 기술 인터뷰/커리어 회고가 꽤 많았습니다. 정리해둔 경험을 잘 “재사용”하는 것도 중요하지만, 면접에서 반복적으로 등장하는 질문을 계기로 제가 아직 손에 익지 않은 영역을 보강하는 글도 필요하겠다고 느꼈습니다.</p> <p>이번 글은 그 연장선입니다. 과거 면접에서 “React의 동시성 렌더링(Transition, useDeferredValue)을 대시보드 성능 개선에 어떻게 적용하느냐” 같은 질문을 받았는데, 당시에는 개념 설명은 가능해도 <strong>직접 실험해보고 자신 있게 말할 만큼의 근거</strong>가 부족했습니다. (참고 : <a href="several-interview-review-3#1차%20온라인%20면접%20복기">이전 면접 복기 자료</a>)</p> <p>그래서 가상의 데이터를 활용한 미니 대시보드를 만들어, <strong>naive한 구현(즉시 재계산/즉시 렌더)</strong> 과 <strong>Transition/지연 값으로 우선순위를 분리한 구현</strong>을 비교해 보려 합니다.</p> <h2 id="tldr">TL;DR</h2> <p>동일한 대시보드 로직에서</p> <ul> <li>naive 구현은 입력이 연산에 막혀 타이핑이... Fri, 12 Dec 2025 00:00:00 +0000 https://kasterra.github.io/react-reduce-jank-using-transition/ https://kasterra.github.io/react-reduce-jank-using-transition/ react <h1 id="들어가며">들어가며</h1> <p>이 글에서는 먼저 ‘도메인’이라는 표현부터 정리하고 시작해 보려 합니다. 진로를 직무와 업계로 나누어 본다면, 이 글에서 말하는 도메인은 후자에 해당합니다. e커머스나 교육, 핀테크처럼 산업적 맥락을 구분하는 정도로 이해해 주시면 충분합니다.</p> <p>얼마 전까지만 해도 저는 도메인이 개발자에게 미치는 영향이 비교적 제한적이라고 생각했습니다. 만드는 서비스의 성격에 따라 기술 선택이 달라질 수는 있겠지만, 그 이상은 아니라고 보았습니다. SEO가 중요하면 Next.js를 떠올리고, 모바일 앱 중심의 환경이라면 웹뷰를 고려하는 정도, 그리고 어떤 업계에서 일하고 있는지를 나타내는 정체성이 하나 더해지는 수준이라고 여겨왔습니다.</p> <p>이런 생각이 달라지게 된 계기는 최근에 경험한 면접이었습니다. 질문을 듣고 답변을 이어가는 동안에도 대화가 어딘가 어긋나고 있다는 느낌은 있었지만, 당시에는 그 이유를... Mon, 08 Dec 2025 00:00:00 +0000 https://kasterra.github.io/rethink-about-domain-knowledge/ https://kasterra.github.io/rethink-about-domain-knowledge/ short essay <h1 id="들어가며">들어가며</h1> <p>2021년부터 이 블로그에 글을 꾸준히 써 왔습니다. 기술을 정리하기도 하고, 프로젝트에서 배운 점을 남기기도 했으며, 때로는 생각을 기록하는 공간으로 쓰다 보니 어느새 4년이 훌쩍 지났네요.</p> <p>그 시간 동안 글의 주제는 조금씩 달라졌지만, 한 가지 단어만큼은 계속 제 옆을 맴돌았습니다. 바로 ‘성장’입니다.</p> <p>개발자로 살아가는 이상 이 단어를 피해가기란 거의 불가능하죠. 회사에서도, 커뮤니티에서도, 채용 과정에서도 자연스럽게 등장하는 단어입니다. 저 역시 그 흐름 속에서 성장을 바라보고, 부담스러워하고, 이해하려고 애쓰며 여기까지 왔습니다.</p> <p>그래서 이번에는 지난 몇 년간 학생이자 개발자로 살면서 바라보았던 ‘성장’이라는 감각을 되짚어보고 싶었습니다. 그 정의가 어떻게 바뀌어 왔는지, 어떤 오해 속에서 지냈는지, 그리고 지금의 나는 그 단어를 어떻게 다르게 바라보는지.<br... Wed, 03 Dec 2025 00:00:00 +0000 https://kasterra.github.io/about-dev-growth/ https://kasterra.github.io/about-dev-growth/ short essay <h1 id="들어가며">들어가며</h1> <p>최근 블로그를 둘러보니 express 관련 글은 2022년 10월, 부스트캠프를 수료하던 시기에 작성한 글이 마지막이었습니다. 그 이후로는 주로 FE 기술을 다루었고, 연구실에서 풀스택 작업을 할 때에도 Python FastAPI를 사용했기 때문에, TypeScript 기반의 express.js를 다시 제대로 다루게 된 것은 꽤 오랜만이었습니다.</p> <p>최근에 진행한 과제들 중 일부는 서버 구현까지 요구하는 풀스택 과제들이었습니다. 기능 자체를 구현하는 데에는 큰 어려움이 없었지만, 과제 리뷰를 하면서 한 가지 작은 의문이 생겼습니다. 바로 아래와 같은 express 라우팅 코드에서 <code class="language-plaintext highlighter-rouge">Request</code> 타입의 제네릭 구조가 왜 이런 형태인지였습니다.</p> <div class="language-ts highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">router</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span> <span class="dl">"</span><span class="s2">/signup</span><span class="dl">"</span><span class="p">,</span> <span class="k">async</span> <span class="p">(</span><span class="nx">req</span><span... Thu, 20 Nov 2025 00:00:00 +0000 https://kasterra.github.io/req-type-in-express/ https://kasterra.github.io/req-type-in-express/ backend <h1 id="들어가며">들어가며</h1> <p>구직 활동을 하다 보면 다양한 문제를 마주하게 됩니다. 그중에서도 개인적으로 의미 있었던 경험 하나를 이번 글에서 정리해보려 합니다.<br /> 제가 맡았던 과제는 <strong>React 없이</strong>, 웹 앱 수준의 복잡한 폼 UI를 <strong>오직 바닐라 JavaScript</strong>만으로 구성해야 했던 프로젝트였습니다. 아래 스케치처럼 단순한 입력 폼이 아닌, 이미지 업로드부터 회차 관리, 실시간 검증까지 다양한 인터랙션을 포함하고 있었죠.</p> <p><img src="/images/frontend/vanila-JS-complex-UI-sketch.jpeg" alt="UI image" /></p> <p>사실 이 주제는 예전에 작성했던 <strong><a href="/reviewing-contemporary-fe-tools">“현대 프론트엔드 환경을 돌아보며”</a></strong> 라는 글과도 맞닿아 있습니다. 그 글에서는 “SPA나 메타 프레임워크 없이도 MPA 환경에서 충분히 현대적 기능을 구현할 수 있다”는 관점을 이야기했죠.</p> <p>이번 글은 그 연장선이지만 관점은 조금 다릅니다.</p> <blockquote> <p>프레임워크 없이, 순수... Mon, 17 Nov 2025 00:00:00 +0000 https://kasterra.github.io/vanila-JS-complex-form/ https://kasterra.github.io/vanila-JS-complex-form/ frontend <h1 id="들어가며">들어가며</h1> <p>회고 글을 두개나 (<a href="/several-interview-review-1">1편</a>, <a href="/several-interview-review-2">2편</a>) 작성하였지만, 생각보다 제가 본 면접들이 많아서 시리즈가 길어지게 되었네요.</p> <p>이번 글을 마지막으로 ‘첫 서울 회사’ 이후 다시 커리어를 이어나가기 위한 면접 후기록 작성을 끝내어, 저의 ‘경험 정리의 부채’를 모두 해소하고, 향후 다시 저와 그리고 제 블로그를 모종의 이유로 오게 된 누군가에게 도움이 되길 바라는 소원 역시 하나 빌 수 있지 않을까 싶습니다.</p> <h1 id="안전-관리-솔루션-회사-사-회사">안전 관리 솔루션 회사 <strong>‘사’ 회사</strong></h1> <p>이 회사는 정말로 ‘가고 싶은 회사’ 였습니다. 물론 지금까지 채용 전형에 참고하고자 했던 회사들도 좋아 보이는 회사여서 지원을 하였지만, 저에게 강한 매력을 느끼게 한 요소들을 정리하지 않고 넘어가기 어려울 것 같습니다.</p> <ul>... Mon, 03 Nov 2025 00:00:00 +0000 https://kasterra.github.io/several-interview-review-3/ https://kasterra.github.io/several-interview-review-3/ short essay <h1 id="들어가며">들어가며</h1> <p><a href="/several-interview-review-1">직전 면접 회고 글</a>에서 많은 이야기들을 했지만, 저의 면접에 관한 모든 정보를 다 담을 수 없어서 이렇게 새로운 지면을 펴고자 합니다.</p> <p>이전 글에서는 일정이 참 많이 잡혔던 9월에 대한 이야기는 했다만, 실제로 9월에 진행한 면접들은 지면의 분량 한계상 여기서 다루게 되네요.</p> <p>이번 글에서도 이전 글과 동일하게, 실제 이름과 상관없이 면접을 본 순서대로 임의의 이름으로 지칭하였음을 참고 바랍니다.</p> <h1 id="ai-미연시-회사-마-회사-면접">AI 미연시 회사 <strong>‘마’ 회사</strong> 면접</h1> <p><strong>‘마’ 회사</strong>는 지금까지 면접을 본 회사중에서 특이한 부분이 꽤나 많았던 곳 이었습니다. 성인향 AI 미연시를 만드는 곳이었고, RN/React/FE 개발자라는 포지션에 지원했습니다.</p> <p>회사에 직원들이 꽤나 있긴 했지만, 개발에 관해서는 회사 설립 이후부터 지금까지 대표... Tue, 21 Oct 2025 00:00:00 +0000 https://kasterra.github.io/several-interview-review-2/ https://kasterra.github.io/several-interview-review-2/ short essay <h1 id="들어가며">들어가며</h1> <p><a href="/bfe-dev-react-4">가장 최근 이전 글</a>에서 “거의 한 달의 공백”을 소명하겠다고 예고했다. 이 글은 그 약속의 이행이자, 9월에 겪었던 ‘많은 일’을 정리하며 <strong>정지가 아닌 정비</strong>였음을 기록하는 리빌드 로그를 남기려 합니다.</p> <h2 id="안타깝지만-받아들여야-할-일">안타깝지만 받아들여야 할 일</h2> <p>이전에 ‘첫 서울 직장’에 대한 글을 작성하였지만, 아쉽게도 그 회사에서 더 이상 일을 할 수 없게 되었습니다. 다행인것은 그 회사의 이사님께서 저에게, ‘너가 잘못한 것이 아니다’ 라는 이야기를 오프 보딩을 알리는 자리에서 대여섯번 정도는 말씀하셨고, 대표이사님 명의의 추천서를 받을 수 있었다는것 일 것입니다.</p> <p>안타까운 현실은 짧게 남아버린 저의 이력일 것이고, 재취직을 위해서 다시 괴로움이 다소 함유된 취준 기간을 거쳐야 한다는 것이겠지요.</p> <h2 id="바쁘디-바쁘게-굴러갔던-9월">바쁘디 바쁘게... Mon, 20 Oct 2025 00:00:00 +0000 https://kasterra.github.io/several-interview-review-1/ https://kasterra.github.io/several-interview-review-1/ short essay <h1 id="들어가며">들어가며</h1> <p>한동안 블로그에 글을 적지 못했습니다. 9월 내내 구직 관련 활동들이 상당히 많았고, 거기에서 쌓인 피로들을 회복한다는 명분으로 글을 쓰지 못했던것 같네요.</p> <h2 id="이번에-풀-문제들">이번에 풀 문제들</h2> <p>이번 글에서 다룰 문제들은 이전까지의 글들과는 다르게 하나의 주제가 있다라기 보다는, 말 그대로 문제 풀이에 조금 더 초점을 두는 글이 될 것 같습니다.</p> <h1 id="문제-1---react-re-render-5---context">문제 1 - React re-render 5 - context</h1> <p>React에서 props driling이라는 불편함을 없애주기 위한 도구인 <code class="language-plaintext highlighter-rouge">context</code>에 대해서 알고 있다면 해결 할 수 있는 문제입니다.</p> <p><a href="https://bigfrontend.dev/react-quiz/React-re-render-5">원본 링크</a></p> <div class="language-tsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// This is a React Quiz from BFE.dev</span> <span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span... Tue, 14 Oct 2025 00:00:00 +0000 https://kasterra.github.io/bfe-dev-react-4/ https://kasterra.github.io/bfe-dev-react-4/ react <h1 id="들어가며">들어가며</h1> <p>이 글은 <a href="/bfe-dev-react-2">bfe 풀이 2편</a>에 이어 계속됩니다. 이어서 React 딥다이브 내용을 현실의 예제로 옮겨봅시다!</p> <h2 id="오늘-풀-문제-설명">오늘 풀 문제 설명</h2> <p><a href="/data-fetching-and-react-suspense">2022년에 쓴 data fetching과 Suspense 글</a>에서 다뤘던, 비교적 새로운 기능인 <code class="language-plaintext highlighter-rouge">Suspense</code>의 동작을 정확히 이해하고 있는지 확인하는 문제입니다. 해당 API에 대한 배경지식이 부족하다면 먼저 위 글을 읽고 오길 권합니다.</p> <h1 id="문제-1---suspense-1">문제 1 - Suspense 1</h1> <p><a href="https://bigfrontend.dev/react-quiz/Suspense-1">원본 링크</a></p> <div class="language-tsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// This is a React Quiz from BFE.dev</span> <span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">Suspense</span> <span class="p">}</span> <span class="k">from</span>... Sun, 07 Sep 2025 00:00:00 +0000 https://kasterra.github.io/bfe-dev-react-3/ https://kasterra.github.io/bfe-dev-react-3/ react <h1 id="들어가며">들어가며</h1> <p>이 포스트는, <a href="/bfe-dev-react-1">bfe 풀이 1편</a>에 이어서, 계속해서 이어나가는 포스트 입니다.</p> <h2 id="오늘-풀-문제-설명">오늘 풀 문제 설명</h2> <p>오늘 풀어볼 문제들을 소제목에서도 언급했듯, re-render에 대한 문제들을 주로 풀어볼 것 입니다. 이번 포스트에서 다룰 문제는 1편에서 다뤘던 문제들에서 다뤘던 원리에다가 몇몇 개념을 더 이해시키기 위한 문제들이기 때문에, 같은 분량 기준으로 조금 더 많은 문제를 다룰 수 있지 않을까 싶습니다.</p> <h1 id="문제-1---react-re-render-3">문제 1 - React re-render 3</h1> <p><a href="https://bigfrontend.dev/react-quiz/React-re-render-3">원본 링크</a></p> <div class="language-tsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// This is a React Quiz from BFE.dev</span> <span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span>... Thu, 04 Sep 2025 00:00:00 +0000 https://kasterra.github.io/bfe-dev-react-2/ https://kasterra.github.io/bfe-dev-react-2/ react <h1 id="들어가며">들어가며</h1> <p>PS 풀이 블로그 분관 개발록을 계속 쓰고 있었습니다만, 최초 배포 이후의 기록은 글 하나씩 적기에는 분량이 애매해서, 이렇게 모아서 써볼까 합니다.</p> <h1 id="0824--최초-배포-댓글-시스템-부착-완료">08.24 : 최초 배포, 댓글 시스템 부착 완료</h1> <p>vercel로 원 클릭 배포를 하였습니다. 배포 자체는 어렵지 않았지만, <a href="https://news.hada.io/topic?id=14759">한국에서의 vercel.app 도메인 차단</a> 때문에, 도메인을 <a href="https://algorithm.kasterra.dev">algorithm.kasterra.dev</a>로 바꿔서 사용해야 했습니다.</p> <p>그리고 giscus로 댓글 을 부착하였습니다. 현재 본관 블로그에서는 utterance를 쓰고 있지만, 대댓글 시스템이 자연스럽지 않은 문제가 있고, 여러 잘 알려진 웹 서비스에서도 사용하는 것이다 보니, 이번 기회에 익숙해지는 것도 좋은 생각이라 생각해서 부착하게 되었습니다.</p> <p>giscus 관련해서 이슈가 여럿 있는 것으로 보였습니다. 단순 HTML 마크업으로 장착을 하면, CSR을... Thu, 28 Aug 2025 00:00:00 +0000 https://kasterra.github.io/ps-algo-blog-4/ https://kasterra.github.io/ps-algo-blog-4/ short essay <h1 id="들어가며">들어가며</h1> <h2 id="동기">동기</h2> <p>‘딥 다이브’라는 말은 참 좋은 말이긴 합니다만, 사실 실전성이 없으면, 흥미도 잘 안 느껴지고, 실전에서 어떻게 쓰이는지도 힘듭니다. 즉, 실전성이 있다는 것을 알게 되면, 지식의 깊이를 가져가면서, 흥미와 실용성 또한 챙겨 갈 수 있다는 것이지요.</p> <p>‘리액트 렌더링 딥 다이브’가 실용성을 가질 수 있기 위해서는, 리액트의 렌더 스텝을 활용한 디버깅이나 최적화 기술을 배우는 것일 것입니다. 아마 React 기반 프론트엔드 개발을 열심히 하다 보면, ‘어디까지 리렌더 되는 것일까?’ 하는 것을 얼추 감으로 찍고 넘어가는 일들이 꽤나 비일비재합니다만, 조금 더 자신감 있게 알 수 있다면, 분명 경쟁력 있고, 최적화 잘 되어 있는 웹 앱을 만드는 개발자로서의 역량을 키우는 데... Wed, 27 Aug 2025 00:00:00 +0000 https://kasterra.github.io/bfe-dev-react-1/ https://kasterra.github.io/bfe-dev-react-1/ react <h1 id="들어가며">들어가며</h1> <p>최근 제 글을 보셨다면 아시겠지만, 저는 커리어 관리를 위해 nextJS 경험을 쌓고 있습니다. 이전에도 여러 기업 과제에서 잠깐씩 nextJS를 다뤘지만, App router 시대의 핵심인 서버 컴포넌트(server component)는 꼭 짚고 넘어가야 할 ‘지식 부채’였습니다.</p> <p>이번 글에서는 이 지식 부채를 조금이라도 줄이기 위해, ‘헷갈리기 쉬운 서버 컴포넌트와 제약사항’을 명확히 정리해보겠습니다.</p> <h1 id="서버-컴포넌트란">서버 컴포넌트란?</h1> <h2 id="레거시-pages-router와-app-router-간단-비교">레거시 pages router와 app router 간단 비교</h2> <p>레거시 nextJS(pages router)에서는 <code class="language-plaintext highlighter-rouge">getServerSideProps</code>나 <code class="language-plaintext highlighter-rouge">getStaticProps</code> 같은 함수를 써서 서버에서 데이터를 먼저 가져왔습니다.</p> <p>NextJS 13.4부터 stable 기능으로 <code class="language-plaintext highlighter-rouge">App router</code>가 도입되었고, React 18부터 정식 도입된 서버 컴포넌트를 적극 활용합니다. 이를 통해 클라이언트 번들 사이즈를 줄이고,... Tue, 26 Aug 2025 00:00:00 +0000 https://kasterra.github.io/nextjs-server-component-and-client-component/ https://kasterra.github.io/nextjs-server-component-and-client-component/ react <h1 id="들어가며">들어가며</h1> <p>AI와의 페어프로그래밍이 개인 사용자까지 확장되면서, 완벽하진 않아도 함께 일할 동료가 생겼습니다. 덕분에 단순 코딩을 넘어 ‘프로젝트’라는 큰 그림을 볼 기회를 얻었습니다.</p> <p>어제 작업한 기능들을 다듬고 향후 프로젝트 로드맵까지 생각하며 블로그 글 하나 나올 정도로 생각들이 쌓여, 8월 23일 오늘도 개발일지를 작성합니다.</p> <h1 id="codex가-쳐내준-코딩들">codex가 쳐내준 ‘코딩’들</h1> <p>어제 작업으로 필수 기능들은 돌아가지만, 일부 데이터는 없어 placeholder로 처리된 경우가 있었습니다. post의 <code class="language-plaintext highlighter-rouge">summary</code>, <code class="language-plaintext highlighter-rouge">difficulty</code>, <code class="language-plaintext highlighter-rouge">category</code>, <code class="language-plaintext highlighter-rouge">tags</code>, <code class="language-plaintext highlighter-rouge">readtime</code> 같은 항목을 실제 mdx frontmatter에 적고, velite 스키마에 지정해 필수 항목이 없으면 빌드 에러가 나도록 설정했습니다. 혼자 했다기보다는 codex가 옆에서 짝꿍처럼 의견을 내주니 훨씬 빨리... Sat, 23 Aug 2025 00:00:00 +0000 https://kasterra.github.io/ps-algo-blog-3/ https://kasterra.github.io/ps-algo-blog-3/ short essay <h1 id="들어가며">들어가며</h1> <p>두괄식으로 말하면, <code class="language-plaintext highlighter-rouge">codex</code>와의 첫 만남은 긍정적이었지만, GIGO(Garbage In Garbage Out)의 원리도 체감했습니다.</p> <p><a href="/ps-algo-blog-1">지난 포스트</a>에서 공유한 <code class="language-plaintext highlighter-rouge">v0</code> 프로토타입에 codex와 함께 기능을 하나씩 추가하며 8월 22일 하루 동안의 기록을 정리합니다.</p> <h1 id="목표">목표</h1> <p>v0 단계에서 마크업과 퍼블리싱은 거의 완료되었으니, 다음은 기능을 차근차근 추가하는 일입니다.</p> <p><a href="/ps-algo-blog-1">지난 포스트</a>에서 언급한 블로그 목표 중 일부를 구현하려 했습니다. 블로그의 핵심은 <strong>mdx 콘텐츠를 리스트에 보여주고 의도대로 렌더링하는 것</strong>입니다. <code class="language-plaintext highlighter-rouge">velite</code>를 사용해 mdx 기반 콘텐츠를 nextJS 블로그에서 라우팅하고, mdx 렌더링 과정에 <code class="language-plaintext highlighter-rouge">codehike</code>를 적용해 코드블록을 멋지게 표현하는 것이 8월 22일의 목표였습니다.</p> <h1 id="첫-시작---codex는-실수하는-ai">첫 시작 - codex는 실수하는 AI</h1> <p>처음에는 v0가... Fri, 22 Aug 2025 00:00:00 +0000 https://kasterra.github.io/ps-algo-blog-2/ https://kasterra.github.io/ps-algo-blog-2/ short essay <h1 id="들어가며">들어가며</h1> <p>흔히 개발자는 학습을 멈출 수 없는 직업이라고 합니다. 프론트엔드 생태계도 끊임없이 새로운 기술이 등장하며, 채용 시장의 기준도 최신 스택으로 옮겨갑니다. 그동안은 ‘근간’에 충실하려 노력했지만, 업계의 주류가 된 기술과 도구를 계속 외면할 수는 없습니다.</p> <p>이번 프로젝트는 향후 이직에 도움을 주면서 동시에 개인적으로도 의미 있는, <strong>Next.js 기반 PS(Problem Solving) 코딩 테스트 블로그 분관</strong>을 만드는 것입니다. 최근 과제 테스트와 여러 공고를 보면서 <strong>Next.js 경험의 유무가 확실한 차이를 만든다</strong>는 점, 그리고 <strong>AI 활용 경험이 효율성과 완성도에 좋은 신호</strong>로 읽힌다는 점을 확인했습니다. 그래서 “채용 시장에서 설득력 있는 프로젝트”를 목표로 삼았습니다.</p> <h1 id="ai-활용-계획">AI 활용 계획</h1> <h2 id="빠르게-성숙한-v0">빠르게 성숙한 v0</h2> <p>처음 <code class="language-plaintext highlighter-rouge">v0.dev</code>가 등장했을... Wed, 20 Aug 2025 00:00:00 +0000 https://kasterra.github.io/ps-algo-blog-1/ https://kasterra.github.io/ps-algo-blog-1/ short essay <h1 id="들어가며">들어가며</h1> <p>‘프론트엔드 개발자’라는 말은 어느새 ‘React 개발자’, ‘Next.js 개발자’와 같은 의미로 통용되고 있습니다. 저 역시 두 용어를 명확히 구분하기 어렵다고 느낀 적이 많았고, 이 블로그의 글을 작성할 때도 <code class="language-plaintext highlighter-rouge">React</code> 카테고리와 <code class="language-plaintext highlighter-rouge">frontend</code> 중 어떤 것을 선택할지 망설인 경우가 많았습니다.</p> <p>이 글은 최근 GeekNews 등에서 본 여러 기술 아티클과, 저 자신의 커리어를 점검하며 던졌던 질문에서 출발했습니다. 우리가 지금 사용하는 도구들이 과연 ‘적절한 선택’이었는지 되묻고, 그 고민을 글로 정리하고자 합니다.</p> <h2 id="왜-react는-등장했는가---react가-해결하고자-했던-문제">왜 React는 등장했는가 - React가 해결하고자 했던 문제</h2> <h3 id="일반적인-비유---고속열차는-무엇을-위함인가">일반적인 비유 - 고속열차는 무엇을 위함인가</h3> <p>당연한 이야기 하나를 해보겠습니다. 어떤 도구든 쓰임새가 있기 때문에 존재하고 통용됩니다. 예를... Mon, 28 Jul 2025 00:00:00 +0000 https://kasterra.github.io/reviewing-contemporary-fe-tools/ https://kasterra.github.io/reviewing-contemporary-fe-tools/ frontend