프로젝트 (2024-05-10~2024-05-21) 틱톡 AR 필터 모집 공고

5월 10일 대학교에 다니고 있는 한 친구가 교수님의 부탁을 받고 틱톡 ar 필터 모집공고 사이트를 만들라는 얘기에 친구는 인원을 모아서 한팀으로 프로젝트를 진행하였습니다. 인원은 디자이너 2명과 개발자 3명의 느낌으로 진행하였습니다.
사이트의 요구사항은 크게 메인화면 , 신청페이지, 문의 사항으로 되어있습니다.
메인화면은 모집사항, 안내하는 페이지입니다.
신청페이지는 말그대로 신청을 하는 페이지입니다.
문의사항은 틱톡ar필터에 관하여 문의하는 페이지입니다.
당시 교수님의 말씀으로는 일주일 안에 만들어야 한다는 지시가 떨어졌고 시간이 얼마없는 상황에서 진행하였습니다.
디자이너가 피그마로 웹화면을 구상도를 만들어주고 개발자가 구상도에 맞게 코드를 짜게 되었습니다.

 

https://www.figma.com/design/M19cXWC4PdeJVyCvoYypNc/%ED%8B%B1%ED%86%A1-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80?node-id=0-1&t=nnPGXLYZjhpG44by-0

Figma

하지만 시간이 없어 급한 나머지 코드의 구성을 정말 더럽게 짜게 되었습니다.
컴포넌트를 자잘하게 나누어서 내가짠 코드를 알아볼수가 없었습니다.
또 처음으로 완벽한 웹사이트를 만드는것이 처음인지라 웹화면 뿐만 아니라

모바일 크기마다 스타일 적용을 해야 한다는 것을 이때 깨닳았습니다.
 모바일 생각을 안하게 되어 스타일이 너무 지저분한 상태에서 모바일 화면에 스타일을 적용하려니까 

더욱 코드는 더럽게 되었습니다.

https://github.com/dong5397/TicTok5397

GitHub - dong5397/TicTok5397

https://github.com/dong5397/TikTokBackendtest

GitHub - dong5397/TikTokBackendtest

결국에는 코드는 결국 못쓰게 되었습니다.
자잘하게 이상하게 보이는 탓에 결국 사용하지 못하게 되었고
나는 그냥 혼자서 연습한 꼴이 되었습니다.
처음에는 기분이 너무 안좋았고 슬펐습니다.
시간들여서 짠 코드가 다 버려지게 된다는것은 처음으로 느껴봤던 감정이였습니다.
하지만 이러한 과정 또한 경험과 성장의 양분이라고 생각합니다.
이어서 비록 못쓰게된 코드라도 중요한 기능을 적어보려고 합니다.

-- 데이터베이스 생성
CREATE DATABASE question_db;



-- 테이블 생성
CREATE TABLE questions (
  id SERIAL PRIMARY KEY,
  inquirer_name VARCHAR(100),
  phone VARCHAR(20),
  email VARCHAR(100),
  title TEXT,
  content TEXT,
  file_url VARCHAR(255),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
SELECT  * FROM questions;

 

데이터 베이스 부분입니다. 테이블 하나가 필요하고 사용자가 문의사항페이지에서 문의를 하려면 post 기능을 사용해야 합니다.

아이디, 이름, 폰 번호, 이메일, 제목, 내용, 파일, 시간으로 되어있습니다.

 

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const UPLOAD_DIR = path.join(__dirname, "uploads");
console.log("Upload directory path:", UPLOAD_DIR);

// uploads 디렉토리가 없으면 생성
if (!fs.existsSync(UPLOAD_DIR)) {
  fs.mkdirSync(UPLOAD_DIR);
  console.log("Created uploads directory at:", UPLOAD_DIR);
}

// 정적 파일 제공 경로 설정
app.use("/uploads", express.static(UPLOAD_DIR));

 

1. __dirname과 UPLOAD_DIR: 업로드된 파일을 저장할 디렉토리 설정합니다
2. fs.existsSync 및 fs.mkdirSync: 디렉토리가 없으면 생성합니다.
3. express.static: 정적 파일을 제공하는 미들웨어입니다.

백엔드를 조금 공부 해봤지만 파일 관련되서는 처음이라서 많은 경험이 되었습니다.

 

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, UPLOAD_DIR);
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  },
});

const upload = multer({ storage });

 

1. Multer는 Node.js에서 파일 업로드를 처리하는 미들웨어입니다. 주로 Express와 함께 사용되며, 다양한 파일 업로드 관련 기능을 제공하여 간편하게 파일을 업로드하고 저장할 수 있습니다. 

 

import multer from "multer";

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // 파일이 저장될 경로
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname); // 파일 이름 설정
  }
});

const upload = multer({ storage });

 

diskStorage 메소드는 파일의 저장 위치와 파일 이름을 설정하는 데 사용됩니다.

 

Multer의 diskStorage 함수에는 두 가지 주요 옵션이 있습니다:
1. destination
파일이 저장될 디렉토리를 지정합니다.
destination은 콜백 함수 형태로, 첫 번째 매개변수로 오류를, 두 번째 매개변수로 파일 저장 경로를 전달합니다.

2. filename
저장될 파일의 이름을 지정합니다.
filename은 콜백 함수 형태로, 첫 번째 매개변수로 오류를, 두 번째 매개변수로 파일 이름을 전달합니다.

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // 파일이 저장될 경로
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname); // 파일 이름 설정
  }
});

 

파일 업로드 처리

 

단일 - file은 업로드할 파일의 필드 이름

app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded successfully');
});

 

다중 - upload.array('files', 12)는 최대 12개의 파일을 업로드할 수 있는 설정입니다. files는 업로드할 파일들의 필드 이름

app.post('/upload', upload.array('files', 12), (req, res) => {
  res.send('Files uploaded successfully');
});

 

 

const createQuestion = async (req, res) => {
  try {
    const { inquirer_name, phone, email, title, content } = req.body;
    let file_url = null;

    if (req.file) {
      file_url = `${req.protocol}://${req.get("host")}/uploads/${
        req.file.filename
      }`;
    }

    const query = `
      INSERT INTO questions (inquirer_name, phone, email, title, content, file_url)
      VALUES ($1, $2, $3, $4, $5, $6)
      RETURNING *
    `;
    const values = [inquirer_name, phone, email, title, content, file_url];

    const { rows } = await pool.query(query, values);

    if (rows.length === 0) {
      return res.status(400).json({
        resultCode: "F-2",
        msg: "문의 작성 실패",
      });
    }

    res.json({
      resultCode: "S-1",
      msg: "문의 작성 성공",
      data: rows[0],
    });
  } catch (error) {
    console.error("Error during question creation:", error);
    res.status(500).json({
      resultCode: "F-1",
      msg: "에러 발생",
      error: error.message,
    });
  }
};

 

1. 문의 데이터를 데이터베이스에 삽입하고 결과를 반환하는 API입니다.
2. 파일이 업로드되면 file_url을 생성하여 데이터베이스에 저장합니다

 

 

데이터 베이스는 이정도 되어있습니다.

프론트 코드 설명과 느낀점은 다음시간에 계속 해드리겠습니다.