HTML, CSS, JavaScript 웹 서버 구축 튜토리얼

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

초보 웹 개발자, 프론트엔드 학습자 (기초 수준)

핵심 요약

• Node.js v24.1.0 설치 후 npm init으로 package.json 생성
• http-server 패키지 설치 후 npx http-server -o -p 8080 명령어로 웹 서버 실행
• index.html, main.js, styles.css 파일 생성을 통해 간단한 웹 프로젝트 구조 구성
• http-server는 로컬에서 웹 서버를 구동하여 실제 웹 환경 시뮬레이션 가능

섹션별 세부 요약

1. 개발 환경 설정

• Node.js v24.1.0 설치 (현재 LTS 버전은 v22.16.0)
• 프로젝트 폴더 생성 후 npm init으로 package.json 파일 생성
• Visual Studio Code에서 프로젝트 열기 (code . 명령어 사용)

2. 파일 구조 및 예제 코드 작성

• src/main.js에 alert("Conteúdo da página carregado com sucesso!"); 코드 삽입
• assets/css/styles.css에 기본 스타일 적용 (폰트, 폰트 가족, 마진 설정)
• pages/pagina1.html에 추가 페이지 구현
• index.html에 기본 HTML 구조와 스타일/스크립트 연결

3. 웹 서버 구동

• npm i http-server 명령어로 http-server 패키지 설치
• node_modules 폴더에 설치된 http-server 코드 포함
• npx http-server -o -p 8080 명령어로 웹 서버 실행

- -o 옵션: index.html을 루트 페이지로 설정

- -p 8080 옵션: 8080번 포트 사용

4. 서버 실행 및 테스트

• 브라우저에서 http://localhost:8080으로 접근하여 웹 페이지 확인
• 서버 로그에서 요청 기록 확인 (예: Link para a Página 1 클릭 시 로그 출력)
• 실제 웹 서버 환경과 유사한 URL 구조로 테스트 가능

결론

• http-server를 사용하여 로컬에서 웹 서버를 구동하면 배포 전 테스트가 용이
• npx http-server -o -p 8080 명령어를 기억하고, index.html이 자동으로 루트 페이지로 인식되도록 설정
• 프로젝트 구조는 src, assets, pages 폴더 분리하여 확장성 강화 가능