vscode에 XAMPP 설치해서 php 파일 로컬에서 보기 외 크롬확장프로그램 소개

XAMPP 파일 다운로드하기

1. 아래 페이지에서 XAMPP 을 다운로드 받습니다.

https://www.apachefriends.org/index.html

XAMPP Installers and Downloads for Apache Friends

본인에게 해당되는 버전을 선택해서 다운로드 받습니다.

 

2. 다운 받은 파일을 더블클릭해서 설치합니다.

yes - ok - next - 'select component'에서 Apache, MySQL, PHP 항목 선택 - c드라이브에 설치되도록 그대로 두고 next - 설치 progress 바가 뜰떄까지 next 버튼을 눌러줍니다. 

 

아래 페이지를 참고해서 선택적으로 체크해서 next버튼을 눌러준 후 finish로 마무리 지어줍니다.

참고페이지 https://annajang.tistory.com/12

[XAMPP] 윈도우에 설치하기 (on windows)

 

VScode에서 php liveserver에서 볼 수 있는 환경 구현하기

 

1. 설치된 C드라이브에 xampp -> htdocs "안에" 프로젝트 폴더를 만듭니다.

C:\xampp\htdocs\내프로젝트파일

 

2. 내프로젝트파일 폴더를 vscode에서 open 한다. (xampp폴더 x, htdocs폴더x, 내프로젝트파일 폴더 o)

 

3. 상단 메뉴 Terminal - Configure Default Build Task ..  - Create task.json file from template (자동으로 뜸)

 

4. MS build, maven, .NET Core, Others 옵션중 아무거나 선택합니다. 어차피 수정할 것이기 때문입니다.

 

5. .vscode폴더와 그 안에 tasks.json 파일이 자동으로 만들어 집니다. tasks.json 파일의 내용을모두 지우고 아래 코드 입력합니다. 

{

  // See https://go.microsoft.com/fwlink/?LinkId=733558

  // for the documentation about the tasks.json format

  "version": "2.0.0",

  "command": "chrome",

  "windows": {

    "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"

  },

  "args": ["localhost\\${workspaceRootFolderName}\\${fileBasename}"]

}

 

위 코드를 복사 붙혀넣기 할 수 있는 페이지

https://jaddong.tistory.com/entry/VSCode%EC%97%90%EC%84%9C-Xampp%EB%A1%9C-php-%ED%8C%8C%EC%9D%BC-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90-%EB%9D%84%EC%9A%B0%EA%B8%B0-How-to-run-php-file-in-visual-studio-code-with-xampp

VSCode에서 Xampp로 php 파일 브라우저에 띄우기 : How to run php file in visual studio code with xampp

 

** setting.json에서 따로 아래 코드를 넣어줄 필요는 없습니다. 

    // "php.validate.executablePath": "C:\\xampp\\php\\php.exe",

    // "php.executablePath": "C:\\xampp\\htdocs\\php\\php.exe",

 

6. 고급시스템설정 Path에서 php경로를 적어줍니다.  

내pc - 속성 - 고급시스템설정 -  환경변수 - 시스템변수 path - 새로만들기 

C:\xampp\php

 

7. 확장프로그램을 설치해줍니다.  

php Intellisense 설치, php debug 설치

 

최종적으로 VS Code에서 php파일 미리보기로 확인하기

** XAMPP Control Panel 에서 "start" 버튼을 눌러 준 후 

** ctrl + shift + b 단축키 엔터

** 이전에 설정해둔 "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" 엔터

** continue without scanning the task out 엔터

** 크롬에서 "연결이 비공개로 설정되어 있지 않습니다" 오류가 뜰 때에는 하단 고급버튼을 눌러  '안전하지 않아도 이동'

을 클릭하면 해당 페이지를 확인 할 수 있다.

 

http://www.nam.or.kr/archives/583

윈도우에서 xampp 환경 구축 – nam.or.kr

 

크롬 확장프로그램 "Web Server for Chrome"

서버를 돌릴 수 있는 크롬의 확장프로그램입니다. 그렇지만 방금 실험해 보니 php 파일은 생코드로 나오네요.

서버를 볼 수 있는 크롬확장프로그램 web server for chrome