[회고록] 프론트부터 백엔드까지 작업한 회고

웹 개발 전반적인 경험

나는 협업 경험이 없어서 프론트부터 백엔드까지 프로젝트하면서 프로세스를 경험하고 싶어서 시도해 봤다.

 

 

 

 

처음 접한 Node 그러나..

자바 말고 노드로 선택했다. 별다른 이유 없이 자바스크립트랑 연관돼서 시작했다. 그리고 나는 새로운 언어를 두려워하지 않았다. 오히려 흥미가 생겼다. 처음에는 npm 설치하고 모듈을 활용하면서 터미널에서 값을 확인하면서 CRUD 접하면서 HTTP 통신에 대해서 알아갔다.

 

(이 프로젝트하고 자바 관련된 강의나 문법을 봤다.)

GET, POST 포스트맨이라는 사이트에서 통신하는 것을 접하면서 "이렇게 통신하는 것을 볼 수 있구나" 라는 것을 알았다.

 

아래의 코드는 일부분

 

 

  const express = require("express");

  const app = express();

  const path = require("path");

  const methodOverride = require("method-override");

  const { v4: uuid } = require("uuid");

  app.use(express.urlencoded({ extended: true }));

  app.use(express.json());

  app.use(methodOverride("_method"));

  app.use("/", express.static(__dirname + "/"));

  app.set("views", path.join(__dirname, "/"));

  app.set("view engine", "ejs");

  let data = [

    {

      id: uuid(),

      language: "JavaScript",

      lv: null,

    },

    {

      id: uuid(),

      language: "Node",

      lv: null,

    },

    {

      id: uuid(),

      language: "React",

      lv: null,

    },

    {

      id: uuid(),

      language: "TypeScript",

      lv: null,

    },

  ];

  let notices = [

    {

      id: uuid(),

      name: "홍길동",

    },

    {

      id: uuid(),

      name: "홍길순",

    },

    {

      id: uuid(),

      name: "홍길자",

    },

  ];

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

    res.render("start", { data });

  });

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

    res.render("intro");

  });

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

    res.render("new");

  });

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

    res.render("notice", { notices });

  });

  app.get("/notice/desc", (req, res) => {

    res.render("desc");

  });

  app.get("/notice/:id", (req, res) => {

    const { id } = req.params;

    const dataResult = notices.find((element) => {

      return element.id === id;

    });

    res.render("writing", { dataResult });

  });

  app.post("/", (req, res) => {

    const { language } = req.body;

    data.push({ language, id: uuid() });

    res.redirect("/");

  });

  app.get("/language/:id", (req, res) => {

    const { id } = req.params;

    const dataResult = data.find((element) => {

      return element.id === id;

    });

    res.render("language", { dataResult });

  });

  app.get("/language/:id/edit", (req, res) => {

    const { id } = req.params;

    const dataResult = data.find((element) => {

      return element.id === id;

    });

    res.render("edit", { dataResult });

  });

  app.patch("/language/:id", (req, res) => {

    const { id } = req.params;

    const languageChange = req.body.language;

    const dataResult = data.find((element) => {

      return element.id === id;

    });

    dataResult.language = languageChange;

    res.redirect("/");

  });

  app.delete("/language/:id", (req, res) => {

    const { id } = req.params;

    data = data.filter((element) => {

      return element.id !== id;

    });

    res.redirect("/");

  });

  app.listen(3000, () => {

    console.log("on post 3000");

    console.log("http://localhost:3000/");

  });

 

 

 

데이터베이스 몽고DB, 몽구스 DB

데이터를 받으면 저장하는 공간이 있어야 한다. 그것이 데이터베이스이었다. 지금껏 새로 고치면 데이터가 지워졌는데 데이터베이스에 저장하면 새로 고쳐도 없어지지 않았다. 몽고DB 관련하여 여러 문서를 보다가 영어라서 어려웠다. (평소에 영어 조금이라도 할 걸.. 후회ㅠㅠ) 추가로 영어를 배워야 할 것 같았다.

 

아래의 그림은 일부분

 

 

 

 

 

로그인, 댓글, 저장

이곳저곳 데이터를 통신하면서 로그인, 댓글 관련된 기능을 해보고 "데이터의 흐름이 이렇게 흘러가는구나" 알았고 로그인하면 비밀번호는 암호화하고 이것저것 제어하고 작업한다는 것도 알았다.

 

내가 웹 사이트에서 아이디랑 비밀번호를 입력하고 로그인이 되는 과정을 조금이나마 이해했다. (아직 더 알아야 할 것들이 많아서 조금이라고 표현했다.)

 

그리고 댓글 작성하고 삭제 그리고 수동적으로 URL로 접근 못 하게 제어하는 것도 접했다. 처음 접해서 잘 모르는 것들이 많았고 전체적으로 어려웠지만 백엔드의 흥미를 불러일으키는 프로젝트이었다.

 

 

 

보안과 취약점

백엔드에서 데이터를 받고 저장하는 것만 있는 줄 알았는데 아니었다. 해커들이 웹을 해킹하는 시도가 있을 수 있으니 보안과 취약점에 신경을 써줘야 한다.

 

 

 

문제가 발생할 수 있는 상황들 예외 처리

• 로그인 폼에서 사용자가 아이디를 입력하지 않았으면 유효성 검사하여 제어한다.
• 파일 업로드할 때 파일 개수, 용량 제한 ... 서버 비용 관련하여 제어한다.
• 문제가 발생할 수 있는 상황을 예외 처리한다.
• AWS, 클라우드 유료 서비스도 있어서 서버 비용이 높아져서 제한한다.
• 백엔드뿐만 아니라 프론트에서도 신경을 써서 작업해야 한다는 것을 알았다.

 

 

 

HTTP 통신 경험 그리고 CRUD, Restful API

• GET : 요청할 때 사용
• POST : 생성을 요청할 때 사용
• PUT : 요청할 때 사용
• DELETE : 자료의 삭제를 요청할 때 사용

 

 

 

아키텍처 (서비스 구조)

구글링하고 아키텍처를 이해하면서 그려봤는데 잘못된 그림일 수 있습니다. ㅠㅠ (공부 중)

 

 

 

프로젝트 하면서 얻었던 경험

약 3주 정도 프론트(HTML)부터 백엔드(Node.js) 그리고 몽고DB, 클라우드(Cloudinary)까지 사이클 돌아보고 배포 환경 설정까지 해보고 느낀 점은 작성해 봤다.

백엔드 배우고 웹 사이트에서 파일 제출 용량이나 크기 제한이나 또는 내가 로그인하면 어떻게 흘러가는지 알았다. 프론트엔드, 백엔드의 개발하는 양이 많아서 서로 분업화하여 하나의 제품을 만들어서 배포한다는 것도 알고 협업이 중요하다는 것을 느꼈다.

내가 했던 프로젝트는 단순하지만 큰 규모의 프로젝트이면 이 보다 더욱 더 깊게 들어가고 복잡할 것이다. 난 실무에 들어가기 전에 알아서 다행이라고 생각했다. (알고 보는 거랑 모르고 보는 거랑 다르니까) 그리고 서로 프로세스가 어떻게 이루어지는지 알아가는 3주였다. (그리고 자바가 궁금해서 영화처럼 영상을 봤다.)