개발 기본
개발 서버(Development Server)
개발 서버는 코드를 수정하며 앱의 동작을 확인할 수 있도록 개발 중에 실행하는 서버입니다.
쉬운 설명
AI가 만든 웹 앱을 내 컴퓨터에서 먼저 열어 보려면 개발 서버를 실행하는 경우가 많아요. 실행하면 브라우저에서 확인할 주소가 표시되고, 파일을 고치면 화면에 변경을 반영해 줘요. 사용하는 도구에 따라 페이지를 다시 불러오거나 바뀐 부분만 갱신해요. 개발 서버를 켰다는 것이 다른 사람에게 사이트를 배포했다는 뜻은 아니에요.
이런 상황에서 만나요
프로젝트 안내대로 npm run dev를 실행했더니 Local 주소가 나왔다고 해 볼게요. 그 주소를 브라우저에서 열고 신청 버튼이 보이는지 확인하는 상황이에요.
서버가 실행 중인지와 주소를 확인해요
npm run dev
Local: http://localhost:5173/
스터디 신청 페이지
신청 버튼과 입력칸이 표시됨
- 1이 프로젝트에 dev 스크립트가 등록돼 있다는 전제예요.
- 2이 예시에서는 5173번 포트로 열어요. 실제 출력의 주소를 사용해요.
- 3페이지가 열린 뒤 기능도 직접 확인해요. 서버 실행만으로 기능 검증은 끝나지 않아요.
페이지가 안 열리면 터미널에서 서버가 계속 실행 중인지와 실제 표시된 주소를 확인하세요. 원하는 포트가 이미 사용 중이면 도구에 따라 다른 포트를 쓰거나 실행이 실패할 수 있어요. 이전에 쓰던 주소를 외워서 입력하기보다 이번 출력의 주소를 확인해요.
헷갈리기 쉬운 점
터미널을 닫아도 계속 접속할 수 있나요?
터미널에서 실행한 개발 서버 프로세스가 종료되면 보통 접속도 끊겨요. 운영 배포는 사람들이 접속할 환경에서 앱이 제공되도록 별도로 구성하는 일이에요.
개발 서버는 개발 편의를 위한 기능을 포함할 수 있어요. 외부 공유가 필요하면 도구의 공개 설정과 접근 범위를 확인하고, 운영 서비스로 그대로 사용해도 되는지 공식 안내를 확인하세요.
왜 알아야 할까요?
코드 오류와 서버가 꺼진 상태를 구분할 수 있어요. 또 내 컴퓨터에서 확인한 화면과 배포된 화면이 다른 이유를 점검하기 쉬워져요.
조금 더 자세히
npm run dev는 package.json에 등록된 dev 스크립트를 실행합니다. 이름이 dev라고 해서 모든 프로젝트가 같은 서버를 사용하는 것은 아닙니다.
localhost는 주소를 여는 컴퓨터 자신을 가리킵니다. 개발 서버의 표시 주소와 포트는 프로젝트 설정에 따라 다르고, 다른 기기에서 접근하려면 네트워크와 서버 설정을 별도로 확인해야 합니다.
직접 사용할 때 확인해 보세요
- 프로젝트의 dev 스크립트를 확인한다
- 이번 실행에 표시된 주소를 연다
- 서버 출력의 오류와 종료 여부를 확인한다
참고 자료
관계 지도
