Frontend, DevOps, ML/DL 관련 기술 블로그. 개발 과정에서의 문제 해결과 새로운 기술을 기록합니다.https://froggydisk.github.io/ko-krhttps://froggydisk.github.io/offset-vs-cursor-pagination/https://froggydisk.github.io/offset-vs-cursor-pagination/관리자 목록에서 1페이지는 바로 떴는데 뒤쪽 페이지는 타임아웃이 났다. OFFSET 숫자만 다를 뿐인데 이런 현상이 나타났다. 페이지네이션은 초반에 20줄쯤 짜두고 다시 열어볼 일 없는 코드처럼 보이지만, 데이터가 쌓이기 시작하면 이 20줄에서 성격이 전혀 다른 문제가 두 가지 나온다. 하나는 느려지는 문제고, 다른 하나는 조회 결과 자체가 틀리는 문제다. 같은 글이 목록에 두 번 나오거나, 분명히 있는 글이 어느 페이지에도 안 나온다. 그런데 이쪽은 에러가 나지 않아서 한참 뒤에야 발견된다.Tue, 18 Aug 2026 00:00:00 GMTDatabasePaginationSQLAPIPerformancehttps://froggydisk.github.io/git-hotfix-revert-trap/https://froggydisk.github.io/git-hotfix-revert-trap/main에 핫픽스를 머지했다가 문제가 생겨서 revert를 했다. 하지만 이미 develop에도 같은 코드를 커밋한 뒤다. 며칠 후 정기 main → develop 동기화 머지를 했는데, develop의 코드가 감쪽같이 사라져버렸다. Git에서 핫픽스를 다룰 때 가장 자주 만나게 되는 일이다. 잘못 걸리면 엄청난 삽질을 하게 되는데, 원인을 잘 알아두면 쉽게 예방할 수 있다. 일이 벌어진 순서는 이렇다.Tue, 28 Apr 2026 00:00:00 GMTGitHotfixRevertMergeWorkflowhttps://froggydisk.github.io/compiling-myself/https://froggydisk.github.io/compiling-myself/얼마 전 안드레 카파시가 GitHub Gist 하나를 공개했다. 제목은 "LLM Wiki". LLM으로 개인 지식 베이스를 구축하는 패턴에 대한 글이었는데, 그가 던진 한마디가 인상적이었다. "최근 내 토큰 사용량의 상당 부분이 지식 베이스를 다듬는 데 쓰이고 있다." 연구 주제에 대한 위키를 LLM이 알아서 유지하고 관리하게 한다는 아이디어인데, 단순해 보여도 이 패턴을 "나"라는 주제에 적용하면 얘기가 달라진다. 이전 글 나를 기록한다는 것에서 페르소나 에이전트의 기억과 망각을 다뤘다.Mon, 13 Apr 2026 00:00:00 GMTAILLM WikiPersonaRAGPersonalizationhttps://froggydisk.github.io/model-debt/https://froggydisk.github.io/model-debt/AI 서비스를 만들 때 비용을 아끼려고 저렴한 모델을 고르는 경우가 많다. 당장은 합리적인 판단처럼 보이지만, 시간이 지나면 얘기가 달라진다. 이게 모델 부채(Model Debt)다. 모델 부채는 저렴한 모델을 골라서 나중에 생기는 추가 비용을 말한다. 싼 모델은 출력 품질이 낮고, 그 부족한 품질은 결국 사람의 손이 메운다.Thu, 02 Apr 2026 00:00:00 GMTAILLMModel DebtCost Optimizationhttps://froggydisk.github.io/embedding-vector-space/https://froggydisk.github.io/embedding-vector-space/우리가 매일 쓰는 언어는 과연 세상을 표현하기에 충분할까? 임베딩 벡터라는 렌즈로 인간 언어의 구조를 들여다보면 의외로 재미있는 게 보인다. AI가 언어를 이해하려면 먼저 단어를 숫자로 바꿔야 한다. Word2Vec이 나오면서 단어를 고차원 벡터 공간의 한 점으로 표현하는 게 가능해졌다. "왕"과 "여왕", "남자"와 "여자" 같은 단어가 벡터 공간 안에서 일정한 관계를 유지하며 배치된다는 사실은 당시 꽤 충격적이었다.Mon, 30 Mar 2026 00:00:00 GMTAIEmbeddingNLPVector SpaceLanguagehttps://froggydisk.github.io/agent-visual-verification/https://froggydisk.github.io/agent-visual-verification/어느 날 에이전트에게 SVG 다이어그램을 만들어달라고 했다. 코드는 깔끔했고 타입 에러도 없었고 빌드도 한 번에 통과했다. 잘 됐네 싶어서 브라우저를 열었는데, 텍스트가 박스를 삐져나가 있었고 모바일에서는 그림이 너무 작아 읽을 수가 없었다. 다음 날은 코드 블록 스타일을 수정해달라고 했다. 에이전트는 CSS를 고치고 빌드를 통과시켰는데, 데스크톱에서는 괜찮아 보이던 게 모바일에서 열어보니 코드 블록 마진이 사라져 화면 끝까지 꽉 차 있었다.Sun, 29 Mar 2026 00:00:00 GMTAIAgentVisual TestingDevOpshttps://froggydisk.github.io/persona-agent-and-memory/https://froggydisk.github.io/persona-agent-and-memory/요즘 AI 에이전트 얘기를 하다 보면 결국 이런 질문에 닿는다. "에이전트가 나를 대신한다면, 그 에이전트는 어떤 나를 대신하는 걸까?" 머지않아 각자가 자기만의 AI 에이전트를 갖게 될 것이다. 나의 성격과 취향, 말투와 가치관을 담은 에이전트가 다른 사람의 에이전트와 대화하고 일정을 조율하고 정보를 주고받는 세상이 SF 같지만, 기술적으로는 이미 문턱까지 와 있다. 그러면 그 에이전트에 나다움을 넣으려면 뭐가 필요할까. 답은 단순해 보인다. 나에 대한 데이터를 넣으면 된다.Sat, 28 Mar 2026 00:00:00 GMTAIAgentPersonaRAGPhilosophyhttps://froggydisk.github.io/harness-engineering-state-provisioning/https://froggydisk.github.io/harness-engineering-state-provisioning/지난 글에서 멀티 에이전트 오케스트레이션과 TDD 기반 피드백 루프를 다뤘다. QA 에이전트가 테스트를 자동으로 만들고 에이전트가 스스로 검증하는 구조였다. 그런데 그 테스트들을 실제로 돌려보니 skip되거나 실패하는 케이스가 많았다. 원인은 코드가 아니었다. 1편의 피드백 루프는 이랬다. 코드 작성 → 테스트 생성 → 실행 → 실패 시 수정 → 통과 시 다음 작업. 이론적으로는 깔끔하다. 실제로 E2E 테스트를 자동 생성해서 돌려보니 병목은 2번과 3번 사이에 있었다.Fri, 27 Mar 2026 00:00:00 GMTAIHarness EngineeringE2E TestingFixturehttps://froggydisk.github.io/harness-engineering-agent-orchestration/https://froggydisk.github.io/harness-engineering-agent-orchestration/지난 글에서 하네스 엔지니어링의 개념을 정리했다. 프롬프트에서 컨텍스트로, 컨텍스트에서 하네스로 이어지는 포함 관계와 세 가지 축(컨텍스트, 제약, GC), 그리고 그것들을 잇는 피드백 루프까지 훑었다. 이번 글의 질문은 하나다. "그래서 하네스 엔지니어링은 어떻게 하는 건데?" 답은 결국 멀티 에이전트 오케스트레이션 구조로 수렴하고, 그 구조의 핵심에 TDD와 QA가 있다. (스킬이나 훅처럼 중요한 것들이 더 있지만 여기선 넘어간다) 먼저 한 발 물러서 전체 그림을 보자. 에이전트 시스템은 프로젝트 하나에 갇히지 않는다.Thu, 26 Mar 2026 00:00:00 GMTAIHarness EngineeringTDDMulti-Agenthttps://froggydisk.github.io/harness-engineering/https://froggydisk.github.io/harness-engineering/AI 에이전트가 코드를 짤 수 있다는 건 이제 놀라운 일이 아니다. 진짜 어려운 건 에이전트가 엉뚱한 짓을 안 하게 만드는 쪽이다. 2026년 들어 이 문제를 체계적으로 다루는 개념이 나왔다. 이름은 "하네스 엔지니어링(Harness Engineering)". 하네스(Harness)는 말에 채우는 마구에서 온 말이다. 말이 아무리 빠르고 힘이 세도 마구가 없으면 어디로 튈지 모르는데, AI 에이전트도 사정이 같다. 쉽게 말하면 에이전트를 둘러싼 시스템 전체를 가리킨다.Wed, 25 Mar 2026 00:00:00 GMTAIHarness EngineeringDevOpshttps://froggydisk.github.io/ai-coding-orchestrator/https://froggydisk.github.io/ai-coding-orchestrator/요즘 개발자 커뮤니티에서 가장 자주 보이는 얘기가 있다. "AI가 코드를 짜주니까 개발자가 필요 없어지는 거 아닌가?" 결론부터 말하면 아니다. 다만 역할이 옮겨가고 있는 건 맞다. 코드를 직접 짜던 사람이 여러 AI 에이전트에게 일을 시키고 결과를 검증하는 사람으로 바뀌는 중이다. 연주자에서 지휘자가 되는 셈이다. 이 글은 지금 AI 코딩 에이전트로 굴러가는 개발 워크플로우가 실제로 어떤 모양인지, 그리고 오케스트레이터가 된 개발자에게 뭐가 필요한지를 겪은 대로 정리한 것이다.Tue, 24 Mar 2026 00:00:00 GMTAIClaude CodeDevOpsWorkflowhttps://froggydisk.github.io/unknown-gpu/https://froggydisk.github.io/unknown-gpu/아무것도 안 돌렸는데 갑자기 GPU 팬이 엄청난 속도로 돌 때가 있다. 서버컴의 경우 GUI가 없기에 이 현상만 나타나지만 그래픽 드라이버를 쓰는 OS의 경우 갑자기 검은 화면(Black Screen)이 뜨면서 컴퓨터를 재부팅해야하는 상황이 나타날 수 있다. gpustat으로 상태를 확인해보니 다음과 같다. 일단 재부팅하면 일시적으로 해결이 가능하다. 로그를 찾아보니 아무래도 GPU has fallen off the bus가 원인일 것으로 추정되었다. 로그 내용은 다음과 같다.Sun, 13 Apr 2025 00:00:00 GMTDeep LearningServerGPURiser Kithttps://froggydisk.github.io/liquidctl/https://froggydisk.github.io/liquidctl/다음의 상황인 분들을 위한 글이다. 쿨러에 화면을 띄우고 싶은데 OS가 리눅스 계열이어서 공식 프로그램을 사용할 수 없을 때 Kraken ELITE RGB를 사용할 때 공식문서가 너무 복잡하다고 느낄 때 아래 코드는 공식문서를 참고하며 Manual Installation > Working locally의 설치 순서를 따른다. 설치는 파이썬 가상 환경 위에서 진행된다.Tue, 04 Mar 2025 00:00:00 GMTServerCoolerhttps://froggydisk.github.io/server-benchmark/https://froggydisk.github.io/server-benchmark/이전 서버 견적 포스트에서 주문한 부품들이 도착하여 마저 조립을 해주었다. 부품 리스트는 다음과 같다. 정상적으로 전원이 들어오는 것을 보니, 호환성 이슈는 없는 듯하다. 짧은 감상평을 말하자면, RTX 4090 블로워 모델은 진짜 얇다. 윈드포스 모델보다도 얇다. 팬도 하나뿐이라 나름 고급스러운 느낌이 난다. 외관만 보면 만족스럽다. 조금 더 가성비 견적을 짜면 1,000만원 언더로도 떨어질 수 있을 듯하다. 물론 4090 두 장만 해도 700-800 사이이니 최저는 900 정도는 되지 않을까 생각한다.Mon, 24 Feb 2025 00:00:00 GMTDeep LearningServerGPUhttps://froggydisk.github.io/airflow-docker-error/https://froggydisk.github.io/airflow-docker-error/docker compose로 Airflow를 로컬 테스트하던 중에 gcc permission denied 에러가 발생했다. 에러가 난 부분을 살펴보니 Dockerfile에서 RUN pip install -r requirement.txt을 실행할 때 발생하고 있었다. 기존 Airflow 2.9.0 환경에서는 잘 진행되던 것이 2.10.5로 올리면서 갑자기 안되는 경우였으므로 패키지 호환성 문제인가 싶어서 먼저 requirement.txt에서 문제를 일으키는 라이브러리를 찾았다.Sun, 23 Feb 2025 00:00:00 GMTDockerAirflowhttps://froggydisk.github.io/git-clone-error/https://froggydisk.github.io/git-clone-error/remote: Repository not found fatal: repository [저장소 주소] not found 어느날부터 git clone을 할 때마다 이런 에러가 뜨기 시작했다. 인증 관련 에러겠거니 하고 그때그때 구글링해서 해결했었는데 이제는 메모를 해놓으려고 한다. 우선 원인 분석을 위해 다음을 테스트 해보았다.Wed, 19 Feb 2025 00:00:00 GMTGitconfighttps://froggydisk.github.io/server-build/https://froggydisk.github.io/server-build/간단한 LLM 모델을 돌려보기 위한 딥러닝 서버를 구축해야할 일이 있었다. 우선 예산이 한정되어 있었기에 비용 절감을 위해 최대한 커스텀을 피하고자 하였다. 다만 RTX 4090 한 대 만으로는 VRAM이 부족하기에 두 장까지 장착하는 것을 고려하여 견적을 짰다. 2024년 막바지에 들어서서는 50번대 엔비디아 GPU의 등장으로 인해 시장에서 4090 신품을 구하기가 하늘에 별따기 수준이었다. 더군다나 2-way로 장착해야 하는 상황에서는 최대한 얇은 모델을 구해야했기에 상황은 더욱 어려웠다.Tue, 18 Feb 2025 00:00:00 GMTDeep LearningServerGPUhttps://froggydisk.github.io/harbor-core-error/https://froggydisk.github.io/harbor-core-error/오랜만에 Helm을 이용해서 Harbor를 새로 띄우는 작업을 했다. 웬걸, harbor-core와 harbor-registry가 Running으로 바뀌질 않는다. kubectl logs로 로그를 보니 harbor-core의 문제였다. 좀 더 보니 Redis에 연결하지 못하는 문제가 있는 듯했다. harbor-redis 파드 안으로 들어가서 Redis 접속이 가능한지 확인하고 ping도 보내보았는데 별다른 문제가 없었다.Tue, 21 Jan 2025 00:00:00 GMTKubernetesHarborhttps://froggydisk.github.io/hot-reload/https://froggydisk.github.io/hot-reload/VSCode에서 앱 작업을 하며 코드 저장을 할 때마다 변경 사항이 자동으로 시뮬레이터나 디바이스에 반영이 되는 편리함에 취해있던 어느날. 갑자기 Hot Reload가 먹통이 되었다. 따로 설정을 해준 적도 없었기에 어떻게 살려낼 수 있을지 막막했다. 여러 원인을 감각적으로는 알고 있었는데 정리해놓은 적이 없어서 후회가 몰려왔다. 그래서 이번 기회에 정리하기로 마음먹었다. 이미 React Native 깃 페이지에서 이슈로 다뤄진 내용이라 레퍼런스 찾는 것은 어렵지 않았다. 정리하자면 다음과 같다.Mon, 08 Jul 2024 00:00:00 GMTHot ReloadFast Refreshhttps://froggydisk.github.io/ai-on-app/https://froggydisk.github.io/ai-on-app/앱을 만들다보면 자연스레 AI 기술에 관심을 가지게 된다. "요즘 chatGPT가 그렇게 핫하다는데 나도 AI 좀 접목시켜 볼까...?" 라는 상상을 하게 된다 그렇다면 어떻게 해야할까? 하나하나 차근차근 파헤쳐보자. AI를 활용한 강아지 코 인식 위 영상은 카메라에 비친 물체 중에서 강아지의 코를 인식하는 영상이다. 이는 Object Detection이라는 기술을 활용하고 있다. Object Detection에 대한 설명은 다음과 같다.Sun, 30 Jun 2024 00:00:00 GMTPytorchReact NativelabelImghttps://froggydisk.github.io/fastapi-redirect/https://froggydisk.github.io/fastapi-redirect/어느 순간부터 FastAPI 서버에 API 요청을 할 때 status code가 307가 뜨기 시작했다. 분명 쿠버네티스에 띄워놓은 서비스는 잘 돌아가고 있는데 로컬에서만 안되는게 신기했다. 저번에 건드린 next.config.mjs 파일이 문제가 되었나해서 rewrite() 함수를 요리조리 건드려 보았지만 여전히 응답은 같았다. 그러던 중 스택오버플로에서 해답을 찾았다. (stackoverflow) FastAPI로 서버를 구성하다보면 보통 API url 끝에 / 를 붙이는 경우가 많다. 예를 들면 이런 경우다.Sat, 15 Jun 2024 00:00:00 GMTPythonFastAPIhttps://froggydisk.github.io/mixed-content/https://froggydisk.github.io/mixed-content/Next.js(@14.2.3)를 활용하여 만든 EMR 데모 버전을 도커로 말아 쿠버네티스에 올렸는데 자꾸 Mixed Content 에러가 나고 있었다. Mixed Content 에러는 웹페이지는 https로 서비스되고 있는데 어떠한 리소스를 http로 로드하려고 할 때 발생한다. API URL은 .env.*에서 관리를 하고 있기 때문에 모든 API 콜에 있어서 동일하게 적용될 터이고 적용한 프로토콜은 분명 https였다. 구글링 해보면 흔히 나오는 해결 방법은 두 가지이다.Sun, 02 Jun 2024 00:00:00 GMTNexthttps://froggydisk.github.io/serial-port/https://froggydisk.github.io/serial-port/의료 장비를 맥북과 연결해서 시리얼 통신으로 데이터를 주고 받을 일이 있었다. 요즘은 평소에 시리얼 포트를 보는 것도 드문 일이거니와 과연 M1 칩 이후로는 연동이 잘 되는지도 알 수 없었다. 일단 RS232-RS232 케이블로 의료 기기에 하나를 꽂아주고 반대편 포트는 맥북의 허브 포트에 꽂을 수 있게 Serial to USB 어댑터를 연결해준다. 그대로 맥북에 연결하면 다음과 같이 설정 > 일반 > 시스템 리포트 상에 USB-Serial Controller가 나타난다. 즉, 하드웨어 상으로는 자동으로 연결을 인식해준다.Sun, 21 Apr 2024 00:00:00 GMTSerial Porthttps://froggydisk.github.io/warp/https://froggydisk.github.io/warp/기존에는 개발 터미널로 Iterm2를 쓰고 있었는데 최근에 새로운 터미널을 알게되어 소개하고자 한다. Warp라는 터미널인데 예전부터 눈여겨보고 있었던 녀석이기는 하다. 슬슬 이쪽으로 트렌드가 넘어오는 느낌도 든다. 추천하는 이유는 다음과 같다. 명령어 자동 완성 기능이 달려있다. AI 기능이 내장되어 있다. 자주 쓰는 워크플로우를 Warp Drive에 저장해 놓을 수 있다. 실행 블록별로 찾기, 복사 등 작업이 가능하다. 속도는 Terminal.app 보다는 느리지만 Iterm보다는 확실히 빠르다. 벤치마크를 확인해보자.Wed, 10 Apr 2024 00:00:00 GMTMacTerminalhttps://froggydisk.github.io/k8s-install-error/https://froggydisk.github.io/k8s-install-error/IDC에 서버를 구축하면서 오랜만에 순정 서버에 쿠버네티스를 설치할 일이 생겼다. 우분투는 이전에도 수없이 지우고 깔고 해봤기에 수월하게 넘어갔지만 오랜만에 하는 쿠버네티스 클러스터 구축에서 에러를 만나버렸다. kubeadm init 이후에 kubectl get node를 했을 때 처음에는 결과가 잘 나타나다가 시간이 조금 지나면 아래와 같은 에러가 나타나기 시작한다. 6443은 쿠버네티스에서 주로 사용하는 포트이고 192.168.x.x는 localhost니깐 위의 에러는 자기 자신에 연결할 수 없다는 이야기가 된다.Tue, 05 Mar 2024 00:00:00 GMTKubernetessystemdhttps://froggydisk.github.io/absolute-panel/https://froggydisk.github.io/absolute-panel/화면 전체를 덮는 absolute 포지션의 컴포넌트를 구현할 때 보통 이런식으로 스타일링을 한다. 모달을 띄우거나 할 때 뒷 배경을 옅은 회색으로 한다던가 opacity를 주기 위해서 주로 쓰게 되는데 쓸 때마다 코드가 너무 길어져 신경이 쓰였다. 아무 생각 없이 쓰던거라 더 좋은 방법을 찾을 생각조차 안하고 있었는데 우연히 공식문서에서 관련 내용을 발견했다. React Native에서는 다음과 같이 한 줄로 구현이 가능하다. 공식문서 - StyleSheet 공식문서를 잘 읽어보는 것에 대한 중요성을 다시금 느낀다.Thu, 22 Feb 2024 00:00:00 GMTReact Nativehttps://froggydisk.github.io/transmit-component/https://froggydisk.github.io/transmit-component/특정 컴포넌트를 구현할 때 속성을 통해 문자열을 보내줄 때가 있다. 보통 config로 따로 저장해놓은 고정 문구를 넣어주는 경우에 많이 쓰인다. 이 경우에 디자인 상의 이유로 줄바꿈을 자주 사용하게 되는데, 따옴표 안에 개행문자\n를 넣어도 아무 일도 일어나지 않아 종종 당황하곤 한다. 이는 개행 문자가 그대로 문자열로 인식되기 때문이다. 줄바꿈이 제대로 이루어지게 하기 위해서는 중괄호를 사용해 주어야 한다. 이런식으로 말이다. chatGPT는 그 이유에 대해 이렇게 말한다.Wed, 21 Feb 2024 00:00:00 GMTReact NativeReactNexthttps://froggydisk.github.io/arrow-in-onpress/https://froggydisk.github.io/arrow-in-onpress/React Native에서 onPress를 사용할 때 무의식적으로 화살표 표현식 ()=>을 사용하고 있었는데 어느날 특정 경우에 생략이 가능하다는 것을 알게 되었다. 코드를 한 글자라도 줄일 수 있다는 생각에 과연 어떠한 조건에서 가능한지 궁금해서 찾아보았다. 다음의 두 가지 경우를 살펴보자. 둘 다 정상적으로 실행되는 예시이다. 차이를 알겠는가? handlePressFirst 함수는 value라는 인자를 받고 있고 handlePressSecond는 아무런 인자 없이 실행되는 함수임을 알 수 있다.Tue, 20 Feb 2024 00:00:00 GMTReact Nativehttps://froggydisk.github.io/return-in-map/https://froggydisk.github.io/return-in-map/개발을 처음 배울 시절, 궁금했던 것들을 하나하나 메모하면서 나중에 블로그 글로 하나씩 적어야겠다고 생각했는데 벌써 어언 1년이 지나서 이제서야 글로 옮긴다. JS 문법에도 익숙지 않아서 map 함수를 보면 지레 겁을 먹었던 적도 있었는데 이제는 이런 함수의 존재가 너무나도 고맙다. 항상 사용할 때마다 return문을 꼭 써야하는 것인지 궁금했었는데 오늘 그 이야기를 하고자한다. 답을 먼저 말하면 그렇지 않다 이다.Mon, 05 Feb 2024 00:00:00 GMTReactReact NativeJavaScripthttps://froggydisk.github.io/next-br/https://froggydisk.github.io/next-br/웹페이지를 만들다보면 줄바꿈 태그(br)를 디바이스가 모바일이냐 PC냐에 따라 다르게 적용하고 싶을 때가 있다. 예를 들면 모바일에서는 줄바꿈을 했으면 좋겠고 PC에서는 그대로 길게 냅두고 싶은 경우다. 전통적인 방법으로는 css를 활용하는 방법이 있겠다. 빠르게 인터넷을 검색해보니 다음과 같은 코드가 나왔다. global.css 파일 안에 이렇게 정의해준 뒤에 와 같이 사용해주면 모바일 버전에서만 br 태그를 무시할 수 있다. 처음에는 아하 그렇구나 싶었다.Wed, 03 Jan 2024 00:00:00 GMTNextReacthttps://froggydisk.github.io/z-index/https://froggydisk.github.io/z-index/생각보다 많이 헤맸던 경우기도 한데 Next 혹은 React에서 z-index가 원하는대로 작동하지 않을 때가 있다. 처음에는 그저 position이 absolute일 경우에만 z-index가 적용되는 줄 알고 absolute를 남발했던 때도 있었다. 하지만 항상 absolute position만으로 컴포넌트들을 배치할 수는 없지 않은가.Thu, 28 Dec 2023 00:00:00 GMTNextReacthttps://froggydisk.github.io/fixed-position/https://froggydisk.github.io/fixed-position/React와 React Native는 비슷하면서도 은근히 다른 부분이 많은 것 같다. 두 프레임워크를 번갈아가며 사용하다보면 문법적인 부분에 대해서 헷갈릴 때가 자주 있다. 앱에서 새로운 기능을 만들다보니 컴포넌트 하나를 스크롤에 영향받지 않으면서 화면에 고정시킬 필요가 있었는데 React에서 자주 사용했던 문법을 썼더니 바로 에러가 났다. 예를 들면 쇼핑 사이트에서 장바구니나 문의하기 버튼이 화면 측면에 계속해서 따라다니는 기능이다.Tue, 26 Dec 2023 00:00:00 GMTReact NativeSafeAreaViewhttps://froggydisk.github.io/rn-rounded-triangle/https://froggydisk.github.io/rn-rounded-triangle/앱을 만들다가 도형을 그려야할 때가 오면 나도 모르게 한숨을 내쉬고 있다. 디테일적인 부분까지 챙기려면 은근히 손이 많이 가는 작업이기 때문이다. 오늘은 오전 내내 모서리가 둥근 삼각형을 그려야했기에 나중을 위해서 기록해둔다. 삼각형을 그리기 위한 방법에는 여러가지가 있지만 우리가 익히 알고 있는 일반적인 삼각형을 그리는 일은 어렵지 않다. 구글 검색을 해도 쉽게 나올 것이다. 위와 같은 코드로도 충분히 삼각형을 그릴 수 있다. 하지만 우리가 필요한 건 모서리가 "둥근" 삼각형이다. 그렇다면 다른 접근 방식이 필요하다.Thu, 17 Aug 2023 00:00:00 GMTReact Nativehttps://froggydisk.github.io/rn-logical-and-text-error/https://froggydisk.github.io/rn-logical-and-text-error/개발 중에 예상치 못한 에러를 만나 기록해둔다. 뜬금없이 Error: Text strings must be rendered within a component.에러를 만나게 되었는데 이는 주로 태그가 아니라 안에 문자열을 사용하여 나타나는 에러다. React로 개발을 하다가 React Native로 넘어오게 되거나 멀티로 개발을 할 때 흔히 하는 실수이다. 하지만 이번에는 눈을 씻고 찾아봐도 원인을 찾기 힘들었다. 예를 들어 아래와 같은 코드가 존재한다고 해보자.Thu, 10 Aug 2023 00:00:00 GMTReact Nativehttps://froggydisk.github.io/rn-auth-navigation-branching/https://froggydisk.github.io/rn-auth-navigation-branching/보통 앱을 만들게 되면 현재 로그인한 상태에 따라 시작하는 Screen을 다르게 설정함으로써 UX를 개선한다. NavigatorAuth, NavigatorMain과 같이 로그인의 상태에 따라 진입하는 Navigator가 다른 경우에는 간단하다. 아래의 코드처럼 로그인 상태값에 따라 삼항연산자를 활용하여 진입점을 바꾸어주면 된다. 하지만 굳이 두 개의 Navigator를 쓰지 않고 하나의 Navigator 안에서 진입점을 다르게 해주고 싶은 경우도 있을 것이다.Mon, 24 Jul 2023 00:00:00 GMTReact Nativehttps://froggydisk.github.io/rn-android-darkmode-text-color/https://froggydisk.github.io/rn-android-darkmode-text-color/개발을 하다보면 다크모드를 고려하지 않고 개발을 하게 되는 경우가 있다. React Native에서는 텍스트의 기본 색상이 #000, 폰트크기는 14, fontWeight은 400이므로 태그에서 아무런 style 적용을 해주지 않더라도 기본 설정이 적용이 된다. 그렇기에 기본 설정을 사용하는 경우에는 아무런 신경을 써주지 않아도 된다. 단, 문제는 안드로이드의 다크모드는 예외라는 것이다. 이슈가 처음 보고되었을 때 적잖이 당황했던 적이 있다.Sun, 23 Jul 2023 00:00:00 GMTReact Nativehttps://froggydisk.github.io/rn-textinput-string-to-number/https://froggydisk.github.io/rn-textinput-string-to-number/TextInput 안에서 받은 String 타입 숫자값를 알아서 Number 타입으로 변경되게 하고 싶었는데 이렇게 해주니 에러가 났다. Warning: Failed prop type: Invalid prop value of type number supplied to ForwardRef(TextInput), expected string. 입력값이 Number로 바껴서 저장이 되므로 value값에 들어가는 데이터가 Number 타입이 되는데 value값은 String 값이어야 하기 때문에 에러가 발생한다.Thu, 20 Jul 2023 00:00:00 GMTReact Nativehttps://froggydisk.github.io/k8s-add-worker-node/https://froggydisk.github.io/k8s-add-worker-node/마스터 노드의 설정이 이미 되어 있고 추가할 워커노드의 OS가 우분투 20.04 버전인 경우를 기준으로 설명하겠다. ● docker ● kubelet ● kubeadm ● kubectl 새로운 워커노드에 위 4가지를 설치해준다. 그리고 마스터 노드에서 토큰을 발급하여 새로 연결할 워커노드에 입력해주면 끝이다. 생각보다 몹시 간단하다. 이제 하나하나 차근차근 진행해보자. 한 줄씩 잘 입력해준다. 우선, 마스터 노드에서 토큰을 발급한다.Tue, 04 Jul 2023 00:00:00 GMTKubernetesOn-premisehttps://froggydisk.github.io/rn-android-studio-no-module/https://froggydisk.github.io/rn-android-studio-no-module/React Native로 앱을 만들다보면 iOS 시뮬레이터가 너무 편해서 안드로이드를 소홀히 하게 되는 때가 있다. 안드로이드 apk 파일을 건네줄 필요가 있어서 오랜만에 안드로이드 스튜디오를 켰는데 이상하게 Run 아이콘이 있어야 할 자리에 add configuration 밖에 보이지 않았다. 인터넷을 찾아보니 module을 추가해주면 된다는데 아무리 모듈을 추가하려고 해도 선택지에 No module 이외에 아무것도 뜨지 않는다. 그렇다. 사람은 가끔 바보가 된다.Mon, 03 Jul 2023 00:00:00 GMTReact NativeAndroid Studiohttps://froggydisk.github.io/pyqt5-m1-mac-install-error/https://froggydisk.github.io/pyqt5-m1-mac-install-error/pip install PyQt5를 해도 Preparing metadata(pyproject.toml)에서 넘어가지 않는 M1 맥북 이슈를 만났다. (metadata-generation-failed, subprocess-exited-with-error) 문제 해결에 앞서 라이브러리 선택의 여유가 있는 사람들은 Pyside6나 PyQt6도 고려해보길 권한다. 여러가지로 테스트 해본 결과는 다음과 같다.Tue, 09 May 2023 00:00:00 GMTPythonpiphttps://froggydisk.github.io/rn-calendar-implementation/https://froggydisk.github.io/rn-calendar-implementation/리액트 네이티브로 앱을 만들 때는 달력을 구현해야할 일이 생각보다 자주 생긴다. 어떤 앱이든 시간의 흐름에 따라 과거 정보를 조회하는 경우가 많기 때문인데, 그렇기에 직접 구현해두면 두고두고 쓸 일이 많을 것이다. 물론 훌륭한 라이브러리가 많기 때문에 시간이 충분하지 않은 사람은 다른 사람의 힘을 빌리는 것도 때론 중요하다. 필자 또한 다른 사람이 짜놓은 코드를 빌려다가 내부만 조금 고쳐쓰는 경우가 많다. 그런 의미에서 오늘은 유명한 라이브러리 중 하나인 react-native-calendars를 소개한다.Mon, 24 Apr 2023 00:00:00 GMTReact Nativereact-native-calendarshttps://froggydisk.github.io/jenkins-docker-build-issues/https://froggydisk.github.io/jenkins-docker-build-issues/젠킨스를 통해 깃허브에서 도커 이미지를 빌드하여 이미지 저장소로 올리는 과정에서 발생하는 이슈들을 다룹니다. 이 글은 CI 파이프라인 구축을 설명하고 있지 않습니다. 환경 구축은 아래 출처를 참고해주세요. ● Jenkins로 Docker 이미지 빌드하기 ● 젠킨스 연동 및 push 하기 젠킨스가 깃허브에서 코드를 받아와서 도커 이미지를 빌드할 때 필요로 하는 파일이 두 가지 존재한다. 하나는 Jenkinsfile이고 나머지는 Dockerfile이다. 두 파일은 코드의 루트 경로에 위치하고 있어야 한다.Sun, 02 Apr 2023 00:00:00 GMTJenkinsDockerHarborhttps://froggydisk.github.io/ubuntu-nvidia-driver-ssh-error/https://froggydisk.github.io/ubuntu-nvidia-driver-ssh-error/이 글은 Nvidia GPU가 설치된 우분투 서버에 ssh 접속을 하기 위해 세팅을 하시는 분들을 대상으로 합니다. 먼저 GPU 장치가 잘 인식되어 있는지 확인한다. Nvidia 드라이버 설치를 위해서는 우선 ubuntu-drivers가 필요합니다. 이후 ubuntu-drivers를 이용하여 권장 설치를 진행한다. 시간이 조금 걸리므로 조급해하지 말자. 설치가 완료되었다면 재부팅으로 마무리한다. 이제 nvidia-smi 명령어로 GPU의 현재 상태를 볼 수 있다.Thu, 23 Mar 2023 00:00:00 GMTLinuxUbuntuNvidiahttps://froggydisk.github.io/k8s-private-registry-pull-fail/https://froggydisk.github.io/k8s-private-registry-pull-fail/쿠버네티스에서 yaml 파일을 작성할 때 도커 이미지를 사용하는 파드를 생성하려고 했으나 제대로 생성이 되지 않고 계속해서 ImagePullBackOff 상태가 되었다. Kubernetes Dashboard를 통해서 보니 다음과 같은 401 Unauthorized 에러 메시지가 떠있었다. 사설 저장소(Private Registry)에서 이미지를 받아올 때 Secret을 사용해서 인증을 하게 되는데 아무래도 인증에 계속 실패하고 있는 듯하다. 분명 Secret을 등록해 두었는데도 에러가 사라지지 않아서 오랜시간 삽질을 하였다.Wed, 22 Mar 2023 00:00:00 GMTKubernetesHarborhttps://froggydisk.github.io/k8s-jenkins-credential-error/https://froggydisk.github.io/k8s-jenkins-credential-error/Jenkins와 GitHub Server를 연동하기 위해 Credential을 등록하는데 Add 버튼을 눌러도 제대로 등록이 되지 않았다. (단, Username 항목에 연동하려는 서버의 유저 ID를 적고 ID 항목에는 각 Credential을 구분하기 위한 임의의 이름을 적었는지 확인하자. 단어가 헷갈릴 만하다.) 아무런 반응이 없어서 에러 메세지를 보기 위해 크롬에서 F12를 눌러 브라우저 콘솔창을 켰다. 그랬더니 다음과 같은 메시지를 띄워주고 있었다.Sat, 11 Mar 2023 00:00:00 GMTKubernetesJenkinsNginxhttps://froggydisk.github.io/k8s-harbor-image-push/https://froggydisk.github.io/k8s-harbor-image-push/쿠버네티스 상에 하버 서비스를 띄우는데 성공했다면 로컬에서 도커 이미지를 보낼 준비가 된 것이다. 로그인 방법은 간단하다. 단, 기본적으로 로컬에 도커가 돌고 있어야 한다. 만약 이 과정에서 로그인 에러가 발생했다면 해결 방법은 두 가지이다. (참고) Error saving credentials: error storing credentials - err: exit status 1, out: '' ● ~/.docker/config.json 파일에서 "credsStore":의 내용을 ""로 수정한다.Thu, 09 Mar 2023 00:00:00 GMTKubernetesHarborHelmDockerhttps://froggydisk.github.io/rn-ios-firebase-push-errors/https://froggydisk.github.io/rn-ios-firebase-push-errors/앱을 만들다보면 어느 순간 노티 기능을 적용해야할 때가 온다. 차근차근 개발을 진행하다보니 나 또한 어느새 그러한 페이즈에 도달해 있었다. 검색해보니 React Native로 앱을 만들 때 노티 기능은 보통 Firebase를 연동하는 경우가 많은 듯하다. 설정할 것이 꽤나 많지만 차근차근 진행하면 그렇게 어렵지는 않다. 아무래도 안드로이드보다는 iOS가 좀 더 손이 많이 간다. 깔끔하게 설명해주는 글이 있어서 먼저 소개한다. 아직 설정 전인 분들은 참고하셔도 좋을 것 같다.Thu, 09 Feb 2023 00:00:00 GMTReact NativeFirebasehttps://froggydisk.github.io/rn-unmountonblur-safeareaview/https://froggydisk.github.io/rn-unmountonblur-safeareaview/React Native에서 Bottom Tab Navigator를 사용할 때 특정 탭을 누를 때마다 화면이 리렌더링 되도록 하고 싶을 때가 있다. 그럴 때 사용하는 것이 unmountOnBlur: true 이다. 사용법은 아래 코드와 같다. 문제는 해당 옵션을 사용하게 되면 리렌더링은 문제가 없지만 알 수 없는 깜빡임이 발생한다는 것이다. 화면 렌더링 순서에 의해 발생하는 깜빡임으로, 사실 예민한 사람이 아니고서야 잘 눈치채지 못 할 지도 모른다. 원인은 SafeAreaView의 적용 타이밍이 생각보다 빠르지 않다는 데에 있다.Mon, 21 Nov 2022 00:00:00 GMTReact Nativehttps://froggydisk.github.io/rn-ios-blank-screen/https://froggydisk.github.io/rn-ios-blank-screen/어느 순간부터 빌드는 되는데 화면에 아무것도 나타나지 않는 증상이 나타났다. 빌드는 성공하였기 때문에 라이브러리를 설치하면서 어딘가 설정이 꼬인건가 싶었다. node_modules를 지웠다 설치하고를 몇 번이나 반복하였지만 해결되지 않았다. 당연히 캐시 삭제 정도로는 어림도 없었다. 에러 코드조차 나오지 않는 버그였기에 원인 분석부터가 막막했다. 새로운 프로젝트를 새로 하나 팔까 하다가 우선 깃 히스토리를 거슬러 올라가 보기로 하였다. 다행히 메인 브랜치에 push 해놓은 버전은 빌드가 잘 되었다.Sun, 13 Nov 2022 00:00:00 GMTReact NativeJavaScripthttps://froggydisk.github.io/rn-fetched-image-not-rendering/https://froggydisk.github.io/rn-fetched-image-not-rendering/글을 쓰면서도 조금은 부끄럽지만 가끔은 정말 간단한 걸로 몇 시간을 헤매고는 한다. React Native에서 Multer를 이용하여 서버에서 이미지를 불러오는데 다운 받아온 이미지가 화면에 표시되지 않는 현상이 있었다. 공식 문서를 그대로 따라서 fetch 함수를 사용하였고 uri도 로그에 제대로 찍혀 있는데도 계속 문제가 남아있어 머리를 꽁꽁 싸맸다. 나중에 보니 해결 방법은 매우 간단했다. 잊고 있었던 것이다.Wed, 09 Nov 2022 00:00:00 GMTReact NativeMulterhttps://froggydisk.github.io/multer-enoent-error/https://froggydisk.github.io/multer-enoent-error/● 서버 코드 Multer를 사용하여 이미지를 업로드할 때 유저별로 폴더를 만들어서 따로 저장하려고 하는데 자꾸 에러가 났다. 디렉토리를 생성하지 못하는 걸로 보아 함수를 fs쪽 함수를 잘못 사용하고 있나 싶어서 열심히 찾아보았으나 아무런 진전이 없었다. 오랜 시간 끝에 아무생각 없이 /upload/로 되어 있던 절대경로에 마침표를 붙여 상대경로로 만들어주었더니 정상적으로 작동하였다. 서버 설정에 따라 마침표가 필요할 때가 있고 아닐 때가 있으므로 둘 다 해보고 되는 것으로 하면 되겠다.Tue, 08 Nov 2022 00:00:00 GMTReact NativeNodeJSMulterhttps://froggydisk.github.io/rn-android-gradle-plugin-error/https://froggydisk.github.io/rn-android-gradle-plugin-error/React Native로 개발을 하고는 있지만 주로 iOS 시뮬레이터만 보고 하다보니 오랜만에 안드로이드 빌드를 하게 되었다. 안드로이드 스튜디오에 들어가서 아무 생각 없이 Gradle upgrade를 했더니 빌드가 안되기 시작했다. react-native run-android를 하였을 때 what went wrong에 뜨는 에러는 다음과 같다. 아마 Gradle plugin의 버전이 높아서 react-native-safe-area-context의 의존성과 맞지 않는다는 이야기 같다.Mon, 07 Nov 2022 00:00:00 GMTReact NativeAndroidhttps://froggydisk.github.io/rn-draggable-button-scrollview/https://froggydisk.github.io/rn-draggable-button-scrollview/리액트 네이티브를 이용하여 앱을 만들 때 이리저리 끌고 다닐 수 있는 버튼을 만들고 싶을 때가 있다. 만들어놓고 화면에서 요리조리 움직이다보면 나름 재미가 있다. 바퀴를 다시 발명하지 말라고 누군가 그랬던가. 구현을 위해 필자가 사용한 것은 react-native-draggable이라는 이미 잘 만들어진 라이브러리이다. 이처럼 설치하고 사용하는 것은 매우 간단하다. 하지만 늘 그렇듯 항상 단독으로 사용할 때는 괜찮은데 여러 기능들이 맞물리면서 문제가 발생한다.Thu, 27 Oct 2022 00:00:00 GMTReact Nativehttps://froggydisk.github.io/rn-hide-bottom-tab-navigator/https://froggydisk.github.io/rn-hide-bottom-tab-navigator/React Native를 이용하여 앱을 만들게 되면 @react-navigation/bottom-tab 라이브러리의 네비게이터를 자주 이용하게 된다. 네비게이터를 하나만 사용할 때는 문제가 없는데 여러개의 네비게이터들이 차곡차곡 쌓이면서부터 문제가 발생하기 시작한다. 특정 스크린으로 이동할 때에는 하단 메뉴바를 안보이게 해야 할 때가 많은데 주로 아래와 같이 해결할 것이다. 이렇게 하면 원하는 스크린에서 하단 탭이 사라지기는 하나 그 흔적을 남기게 된다. 필자가 경험한 바로는 보통 세 가지 버그가 일어나기 쉽다.Wed, 26 Oct 2022 00:00:00 GMTReact Nativehttps://froggydisk.github.io/search-console-redirect-error/https://froggydisk.github.io/search-console-redirect-error/이번에 블로그 테마를 바꾸면서 Google Search Console 설정을 다시 해 줄 필요가 있었다. 하지만 사이트맵을 새로 등록해도 바로 읽어들이지 못하였다. 결국 이전 블로그 글은 구글 검색이 되는데 404에러가 뜨고 새로 등록한 글들은 검색이 안되는 상황에 맞닥뜨렸다. 이는 블로그 글들의 파일경로가 바뀌면서 주소가 변경되었기 때문인데 마냥 기다릴 수만은 없었기에 색인 생성 요청을 해보았다. 며칠이 지난 후에 결과가 나왔는데 리디렉션 오류로 여전히 구글 검색이 안되었다.Thu, 24 Mar 2022 00:00:00 GMTGoogle Search Consolehttps://froggydisk.github.io/buy-me-a-coffee-button/https://froggydisk.github.io/buy-me-a-coffee-button/여러 블로그를 돌아다니다보니 포스트 아래쪽에 달려있는 예쁜 버튼들에 눈길이 갔다. Buy me a coffee로도 유명한 후원 버튼이었는데 애드 포스트가 덕지덕지 붙어있는 것보다 훨씬 깔끔해 보여서 한 번 만들어보기로 하였다. 후원보다는 디자인적인 욕심이 큰 것 같다. 우선 마음에 드는 버튼 디자인을 찾거나 직접 디자인한다. 나의 경우에는 여러 레퍼런스를 찾아보았는데 waster.log에서 많은 도움을 받았다. 다음으로는 버튼에 단순히 onclick="location.href=를 붙여주면 끝이난다.Thu, 03 Mar 2022 00:00:00 GMTHTML/CSShttps://froggydisk.github.io/mobile-tap-highlight-remove/https://froggydisk.github.io/mobile-tap-highlight-remove/모바일 작업을 하다보면 영역 클릭 시 원하지 않는 검은색 하이라이트가 나타나는 경우가 있다. 이럴 때는 위와 같이 css에 -webkit-tap-highlight-color: rgba(0,0,0,0); 혹은 transparent; 를 적용하면 나타나지 않는다. :focus 안에 넣으면 안되므로 주의! 만약 영역 클릭 시 테두리가 생긴다면 아래처럼 outline: none;으로 해결가능하다.Wed, 02 Mar 2022 00:00:00 GMTCSShttps://froggydisk.github.io/ios-review-status-discord/https://froggydisk.github.io/ios-review-status-discord/개발자라면 Appstore Connect 사이트에 들어가면 현재 앱의 심사 상태를 확인할 수 있다. 하지만 엔지니어링 팀이 아니라면 권한이 없는 경우도 많기 때문에 모든 팀원이 앱의 현재 상태를 알고 있기란 쉽지 않다. 일일이 공유를 해주는 것도 하나의 방법이기는 하지만 이런 것들이 하나둘씩 쌓이기 시작하면 업무량이 계속해서 늘어나기 때문에 미리미리 자동화를 해두면 나중에 눈물의 작업을 하게 되는 것을 방지할 수 있다. 빠르게 오픈소스를 찾아보았더니 다행히도 Slack으로 심사 상태를 보내주는 툴이 이미 있었다.Mon, 28 Feb 2022 00:00:00 GMTAPIDiscordhttps://froggydisk.github.io/tensor-mutable-copy/https://froggydisk.github.io/tensor-mutable-copy/일반적인 경우, 텐서 간의 복사는 복사된 참조 변수의 수정이 기존 참조 변수의 값에 똑같은 영향을 미친다. 예를 들면 아래와 같다. 하지만 아래와 같이 a와 b의 길이가 다르고 a의 요소들을 b에 배분하는 형식인 경우, 즉 텐서 요소 간의 복사에 있어서는 복사된 참조 변수의 수정이 기존 참조 변수에 영향을 미치지 못한다. 위와는 조금 다르게, b가 텐서가 아니라 리스트나 numpy배열일 경우에 있어서 b의 각 요소는 아래처럼 mutable하다.Sun, 29 Aug 2021 00:00:00 GMTPytorchhttps://froggydisk.github.io/mobile-hover-remove/https://froggydisk.github.io/mobile-hover-remove/아이폰이나 아이패드와 같은 기기에서는 PC와는 다르게 hover 효과가 적용되지 않는다. 그 이유는 마우스가 아닌 터치 방식을 사용하기 때문이다. 그러다보니 모바일에서 드랍다운 메뉴 같은 경우, 한 번 누르면 계속 호버된 상태가 되어 효과가 사라지지 않는 경우가 있다. 이 때 화면의 다른 부분을 누르면 호버효과가 사라지게 만들고 싶을 때 쓸만한 방법이 있다.Fri, 28 Aug 2020 00:00:00 GMTHTML/CSShttps://froggydisk.github.io/cam-class-activation-map/https://froggydisk.github.io/cam-class-activation-map/Today, I'm going to talk about a paper, 'Learning Deep Features for Discriminative Localization' ( Zhou+ CVPR16 ). I will review this paper lightly first and try to implement the main functions of CAM with Pytorch, which are introduced in the paper.Tue, 04 Aug 2020 00:00:00 GMTPytorchhttps://froggydisk.github.io/top1-top5-accuracy/https://froggydisk.github.io/top1-top5-accuracy/딥러닝 관련 논문을 읽다보면 Top1, Top5, Top10과 같은 말들을 자주 볼 수 있습니다. 대충 감이 오기는 하지만 정확히 무엇을 의미하는 것일까요? 대표적으로 Top1 뒤에는 Accuracy가 오는 경우와 Loss가 오는 경우 이렇게 두 가지가 있습니다. 쉽게 말하자면 Top1 Accuracy는 분류기가 이미지의 가장 확률이 높은 클래스를 예측했을 때 그게 정답이었다면 그러한 경우가 전체 예측수에 비해 어느정도 존재하는지를 의미합니다.Fri, 12 Jun 2020 00:00:00 GMTImage Recognition