프론트엔드 개발자의 기억 저장소

하루만에 포트폴리오 사이트 만들기 (with Claude Code)

목차들어가며기술 스택 선정프로젝트 구조 설계핵심 기능 구현Vercel 배포커스텀 도메인 설정Google Analytics 연동Google Search Console 등록Lighthouse 웹 바이탈 최적화SEO 최적화마치며1. 들어가며추후에 회고로 작성하게 되겠지만, 몸 담았던 회사의 거래소 서비스를 종료하기로 결정되었습니다. 현재는 퇴사 날짜를 정하고 기존 서비스의 기능들을 하나씩 빼는 서비스의 소프트 랜딩을 진행하고 있습니다. 다시 이력서를 정리하던 중에 여태까지 공부하고 작업했던 내용을 웹 사이트 포트폴리오로 정리해보면 좋을 것 같다고 생각했습니다. 프로젝트를 초기화하면서 예전에 고려했던 부분을 정리하며, 정리되지 않았던 부분들 또한 정리할 수 있는 과정이였습니다.이번 프로젝트에서는 Claude C..

5년차 프론트엔드 개발자의 취업 시장에서 살아남기

들어가며안녕하세요, 프론트엔드 개발자 이준희입니다. 오랜만에 정보 전달 글이 아닌, 개인적인 회고로 글을 작성하였습니다. 하고 싶은 말도 많고 공부한 부분도 많았어서, 정보 전달 글을 위주로 작성하였었는데요. 그 동안 퇴사 이후 취업 준비 기간을 거치면서 느꼈던 부분을 남겨보고자 합니다.워낙 개발자 취업 시장이 얼어붙었다는 말이 많았고, 실제로 제가 느끼기에도 전보다 구인 공고들이 많이 줄어든 것을 느낄 수 있었습니다. 5년차를 맞이하는 시점에 의도치 않게 다시 취준을 하게 되었지만, 소나기를 피하려고 취직을 할 수는 없었습니다.더욱 내가 가고 싶은 기업을 구체화하고, 타깃 기업을 맞춰 준비하는 취준이였던 것 같습니다. 두괄식으로 말씀드리자면, 저는 뤼튼 테크놀로지스 AX팀의 프론트엔드 개발자로 합류하게..

Text-to-SQL 딥다이브 — 자연어로 데이터베이스를 조회하는 앱 만들기

들어가며"도시별 고객 수는?" 이라는 말이 SQL 쿼리가 되고, 차트로 시각화되려면 어떤 일이 일어나는 걸까요?이 글에서는 Text-to-SQL의 개념부터, 직접 만든 학습용 앱의 내부 동작 흐름까지 상세히 다룹니다. Text-to-SQL Learner도시별 고객 수는?월별 매출 추이 보여줘카테고리별 매출 순위연령대별 주문 현황성별 구매 금액 비교브랜드별 평균 평점가장 많이 팔린 상품 TOP 10주문 상태별 비율은?my-text-to-sql-learner.vercel.app GitHub - junh0328/my-text-to-sql-learner: text to sql 흐름 톺아보기text to sql 흐름 톺아보기. Contribute to junh0328/my-text-to-sql-learner ..

useSyncExternalStore로 외부 상태 안전하게 동기화하기

실습하며 알아보기 Create Next AppuseEffect 방식과 useSyncExternalStore 방식을 비교해보세요. 실행 결과는 동일하지만, 구현 방식이 다릅니다.playground-cyan-two.vercel.app목차들어가며useEffect 기반 isMount 패턴의 문제점useSyncExternalStore 소개Before/After: 코드 비교기본 예제: isMounted 구현3가지 매개변수 완전 정복주의사항과 모범 사례심화: 로컬 스토리지 연동 TodoList마무리들어가며React 19와 함께 등장한 React Compiler는 자동 메모이제이션을 제공하며 개발자의 부담을 줄여줍니다. 하지만 이로 인해 기존의 일부 패턴이 예상대로 동작하지 않을 수 있습니다. 특히 useEffect를..

Claude Agent Skills 톺아보기 - 기술 블로그 글쓰기 도우미 Skill 만들기

