카페추천 웹사이트(카페 작성 페이지 및 백엔드 설치)

카페 작성, 수정, 삭제를 하기위해 먼저 카페 작성 페이지를 만들었다.

CafeAdd.js

import React, { useState } from "react"

import styles from './CafeAdd.module.css';

export default function CafeAdd() {

    const [name, setName] = useState('');

    const [region, setRegion] = useState('');

    const [category, setCategory] = useState('');

    const [location, setLocation] = useState('');

    const [image, setImage] = useState(null);

    const handleSubmit = (e) => {

        e.preventDefault();

        const cafeData = {

            name,

            region,

            category,

            location,

            image,

        };

        // 카페 데이터 처리 로직 (예: API에 전송)

        console.log('카페 추가:', cafeData);

        // 폼 초기화

        setName('');

        setRegion('');

        setCategory('');

        setLocation('');

        setImage(null);

    };

   

    return (

        <div className={styles.bgImg}>

            <div className={styles.form}>

                <h1>카페 작성 폼</h1>

                <form onSubmit={handleSubmit}>

                <div className={styles.formGroup}>

                    <label htmlFor="name">카페 이름:</label>

                    <input

                        type="text"

                        id="name"

                        value={name}

                        onChange={(e) => setName(e.target.value)}

                        required

                    />

                </div>

                <div className={styles.formGroup}>

                    <label htmlFor="region">지역:</label>

                    <select

                        id="region"

                        value={region}

                        onChange={(e) => setRegion(e.target.value)}

                        required

                    >

                        <option value="">선택하세요</option>

                        <option value="서울">서울</option>

                        <option value="인천">인천</option>

                        <option value="경기">경기</option>

                        <option value="부산">부산</option>

                        <option value="대구">대구</option>

                        <option value="울산">울산</option>

                        <option value="세종">세종</option>

                        <option value="강원">강원</option>

                        <option value="경남">경남</option>

                        <option value="경북">경북</option>

                        <option value="전남">전남</option>

                        <option value="전북">전북</option>

                        <option value="충남">충남</option>

                        <option value="충북">충북</option>

                        <option value="제주">제주</option>

                    </select>

                </div>

                <div className={styles.formGroup}>

                <label htmlFor="category">카테고리:</label>

                    <select

                        id="category"

                        value={category}

                        onChange={(e) => setCategory(e.target.value)}

                        required

                    >

                        <option value="">선택하세요</option>

                        <option value="뷰맛집">뷰 맛집</option>

                        <option value="빵맛집">빵 맛집</option>

                        <option value="커피맛집">커피 맛집</option>

                    </select>

                </div>

                <div className={styles.formGroup}>

                    <label htmlFor="location">위치 (예: 주소명):</label>

                    <input

                        type="text"

                        id="location"

                        value={location}

                        onChange={(e) => setLocation(e.target.value)}

                        placeholder="주소"

                        required

                    />

                </div>

                <div className={styles.formGroup}>

                    <label htmlFor="image">사진 업로드:</label>

                    <input

                        type="file"

                        id="image"

                        accept="image/*"

                        onChange={(e) => setImage(e.target.files[0])}

                        required

                    />

                </div>

                <button type="submit" className={styles.submitButton}>작성하기</button>

            </form>

            </div>

        </div>

);

}

 

 

 

CafeAdd.module.css코드

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

a {

    text-decoration: none;

    color: black;

}

li {

    list-style: none;

}

img {

    display: block;

    width: 100%;

}

.bgImg {

    display: flex;

    flex-direction: column;

    justify-content: flex-start; /* 수직 정렬을 상단으로 변경 */

    background-image: url('../img/main_bg.avif'); /* 배경 이미지 설정 */

    background-size: cover; /* 배경 이미지 크기 조정 */

    background-position: center; /* 배경 이미지 중앙 정렬 */

    background-repeat: no-repeat; /* 배경 이미지 반복 방지 */

    background-attachment: scroll; /* 스크롤 시 배경 이미지 이동 */

    min-height: 100vh; /* 최소 높이 설정 */

    width: 100%; /* 전체 너비 */

    position: relative;

}

.form {

    width: 50%;

    max-width: 600px;

    margin: 100px auto;

    padding: 20px;

    border: 1px solid #ccc;

    border-radius: 8px;

    background-color: #f9f9f9;

}

.formGroup {

    margin-bottom: 20px; /* 아래 여백 추가 */

    padding: 10px; /* 내부 패딩 추가 */

    border: 1px solid #ddd; /* 경계선 추가 (선택 사항) */

    border-radius: 4px; /* 모서리 둥글게 */

    background-color: #ffffff; /* 배경색 추가 (선택 사항) */

}

label {

    display: block;

    margin-bottom: 5px;

}

input[type="text"],

input[type="file"],

select {

    width: 100%;

    padding: 10px;

    border: 1px solid #ccc;

    border-radius: 4px;

}

.submitButton {

    padding: 10px 15px;

    background-color: #007bff;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

}

.submitButton:hover {

    background-color: #0056b3;

}

 

작성페이지 화면

 

이걸 만들고 나니 문득 든 생각은 백엔드와 DB가 연결이 안되어 있으면 이걸 만들기 힘들다고 판단해서 바로 백엔드랑 DB를 연결해보겠습니다.

 

npm install express

Express설치 

 

touch server.js

Express 서버를 위한 파일 생성 (일반적으로 server.js 또는 app.js라는 이름으로 파일을 생성한다.)

=> 하지만 나는 React로 인해 App.js가 있으므로 server.js로 만든 것

 

touch라는 명령어가 안먹혀서 그냥 루트 디렉토리에 server.js파일을 만들었음

 

server.js

const express = require('express');

const path = require('path'); // path 모듈 추가

const app = express();

const port = 5000; // 원하는 포트 번호로 변경 가능

// React 빌드 파일을 정적 파일로 제공

app.use(express.static(path.join(__dirname, 'build'))); // build 폴더 경로 설정

// 기본 라우트 설정

app.get('/', (req, res) => {

    res.sendFile(path.join(__dirname, 'build', 'index.html')); // index.html 파일 제공

});

// 서버 시작

app.listen(port, () => {

    console.log(`서버가 http://localhost:${port}에서 실행 중입니다.`);

});

 

localhost:5000번의 포트로 실행이 된것을 알수있다.

 

다음에는 만들어뒀던 페이지들을 다 연결하고 DB연결까지 해보겠습니다.