본문 바로가기
카테고리 없음

[LearningMate 프로젝트] 웹사이트 개발 첫 단계: 웹 호스팅 선택관 구축 과정

by 안스토리 2024. 12. 31.

지난 글에서는 제가 기획하고 있는 러닝메이트 스터디 커뮤니티 웹사이트의 배경과 목적에 대해 이야기했습니다. 오늘은 이 웹사이트를 구축하기 위한 실제적인 첫 단계, 웹 호스팅과 관련된 내용을 공유하려 합니다. 러닝메이트는 단순히 학습을 위한 도구를 넘어, 함께 배우고 성장할 수 있는 플랫폼이 되는 것을 목표로 하고 있습니다. 그 시작으로, 웹사이트를 인터넷에 배포하기 위해 제가 거친 과정을 차근차근 설명해볼게요.

 

1. 웹사이트를 어디에 배포할 것인가: 카페24 선택하기

웹사이트를 공개하려면 데이터를 저장하고 웹 페이지를 제공할 서버가 필요합니다. 다양한 옵션이 있지만, 저는 카페24의 웹 호스팅 서비스를 선택했습니다.

왜 카페24인가?
러닝메이트는 아직 초기 단계의 프로젝트로, 큰 트래픽이나 복잡한 서버 설정이 필요하지 않았습니다. 따라서 시작이 간편하고 유지 비용이 적은 카페24가 적합하다고 판단했습니다.

  • 저렴한 비용: 기본 플랜은 월 1,100원으로 부담이 적습니다.
  • 손쉬운 설정: 복잡한 설정 없이 바로 파일을 업로드하면 작동하는 간단한 구조입니다.
  • 다양한 지원 환경: PHP와 Node.js 기반의 서버 환경을 모두 제공해, 프로젝트 특성에 맞는 선택이 가능합니다.

이번 프로젝트에서는 PHP 기반 호스팅을 선택했습니다. 러닝메이트의 초기 개발은 비교적 익숙한 환경에서 빠르게 작업하기 위해 PHP를 사용하고 있습니다. 추후 React와 Node.js로의 전환을 계획 중입니다.

카페24 활용 팁:
카페24는 public_html이라는 루트 디렉터리를 제공합니다. 이곳에 파일을 업로드하면, 웹사이트가 즉시 브라우저에서 동작합니다. 초보자에게 적합한 구조라 처음 웹사이트를 배포하는 데 부담이 적습니다.

 

2. 로컬에서 작업하기: XAMPP로 PHP 환경 구축

웹사이트를 바로 서버에서 작업하는 것은 비효율적이고 위험할 수 있습니다. 그래서 저는 로컬에서 코드를 작성하고 테스트한 후 서버로 배포하는 방식을 택했습니다. 이를 위해 XAMPP라는 통합 개발 환경을 활용했습니다.

XAMPP란?
XAMPP는 로컬에서 웹 서버, 데이터베이스, PHP 환경을 손쉽게 구축할 수 있는 소프트웨어 패키지입니다.

  • Apache: 로컬 웹 서버 역할을 합니다.
  • PHP: 서버 측 스크립트를 실행할 수 있습니다.
  • MySQL(MariaDB): 데이터베이스를 구축하고 관리할 수 있습니다.

XAMPP 활용 과정:

  1. Apache와 MySQL 서비스를 시작한 뒤, htdocs 디렉터리에 PHP 파일을 저장합니다.
  2. 브라우저에서 localhost/파일이름을 입력하면 코드를 실행할 수 있습니다.
  3. 데이터베이스는 XAMPP에 포함된 phpMyAdmin을 통해 관리합니다.

러닝메이트의 초기 기능인 회원가입과 로그인 로직을 테스트하기 위해, 저는 로컬에서 MySQL 데이터베이스와 연동해 PHP 스크립트를 작성했습니다. 데이터를 저장하고 불러오는 과정을 반복하면서 코드를 다듬었습니다.

 

3. 서버로 배포하기: 파일질라를 활용한 FTP 업로드

로컬에서 테스트를 마친 파일은 실제 서버로 배포해야 합니다. 이 과정에서는 **파일질라(FileZilla)**라는 FTP 클라이언트를 활용했습니다.

파일질라란?
파일질라는 FTP/SFTP를 통해 로컬 컴퓨터와 서버 간의 파일을 전송할 수 있는 프로그램입니다.

  • 대량 파일 전송: 한 번에 여러 파일을 업로드하거나 다운로드할 수 있습니다.
  • 보안 연결: SFTP를 지원해 안전하게 파일을 전송할 수 있습니다.
  • 자동 재시도: 전송 실패 시 자동으로 재시도해 안정성을 제공합니다.

FTP를 통한 서버 업로드:

  1. 카페24 관리 콘솔에서 제공하는 FTP 접속 정보를 확인합니다.
  2. 파일질라에 접속 정보를 입력해 서버에 연결합니다.
  3. 로컬의 프로젝트 파일을 public_html 디렉터리로 업로드합니다.
  4. 브라우저에서 URL을 확인하여 업로드가 성공적으로 이루어졌는지 확인합니다.

러닝메이트 웹사이트의 초기 버전은 회원가입 페이지와 데이터베이스 연동 테스트를 포함하고 있습니다. 이 파일들을 파일질라를 통해 카페24 서버에 업로드하고, 동작 상태를 점검했습니다.

 

4. 데이터베이스 관리: HeidiSQL로 효율적으로 작업하기

러닝메이트의 주요 기능 중 하나는 사용자 데이터 관리입니다. 이를 위해 카페24에서 제공하는 MySQL 데이터베이스를 사용하고, HeidiSQL이라는 GUI 도구로 데이터베이스를 관리했습니다.

HeidiSQL 활용 과정:

  1. 카페24에서 데이터베이스 접속 정보를 확인하고 원격 접속을 허용합니다.
  2. HeidiSQL에 접속 정보를 입력해 연결합니다.
  3. 테이블을 생성하고, SQL 쿼리를 실행해 데이터를 추가하거나 조회합니다.

이를 통해 회원가입 시 입력된 데이터를 저장하고, 로그인 시 해당 데이터를 조회하는 프로세스를 구현할 수 있었습니다.

 

5. 현재까지의 결과물

현재 러닝메이트의 첫 번째 결과물은 간단한 회원가입 및 로그인 기능입니다.

  • 로컬에서는 XAMPP를 통해 PHP와 MySQL 연동 작업을 테스트했고,
  • 카페24 서버에서는 파일질라를 통해 파일을 업로드하고, HeidiSQL로 데이터베이스를 관리하며 결과를 확인했습니다.

이 과정에서 서버와 로컬 환경의 차이를 이해하게 되었고, 실수를 줄이기 위해 코드를 꼼꼼히 점검하는 습관을 기르게 되었습니다.

 

마치며

러닝메이트 프로젝트는 작은 한 걸음부터 시작되었습니다. 웹 호스팅과 로컬 개발 환경을 구축하고, 간단한 기능을 구현하는 과정을 거치며, 조금씩 목표에 가까워지고 있습니다. 내일은 회원가입과 로그인 기능 구현 과정을 상세히 다루며, 데이터베이스와 서버 측 로직의 작동 원리를 공유하려고 합니다.

웹사이트를 만드는 여정은 단순히 기술을 배우는 것을 넘어, 문제를 해결하고 사용자 경험을 고민하는 과정이기도 합니다. 러닝메이트와 함께 배우고 성장하는 이 여정, 함께 지켜봐 주세요. 😊