dodocoding

주니어 (1~3년)

올려주신 메시지만으로는 바로 해결이 가능한 만큼의 단서는 없네요. 보통 빌드 결과물을 지정하는 경로에 문제가 있을 가능성이 큽니다. 로컬에서 빌드해보시고 어떤 디렉터리에 빌드 결과가 나오는지 확인해보세요.!참고) <a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/errors/NOT_FOUND">https://vercel.com/docs/errors/NOT_FOUND</a><hr>&nbsp;<h2 style="text-align: left">💡 1. 해결 방법 제안: 핵심 점검</h2>&nbsp;<code>404 NOT_FOUND</code> 오류는 서버가 요청을 성공적으로 수신했지만, 요청된 URL(경로)와 일치하는 라우트나 리소스를 찾을 수 없음을 의미합니다.이를 해결하려면 클라이언트가 요청한 경로와 서버에 정의된 라우트를 면밀히 비교해야 합니다.&nbsp;<h3 style="text-align: left">실행 가능한 조치 단계 (순서대로 확인하세요):</h3>&nbsp;<ol><li>URL 경로 확인:<ul><li>클라이언트 측: 브라우저, API 호출 또는 구성 파일의 URL을 확인하세요. 대소문자 구분, 복수형 사용 여부(예: <code>/user</code> 대 <code>/users</code>), 후행 슬래시(<code>/api/data</code> 대 <code>/api/data/</code>) 등을 포함하여 경로가 정확히 일치하는지 확인하세요.</li><li>예시 수정: 클라이언트가 <code>GET /api/v1/user/42</code>를 요청했지만, 서버 라우트가 <code>app.get('/api/v1/users/:id', ...)</code>로 정의되어 있다면, 클라이언트가 <code>/api/v1/users/42</code>를 요청하도록 수정하세요.</li></ul></li><li>서버 라우트 정의 확인:<ul><li>Express(Node.js), Flask(Python), Spring Boot(Java)와 같은 프레임워크를 사용 중이라면, HTTP 메서드(<code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>DELETE</code>)와 경로가 핸들러 함수에 올바르게 매핑되어 있는지 확인하세요.</li><li>흔한 실수:<code>/users/:id</code>와 같은 동적 경로의 경우, 해당 라우트가 어떤 "캐치올(catch-all)" 또는 404 미들웨어보다 먼저 올바르게 등록되었는지 확인하세요.</li></ul></li><li>정적 자산 확인:<ul><li>CSS, JavaScript, 이미지 파일 등을 가져오려고 할 때 오류가 발생했다면, 웹 서버(또는 프레임워크)가 정적 파일을 제공하도록 올바르게 설정되어 있는지, 그리고 파일이 예상되는 디렉토리에 존재하는지 확인하세요.</li></ul></li></ol><hr>&nbsp;<h2 style="text-align: left">📝 2. 근본 원인 설명</h2>&nbsp;**<code>404 NOT_FOUND</code>**는 서버의 정확한 통신입니다: "나는 당신의 언어(HTTP)는 이해했지만, 당신이 알려준 주소는 내가 관리하는 어떤 것과도 일치하지 않습니다."<ul><li>코드가 실제로 한 일 vs. 해야 했던 일:<ul><li>실제로 한 일:클라이언트가 특정 경로(예: <code>/v2/data</code>)를 요청했습니다. 서버는 라우팅 로직을 실행했지만 일치하는 항목을 찾지 못하여, 기본 핸들러로 넘어갔고, 이 핸들러가 <code>404</code> 상태 코드를 전송했습니다.</li><li>해야 했던 일: 서버의 라우팅 테이블에 <code>/v2/data</code> 경로에 대한 정확한 항목이 포함되어 있어야 했습니다 (또는 클라이언트에서 경로를 올바르게 구현해야 했습니다).</li></ul></li><li>특정 오류를 유발하는 조건:<ol><li>경로 누락: 요청된 경로에 대한 서버 측 라우트 핸들러가 아예 정의되지 않았습니다.</li><li>잘못된 구성: 리버스 프록시(예: Nginx, API Gateway)가 존재하지 않는 백엔드 경로로 요청을 전달하고 있거나, 라우트 정의를 포함하는 구성 파일이 배포 시 로드되지 않았습니다.</li><li>리소스 부재: 경로는 유효하지만(예: <code>/user/42</code>), 서버가 데이터베이스에서 사용자 ID <code>42</code>를 확인했지만 존재하지 않습니다. (라우트가 유효하더라도 리소스를 찾을 수 없음을 나타내기 위해 404를 반환하는 것이 일반적인 관행입니다.)</li></ol></li><li>간과하거나 오해한 점:<ul><li>경로의 엄격성: 웹 경로는 운영 체제의 파일 경로처럼 유연할 것이라고 가정하는 것. 웹 라우트는 엄격합니다.<code>/Data</code>는 <code>/data</code>와 같지 않습니다.</li><li>배포 불일치: 클라이언트가 여전히 이전, 이제는 삭제된 엔드포인트를 호출하도록 구성되어 있는데, 서버 변경 사항만 배포하는 것입니다.</li></ul></li></ul><hr>&nbsp;<h2 style="text-align: left">📚 3. 핵심 개념 교육: HTTP 라우팅 및 리소스</h2>&nbsp;&nbsp;<h3 style="text-align: left">왜 이 오류가 존재하며, 무엇으로부터 보호하는가?</h3>&nbsp;<code>404</code> 오류는 HTTP 상태 코드의 기본 요소 중 하나입니다 (특히 4xx 범위의 클라이언트 오류 코드).<ul><li>목적: 오류가 클라이언트 측에 있음을 서버가 클라이언트에게 표준화된 방식으로 알려줍니다.</li><li>보호 기능: 이는 **내부 서버 오류(5xx)**와 구별됩니다. <code>404</code>는 "서버는 잘 실행되고 있지만, 이 주소는 알지 못한다"고 말하는 것입니다. 이는 "요청을 처리하려다가 충돌이 발생했다"는 **<code>500 Internal Server Error</code>**보다 훨씬 낫습니다.</li></ul>&nbsp;<h3 style="text-align: left">올바른 멘탈 모델: 주소록 검색</h3>&nbsp;서버를 공공 도서관이라고 생각해 보세요.<ol><li>클라이언트가 요청을 보냅니다: "나는 D-404번 선반, 3번 통로에 있는 책을 원합니다" (이것이 URL입니다).</li><li>서버(사서)는 주소록(라우팅 테이블)을 확인합니다.<ul><li>시나리오 A (404): 사서가 "내 주소록에는 D-404번 선반이 없습니다. 이 주소는 여기에 존재하지 않습니다"라고 말합니다.</li><li>시나리오 B (200 OK): 주소가 존재하고, 사서가 선반으로 가서 책을 찾아 건네줍니다.</li></ul></li></ol>&nbsp;<h3 style="text-align: left">광범위한 프레임워크/언어 설계에 어떻게 부합하는가?</h3>&nbsp;대부분의 웹 프레임워크(Express, Flask 등)는 순서가 지정된 시스템을 구현합니다:<ol><li>미들웨어/핸들러: 요청은 순차적으로 함수를 통과합니다(로깅, 인증 등).</li><li>라우터: 요청이 라우터에 도달하면, 라우터는 URL과 HTTP 메서드를 정의된 라우트와 일치시키려고 시도합니다.</li><li>404 폴백(Fallback): 라우터가 모든 라우트를 확인했지만 일치하는 항목이 없으면, 요청은 가장 마지막 핸들러, 즉 일반적으로 프레임워크의 기본 404 핸들러로 넘어갑니다.</li></ol><hr>&nbsp;<h2 style="text-align: left">⚠ 4. 경고 신호 및 향후 방지책</h2>&nbsp;&nbsp;<h3 style="text-align: left">다시 발생할 수 있는 원인으로 무엇을 찾아야 할까요?</h3>&nbsp;<ul><li>경로 대소문자: 운영 체제나 프레임워크가 대소문자를 구분하는 경우, 불일치(예: <code>api/users</code> 대 <code>API/USERS</code>)를 확인하세요.</li><li>라우트 대 리소스: 항목 목록을 반환하는 엔드포인트(<code>/api/items</code>)는 작동해야 합니다. 특정 항목을 반환하는 엔드포인트(<code>/api/items/999</code>)는 항목 <code>999</code>가 존재하지 않는 경우, 목록 엔드포인트가 잘 작동하더라도 **<code>404</code>**를 반환할 것입니다.</li></ul>&nbsp;<h3 style="text-align: left">관련 시나리오에서 저지를 수 있는 유사한 실수:</h3>&nbsp;<ul><li><code>400 Bad Request</code>와 <code>404 Not Found</code> 혼동: 클라이언트가 유효한 경로를 보내더라도 요청 본문 내부의 데이터가 잘못된 경우(예: 필수 필드 누락), 서버는 **<code>400 Bad Request</code>**로 응답해야 하며, <code>404</code>가 아닙니다. 이 둘을 혼동하는 것은 일반적인 API 설계 오류입니다.</li><li>권한 부여되지 않은 액세스에 <code>404</code> 사용: 로그인했지만 리소스에 대한 접근 권한이 없는 사용자에게 <code>404</code>를 사용하지 마세요. 대신 **<code>403 Forbidden</code>**을 사용해야 합니다. 404를 사용하면 실제 문제(권한 부여)를 가릴 수 있습니다.</li></ul>&nbsp;<h3 style="text-align: left">이 문제를 나타내는 코드 스멜(Code Smells) 또는 패턴:</h3>&nbsp;<ul><li>흩어져 있는 라우트 정의: 라우트가 명확하고 중앙 집중화된 인덱스 없이 여러 파일이나 모듈에 정의되어 있다면, 그 중 하나를 로드하거나 등록하는 것을 잊기 쉽습니다.</li><li>상대 경로 문제: 주변 URL 구조가 변경될 때 깨지는 클라이언트 측 상대 경로(예: <code>/admin/dashboard</code>에서 <code>/admin/settings</code>로 이동할 때 깨지는 <code><img src="../images/logo.png"></code>)를 사용하는 경우. 항상 절대 경로 또는 경로 헬퍼를 사용하는 것이 좋습니다.</li></ul><hr>&nbsp;<h2 style="text-align: left">🔄 5. 대안 및 장단점</h2>&nbsp;접근 방식사용 시점장단점<code>404 Not Found</code> (표준)라우트가 존재하지 않음 또는 리소스가 존재하지 않음.장점: 보편적인 표준입니다. 단점: 존재하지 않는 라우트와 존재하지 않는 리소스 ID를 구별하지 않습니다.<code>410 Gone</code>리소스가 이전에 존재했지만 이제 영구적으로 제거됨.장점: 클라이언트(및 검색 엔진)에게 다시 시도하지 않아야 함을 명확하게 전달합니다. 단점: 서버가 모든 영구적으로 삭제된 ID를 기억해야 하므로 오버헤드가 추가됩니다.<code>403 Forbidden</code>리소스는 존재하지만 현재 사용자에게 볼 수 있는 권한이 없음.장점: 권한 문제를 명확하게 구분하여 디버깅이 쉽습니다. 단점: 리소스의 존재를 노출하며, 때로는 보안 위험이 될 수 있습니다.모범 사례: 실제로 존재하지 않는 경로와 ID로 요청했지만 데이터베이스에서 찾을 수 없는 리소스 모두에 대해 **<code>404 NOT_FOUND</code>**를 사용하는 것이 일반적이고 가장 혼란이 적은 접근 방식입니다.<hr>&nbsp;<h1 style="text-align: left">NOT_FOUND</h1>Last updated October 6, 2025The <code>NOT_FOUND</code> error occurs when a requested resource could not be found. This might happen if the resource has been moved, deleted, or if there is a typo in the URL.404NOT_FOUND:Not Found<h2 style="text-align: left"><a target="_blank" rel="noopener noreferrer nofollow" class="linked-heading-module__rvMliW__title [&>p]:m-0" href="https://vercel.com/docs/errors/NOT_FOUND#troubleshoot">Troubleshoot</a></h2>I'm encountering an error and reviewing the docs at /docs/errors/NOT_FOUND to understand what's happening. Please help me resolve this by: 1. Suggest the fix: Analyze my codebase context and propose what needs to be changed to resolve this error 2. Explain the root cause: Break down why this error occurred: - What was the code actually doing vs. what it needed to do? - What conditions triggered this specific error? - What misconception or oversight led to this? 3. Teach the concept: Help me understand the underlying principle: - Why does this error exist and what is it protecting me from? - What's the correct mental model for this concept? - How does this fit into the broader framework/language design? 4. Show warning signs: Help me recognize this pattern in the future: - What should I look out for that might cause this again? - Are there similar mistakes I might make in related scenarios? - What code smells or patterns indicate this issue? 5. Discuss alternatives: Explain if there are different valid approaches and their trade-offs My goal is to fix the immediate issue while building lasting understanding so I can avoid and resolve similar errors independently in the future.To troubleshoot this error, follow these steps:<ol><li>Check the deployment URL: Ensure that the deployment URL you are using is correct and does not contain any typos or incorrect paths</li><li>Check deployment existence: Verify that the <a target="_blank" rel="noopener noreferrer nofollow" class="link-module__Q1NRQq__link link-module__Q1NRQq__blend" href="https://vercel.com/docs/projects/project-dashboard#deployments">deployment exists</a> and has not been deleted</li><li>Review deployment logs: If the deployment exists, review the <a target="_blank" rel="noopener noreferrer nofollow" class="link-module__Q1NRQq__link link-module__Q1NRQq__blend" href="https://vercel.com/docs/deployments/logs">deployment logs</a> to identify any issues that might have caused the deployment to be unavailable</li><li>Verify permissions: Ensure you have the necessary <a target="_blank" rel="noopener noreferrer nofollow" class="link-module__Q1NRQq__link link-module__Q1NRQq__blend" href="https://vercel.com/docs/accounts/team-members-and-roles">permissions</a> to access the deployment</li><li>Contact support: If you've checked the above and are still unable to resolve the issue, <a target="_blank" rel="noopener noreferrer nofollow" class="link-module__Q1NRQq__link link-module__Q1NRQq__blend" href="https://vercel.com/help#issues">contact support</a> for further assistance</li></ol>

