전체 글34 고요한 표면 · Still Surface — Three.js로 3D 행성을 걷다 ▶ 플레이: https://david-myeonghan.github.io/still-surface/(모바일은 왼쪽 드래그 이동 · 오른쪽 드래그 시선 · JUMP/SCAN 버튼)답답하면 새 탭에서 전체화면으로 ↗기술 스택Three.js (렌더링·애니메이션), GLSL (하늘 셰이더), Vite (빌드)WebAudio (앰비언트 드론·스캔 톤·발견 차임, 무의존)node:test (순수 로직 40개) + Playwright (3D·터치 스모크)GitHub Actions → Pages 자동 배포구현 포인트"능선을 넘는 순간"에 집중한 도파민 루프안개(FogExp2)로 드로우 거리를 제한하고 UnrealBloom으로 비콘을 발광시켜서, 언덕을 넘는 순간 빛기둥이 팝인하도록 설계했습니다. 발견 → 스캔 → 보상.. 2026. 8. 9. Barrel export, 제대로 쓰기 Barrel export 사용 규약 barrel은 여러 export를 한 index.ts에 모아 다시 내보내는 파일이다. import 경로를 단순화하지만, 사용 위치에 따라 순환 참조·번들 비대·빌드 캐시 무효화를 유발한다. 원칙은 하나다. barrel은 모듈의 공개 경계에서만 사용하고, 모듈 내부에서는 사용하지 않는다. 예시는 가상 저장소 acme 하나로 통일한다. apps/web·apps/admin 앱과 libs/shared·libs/ui 라이브러리가 한 저장소에 있는 구조다. acme/├─ apps/│ ├─ web/ # 사용자용 앱│ └─ admin/ # 관리자용 앱└─ libs/ ├─ shared/ # 공용 유틸리티 └─ ui/ .. 2026. 8. 2. 당신은 이미 React에서 객체지향을 하고 있다 - React와 외부 시스템 사이, 경계를 긋는 일 그러려니 넘어가는 한 줄const queryClient = new QueryClient(); 프론트엔드에서 요즘 서버 데이터를 다루기 위해 가장 많이 쓰이는 @tanstack/react-query, 일명 리액트 쿼리.이를 사용하는 앱이라면 어딘가에 반드시 있는 줄입니다. 그런데 이 줄은 꽤 이상한 물건입니다. 함수형의 세계인 React에서 혼자 new로 태어나고, 공식 문서는 이걸 컴포넌트 밖에 두라고 안내합니다. 다들 그대로 따라 쓰지만 이유를 묻는 사람은 드뭅니다. 이러한 특징의 이유를 살펴봅시다. QueryClient는 캐시라는 상태를 쥐고, 앱과 함께 살다 죽는 수명을 가진, 평범한 클래스 인스턴스입니다. new인 이유는 정체성이 있기 때문입니다. 아까의 캐시와 지금의 캐시는 같은 객체여야 하죠... 2026. 8. 2. 노 프레임워크로 만든 브라우저 수박깨기 - Vanilla JS 미니게임 - 기술 스택: Vanilla JS · HTML Canvas프레임워크 · 빌드 · 의존성 0테스트 포함- 구현 포인트 - 과일이 부딪히고 굴러 쌓이는 물리를 직접 구현 (라이브러리 없이) - 같은 과일이 닿으면 합쳐지는 판정과 점수 처리. - 굴러갈 때 얼굴이 같이 돌아가는 연출. - 화면 없이 자동으로 돌려 물리가 안 튀는지 검증 안 보이면 → 새 탭에서 플레이 2026. 7. 26. 웨이브 생존 타워 디펜스 만들기 (+ 리워드 광고 붙이기) - 기술 스택: Vanilla JS · HTML Canvas프레임워크 · 빌드 · 의존성 0테스트 포함- 구현 포인트 - 적이 정해진 길을 따라오고, 타워가 앞선 적부터 자동 조준해 공격 - 웨이브가 갈수록 어려워지는 난이도 곡선 - 난이도를 자동 시뮬레이션으로 수치화해서 조정 - 타워·점수·진행 상황을 저장해 새로고침해도 이어짐 - 광고 보면 한방 폭탄 — 낙하→폭발→충격파가 퍼지며 몹이 죽는 연출 - 광고 호출을 함수 하나로 분리 → 웹은 목업, 나중에 모바일에선 그 함수만 AdMob으로 교체(게임 코드 무변경)안 보이면 → 새 탭에서 플레이 2026. 7. 22. 한글·영어 데일리 워들 만들기 — 한글 모아쓰기 직접 구현 - 기술 스택: Vanilla JS · CSSHTML Canvas프레임워크 · 빌드 · 의존성 0테스트 포함- 구현 포인트 - 한글을 자모(초·중·종성)로 쪼개 글자 안에서 자모별로 색 피드백 - 매일 자정에 모두 같은 문제가 나오도록 날짜 기반으로 출제(서버 없이) - 화면 자판·물리 키보드 둘 다 입력 가능 - 연속 기록·통계 저장 화면이 안 보이거나 결과 공유가 안 되면 → 새 탭에서 플레이오늘 몇 번 만에 맞췄나요? 🟩 결과를 댓글로 인증해보세요! 2026. 7. 20. 방치형 벽돌깨기 만들기 — 캔버스 게임의 기본기 - 기술 스택: Vanilla JS · HTML Canvas프레임워크 · 빌드 · 의존성 0테스트 포함- 구현 포인트 - 공이 알아서 벽돌을 깨는 방치형 + 탭으로 직접 개입하는 재미 - 벽돌·공 충돌과 반사를 직접 계산. - 골드로 공을 늘리고 강화하는 성장 구조. - 이후 만든 세 게임의 캔버스 뼈대가 된 첫 프로젝트 안 보이면 → 새 탭에서 플레이 2026. 7. 20. 우리가 진짜 몰두해야 할 일 한 사람이 숲속에서 나무를 베고 있었다. 그는 쉬지 않고 톱질을 했다. 땀은 비 오듯 흘렀고, 팔은 점점 무거워졌다. 그런데도 나무는 좀처럼 넘어가지 않았다. 지나가던 사람이 그 모습을 보고 물었다.“톱날이 많이 무뎌진 것 같은데, 잠깐 멈추고 갈아보는 게 어때요?” 나무를 베던 사람이 대답했다.“그럴 시간이 어디 있어요. 지금 나무 베느라 너무 바쁩니다.” 이 이야기를 들으면 우리는 바로 문제를 알아차린다. 톱날이 무뎌졌다면 잠깐 멈추고 갈아야 한다. 그래야 더 적은 힘으로 더 빨리 나무를 벨 수 있다. 그러나 실제론 이 당연한 판단을 자주 놓친다. 개발팀의 일도 이와 비슷하다. 우리는 매일 기능을 만들고, 버그를 고치고, 배포를 준비하고, 갑자기 들어온 요청을 처리한다. 하루 종일 바쁘게 톱질한다... 2026. 6. 5. AI에 대한 지금까지의 생각 나만 그런 건 아니었겠지만, 지난해 말부터 올해 초 AI에 대한 포모가 컸다.1~2월만 하더라도 Claude, OpenClaw 와 같은 Agentic AI가 이 세상 모든 개발자를 대체할 거라는 세기말 감성이 있었다. 하루가 멀다 하고 Claude의 성능 개선 소식이 들렸고, 어떤 기능이 붙었다, 이제는 이것도 가능하다는 소식이 쏟아졌고, 지금도 그렇지만, 능수능란하게 AI를 잘 다루는 개발자만이 살아남을 거라는 생각이 만연했다. 여러 곳에서 개발자, 비개발자 가릴 것 없이 "AI를 이용해 워크플로우를 자동화했다"라든지 "개인 비서 AI를 고용해 1인 기업을 만들었다"라는 이야기가 들려왔고, 이런 대세를 따라잡지 못하면 나는 결국 AI에 대체되겠구나 라는 생각이 많이 들었다. 다만 실제로 그 자동화가 .. 2026. 5. 19. LLM 에이전트로 Datadog 에러 분석 자동화 문제 상황의존성이 영 좋지 않은 20개 앱들이 모노레포 안에서 얽히고 섥혀 돌아간다. 그래서 그런지 에러 관리가 영 좋지 않았다. Datadog 웹훅이 에러를 감지하면 Jira 티켓으로 자동으로 만들어지는 것까지는 되어 있었다.그러나 티켓은 쌓이는데 아무도 안 봤다. 기능 개발과 버그 처리만 해도 지쳐 쓰러져가는 개발자가 매일 수십 개씩 오는 데이터독 에러를 다 들여다 볼순 없는 노릇이다.수동으로 에러 하나를 분석하려면 Datadog 열고, 스택트레이스 보고, 영향 범위 확인하고, 코드 확인해서 원인 찾고, 긴급한지 아닌지 판단하고.한 건에만 십수 분. 기존 DD 에러 트래킹 모니터는 새 이슈 감지 시 1회 알림만 보내준다. 이게 진짜 사용자가 결제/인증을 못하는 상황인지, 단순 입력 실수인건지는 개발자.. 2026. 2. 23. if kakao에 다녀옴 작년에 이어 올해도 참가자로 선정되어 if kakao 에 다녀왔다.키노트부터 화두는 역시 AI.작년엔 AI, LLM 개발 관련 세션이 많았던 것으로 기억하는데, 이번엔 AI 사용 사례나 활용 방법에 대한 이야기도 있어서 꽤 흥미로웠다.카카오 안에서 적극적으로 사용하는 노력이 많았고, 덕분에 도입해볼만한 아이디어도 많이 얻어왔다. AI 가 도입되면서 더 이상 개발자 안뽑는 다는 말이 많은데, 아직까지는 AI가 개발자를 완전 대체한다는 것은 불가능 한 일인 것 같다.그렇지만 생산성은 확실히 좋아졌고 전보다는 확실히 많은 일을 할 수있게 됐다.AI 시대에 준비된 개발자가 되야겠다는 생각이 많이 들었다. 2025. 9. 30. 소수 구하기 N 이하의 소수를 모두 출력하시오.소수: 1보다 큰 자연수 중 1과 자기 자신만 약수로 가지는 수 처음 생각했던 방법:def find_prime_list_under_number(number): prime_list = [] for num in range(number + 1): isPrime = True if num 1. N 까지 for-loop 돌면서:2. 자기 자신만 약수로 가지는지 (즉, 2부터 자기 자신까지 Modulo operation 을 돌렸을 때 0이 나오는지, 아닌지) 확인 3. isPrime 이라는 플래그를 이용해서, 소수이면 반환할 리스트에 저장. - 단점: Brute-force 방식이라, 숫자가 커지면 무리가 있음. 개선: import mathd.. 2025. 7. 7. 이전 1 2 3 다음
