글
Next.js CORS 에러 해결법: 로컬 환경부터 Vercel 배포까지
"어? 포스트맨(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 최신 업데이트 후 터미널 한글 깨짐 해결하기
"어제까지 잘 되던 VS Code, 업데이트했더니 터미널이 외계어로 도배됐어요!" 최신 업데이트 직후 발생하는 골치 아픈 터미널 한글 깨짐 현상과 익스텐션(확장 프로그램) 충돌 및 무한 로딩 문제를 3분 만에 깔끔하게 해결하는 방법을 알려드립니다! 아침에 커피 한 잔 마시고 상쾌한 기분으로 코딩을 시작하려는데, 무심코 누른 VS Code(Visual Studio Code) 업데이트 버튼 하나에 모든 평화가 깨진 적 있으신가요? 코드를 수정하고 터미널에 빌드 명령어를 쳤는데 결과 창에 '뛠뛣', '????' 같은 알 수 없는 외계어가 쏟아지면 정말 눈앞이 깜깜해지죠. 게다가 평소에 찰떡같이 작동하던 코드 자동 정렬(Prettier)이나 문법 검사기(ESLint)마저 먹통이 되면서 빨간 줄이 마구잡이로 그어지면 진짜 완전 짜증이 솟구칩니다. 저도 얼마 전 대규모 업데이트 직후에 이 두 가지 문제를 동시에 겪고 아침 시간을 통째로 날려먹은 쓰라린 기억이 있어요. 하지만 걱정 마세요! 제 경험상 이 문제들은 프로그램이 고장 난 게 아니라 설정값(Settings)이 초기화되거나 버전 충돌이 일어난 단순한 해프닝 일 확률이 높습니다. 오늘 제가 직접 해결했던 방법들을 알기 쉽게 정리해 드릴 테니, 스트레스받지 말고 천천히 따라와 보세요! 😊 1. 터미널 한글 깨짐, 왜 갑자기 생기는 걸까? 🤔 해결책을 적용하기 전에 왜 이런 일이 벌어졌는지 짚고 넘어가 볼까요? 주로 윈도우(Windows) 환경에서 자주 발생하는 이 문제는 '인코딩(Encoding) 방식의 차이' 와 '폰트(Font) 미지원' 때문에 발생합니다. 윈도우 기본 터미널(CMD, PowerShell)은 한글을 표현할 때 전통적인 EUC-KR ...
Docker Desktop vmmem 메모리 폭주 해결법 (.wslconfig)
작업 관리자 메모리 점유율 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 맥북 Homebrew 아키텍처 충돌 (Rosetta 2) 해결 방법
"새로 산 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는 이 두 세계가 충돌하지 않...
WSL2 localhost 접속 오류 원인과 완벽 해결 방법 가이드
WSL2 환경에서 서버 띄웠는데 localhost 접속이 안 되시나요? 윈도우 브라우저에서 무한 로딩만 도는 WSL2의 지독한 네트워크 연결 오류 원인과, 포트 포워딩 및 최신 미러링 모드로 한 방에 해결하는 방법을 완벽하게 정리해 드립니다! 코딩을 막 시작했거나 윈도우에서 리눅스 개발 환경을 구축해 보려는 분들이라면 십중팔구 WSL2 (Windows Subsystem for Linux) 를 사용하고 계실 텐데요. 우분투(Ubuntu) 터미널을 열고 기분 좋게 `npm start`나 `python manage.py runserver`를 입력해서 서버를 띄웠습니다. 터미널에는 분명 "Server running at http://localhost:3000" 이라고 예쁘게 뜨는데... 막상 윈도우의 크롬 브라우저를 열고 `localhost:3000`을 치면? '사이트에 연결할 수 없음' 이라는 차가운 에러 화면만 마주하게 됩니다. 진짜 완전 짜증 나죠. 분명 서버는 돌아가고 있는데 왜 내 윈도우 브라우저에서는 못 찾는 걸까요? 저도 처음 WSL2를 세팅할 때 이 문제 때문에 반나절을 허비했던 기억이 생생합니다. 오늘은 더 이상 여러분이 구글링으로 시간을 낭비하지 않도록, 이 현상의 원인과 가장 확실한 해결책 2가지를 아주 쉽게 알려드릴게요! 😊 1. 도대체 왜 localhost가 안 먹히는 걸까? 🤔 문제를 해결하려면 이유부터 알아야겠죠? 결론부터 말씀드리면 WSL2는 윈도우와 네트워크(IP)를 완전히 따로 쓰기 때문 입니다. 과거 버전인 WSL1은 윈도우와 네트워크를 공유했기 때문에 `localhost`를 치면 바로 연결됐어요. 하지만 성능이 대폭 업그레이드된 WSL2는 완전히 독립된 가상 머신(Hyper-V 아키텍처) 위에서 돌아갑니다. ...