Vercel 404 에러 질문

네 Cursor의 전신이 VS Code 라서 커서를 사용해주시는것을 오히려 권장합니다.!

vsCode 대신 커서를 사용

안녕하세요.! 쉘 부분은 아래 블로그 보고 따라해서 만들었습니다.!<a target="_blank" rel="noopener noreferrer nofollow" href="https://kdohyeon.tistory.com/122">https://kdohyeon.tistory.com/122</a>&nbsp;IDE 같은 경우에는 Material Theme 과 Material Icon 정도만 입혔구요. eslint, prettier는 필수 플러그인으로 사용했어요.&nbsp;

mac 터미널 설정이 궁금합니다

네 정상적으로 응답되면 이슈 없습니다. &nbsp;<ul><li><code>-N</code>: 전송 중 데이터를 버퍼링하지 않도록 합니다 (버퍼링 방지).</li><li><code>-sS</code>: 출력(stdout)을 숨기고(Silent), 오류가 발생하면 stderr에 오류 메시지를 표시(Show errors)합니다.</li></ul>위 옵션이 붙어도 POST 요청이 가는것을 확인할 수 있네요.

api 테스트용 curl 생성 오류

git init을 안한것으로 보이네요. git init 한번 진행 해보시겠어요?~

git 연동 오류

