XAMPP 설치 후 VS CODE 연동하기

이보아·2024년 11월 7일
0

XAMPP란? 소규모 웹에서 자주 쓰이는 Apache 웹서버이다. 테스트를 위해 웹 서버를 설치해야 하는데 개별적으로 설치하기는 비효율적이다. 그래서 한번에 설치 및 관리를 할 수 있는 소프트웨어가 XAMPP이다.

XAMPP 설치하기

1. 홈페이지 접속하기

www.apachefriends.org/index.html

2. 다운로드 하기

포함된 소프트웨어를 모두 최신 버전으로 사용하려면 XAMPP for Windows를 눌러 설치 파일을 다운로드한다. 만약 이전 버전을 다운 받고싶다면 More Downloads 링크로 접속한 후 XAMPP Windows을 누르면 모든 버전을 다운로드 받을 수 있으므로 원하는 버전을 다운받을 수도 있다.

OK를 눌러서 진행 한다.

설치 마법사가 실행되면 다음으로 넘어간다.

필요한 프로그램을 선택한다. 여기서 기본(Apache, MySQL, PHP) 필요에 따라 추가로 선택한 후 진행 하면 된다.

설치 경로를 설정한다.

영어 선택 후 다음으로 진행한다.

XAMPP에 대해 더 알아보는지에 대해 물어보는 글이므로 체크박스를 해제하고 다음으로 진행한다.

컴퓨터 설치 할 준비가 되면 다음으로 넘어가고, 진행 화면이 뜬다.

Apache 서버의 방화벽 경고가 뜨는데, 액세스 허용 버튼을 누른다.

설치가 완료 되면 Finish를 눌러 설치 마법사를 종료하고 XAMPP 컨트롤 패널을 실행한다.

3. 설치 후 실행시키기

XAMPP 설치가 완료되면 제대로 작동하는지 테스트한다. Apache 옆에 Start 버튼을 눌러 웹서버를 구동시킨다.

Apache 배경이 초록색이고 Port에 80, 433이 뜨면 정상적으로 실행 되는것이다.

이제 브라우저를 열고 주소창에 localhost를 입력한다. 입력하면 아래 화면이 뜨면 정상적으로 실행 되고 있는것을 의미한다.

XAMPP의 Apache 서버는 XAMPP가 설치되어 있는 폴더에서 기본 경로 기준은 'htdocs'폴더( C:\xampp\htdocs)로 실행 된다. 만약 위치를 변경하길 원한다면 그 위치에서 실행된다.

웹페이지를 구성하는 html이나 php파일을 htdocs폴더 내에 넣어야한다.

VSCode에서 Xampp로 php파일 라이브서버로 연결

1. PHP Server 설치하기

VS Code 확장프로그램 중 PHP Server를 설치한다.

2. php Server 실행 시키기 앞서

VSCode에서 Ctrl + , > php 검색 > Validate:Enable으로 이동 > settings.json에서 편집을 누른다.

php path에 php.exe가 설치되어있는 주소를 아래와같이 작성한다.

{
    "php.validate.executablePath": "D:\\xampp\\php\\php.exe",
    "phpserver.phpPath": "D:\\xampp\\php\\php.exe",
}

3. PHP Intelephense 설치하기

확장 extension을 설치한다.

4. PHP Server 실행 시키기

php 파일에서 우클릭하여 "PHP Server:Server project"를 클릭한다.

profile
매일매일 틀깨기

0개의 댓글