본문 바로가기

전체 글64

[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #11] 내 로컬에선 잘 되는데? 배포만 하면 터지는 환경변수(.env) 완벽 타파 안녕하세요! 지난번 사파리 브라우저의 화면 깨짐 지옥에서는 무사히 빠져나오셨나요? 호환성 대응 코드로 단단해진 UI를 완성하셨길 바랍니다! 자, 오늘은 개발자라면 누구나 한 번쯤 외쳐봤을 그 마법의 주문, "어? 내 컴퓨터(로컬)에서는 분명히 잘 됐는데?"의 가장 대표적인 원흉에 대해 이야기해 볼까 합니다. 로컬 개발 환경(localhost:3000)에서는 로그인 API도 척척 붙고, 외부 데이터도 예쁘게 잘 불러와집니다. 이제 세상에 내 코드를 자랑할 시간이라며 Vercel이나 AWS, Netlify 같은 호스팅 서버에 기분 좋게 배포(Deploy)를 마쳤죠. 그런데 배포된 진짜 URL로 접속해 보니 화면이 새하얗게 비어있거나, 콘솔창에 API URL is undefined, 404 Not Found .. 2026. 3. 28.
[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #10] 내 크롬에선 완벽했는데? Flexbox gap 크로스 브라우징 환장 파티 탈출기 안녕하세요! 지난번 유저의 시력을 위협하던 다크 모드 깜빡임(FOUC)은 무사히 잠재우셨나요? 블로킹 스크립트 한 줄의 위력을 실감하셨길 바랍니다! 자, 오늘은 프론트엔드 개발자들의 영원한 숙제이자 멘탈을 탈곡기로 돌려버리는 지독한 호환성 지옥, '크로스 브라우징(Cross Browsing)'에 대해 이야기해 볼까 합니다. 열심히 코딩을 마치고 최신 크롬 브라우저에서 화면을 확인합니다. Flexbox와 Grid를 팍팍 써서 만든 레이아웃은 1픽셀의 오차도 없이 정말 아름답죠. 뿌듯하게 배포를 마쳤는데, 얼마 뒤 기획자분이나 부장님이 다급하게 메신저를 보냅니다. "개발자님! 제 아이폰으로 들어가니까 카드 목록들이 다닥다닥 붙어서 화면이 완전히 깨져서 나오는데요?" 식은땀을 흘리며 확인해 보면, 내 크롬이나.. 2026. 3. 27.
[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #09] 앗 내 눈! 다크 모드 화면 깜빡임(FOUC) 완벽하게 없애기 안녕하세요! 지난번 글자를 춤추게 만들던 폰트 깜빡임(FOUT/FOIT) 문제는 잘 해결하셨나요? 쾌적해진 텍스트 렌더링에 유저들도 분명 만족하고 있을 겁니다. 자, 오늘은 프론트엔드 개발자들을 당황하게 만드는 또 다른 형태의 무시무시한 깜빡임에 대해 이야기해 볼까 합니다. 요즘 웹사이트에 '다크 모드(Dark Mode)' 지원은 선택이 아닌 필수가 되었죠. 열심히 토글 버튼도 만들고 CSS 변수도 세팅해서 뿌듯하게 배포를 마쳤습니다. 그런데, 새벽에 불을 끄고 내 사이트에 접속하는 순간! 분명 내 OS 테마도 다크 모드고, 어제 다크 모드로 설정해 두고 껐는데도 불구하고... 접속 직후 약 0.5초 동안 새하얀 쌩얼(?) 화면이 번쩍! 하고 나타났다가 까만색으로 바뀝니다. 말 그대로 유저에게 엄청난 '.. 2026. 3. 26.
[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #08] 텍스트가 번쩍? 폰트 깜빡임(FOUT/FOIT) 현상 없이 웹 폰트 완벽 로드하기 안녕하세요! 지난번 터미널을 새빨갛게 물들였던 의존성 충돌 지옥에서는 무사히 빠져나오셨나요? node_modules를 시원하게 날려버린 용기에 박수를 보냅니다! 자, 오늘은 프론트엔드 개발자라면 누구나 한 번쯤 겪어봤을, 그리고 디자이너분들의 뒷목을 잡게 만드는 '화면 깜빡임' 현상에 대해 이야기해 볼까 합니다. 열심히 코딩을 마치고 프로젝트를 배포했습니다. 두근거리는 마음으로 사이트에 접속했는데... 어라? 0.5초 정도 화면에 글자가 아예 안 보이다가 갑자기 '짠!' 하고 나타나거나, 못생긴 기본 굴림체로 보이던 글자가 갑자기 예쁜 웹 폰트로 '번쩍!' 하면서 바뀌는 현상. 다들 겪어보셨죠? 네, 맞습니다. 바로 프론트엔드 성능 최적화의 단골손님, 'FOIT(Flash of Invisible Text.. 2026. 3. 25.
[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #07] 어제까지 잘 되던 프로젝트가 뻗었다? npm, yarn 의존성 충돌 완벽 탈출기 안녕하세요! 지난번 백엔드와 프론트엔드를 모두 고통받게 하던 N+1 쿼리 폭탄은 무사히 해체하셨나요? API 응답 속도가 눈에 띄게 빨라지셨길 바랍니다! 자, 오늘은 프론트엔드 개발자들의 터미널을 붉게 물들이는 또 다른 원흉, 바로 '패키지 매니저의 배신'에 대해 이야기해 볼까 합니다. 금요일 퇴근 전까지만 해도 분명히 아주 잘 돌아가던 프로젝트였습니다. 주말을 푹 쉬고 월요일 아침에 출근해서 가벼운 마음으로 npm start를 쳤는데... 갑자기 화면에 시뻘건 에러가 쏟아집니다. ERESOLVE unable to resolve dependency tree. 아니, 나는 코드를 단 한 줄도 건드리지 않았는데 도대체 왜 이러는 걸까요? 옆자리 동료가 주말에 새로운 라이브러리를 하나 설치하고 푸시했을 뿐인데.. 2026. 3. 24.
[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #06] API 응답이 왜 이렇게 느려? 쿼리 폭탄 N+1 문제 완벽 타파하기 안녕하세요! 지난번 화면을 얼려버리는 조용한 살인마, 메모리 누수 추적기는 무사히 마치셨나요? 눈에 보이지 않는 쓰레기들을 청소하시느라 정말 고생 많으셨습니다. 자, 오늘 다룰 주제는 프론트엔드와 백엔드 모두의 복장을 터지게 만드는 주범, 바로 '느려터진 API 응답 속도'에 관한 이야기입니다. 프론트엔드 개발자가 다급하게 자리로 찾아옵니다. "개발자님! 유저 목록 불러오는 API가 로딩되는데 5초나 걸려요! 이거 타임아웃 떨어지겠는데요?" 깜짝 놀라 백엔드 코드를 열어봅니다. 데이터베이스에서 유저 목록을 가져오는 아주 단순한 조회 로직일 뿐인데 도대체 왜 이렇게 느린 걸까요? 로컬 환경에서 API를 찔러보고 콘솔창을 확인한 순간, 새카만 화면에 수백 줄의 SQL 쿼리문이 폭포수처럼 쏟아져 내리고 있습니.. 2026. 3. 23.

티스토리툴바