보통 3000번에 다른 프로세스가 열려 있을 가능성이 많긴 합니다.<h2 style="text-align: left"><a target="_blank" rel="noopener noreferrer nofollow" href="https://localhost:3000/">https://localhost:3000/</a> 대신 <a target="_blank" rel="noopener noreferrer nofollow" href="https://localhost:3000/">http://localhost:3000/</a></h2>해보거나포트를 3001번으로 해보세요.<h2 style="text-align: left"><a target="_blank" rel="noopener noreferrer nofollow" href="https://localhost:3000/">http://localhost:3001</a></h2><pre><code>// vite.config.js 또는 vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({
 // 기타 Vite 설정...
 
 server: {
 // 개발 서버 설정을 여기에 추가합니다.
 port: 3001, // 원하는 포트 번호(3001)를 지정
 // host: true, // 외부 IP로도 접근이 필요하다면 추가
 },
});</code></pre>혹은# npm 사용 시npm run dev -- --port 3001# 또는 더 명시적으로npx vite --port 3001

https://localhost:3000/ 링크가 안열려요

안녕하세요. Session pooler 방식으로 커넥션 해보세요.! <img src="https://cdn.inflearn.com/public/files/posts/7bace0cc-bf2e-47f6-aadc-e87d115a188e/d242e717-b9f4-4f93-bca6-80276e035a44.png" media-type="img" alt="image.png" title="image.png" width="658" height="142">&nbsp;<hr>&nbsp;Supabase에서 제공하는 3가지 연결 방식은 데이터베이스 연결을 관리하는 방법과 연결 유지 시간에 따라 주요한 차이점이 있습니다.<hr>&nbsp;<h2 style="text-align: left">연결 방식별 상세 설명</h2>&nbsp;&nbsp;<h3 style="text-align: left">1. Direct Connection (직접 연결)</h3>&nbsp;<ul><li>가장 전통적인 방식입니다. 클라이언트(DBeaver)가 Supabase PostgreSQL 인스턴스에 직접 연결하여 하나의 전용 연결을 오랫동안 사용합니다.</li><li>장점: 모든 PostgreSQL 기능을 완벽하게 지원하며, 세션 기반 설정(<code>SET</code> 명령어 등)을 유지하는 데 문제가 없습니다. DBeaver에서 데이터베이스를 탐색하고 관리하는 데 가장 익숙하고 안정적인 방식입니다.</li><li>단점: 데이터베이스가 수용할 수 있는 **최대 연결 수(<code>max_connections</code>)**가 제한적이기 때문에, 많은 수의 동시 사용자 요청이 발생하면 연결 제한에 쉽게 도달할 수 있습니다.</li><li>참고: Supabase에서 Direct Connection은 기본적으로 IPv6를 권장합니다.</li></ul>&nbsp;<h3 style="text-align: left">2. Session Pooler (세션 풀러)</h3>&nbsp;<ul><li>연결 풀링(Connection Pooling) 기술을 사용하지만, 동작 방식은 Direct Connection과 유사합니다.</li><li>클라이언트가 접속하면 풀러가 데이터베이스 연결을 할당하고 클라이언트가 끊을 때까지 유지합니다. 즉, 여러 클라이언트가 직접 연결 수 제한을 초과하지 않도록 큐(Queue)와 연결 공유 기능을 제공하지만, 연결을 '오래' 유지한다는 점은 Direct Connection과 같습니다.</li><li>장점: Direct Connection의 대안으로 적합하며, 특히 IPv4 환경에서 사용하기 좋습니다. DBeaver와 같이 세션 상태 유지가 필요한 GUI 도구에 매우 적합합니다.</li><li>단점: Direct Connection처럼 연결을 오래 유지하므로, 서버리스 환경과 같이 연결 생성 및 해제가 잦은 환경에서는 비효율적일 수 있습니다.</li></ul>&nbsp;<h3 style="text-align: left">3. Transaction Pooler (트랜잭션 풀러)</h3>&nbsp;<ul><li>연결 풀링의 장점을 극대화한 방식으로, 가장 높은 확장성을 제공합니다.</li><li>클라이언트가 SQL 쿼리를 실행할 때 필요한 트랜잭션이 진행되는 동안에만 데이터베이스 연결을 할당하고, 트랜잭션이 완료되는 즉시 연결을 풀에 반환하여 다른 클라이언트가 즉시 재사용할 수 있도록 합니다.</li><li>장점: 적은 수의 실제 데이터베이스 연결로 수백 배 이상의 클라이언트 동시 접속을 처리할 수 있어, 서버리스 환경(Edge/Serverless Functions)처럼 짧고 폭발적인 연결이 필요한 경우에 최적입니다.</li><li>단점: 트랜잭션 단위로 연결이 끊어지고 재사용되므로, **세션 기반 상태(Session-level state)**를 유지할 수 없습니다. 따라서 DBeaver와 같은 GUI 툴에서 사용하기에는 불편할 수 있습니다. (예: <code>PREPARE STATEMENT</code> 사용 불가)</li></ul>&nbsp;

