왁뿌타워의 줄임말 같긴한데 천공의 섬 라프타랑 뭔가 비슷해서 더 정이 가는 것 같다소리도 좋고 난이도도 쉬워서 진짜 뇌빼고 헤헤 좋당... 하면서 플레이할 수 있는 게 넘 취향근데 월드가 너무 적고 최정상에 도달하기까지 플레이타임이 너무 짧음!!! ㅠㅠ 더 하고싶어클로드 토큰이 남아돌면 개발도 해보겠는데 (직접 개발할 생각은 x 우하하토큰도 매일매일 부족하고 흠냐발로랑 롤에게 상처받은 마음 왁뿌타랑 치이카와 달리기로 힐링햇다그지가튼 라이엇! 빠뀨빠뀨
브라우저에서 문서 다루기 #6: pdf.js 경로 3개는 legacy로, Suspense는 꺼 두기react-pdf 11이 나와서 연재 뷰어를 올려 봤습니다.최신 크롬에서는 멀쩡히 열리는데, 크롬 140과 143에서는 PDF가 아예 안 열렸습니다.README에는 최소 요구 사항이 크롬 125라고 적혀 있는데 말이죠.게다가 열리는 브라우저에서는 스크롤할 때마다 목록이 맨 위로 돌아갔습니다.react-pdf 11로 올릴 때 챙길 것을 직접 돌려 본 순서대로 알아보도록 합시다.뷰어는 4편의 '보이는 쪽만' 뷰어를 react-pdf 11.0.0(pdfjs-dist 6.3.289)과 Next.js 16.4.0으로 옮긴 것이고, 문서는 300쪽 PDF(656KB), 브라우저는 headless Chromium 140..
에이전트와 일하는 프런트엔드 #7: AI 에이전트가 안 알려줬어요올해 4월 FDA가 미국의 한 의약품 제조사 기업에 경고장을 보냈습니다.경고장엔 "의약품 제조에서 인공지능을 부적절하게 사용함"이라 써져있었습니다.이 회사는 FDA 규정을 지키기 위해AI 에이전트로 규격과 절차서를 만들어 사용하고 있었는데정작 공정 밸리데이션은 하지 않은 채로 제품을 시장에 내보내점검 나온 FDA 직원이 그 사실을 알려 주자 어이가 없게도 이렇게 답했다고 합니다."쓰던 AI 에이전트가 그게 필수라고 안 알려 줬어요..."(the AI agent you used … never told you it was required)에이전트 말만 믿고 만든 문서는 FDA 기준으로는 안 괜찮다는 겁니다.반면 유럽에서는LLM을 중요한 결정에서..
브라우저에서 문서 다루기 #5: 접어서 찾고 Range로 칠하기보이는 쪽만 그리는 PDF 뷰어에는 구멍이 하나 있습니다.브라우저 찾기(Ctrl+F)로는 멀리 있는 쪽을 못 찾는다는 겁니다.그래서 문서 전체 검색을 직접 붙였는데, 오래 붙잡은 건 검색보다 줄 바꿈이었습니다.줄 끝에서 "임상시 / 험"으로 잘린 단어를 pdf.js 기본 뷰어도 못 찾더라고요.텍스트 레이어 없이 문서 전체에서 찾고, 찾은 자리를 칠하는 방법을 알아보도록 합시다.확인에는 300쪽 PDF와 줄 끝에서 단어가 잘리게 만든 1쪽 PDF(이하 줄 바꿈 1쪽), 그리고 Next.js 16.3.6과 react-pdf 10.5.0 뷰어를 썼습니다.1. 글자는 PDF에서 직접 받기보이는 쪽만 그리면 DOM에 글자가 있는 쪽은 화면 근처 몇 쪽..
에이전트와 일하는 프런트엔드 #6: 작성자도 날짜도 마음대로 적는 git log임상시험 데이터는 몇 년이 지나도 감사를 받습니다.감사관이 "이 값은 누가, 언제, 왜 바꿨나요?"라고 물으면 그때 남은 기록만으로 답해야 합니다.개발자 입장에서 제일 먼저 떠오르는 기록은 git log인데git log로 날먹할 수 있으면 참 좋겠지만git log를 과연 믿을 수 있는 기록이라 볼 수 있을까요?그래서 9월에 만든 커밋을 1월에 쓴 것처럼 바꾸는 테스트를 해봤습니다.환경 변수 2개랑 옵션 하나면 충분합니다.1. 감사 추적이 뭐냐면감사 추적(audit trail)은 데이터가 바뀔 때마다 시스템이 자동으로 쌓는 기록입니다.예를 들어 입력 화면에서 혈압 120을 130으로 고치면바꾸기 전 값, 바꾼 값, 바꾼 사람, ..
브라우저에서 문서 다루기 #4: 화면 근처 쪽만 그리면 캔버스 5장PDF 뷰어에 문서를 띄울 때는 보통 쪽마다 를 하나씩 깝니다.근데 300쪽짜리를 이렇게 띄웠더니 첫 쪽은 1초 안에 떴는데 브라우저 메모리가 3GB를 넘었습니다.화면에 보이는 건 한두 쪽인데 말이죠.모든 쪽을 그릴 때와 화면 근처 쪽만 그릴 때를 재 보고, 보이는 쪽만 그릴 때 챙길 것을 알아보도록 합시다.문서는 레터 크기 300쪽(쪽마다 본문 40줄, 텍스트 조각 모두 12,600개), 화면은 1280×900 창에 레티나(devicePixelRatio 2), 뷰어는 Next.js 16.3.6과 react-pdf 10.5.0입니다.숫자는 headless Chromium 140으로 2~5번 잰 범위입니다.1. 첫 쪽만 보면 멀쩡합니다전부 ..
왁뿌타워의 줄임말 같긴한데 천공의 섬 라프타랑 뭔가 비슷해서 더 정이 가는 것 같다소리도 좋고 난이도도 쉬워서 진짜 뇌빼고 헤헤 좋당... 하면서 플레이할 수 있는 게 넘 취향근데 월드가 너무 적고 최정상에 도달하기까지 플레이타임이 너무 짧음!!! ㅠㅠ 더 하고싶어클로드 토큰이 남아돌면 개발도 해보겠는데 (직접 개발할 생각은 x 우하하토큰도 매일매일 부족하고 흠냐발로랑 롤에게 상처받은 마음 왁뿌타랑 치이카와 달리기로 힐링햇다그지가튼 라이엇! 빠뀨빠뀨
브라우저에서 문서 다루기 #6: pdf.js 경로 3개는 legacy로, Suspense는 꺼 두기react-pdf 11이 나와서 연재 뷰어를 올려 봤습니다.최신 크롬에서는 멀쩡히 열리는데, 크롬 140과 143에서는 PDF가 아예 안 열렸습니다.README에는 최소 요구 사항이 크롬 125라고 적혀 있는데 말이죠.게다가 열리는 브라우저에서는 스크롤할 때마다 목록이 맨 위로 돌아갔습니다.react-pdf 11로 올릴 때 챙길 것을 직접 돌려 본 순서대로 알아보도록 합시다.뷰어는 4편의 '보이는 쪽만' 뷰어를 react-pdf 11.0.0(pdfjs-dist 6.3.289)과 Next.js 16.4.0으로 옮긴 것이고, 문서는 300쪽 PDF(656KB), 브라우저는 headless Chromium 140..
에이전트와 일하는 프런트엔드 #7: AI 에이전트가 안 알려줬어요올해 4월 FDA가 미국의 한 의약품 제조사 기업에 경고장을 보냈습니다.경고장엔 "의약품 제조에서 인공지능을 부적절하게 사용함"이라 써져있었습니다.이 회사는 FDA 규정을 지키기 위해AI 에이전트로 규격과 절차서를 만들어 사용하고 있었는데정작 공정 밸리데이션은 하지 않은 채로 제품을 시장에 내보내점검 나온 FDA 직원이 그 사실을 알려 주자 어이가 없게도 이렇게 답했다고 합니다."쓰던 AI 에이전트가 그게 필수라고 안 알려 줬어요..."(the AI agent you used … never told you it was required)에이전트 말만 믿고 만든 문서는 FDA 기준으로는 안 괜찮다는 겁니다.반면 유럽에서는LLM을 중요한 결정에서..
브라우저에서 문서 다루기 #5: 접어서 찾고 Range로 칠하기보이는 쪽만 그리는 PDF 뷰어에는 구멍이 하나 있습니다.브라우저 찾기(Ctrl+F)로는 멀리 있는 쪽을 못 찾는다는 겁니다.그래서 문서 전체 검색을 직접 붙였는데, 오래 붙잡은 건 검색보다 줄 바꿈이었습니다.줄 끝에서 "임상시 / 험"으로 잘린 단어를 pdf.js 기본 뷰어도 못 찾더라고요.텍스트 레이어 없이 문서 전체에서 찾고, 찾은 자리를 칠하는 방법을 알아보도록 합시다.확인에는 300쪽 PDF와 줄 끝에서 단어가 잘리게 만든 1쪽 PDF(이하 줄 바꿈 1쪽), 그리고 Next.js 16.3.6과 react-pdf 10.5.0 뷰어를 썼습니다.1. 글자는 PDF에서 직접 받기보이는 쪽만 그리면 DOM에 글자가 있는 쪽은 화면 근처 몇 쪽..
에이전트와 일하는 프런트엔드 #6: 작성자도 날짜도 마음대로 적는 git log임상시험 데이터는 몇 년이 지나도 감사를 받습니다.감사관이 "이 값은 누가, 언제, 왜 바꿨나요?"라고 물으면 그때 남은 기록만으로 답해야 합니다.개발자 입장에서 제일 먼저 떠오르는 기록은 git log인데git log로 날먹할 수 있으면 참 좋겠지만git log를 과연 믿을 수 있는 기록이라 볼 수 있을까요?그래서 9월에 만든 커밋을 1월에 쓴 것처럼 바꾸는 테스트를 해봤습니다.환경 변수 2개랑 옵션 하나면 충분합니다.1. 감사 추적이 뭐냐면감사 추적(audit trail)은 데이터가 바뀔 때마다 시스템이 자동으로 쌓는 기록입니다.예를 들어 입력 화면에서 혈압 120을 130으로 고치면바꾸기 전 값, 바꾼 값, 바꾼 사람, ..
브라우저에서 문서 다루기 #4: 화면 근처 쪽만 그리면 캔버스 5장PDF 뷰어에 문서를 띄울 때는 보통 쪽마다 를 하나씩 깝니다.근데 300쪽짜리를 이렇게 띄웠더니 첫 쪽은 1초 안에 떴는데 브라우저 메모리가 3GB를 넘었습니다.화면에 보이는 건 한두 쪽인데 말이죠.모든 쪽을 그릴 때와 화면 근처 쪽만 그릴 때를 재 보고, 보이는 쪽만 그릴 때 챙길 것을 알아보도록 합시다.문서는 레터 크기 300쪽(쪽마다 본문 40줄, 텍스트 조각 모두 12,600개), 화면은 1280×900 창에 레티나(devicePixelRatio 2), 뷰어는 Next.js 16.3.6과 react-pdf 10.5.0입니다.숫자는 headless Chromium 140으로 2~5번 잰 범위입니다.1. 첫 쪽만 보면 멀쩡합니다전부 ..
