지난 수업에서는 NativePHP로 기본 앱을 생성한 뒤 브라우저에서 실행해봤습니다. 기본 접속 주소는 다음과 같습니다: http://127.0.0.1:8000/
이 화면은 본질적으로 웹 페이지이므로 전혀 문제가 없습니다. NativePHP의 UI 렌더링은 HTML, CSS, JS로 처리됩니다. 그렇다면 이 화면을 수정하려면 어떻게 해야 할까요?
화면 표시에 사용되는 모든 파일은 프로젝트 루트의 resources 폴더에 저장됩니다
저자의 환경 경로는 다음과 같습니다:
폴더를 열면 아래 하위 폴더들을 확인할 수 있습니다:
css 폴더에는 스타일 파일, js 폴더에는 스크립트 파일이 들어가고 views 폴더에는 페이지용 PHP 템플릿 파일이 저장됩니다. views 폴더 안에는 다음 파일들이 존재합니다
welcome.blade.php 파일을 열어줍니다
파일의 일부 내용은 아래와 같습니다
익숙한 구조일 겁니다, 이것이 실제 PHP 코드입니다. 직접 수정해보겠습니다
예시로 부제목 부분을 찾아보세요:
<p class="subtitle">Your app is ready.</p>Code language: HTML, XML (xml)문장 끝에 한 줄을 추가합니다:
<p class="subtitle">Your app is ready.welcome to foxdevelop.com</p>Code language: HTML, XML (xml)저장한 뒤 http://127.0.0.1:8000/ 페이지를 새로고침합니다
화면의 부제목이 수정한 텍스트로 바뀐 것을 확인할 수 있습니다. 독자 여러분도 직접 시도해보시길 바랍니다. NativePHP는 어떤 프론트엔드 기술도 제한하지 않으며 사용하는 툴이나 프레임워크에 묶이지 않습니다. Livewire, Vue, React, Svelte, HTMX, jQuery 등 모두 자유롭게 사용 가능합니다.
이번 수업에서는 먼저 resources 디렉터리를 찾아 파일을 수정해보며 NativePHP의 기술 구조를 파악하세요. 이후 이 UI를 기반으로 자세한 설명을 이어가겠습니다.