꿀 레퍼런스 모음 및 에러 해결 방법

맨땅에 헤딩하지 마세요. 잘 만들어진 레퍼런스를 참고하고,
반복되는 에러의 해결 패턴을 익히는 것만으로도 개발 속도는 5배 이상 빨라집니다.

1. 디자인 및 기획 레퍼런스

감각은 타고나는 것이 아니라 많이 보는 것에서 나옵니다.
프로젝트 시작 전, 아래 사이트들에서 '구조'와 '분위기'를 먼저 파악하세요.

• Awwwards: 전 세계에서 가장 혁신적인 웹사이트들이 모이는 곳입니다. 최신 트렌드를 파악하기 좋습니다.
• Land-book: 랜딩 페이지 디자인 레퍼런스의 보물창고입니다. 섹션 구성과 카피라이팅 배치를 참고하세요.
• Pinterest: 'Web UI', 'Dashboard Design' 등의 키워드로 검색하여 이미지 보드를 만드세요.

2. 생산성을 높여주는 유용한 도구

• Shadcn UI: 복사해서 바로 쓸 수 있는 고퀄리티 React 컴포넌트 모음입니다.
• Ray.so: 코드를 예쁜 이미지로 만들어줍니다. SNS 공유나 문서 작성 시 유용합니다.
• SVG Repo: 수만 개의 벡터 아이콘을 무료로 제공합니다.

3. 자주 발생하는 에러 및 해결 패턴

대부분의 에러는 이미 누군가 겪었던 일입니다. 당황하지 말고 아래 체크리스트를 확인하세요.

❌ Hydration Error (Next.js)

서버에서 렌더링한 결과와 브라우저에서 렌더링한 결과가 다를 때 발생합니다.
- window나 localStorage를 useEffect 밖에서 사용하지 않았는지 확인하세요.
- div 안에 p를 넣는 등 잘못된 HTML 구조를 확인하세요.

❌ CORS Error

보안상의 이유로 다른 도메인의 자원에 접근할 때 차단되는 에러입니다.
- 서버(Back-end) 설정에서 해당 도메인을 허용(Allow Origin)해주거나, Next.js의 rewrites 기능을 활용하세요.

❌ Environment Variable Undefined

.env 파일에 정의한 변수가 읽히지 않는 경우입니다.
- 클라이언트 측에서 쓰려면 앞에 NEXT_PUBLIC_이 붙어있는지 확인하세요.
- 배포 환경(Netlify/Vercel)의 대시보드 설정에 변수가 등록되었는지 확인하세요.

4. 문제 해결을 위한 검색 팁

구글링이나 AI에게 질문할 때 키워드가 중요합니다.