logo Essepage 문서
가이드 예제 쇼케이스 자주 묻는 질문 문의하기 개인정보처리방침 이용약관 사용 기간 및 환불정책 ≶ Essepage 로 이동

언어

페이지 만들기와 URL

에스페이지에서는 /public 폴더 안의 폴더와 페이지 파일로 웹사이트의 URL을 구성합니다.

페이지 파일이 있는 폴더의 경로는 웹페이지의 URL로 연결됩니다. 따라서 별도의 라우팅 설정 파일을 작성하지 않아도 파일 탐색기에서 웹사이트의 전체 페이지 구조를 확인할 수 있습니다.

예를 들어 다음과 같은 파일 구조가 있다고 가정해보겠습니다.

/public
├── +page.essepage
├── about
│   └── +page.essepage
└── contact
    └── +page.essepage

각 페이지는 다음 URL에 해당합니다.

페이지 파일URL
/public/+page.essepage/
/public/about/+page.essepage/about
/public/contact/+page.essepage/contact

웹사이트의 시작점, /public 폴더

방문자가 접속할 수 있는 웹페이지는 프로젝트의 /public 폴더를 중심으로 구성됩니다.

프로젝트의 기본 홈페이지 파일은 다음과 같습니다.

/public/+page.essepage

이 파일은 프로젝트의 기본 사이트 주소로 접속했을 때 표시되는 홈페이지입니다.

예를 들어 프로젝트의 기본 사이트 주소가 다음과 같다면:

https://espg.dev/my-website

홈페이지 주소도 다음과 같습니다.

https://espg.dev/my-website

URL에는 /public이나 +page.essepage가 표시되지 않습니다.

/public은 웹사이트의 시작 위치이며, 그 안의 폴더 구조가 페이지 URL로 연결됩니다.

기본 페이지 파일, +page.essepage

에스페이지에서 기본적인 웹페이지를 만들 때는 +page.essepage라는 이름의 파일을 사용합니다.

+page.essepage

새 페이지 파일을 만들 때는 파일 이름으로 +page를 입력하고 Enter를 누르세요. 에디터가 .essepage 확장자를 자동으로 추가합니다.

완성된 파일 이름은 다음과 같습니다.

+page.essepage

+page.essepage의 이름은 URL에 표시되지 않습니다. 대신 이 파일이 들어 있는 폴더의 경로가 URL이 됩니다.

/public/about/+page.essepage

위 파일에서 URL을 결정하는 부분은 about 폴더입니다.

/about

페이지의 URL을 변경할 때는 +page.essepage의 이름이 아니라 이 파일이 들어 있는 폴더의 이름이나 위치를 변경합니다.

+page.essepage는 페이지임을 나타내고, 폴더 이름은 페이지의 URL을 결정합니다.

새 페이지 만들기

홈페이지 외에 새로운 페이지를 만들어보겠습니다.

다음 주소에 소개 페이지를 만든다고 가정해보겠습니다.

/about

필요한 파일 구조는 다음과 같습니다.

/public
├── +page.essepage
└── about
    └── +page.essepage

폴더 만들기

  1. 파일 탐색기에서 /public 폴더를 마우스 오른쪽 버튼으로 클릭합니다.
  2. 폴더 추가(New Folder)를 선택합니다.
  3. 폴더 이름으로 about을 입력하고 Enter를 누릅니다.

이제 /public 안에 다음 폴더가 만들어집니다.

/public/about

페이지 파일 만들기

  1. 새로 만든 /public/about 폴더를 마우스 오른쪽 버튼으로 클릭합니다.
  2. 파일 추가(New File)를 선택합니다.
  3. 파일 이름으로 +page를 입력하고 Enter를 누릅니다.
  4. 만들어진 +page.essepage 파일을 엽니다.
  5. 다음 내용을 작성합니다.
<h1>About Us</h1>

<p>Learn more about our website.</p>
  1. 파일을 저장합니다.

완성된 파일 경로는 다음과 같습니다.

/public/about/+page.essepage

이 페이지를 공개하면 사이트 주소의 /about 경로로 접속할 수 있습니다.

페이지 공개하고 확인하기

새로 만든 +page.essepage 파일은 아직 공개되지 않은 상태입니다. 새 페이지는 먼저 공개해야 미리보기로 열거나 공개 사이트에서 확인할 수 있습니다.

  1. 새로 만든 +page.essepage 파일이 저장되어 있는지 확인합니다.
  2. 파일을 마우스 오른쪽 버튼으로 클릭합니다.
  3. 공개(Publish)를 선택합니다.
  4. 공개가 완료되면 파일을 다시 마우스 오른쪽 버튼으로 클릭합니다.
  5. 미리보기(Preview)를 선택해 개발 환경의 페이지를 확인합니다.
  6. 페이지 열기(Open Page)를 선택해 공개된 페이지를 확인합니다.

저장과 공개에 관한 자세한 내용은 저장, 공개와 적용에서 알아볼 수 있습니다.

폴더 구조와 URL

/public 아래에 폴더를 여러 단계로 만들면 URL도 같은 순서로 구성됩니다.

예를 들어 제품과 새 제품을 소개하는 페이지를 만든다고 가정해보겠습니다.

/public
└── products
    └── new
        └── +page.essepage

이 페이지의 URL은 다음과 같습니다.

/products/new

더 많은 페이지를 추가할 수도 있습니다.

