본문 바로가기

전체 글64

[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #05] 조용한 살인마, 프론트엔드 메모리 누수(Memory Leak) 추적기 안녕하세요! 지난번 무시무시했던 Git 충돌 지옥에서는 무사히 빠져나오셨나요? 시뻘건 터미널 화면을 극복하신 여러분을 환영합니다! 오늘은 겉보기엔 아무런 에러 메시지도 없지만, 유저가 우리 서비스를 오래 켜둘수록 브라우저를 서서히 죽여가는 웹 애플리케이션의 '조용한 살인마'에 대해 이야기해 볼까 합니다. 처음 페이지에 들어갔을 때는 클릭도 빠릿빠릿하고 애니메이션도 부드럽습니다. 그런데 10분, 30분 시간이 지날수록 왠지 모르게 스크롤이 버벅거리고, 노트북 쿨러가 비명을 지르기 시작하더니... 결국 브라우저 탭이 '앗, 이런!' 화면과 함께 장렬하게 전사해 버리는 경험. 다들 한 번쯤 겪어보셨죠? 네, 맞습니다. 바로 '메모리 누수(Memory Leak)' 현상입니다.에러 로그조차 남기지 않아 개발자를 .. 2026. 3. 22.
[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #04] 시뻘건 화면의 공포, Git 충돌(Merge Conflict) 지옥에서 안전하게 탈출하기 안녕하세요! 지난번 아이폰 사파리 100vh 스크롤 버그는 무사히 해결하셨나요? CSS 한 줄로 평화를 되찾으셨길 바랍니다. 자, 오늘은 코드 레벨의 에러를 넘어 '협업' 과정에서 만나는 무시무시한 재앙에 대해 이야기해 볼까 합니다. 열심히 기능 개발을 마치고, 퇴근할 생각에 콧노래를 부르며 git pull이나 git merge를 입력하는 순간! 갑자기 터미널 화면이 시뻘건 글씨들로 뒤덮입니다. "Automatic merge failed; fix conflicts and then commit the result." 등골이 서늘해지죠. 내 코드와 동료의 코드가 무참히 뒤섞여버린 그곳, 네, 바로 'Git 충돌(Merge Conflict)' 지옥에 오신 것을 환영합니다! 오늘은 초보 개발자들의 멘탈을 바사.. 2026. 3. 21.
[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #03] 모바일 사파리 100vh 스크롤 버그 해결법 안녕하세요! 지난번 무한 렌더링 지옥 탈출기는 많은 도움이 되셨나요? 오늘 다룰 주제는 아마 프론트엔드 개발자라면 누구나 한 번쯤 퇴근길 발목을 잡혔을 법한, 아주 악명 높은 녀석입니다.로컬 환경인 크롬 데스크탑 브라우저의 개발자 모드(F12)로 모바일 뷰를 띄워놓고 작업할 때는 모든 게 완벽했습니다. 화면에 꽉 차는 멋진 풀스크린 UI를 완성하고 뿌듯하게 배포를 마쳤죠. 그런데 기획자나 대표님이 다급하게 메신저를 보냅니다. "개발자님! 아이폰 사파리로 들어가니까 맨 밑에 있는 '결제하기' 버튼이 화면 밖으로 잘려서 안 눌리는데요?" 등줄기에 식은땀이 흐르는 순간이죠. 네, 맞습니다. 바로 그 유명한 모바일 웹 브라우저의 '100vh 스크롤 버그'에 당첨되신 겁니다. 대체 데스크탑에서는 멀쩡했던 100v.. 2026. 3. 20.
[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #02] 내 노트북 이륙 막기! React 무한 렌더링(Infinite Loop) 구출 작전 안녕하세요! 지난번 "Cannot read properties of undefined" 에러 해결편은 많은 분들의 칼퇴에 도움이 되셨나요? 오늘은 프론트엔드 개발자라면 누구나 한 번쯤 겪어봤을 법한 아주 오싹한 경험을 이야기해 보려고 합니다.열심히 코딩을 하고 저장(Ctrl+S)을 누른 순간, 갑자기 조용하던 노트북 쿨러가 비행기 이륙하는 소리(위이잉-!)를 내며 미친 듯이 돌아가기 시작합니다. 브라우저 탭은 하얗게 굳어버리고, 새로고침을 눌러도 먹통이 되어 결국 크롬 강제 종료를 눌러야 했던 경험. 네, 맞습니다. 바로 공포의 '무한 렌더링(Infinite Loop)' 즉, Too many re-renders 에러에 당첨되신 겁니다.대체 멀쩡하던 내 코드가 왜 브라우저를 다운시켜 버렸는지, 실무에서 가.. 2026. 3. 19.
[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #01] "Cannot read properties of undefined" 에러의 5가지 원인과 방어 코드 안녕하세요! 오늘도 어김없이 콘솔창을 붉게 물들인 그 녀석... 다들 한 번쯤은 만나보셨죠? "Cannot read properties of undefined". 진짜 프론트엔드 개발을 하면서 이 에러를 한 번도 안 만나본 사람은 없을 거라고 자신 있게 장담합니다.처음 코딩을 시작하고 이 빨간 줄을 봤을 때는 '내가 뭘 그렇게 큰 잘못을 했나' 싶어서 심장이 철렁 내려앉았는데요. 하도 맞다 보니까 이제는 '아, 또 데이터 늦게 왔구나?' 하고 헛웃음부터 나오더라고요. (웃음) 오늘은 실무에서 이 지긋지긋한 에러가 도대체 왜 발생하는지, 그리고 두 번 다시 우리를 괴롭히지 못하게 방어하는 코드를 어떻게 찰지게 짜야 하는지 제 수많은 삽질 경험을 담아 정리해 보겠습니다. 1. 도대체 "undefined의 .. 2026. 3. 18.
[올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #10] 모바일 반응형 깨짐 현상과 슬라이더 터치 오류 해결기 안녕하세요! 방구석에서 시작한 작은 아이디어를 세상에 쏘아 올린 1인 개발자입니다.드디어 길고 길었던 [파이어족 은퇴 시뮬레이터] 메이킹 로그 시리즈의 마지막, 10편에 도착했습니다! 지난 9편에서 붉은색 배포 에러를 극복하고 무사히 전 세계에 제 웹사이트를 런칭했었죠. 제 넓은 27인치 PC 모니터에서 돌아가는 시뮬레이터의 모습은 그야말로 완벽 그 자체였습니다. "크, 역시 나는 천재야!"라며 자아도취에 빠져있던 것도 잠시, 침대에 누워 제 스마트폰(아이폰)으로 접속해 본 순간 저는 경악을 금치 못했습니다. 화면이... 화면이 완전 박살이 나 있었거든요! 오늘 마지막 편에서는 초보 프론트엔드 개발자들이 무조건 겪게 되는 관문, '모바일 반응형 깨짐 현상'과 '터치 오류'를 어떻게 극복했는지 그 눈물겨운.. 2026. 3. 17.

티스토리툴바