준희닷의 인기 글
-
하루만에 포트폴리오 사이트 만들기 (with Claude Code)
목차들어가며기술 스택 선정프로젝트 구조 설계핵심 기능 구현Vercel 배포커스텀 도메인 설정Google Analytics 연동Google Search Console 등록Lighthouse 웹 바이탈 최적화SEO 최적화마치며1. 들어가며추후에 회고로 작성하게 되겠지만, 몸 담았던 회사의 거래소 서비스를 종료하기로 결정되었습니다. 현재는 퇴사 날짜를 정하고 기존 서비스의 기능들을 하나씩 빼는 서비스의 소프트 랜딩을 진행하고 있습니다. 다시 이력서를 정리하던 중에 여태까지 공부하고 작업했던 내용을 웹 사이트 포트폴리오로 정리해보면 좋을 것 같다고 생각했습니다. 프로젝트를 초기화하면서 예전에 고려했던 부분을 정리하며, 정리되지 않았던 부분들 또한 정리할 수 있는 과정이였습니다.이번 프로젝트에서는 Claude C..
-
Open AI - harness engineering, skill로 만들어 레포지토리 평가하기
들어가며2026년 2월 11일, OpenAI에서 글을 발표했습니다. "Harness engineering: leveraging Codex in an agent-first world" — 3명의 엔지니어가 코드 0줄에서 100만 줄 규모의 소프트웨어를 만들었다는 내용입니다.이 글에서의 핵심 메시지는 다음과 같습니다."소프트웨어 엔지니어링 팀의 주된 업무는 더 이상 코드를 작성하는 것이 아니라, 환경을 설계하고, 의도를 명시하며, 에이전트가 신뢰할 수 있는 작업을 수행할 수 있는 피드백 루프를 구축하는 것이다."이 글을 읽고 분석하면서, 내 프로젝트의 에이전트는 일을 잘 할 수 있는 환경인지 측정하고, 개선하고 싶다는 생각이 들었습니다. /harness-diagnostics 코드베이스의 에이전트 친화도를 체..
-
5년차 프론트엔드 개발자의 취업 시장에서 살아남기
들어가며안녕하세요, 프론트엔드 개발자 이준희입니다. 오랜만에 정보 전달 글이 아닌, 개인적인 회고로 글을 작성하였습니다. 하고 싶은 말도 많고 공부한 부분도 많았어서, 정보 전달 글을 위주로 작성하였었는데요. 그 동안 퇴사 이후 취업 준비 기간을 거치면서 느꼈던 부분을 남겨보고자 합니다.워낙 개발자 취업 시장이 얼어붙었다는 말이 많았고, 실제로 제가 느끼기에도 전보다 구인 공고들이 많이 줄어든 것을 느낄 수 있었습니다. 5년차를 맞이하는 시점에 의도치 않게 다시 취준을 하게 되었지만, 소나기를 피하려고 취직을 할 수는 없었습니다.더욱 내가 가고 싶은 기업을 구체화하고, 타깃 기업을 맞춰 준비하는 취준이였던 것 같습니다. 두괄식으로 말씀드리자면, 저는 뤼튼 테크놀로지스 AX팀의 프론트엔드 개발자로 합류하게..
-
Claude Agent Skills 톺아보기 - 기술 블로그 글쓰기 도우미 Skill 만들기
들어가며Claude Code를 사용하다 보면 반복적인 작업이나 특정 도메인에 특화된 지식이 필요한 상황을 자주 마주하게 됩니다. 매번 같은 맥락을 설명하거나 동일한 지침을 반복하는 것은 비효율적일 수 있습니다. Agent Skills는 이러한 문제를 해결하기 위해 탄생한 모듈식 확장 기능입니다.요즘 SNS(쓰레드, 링크드인, ...)에서는 이렇게 Agent Skills를 활용한 다양한 사례들을 볼 수 있었는데요, 이 글을 통해 '티스토리 기술 블로그 글쓰기 도우미 Skill을 직접 만들어보면서 Agent Skills의 핵심 개념과 작성법을 배워봅니다. 84분짜리 영어 팟캐스트를 5분 만에 핵심 파악하고, 퀴즈까지 풀고, 직접 볼 가치가 있는지 판단84분짜리 영어 팟캐스트를 5분 만에 핵심 파악하고, 퀴즈..
-
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 ..
-
LLM WIKI로 나만의 세컨드 브레인 만들기
목차들어가며왜 만들었나LLM Wiki 패턴이 뭔가어떻게 굴러가나직접 써보니앞으로들어가며안드레 카파시의 LLM Wiki를 바탕으로 여기저기 흩어져 있던 제 글과 공부 내역을 한 곳에 모아, LLM이 직접 읽고 요약하고 연결해 주는 개인 지식 베이스를 만들어 봤습니다. RAG처럼 매 질문마다 원본을 다시 뒤지는 방식이 아니라, 한 번 정리한 지식이 서로 연결된 채 쌓여가는 "위키" 쪽에 가깝습니다.처음부터 이 방식을 고른 데는 이유가 있습니다. RAG는 현재 llm 모델 컨텍스트 (약 1M)내에서 해결할 수 없는 더욱 복잡한 관계를 기반으로 하는 검색에 효율적이라고 생각합니다. 모델 컨텍스트 내에서 해결할 수 있는 작업과 효율적으로 사용할 수 있는 부분들이 있는데 RAG가 좋아서 혹은 RAG를 써보고 싶어서..
-
OAuth 2.0과 SSO 구현 가이드
내용ProBit Global 서비스의 세 가지 주요 구성 요소에서 OAuth 2.0 프로토콜을 기반으로 한 단일 로그인(SSO) 플로우 구현을 설명합니다:로그인 서버 (probit-global-accounts): 인증 UI 및 SSO 연동을 처리하는 권한 서버BFF (프론트엔드용 백엔드) (probit-global-web/server): 인증 라우팅 및 토큰 관리를 위한 Express.js 미들웨어클라이언트 (probit-global-web/src): 인증 서비스를 제공하는 Angular 프론트엔드 애플리케이션OAuth 2.0 개요OAuth 2.0은 웹 및 애플리케이션 인증 및 권한 부여를 위한 개방형 표준 프로토콜입니다. ProBit Global 시스템은 OAuth 2.0의 인증 코드 부여(Author..
-
useSyncExternalStore로 외부 상태 안전하게 동기화하기
실습하며 알아보기 Create Next AppuseEffect 방식과 useSyncExternalStore 방식을 비교해보세요. 실행 결과는 동일하지만, 구현 방식이 다릅니다.playground-cyan-two.vercel.app목차들어가며useEffect 기반 isMount 패턴의 문제점useSyncExternalStore 소개Before/After: 코드 비교기본 예제: isMounted 구현3가지 매개변수 완전 정복주의사항과 모범 사례심화: 로컬 스토리지 연동 TodoList마무리들어가며React 19와 함께 등장한 React Compiler는 자동 메모이제이션을 제공하며 개발자의 부담을 줄여줍니다. 하지만 이로 인해 기존의 일부 패턴이 예상대로 동작하지 않을 수 있습니다. 특히 useEffect를..
준희닷의 최신 글
-
뤼튼 AX 팀에서 프론트엔드 개발자로 일하는 법AI 활용 2026.08.11 19:47
목차들어가며디자인 시스템 소개워크 플로우상세 프롬프트 소개직접 돌려본 결과와 개선점마치며들어가며안녕하세요, 프론트엔드 개발자 이준희, 오스틴입니다. 요즘 뤼튼에서의 제 일과의 상당 부분은 FE를 직접 작업하는 게 아니라, AI가 화면을 만들 수 있는 환경을 세팅하는 일, FE 인프라를 구성하는 일을 하고 있습니다. 저희 팀은 실제 프로젝트에 나가기 전 다양한 기업과의 PoC를 진행하게 되는데, 이런 PoC 프로젝트에 모든 직군(FE, Designer, ...)의 리소스를 할당할 수는 없는 상황입니다. PoC의 화면 단은 FE도 디자이너도 아닌 Agent Developer가 프롬프팅을 기반으로 만들게 됩니다, 개발이 본업이 아닌 PM 분들까지 포함해서요. FE와 디자이너가 빠진 상태에서 작업하다 보니, 작..
-
LLM WIKI로 나만의 세컨드 브레인 만들기AI 활용 2026.08.03 19:36
목차들어가며왜 만들었나LLM Wiki 패턴이 뭔가어떻게 굴러가나직접 써보니앞으로들어가며안드레 카파시의 LLM Wiki를 바탕으로 여기저기 흩어져 있던 제 글과 공부 내역을 한 곳에 모아, LLM이 직접 읽고 요약하고 연결해 주는 개인 지식 베이스를 만들어 봤습니다. RAG처럼 매 질문마다 원본을 다시 뒤지는 방식이 아니라, 한 번 정리한 지식이 서로 연결된 채 쌓여가는 "위키" 쪽에 가깝습니다.처음부터 이 방식을 고른 데는 이유가 있습니다. RAG는 현재 llm 모델 컨텍스트 (약 1M)내에서 해결할 수 없는 더욱 복잡한 관계를 기반으로 하는 검색에 효율적이라고 생각합니다. 모델 컨텍스트 내에서 해결할 수 있는 작업과 효율적으로 사용할 수 있는 부분들이 있는데 RAG가 좋아서 혹은 RAG를 써보고 싶어서..
-
회계 재무 AX 프로젝트 회고회고 2026.07.30 21:54
회계 재무 AX 프로젝트 회고목차들어가며회계 재무 ERP AX 프로젝트 소개잘한 점부딪힌 점시도한 점느낀 점들어가며뤼튼 AX팀 프론트엔드 개발자 오스틴입니다. 3월 뤼튼 AX팀에 합류하여 3월 17일 회계 재무 ERP AX 프로젝트에 참여하게 되었고, 약 4개월간의 작업 끝에 프로젝트를 완수할 수 있게 되었습니다.처음 합을 맞추는 팀원들과 함께하고, 뤼튼에 합류하여 프로젝트를 진행하며 배운 점을 회고하는 시간을 가져보려고 합니다.회계 재무 ERP AX 프로젝트 소개1. 제품 개요1.1 시스템 정의회계 재무 ERP 포털은 고객사 임직원이 회계 전표를 작성·검증·결재하면, 최종 승인된 데이터가 Microsoft Dynamics 365 Finance & Operations(D365 F&O) 에 자동 전기(Po..
-
프롬프트 엔지니어링 실전 - with OMC(oh my claude code)AI 활용 2026.06.17 18:18
들어가며AX 프로젝트 투입 후 레포지토리에서 실제로 자주 쓰는 명령어(ralplan · autopilot · ralph · deep-interview)와, 그때 작성했던 원본 프롬프트 형식 + 그 결과로 나온 산출물을 정리한 문서입니다. 사람마다 클로드를 활용하는 방법이 다르지만, 이전 자격증에서 배웠던 것을 활용하여 현업에서도 구조화한 프롬프트를 작성하고 있습니다. 예시는 모두 세션 기록에서 추출한 입력 원본이며, 요즘 화두인 ’loop engineering’과도 맞닿아 있는 것 같아 공유해보려고 합니다.PrerequisitesOMC(oh my claudecode) 플러그인 사용 oh-my-claudecode - A weapon, not a toolMulti-agent orchestration plug..
-
온톨로지란 무엇인가?AI 활용 2026.06.16 18:57
Ontology ConceptOntology Concept1. 정의Ontology는 현실 세계의 운영 방식을 컴퓨터와 사람이 함께 이해하고 실행할 수 있도록 표현한 의미 모델이다. 단순한 데이터 스키마나 화면 설계가 아니라, 비즈니스가 실제로 어떻게 작동하는지에 대한 디지털 운영 맥락이다.이 문서에서 Ontology는 다음 세 가지를 하나로 연결한다.데이터: 현재 상태를 나타내는 사실논리: 상태를 해석하고 판단하는 규칙과 모델행동: 현실 시스템에 영향을 주는 실행 가능한 조치따라서 Ontology의 목적은 데이터를 보기 좋게 정리하는 것이 아니라, 통찰에서 의사결정, 의사결정에서 실행까지 이어지는 루프를 만드는 것이다.2. 핵심 관점Ontology는 기존 시스템이 데이터를 저장하는 방식이 아니라 실제 세..
-
뤼튼 AX팀에서 정규 정규직을 시작하며회고 2026.06.15 19:51
들어가며안녕하세요 프론트엔드 개발자 이준희입니다. 4월부터 AX 프로젝트에 합류하여 약 2달간의 몰입 과정을 보내고 돌아왔습니다. 지난주 정규직 전환 과정을 마치고 뤼튼에서 Austin으로 정규 정규직으로의 시작을 알리게 되었습니다. 그동안 3월에 합류한 이후 뤼튼에서의 3개월을 회고하며 온보딩 기간 동안 어떤 일을 목표로 잡았었고, 어느 정도 이뤄냈으며, 앞으로의 목표를 공유하고자 합니다.뤼튼의 평가 과정 정규직으로 입사한다면 뤼튼에서는 1 month review와 2 month review를 작성하게 됩니다. 앞서 작성했던 뤼튼에서의 한달 회고 또한 이전에 작성했던 1 month review를 기반으로 작성하였습니다. 뤼튼은 타 회사와는 조금 다르게 2 month review 및 평가 과정을 거치고 ..
-
프론트엔드 개발자의 관점에서 바라본 Claude DesignAI 활용 2026.04.20 08:07
Claude Design은 왜 단순한 AI 디자인 툴이 아닐까2026년 4월 17일, 앤트로픽은 ‘클로드 디자인’을 공개했습니다. 공식 설명만 보면 프로토타입, 슬라이드, 원페이저, 인터랙티브 목업을 만드는 AI 디자인 도구처럼 보입니다. 실제로 써보면 위치가 조금 다릅니다. 이 제품은 화면을 그리는 캔버스라기보다, 디자인이 만들어지고 리뷰되고 구현으로 넘어가는 절차를 다시 짜는 쪽에 가깝습니다.클로드 디자인을 직접 사용해보고 어떤 점이 다른지, 체감될 수 있는 점을 프론트엔드 개발자의 관점에서 작성해보겠습니다. claude design youtube video 목차Claude Design을 기존 디자인 도구와 다르게 봐야 하는 이유직접 써보며 확인한 세 장면누가 쓰면 가장 크게 체감하는가개발자 관점에서..
-
뤼튼에서의 한달 회고끄적끄적 2026.04.17 22:58
들어가며안녕하세요 프론트엔드 개발자 이준희입니다. 사내에서는 영어 이름을 사용하기 때문에 어쩌면 한글 이름보다 ‘Austin’ 영어 이름이 익숙해진 요즘입니다. 3월 9일 뤼튼에 합류하여 약 6주의 시간이 지나고 있었는데요, 약 한달간 생활하면서 느끼는 뤼튼의 일하는 방법 그리고 뤼튼에서의 느낀 점에 대한 개인적인 생각을 담아보려고 합니다. 적응 현황입사 초기에는 업무 범위와 프로젝트 맥락을 빠르게 따라가는 것이 가장 중요했는데, 한 달 정도 지나면서 AX팀의 기본적인 협업 방식과 프로젝트 진행 흐름에는 어느 정도 익숙해졌습니다. 특히 실제 프로젝트 안에서 바로 업무를 맡아 진행하다 보니, 단순한 인수인계보다는 일하면서 맥락을 익히는 방식으로 적응해 온 시간이었던 것 같습니다.가장 빠르게 익숙해진 부분은..