/public
├── +page.essepage
├── about
│   └── +page.essepage
├── products
│   ├── +page.essepage
│   ├── new
│   │   └── +page.essepage
│   └── popular
│       └── +page.essepage
└── contact
    └── +page.essepage

각 페이지는 다음 URL에 해당합니다.

페이지 파일URL
/public/+page.essepage/
/public/about/+page.essepage/about
/public/products/+page.essepage/products
/public/products/new/+page.essepage/products/new
/public/products/popular/+page.essepage/products/popular
/public/contact/+page.essepage/contact

이처럼 파일 탐색기의 폴더 구조만 확인해도 사이트에 어떤 페이지와 URL이 있는지 알 수 있습니다.

파일과 폴더 이름 정하기

파일과 폴더의 이름은 이름 규칙 안에서 자유롭게 정할 수 있습니다.

특히 페이지 폴더의 이름은 URL의 일부가 되므로 페이지의 내용을 알 수 있는 간결한 이름을 사용하는 것이 좋습니다.

한글과 한자, 일본어, 이모지(Emoji) 등의 유니코드 문자도 파일과 폴더 이름에 사용할 수 있습니다.

자세한 이름 규칙은 파일 이름 규칙에서 알아볼 수 있습니다.

파일과 폴더 이름 변경하기

파일이나 폴더의 이름은 파일 탐색기에서 변경할 수 있습니다.

  1. 이름을 변경할 파일이나 폴더를 마우스 오른쪽 버튼으로 클릭합니다.
  2. 이름 변경(Rename)을 선택합니다.
  3. 새로운 이름을 입력하고 Enter를 누릅니다.

페이지 파일이 들어 있는 폴더의 이름을 변경하면 해당 페이지의 URL도 함께 변경됩니다.

예를 들어 다음 페이지가 있다고 가정해보겠습니다.

/public/about/+page.essepage

about 폴더의 이름을 company로 변경하면 페이지 경로도 다음과 같이 달라집니다.

/company

파일과 폴더 이동하기

파일과 폴더는 다른 폴더 안으로 드래그 앤 드롭하여 이동할 수 있습니다.

페이지 파일이나 그 파일이 들어 있는 폴더를 이동해 경로가 달라지면 페이지 URL도 변경됩니다.

예를 들어 다음 페이지가 있다고 가정해보겠습니다.

/public/about/+page.essepage

about 폴더를 company 폴더 안으로 이동하면 파일 구조는 다음과 같이 바뀝니다.

/public/company/about/+page.essepage

페이지 경로도 다음과 같이 변경됩니다.

/company/about

이미 공개된 페이지의 폴더 이름을 변경하거나 페이지를 이동했다면 새로운 주소에서 페이지가 정상적으로 열리는지 확인하세요. 기존 주소를 사용하는 메뉴와 링크도 새로운 주소에 맞게 수정해야 합니다.

파일과 폴더 삭제하기

더 이상 사용하지 않는 파일이나 폴더는 파일 탐색기에서 삭제할 수 있습니다.

  1. 삭제할 파일이나 폴더를 마우스 오른쪽 버튼으로 클릭합니다.
  2. 삭제(Delete)를 선택합니다.

파일이나 폴더를 삭제하기 전에 다음 내용을 확인하세요.

  • 공개 사이트에서 사용 중인 페이지인지
  • 다른 페이지에서 링크하고 있는지
  • 레이아웃이나 컴포넌트에서 사용하고 있는지
  • CSS, JavaScript 또는 이미지 파일이 페이지에 연결되어 있는지
  • 폴더 안에 필요한 다른 파일이 남아 있지 않은지

폴더를 삭제하면 모든 하위 폴더와 파일이 함께 삭제되므로 삭제할 대상을 한 번 더 확인하세요.

공개된 페이지가 들어 있는 폴더의 이름을 변경하거나 이동하면 URL이 달라집니다. 페이지 파일이나 페이지가 들어 있는 폴더를 삭제하면 기존 주소로 접속할 수 없게 됩니다.

페이지를 찾을 수 없을 때

새로 만든 페이지가 열리지 않거나 예상한 URL과 다르다면 다음 내용을 확인하세요.

  • 페이지 파일이 /public 폴더 안에 있는지
  • 파일 이름이 정확히 +page.essepage인지
  • 필요한 폴더 안에 페이지 파일을 만들었는지
  • 페이지를 처음 공개했는지
  • 페이지 숨기기가 설정되어 있지 않은지
  • 브라우저에 입력한 폴더 이름과 실제 이름이 같은지
  • 파일과 폴더 이름의 대소문자가 일치하는지

예를 들어 공개된 사이트의 주소가 https://espg.dev/my-website일 경우, 다음 파일의 URL은:

/public/products/new/+page.essepage

다음과 같습니다.

https://espg.dev/my-website/products/new

URL에 /public이나 +page.essepage를 포함하지 마세요.

다음 단계

페이지와 URL을 만드는 방법을 이해했다면 다음 문서로 넘어가세요.

  • 페이지 파일 내부의 기본 구조 알아보기: 페이지 구조
  • 페이지를 메뉴와 링크로 연결하는 방법: 내비게이션과 링크
  • 주소의 일부를 값으로 사용하는 페이지 만들기: 파라미터 폴더
  • 존재하지 않는 주소에 표시할 페이지 만들기: 사용자 정의 404 페이지
  • 파일과 폴더 이름의 자세한 규칙 확인하기: 파일 이름 규칙
Last updated:

Powered by ≶ Essepage

Copyright © 2019-present Divmaster