들어가며Claude Code를 사용하다 보면 반복적인 작업이나 특정 도메인에 특화된 지식이 필요한 상황을 자주 마주하게 됩니다. 매번 같은 맥락을 설명하거나 동일한 지침을 반복하는 것은 비효율적일 수 있습니다. Agent Skills는 이러한 문제를 해결하기 위해 탄생한 모듈식 확장 기능입니다.요즘 SNS(쓰레드, 링크드인, ...)에서는 이렇게 Agent Skills를 활용한 다양한 사례들을 볼 수 있었는데요, 이 글을 통해 '티스토리 기술 블로그 글쓰기 도우미 Skill을 직접 만들어보면서 Agent Skills의 핵심 개념과 작성법을 배워봅니다. 84분짜리 영어 팟캐스트를 5분 만에 핵심 파악하고, 퀴즈까지 풀고, 직접 볼 가치가 있는지 판단84분짜리 영어 팟캐스트를 5분 만에 핵심 파악하고, 퀴즈..

Open AI - harness engineering, skill로 만들어 레포지토리 평가하기

들어가며2026년 2월 11일, OpenAI에서 글을 발표했습니다. "Harness engineering: leveraging Codex in an agent-first world" — 3명의 엔지니어가 코드 0줄에서 100만 줄 규모의 소프트웨어를 만들었다는 내용입니다.이 글에서의 핵심 메시지는 다음과 같습니다."소프트웨어 엔지니어링 팀의 주된 업무는 더 이상 코드를 작성하는 것이 아니라, 환경을 설계하고, 의도를 명시하며, 에이전트가 신뢰할 수 있는 작업을 수행할 수 있는 피드백 루프를 구축하는 것이다."이 글을 읽고 분석하면서, 내 프로젝트의 에이전트는 일을 잘 할 수 있는 환경인지 측정하고, 개선하고 싶다는 생각이 들었습니다. /harness-diagnostics 코드베이스의 에이전트 친화도를 체..

프론트엔드 개발자의 관점에서 바라본 Claude Design

Claude Design은 왜 단순한 AI 디자인 툴이 아닐까2026년 4월 17일, 앤트로픽은 ‘클로드 디자인’을 공개했습니다. 공식 설명만 보면 프로토타입, 슬라이드, 원페이저, 인터랙티브 목업을 만드는 AI 디자인 도구처럼 보입니다. 실제로 써보면 위치가 조금 다릅니다. 이 제품은 화면을 그리는 캔버스라기보다, 디자인이 만들어지고 리뷰되고 구현으로 넘어가는 절차를 다시 짜는 쪽에 가깝습니다.클로드 디자인을 직접 사용해보고 어떤 점이 다른지, 체감될 수 있는 점을 프론트엔드 개발자의 관점에서 작성해보겠습니다. claude design youtube video 목차Claude Design을 기존 디자인 도구와 다르게 봐야 하는 이유직접 써보며 확인한 세 장면누가 쓰면 가장 크게 체감하는가개발자 관점에서..

뤼튼 AX팀에서 정규 정규직을 시작하며

들어가며안녕하세요 프론트엔드 개발자 이준희입니다. 4월부터 AX 프로젝트에 합류하여 약 2달간의 몰입 과정을 보내고 돌아왔습니다. 지난주 정규직 전환 과정을 마치고 뤼튼에서 Austin으로 정규 정규직으로의 시작을 알리게 되었습니다. 그동안 3월에 합류한 이후 뤼튼에서의 3개월을 회고하며 온보딩 기간 동안 어떤 일을 목표로 잡았었고, 어느 정도 이뤄냈으며, 앞으로의 목표를 공유하고자 합니다.뤼튼의 평가 과정 정규직으로 입사한다면 뤼튼에서는 1 month review와 2 month review를 작성하게 됩니다. 앞서 작성했던 뤼튼에서의 한달 회고 또한 이전에 작성했던 1 month review를 기반으로 작성하였습니다. 뤼튼은 타 회사와는 조금 다르게 2 month review 및 평가 과정을 거치고 ..

ABOUT ME

프론트엔드 개발자의 기억 저장소

준희닷의 인기 글

준희닷의 최신 글

티스토리툴바