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

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

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

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

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

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

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

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 ..

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

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

LLM WIKI로 나만의 세컨드 브레인 만들기

목차들어가며왜 만들었나LLM Wiki 패턴이 뭔가어떻게 굴러가나직접 써보니앞으로들어가며안드레 카파시의 LLM Wiki를 바탕으로 여기저기 흩어져 있던 제 글과 공부 내역을 한 곳에 모아, LLM이 직접 읽고 요약하고 연결해 주는 개인 지식 베이스를 만들어 봤습니다. RAG처럼 매 질문마다 원본을 다시 뒤지는 방식이 아니라, 한 번 정리한 지식이 서로 연결된 채 쌓여가는 "위키" 쪽에 가깝습니다.처음부터 이 방식을 고른 데는 이유가 있습니다. RAG는 현재 llm 모델 컨텍스트 (약 1M)내에서 해결할 수 없는 더욱 복잡한 관계를 기반으로 하는 검색에 효율적이라고 생각합니다. 모델 컨텍스트 내에서 해결할 수 있는 작업과 효율적으로 사용할 수 있는 부분들이 있는데 RAG가 좋아서 혹은 RAG를 써보고 싶어서..

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

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

프롬프트 엔지니어링 실전 - with OMC(oh my claude code)

들어가며AX 프로젝트 투입 후 레포지토리에서 실제로 자주 쓰는 명령어(ralplan · autopilot · ralph · deep-interview)와, 그때 작성했던 원본 프롬프트 형식 + 그 결과로 나온 산출물을 정리한 문서입니다. 사람마다 클로드를 활용하는 방법이 다르지만, 이전 자격증에서 배웠던 것을 활용하여 현업에서도 구조화한 프롬프트를 작성하고 있습니다. 예시는 모두 세션 기록에서 추출한 입력 원본이며, 요즘 화두인 ’loop engineering’과도 맞닿아 있는 것 같아 공유해보려고 합니다.PrerequisitesOMC(oh my claudecode) 플러그인 사용 oh-my-claudecode - A weapon, not a toolMulti-agent orchestration plug..

ABOUT ME

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

준희닷의 인기 글

준희닷의 최신 글

티스토리툴바