MangCho's Guide

  "완벽한 모바일 전체 화면을 만들었는데, 사파리 하단 바가 버튼을 가려버려요!" 프론트엔드 개발자들의 뒷목을 잡게 하는 모바일 브라우저의 100vh 스크롤 깨짐 현상. 이제 복잡한 자바스크립트 꼼수 대신 새로운 CSS 단위인 'dvh'로 깔끔하게 해결하는 방법을 알아봅니다!   웹 브라우저 화면에 딱 맞는 풀스크린(Full-screen) UI나 모달 창을 만들 때, 우리는 자연스럽게 CSS에 height: 100vh; 를 적어 넣습니다. PC 브라우저나 크롬 개발자 도구의 모바일 화면(Toggle Device Toolbar)으로 테스트할 때까지만 해도 아주 완벽해 보이죠. "오, 스크롤 없이 화면에 꽉 차게 잘 들어갔군!" 하며 뿌듯한 마음으로 스마트폰을 꺼내 테스트 링크를 열어보는 순간... 절망이 시작됩니다. 아이폰 모바일 사파리(Safari)로 접속했더니, 화면 맨 밑에 있어야 할 '확인' 버튼이 사파리의 주소창(하단 바)에 가려져서 보이지 않는 현상 을 마주하게 됩니다. 스크롤을 위아래로 낑낑대며 움직여봐도 UI가 덜덜거리고 완전히 깨져버리죠. 진짜 별거 아닌 것 같은데 이것 때문에 완전 짜증 났던 경험, 프론트엔드 개발자라면 누구나 한 번쯤 있으실 거예요. 오늘은 이 지긋지긋한 100vh 버그의 원인과, 최신 CSS가 내려준 한 줄기 빛인 dvh(Dynamic Viewport Height) 를 활용한 완벽한 해결법을 낱낱이 파헤쳐 보겠습니다! 😊   1. 기존 100vh의 치명적인 문제점 🤔 문제를 해결하려면 도대체 왜 이런 일이 벌어지는지부터 알아야겠죠? vh(Viewport Height) 는 말 그대로 보여지는 화면 영역의 높이를 100등분 한 단위입니다. 문제는 모바일 브라우저(특히 iOS 사파리나 안드로이드 크롬)...

  "어? 포스트맨(Postman)에서는 잘 되는데 왜 브라우저만 오면 에러가 나지?" 프론트엔드 개발자들의 영원한 숙적, 악명 높은 CORS 에러! Next.js와 React 로컬 환경부터 Vercel 배포까지 완벽하게 대처하는 프록시(Proxy) 및 헤더 설정법을 아주 쉽게 알려드립니다.   웹 개발을 처음 시작하고 오픈 API를 연결해서 멋진 화면을 만들려던 찰나, 브라우저 개발자 도구 콘솔창에 시뻘건 글씨로 has been blocked by CORS policy 라는 에러 메시지가 뜬 적 있으신가요? 진짜 이 메시지 볼 때마다 심장이 철렁하고 완전 짜증이 솟구치죠. 저도 신입 시절에 이 에러 하나 잡겠다고 밤을 꼴딱 새운 쓰라린 기억이 있답니다. 😭 백엔드 개발자 친구한테 "서버 안 되는데?"라고 물어봤다가 "포스트맨으로는 잘만 되는데 네 코드가 이상한 거 아냐?"라는 답변을 들으면 억울하기 짝이 없죠. 하지만 걱정 마세요! 이 에러는 여러분의 코드가 틀렸거나 서버가 고장 난 게 아니라, 브라우저의 아주 정상적이고 엄격한 보안 시스템이 작동 하고 있을 뿐이랍니다. 오늘 제가 로컬(Localhost) 환경부터 실제 Vercel 배포 환경까지 CORS 에러를 깔끔하게 우회하고 해결하는 마법 같은 방법을 알려드릴게요. 끝까지 읽어보시면 앞으로 CORS는 두렵지 않으실 거예요! 😊   1. 도대체 CORS가 뭐길래 날 괴롭힐까? 🤔 해결책을 알아보기 전에 적을 먼저 알아야겠죠? CORS(Cross-Origin Resource Sharing)는 우리말로 '교차 출처 리소스 공유'라는 뜻입니다. 이름이 너무 어렵죠? 쉽게 풀어서 설명해 드릴게요. 브라우저는 기본적으로 '동일 출처 정책(SOP)' 이...

  "어제까지 잘 되던 VS Code, 업데이트했더니 터미널이 외계어로 도배됐어요!" 최신 업데이트 직후 발생하는 골치 아픈 터미널 한글 깨짐 현상과 익스텐션(확장 프로그램) 충돌 및 무한 로딩 문제를 3분 만에 깔끔하게 해결하는 방법을 알려드립니다!   아침에 커피 한 잔 마시고 상쾌한 기분으로 코딩을 시작하려는데, 무심코 누른 VS Code(Visual Studio Code) 업데이트 버튼 하나에 모든 평화가 깨진 적 있으신가요? 코드를 수정하고 터미널에 빌드 명령어를 쳤는데 결과 창에 '뛠뛣', '????' 같은 알 수 없는 외계어가 쏟아지면 정말 눈앞이 깜깜해지죠. 게다가 평소에 찰떡같이 작동하던 코드 자동 정렬(Prettier)이나 문법 검사기(ESLint)마저 먹통이 되면서 빨간 줄이 마구잡이로 그어지면 진짜 완전 짜증이 솟구칩니다. 저도 얼마 전 대규모 업데이트 직후에 이 두 가지 문제를 동시에 겪고 아침 시간을 통째로 날려먹은 쓰라린 기억이 있어요. 하지만 걱정 마세요! 제 경험상 이 문제들은 프로그램이 고장 난 게 아니라 설정값(Settings)이 초기화되거나 버전 충돌이 일어난 단순한 해프닝 일 확률이 높습니다. 오늘 제가 직접 해결했던 방법들을 알기 쉽게 정리해 드릴 테니, 스트레스받지 말고 천천히 따라와 보세요! 😊   1. 터미널 한글 깨짐, 왜 갑자기 생기는 걸까? 🤔 해결책을 적용하기 전에 왜 이런 일이 벌어졌는지 짚고 넘어가 볼까요? 주로 윈도우(Windows) 환경에서 자주 발생하는 이 문제는 '인코딩(Encoding) 방식의 차이' 와 '폰트(Font) 미지원' 때문에 발생합니다. 윈도우 기본 터미널(CMD, PowerShell)은 한글을 표현할 때 전통적인 EUC-KR ...

  작업 관리자 메모리 점유율 99%, 주범은 vmmem? 도커(Docker)만 켜면 컴퓨터가 비행기 이륙 소리를 내며 버벅거리시나요? WSL2의 메모리 폭주를 막는 `.wslconfig` 리소스 제한 방법과 도커 데스크톱 최적화 세팅으로 쾌적한 개발 환경을 되찾는 법을 알려드립니다!   코딩이나 서버 개발을 하시다 보면 이제 도커(Docker Desktop) 는 떼려야 뗄 수 없는 필수 프로그램이 되었습니다. 그런데 도커를 켜두고 웹 브라우저 탭 몇 개, IDE(VS Code나 IntelliJ)까지 띄우면 갑자기 마우스가 뚝뚝 끊기고 컴퓨터가 비명을 지르기 시작한 경험, 다들 한 번쯤 있으실 거예요. 그럴 때 `Ctrl + Shift + Esc`를 눌러 작업 관리자를 켜보면, 십중팔구 `vmmem` 이라는 정체불명의 프로세스가 내 소중한 램(RAM)을 8GB, 10GB씩 무자비하게 집어삼키고 있는 것을 목격하게 됩니다. 진짜 완전 짜증 나죠. 😡 "나는 무거운 컨테이너를 돌린 적도 없는데 대체 왜 이러는 걸까?" 고민하셨다면 오늘 정말 잘 찾아오셨습니다. 이 현상은 도커 자체가 무겁다기보다는, 도커가 윈도우에서 돌아가기 위해 사용하는 WSL2 (Windows Subsystem for Linux 2)의 기본 메모리 정책 때문이거든요. 오늘 제가 알려드리는 `.wslconfig` 설정 파일 세팅과 도커 최적화 팁만 그대로 따라 하시면, 메모리 점유율을 딱 절반으로 줄이고 쾌적한 PC 환경을 되찾으실 수 있을 거예요! 😊   1. 도대체 vmmem이 뭐길래 내 램을 다 먹는 걸까? 🤔 해결책을 알아보기 전에, 우리의 적(?)인 `vmmem`의 정체부터 파악해 봅시다. `vmmem`은 가상 머신(Virtual Machine)의 메모리를 관리하는 윈도우 시스템 프로세스 입니다...

  "새로 산 M1/M2 맥북, 터미널에서 자꾸 에러가 나요!" 애플 실리콘(M시리즈) 맥에서 Homebrew 패키지 설치 시 흔히 겪는 아키텍처 충돌(Rosetta 2) 문제의 원인과, 한 번 설정해 두면 평생 편안한 깔끔한 해결 방법을 정리해 드립니다!   큰맘 먹고 구매한 M1, M2, 혹은 최신 M3 맥북! 빠릿빠릿한 속도에 감탄하며 "이제 나도 멋진 환경에서 개발해야지~" 하고 터미널을 열었는데... 이게 웬걸? 예전 인텔(Intel) 맥에서 쓰던 방식 그대로 Homebrew(홈브류)를 설치하고 패키지를 깔려고 하니 자꾸 알 수 없는 빨간색 에러 메시지가 쏟아진 적 있으신가요? Bad CPU type in executable 이라든지, Cannot install under Rosetta 2 in ARM default prefix 같은 외계어 알림을 보면 정말 눈앞이 캄캄해지죠. 저도 처음 인텔 맥북에서 M1으로 넘어왔을 때 이 아키텍처 충돌 문제 때문에 며칠을 고생했던 기억이 납니다. 하지만 걱정 마세요! 이 현상은 맥북이 고장 난 게 아니라, 애플의 두뇌(CPU) 구조가 바뀌면서 발생한 아주 자연스러운 과도기적 증상일 뿐입니다. 오늘 제가 알려드리는 단계별 해결책을 그대로 따라 하시면 꼬여버린 터미널을 아주 깔끔하게 복구하실 수 있을 거예요! 😊   1. 왜 이런 오류가 발생하는 걸까? 🤔 해결책을 적용하기 전에 왜 이런 문제가 생기는지 아주 쉽게 짚고 넘어가 볼까요? 핵심은 Homebrew의 설치 경로(PATH) 가 인텔 맥과 애플 실리콘 맥에서 완전히 다르다는 점입니다. 과거 인텔 맥은 x86_64 라는 아키텍처를 사용했고, 최신 M시리즈 맥은 ARM64 라는 아키텍처를 사용합니다. Homebrew는 이 두 세계가 충돌하지 않...