DBeaver와 supabase connection

nvm 같은 도구로 node.js 버전 수준의 관리는 합니다.!

가상환경 같은건 없나요?

안녕하세요. node.js 진영에도 가상환경을 구축할 수 있습니다.하지만 보통 파이썬 처럼 가상환경을 두고 사용하지는 않아요. 왜냐하면 로컬 프로젝트의 마다 node_modules 가 하나씩 생겨요. 어떻게 보면 파이썬 가상환경이 만들어 지는 거죠.

<blockquote></blockquote><blockquote></blockquote><blockquote></blockquote><blockquote>isLoading이 useState로 선언한 변수가 아닌데도 로딩 컴포넌트에서 버튼으로 다시 그려주나요?</blockquote><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/dodokyo/yt-music-clone/blob/main/app/playlist/page.tsx">https://github.com/dodokyo/yt-music-clone/blob/main/app/playlist/page.tsx</a>로딩 변수가 아닌데 로딩 컴포넌트가 그려지는 경우는 위 page.tsx가 로딩 되는 동안 loading.tsx가 렌더링 되는 경우 입니다.<ul><li>page.tsx 는 await로 중간에 비동기로 처리 되는 부분이 있습니다. </li><li>" const playlist = await getPlaylistById(Number(props.searchParams.list));" </li><li>이 부분이죠.</li><li>위 비동기 처리가 빠르게 처리되긴 하지만, 그 동안 페이지가 보여주어야 하는 컴포넌트는 loading.tsx라고 약속한것이 next.js 입니다. </li><li>내부적인 동작원리는 React suspense 라고 강의에서 전달드린바 있습니다. ~ &nbsp;</li></ul>&nbsp;답변 드리고 나니 질문의 정확한 의도를 잘 모르겠어서 다시 남겨주시면 더 정확한 답변 가능합니다. &nbsp;&nbsp;&nbsp;

dodocoding

投稿