본문 바로가기
Works/Web

[Web] Mac 에서 Web 개발 환경 설정

by Vader87 2020. 12. 13.
반응형

Mac 에서 Web 개발 환경 설정하기

HTML, PHP 를 공부해 보기 위해 일단 개발환경 설정부터.. 

Dev Tools

  • Visual Studio Code
    • Download 받은 Visual Studio Code.app 을 애플리케이션 경로 밑으로 옮겨주자
    • Extensions 
      • Live Server
      • PHP IntelliSense
      • Debugger for Chrome 
      • Beautify
  • Chrome

Settings

  • Visual Studio Code 
    • Code > Preferences > Settings (or edit settings.json)
    • PHP executable path
      • PHP > Validate:Executable Path (for Settings)
      • "php.validate.executablePath": "/usr/bin/php" (for settings.json)
      • PHP 경로 설정
        •  Mac 에서 php 설치 경로 알아내기
          • Mac Terminal > which php
    • Files > Associations
      • Files > Associations > Add Item > Key: *.html, Value: php (for Settings)
      • "files.associations": {"*.html":"php"} (for settings.json)
      • HTML 파일에서 php 링크가 정상 작동하게 하는 설정?
    • PHP IntelliSense Settings
      • Recommand Settings
        • PHP > Suggest:Basic On -> Off (for Settings)
        • "php.suggest.basic":false (for settings.json)
        • built-in PHP smart completion setting
        • PHP Extension 사용을 하는 경우 꺼주는 게 좋다고 함

Test

  • HTML
    • Visual Studio Code 우측 하단 파란색 줄에 Go Live 버튼 클릭
    • Chrome 에서 Hellow, World 창이 출력 되는 것 확인
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        Hello, World
    </body>
</html>
  • PHP
    • Visual Studio Code 우측 하단 파란색 줄에 Go Live 버튼 클릭
    • Chrome 개발자 도구를 통해 보면 Live Server 에 의해 php 코드가 주석 처리 된거 같음..
    • <!--?php echo "Hello world"; ?--> <!-- Code injected by live-server -->
    • 해당 파일명에 html 일 경우 발생, php 로 하면 해결
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        Hello, World
        <?php
            echo "Hello world";
        ?>
    </body>
</html>

 

원래 원했던 세팅은 Visual Studio Code 의 Live Server 를 통해 디버깅 하면서 개발이었는데 php 는 연동이 잘 되지 않는다.

가장 기본적인 apache 설정으로 개발 환경 세팅을 해보는 것으로 변경.

Mac Apache 실행

  • Mac Terminal > sudo apachectl start
    • localhost
      •  Webpage 확인 -> It works!
  • /etc/apache2/httpd.conf 내용 수정
    • Document Root 경로 수정
      • DocumentRoot "/Library/WebServer/Documents"
      • <Directory "/Library/WebServer/Documents">
    • 변경한 경로에 index.html 파일 및 예제 코드 생성
    • 변경된 내용 Apache 에 반영
      • Mac Terminal > sudo apachectl graceful
        • localhost
          • Webpage 확인 -> Hello World
    •  php 설정
      • #LoadModule php7_module libexec/apache2/libphp7.so -> 주석 제거
      • localhost/info.php
        • Webpage 확인 -> phpinfo
    • index.php 가 기본이 되도록 설정
      • <IfModule dir_module>
        • DirectoryIndex index.html -> DirectoryIndex index.php

getbootstrap.com/

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

Bootstrap css, js 코드 및 example 코드 추가

다음 목표 example 목록을 메인 index.php 에서 자동으로 읽어와 목록화 시켜줘서 주소를 치지 않고 버튼으로 접근 가능하게 해보기

perishablepress.com/better-default-directory-views-with-htaccess/

 

반응형

'Works > Web' 카테고리의 다른 글

[Web] Chrome 에서 변경한 코드가 반영되지 않을 때  (1) 2020.12.29
[Web] Firebase emulator 개발 환경 설정  (0) 2020.12.20
[Web] Mac 에 Node.js 개발 환경 설정  (0) 2020.12.20
[Web] PWAs 구성  (0) 2020.12.13
[Web] Bootstrap 예제 목록 만들기  (0) 2020.12.13

관련글

댓글

티스토리툴바