🌱 코딩과 디버깅 그리고 크리스마스

• 프로젝트가 7일 남았다. 하지만 25일 크리스마스로 인해 실질적인 미팅과 논의를 할 수 있는 시간은 2일에 불과했다. 또한 23일 임시 배포를 해야하기 때문에 바쁜 3주차였다.

💡 Meeting

• 팀원들과 각자 담당 분야의 진행 상황을 공유했다.
• Git의 충돌을 방지하는 것이 다시 한번 언급 되었다.
  • 반드시 자신의 branch를 설정한 뒤 작업을 진행 한다.
  • branch에서 충돌이 없음을 확인한 뒤 수정 사항을 커밋 메세지와 함께 업로드한다.

    ✨ 개인 작업

    💻 자유 게시판 기능

• 자유게시판은 사용자들이 게시글을 작성, 조회, 수정, 삭제할 수 있는 기능을 가지고 있다.
• 사용자들은 자유게시판을 통해 정보, 의견을 교류하여 우리 페이지를 오랫동안 사용 할 수 있게 유도한다.

  게시글 목록

• 기능: 모든 게시글을 테이블 형태로 조회.
• 구성 요소:
  • 제목, 작성일, 작성자, 분류 정보 표시.
  • 각 게시글의 제목을 클릭하면 상세 페이지로 이동.
• 조건:
  • 게시글이 없는 경우 "게시글이 없습니다." 메시지 표시.

게시글 작성

• 기능: 로그인한 사용자만 게시글 작성 가능.
• 구성 요소:
  • 게시글 제목, 내용, 분류, 이미지 업로드 가능.
  • 작성 버튼 클릭 시 서버로 데이터 전송.

게시글 조회

• 기능: 특정 게시글의 상세 내용을 조회.
• 구성 요소:
  • 제목, 작성일, 작성자, 내용, 분류 정보 표시.
  • 댓글 작성 및 조회 가능.

댓글 기능

• 기능: 게시글에 댓글 추가, 수정, 삭제.
• 구성 요소:
  • 로그인 상태에서 댓글 작성 가능.
  • 댓글 수정 및 삭제는 작성자만 가능.

게시글 관리

• 기능: 게시글 수정 및 삭제.
• 구성 요소:
  • 게시글 작성자는 자신의 게시글 수정 및 삭제 가능.

💻 자유 게시판 기술

5. 라우트 정의 (index.js)

• 라우팅

• 미들웨어
  • isAuthenticated: 로그인 여부 확인.
  • setUserId: 로그인 상태의 사용자 ID를 로컬 변수에 저장.

2. 데이터베이스 모델 (board.js)

• 구조: board 테이블
• 필드

• 설정:
  • freezeTableName: 테이블 이름 고정.
  • timestamps: 생성 및 업데이트 시간 자동 기록 비활성화.

3. HTML 구조 (board.ejs)

• 기능:
  • 게시글 목록을 표시하며, 조건부 렌더링으로 게시글 유무에 따라 동적 처리.
  • 로그인 여부에 따라 게시글 작성 버튼 또는 로그인 안내 표시.
• 구성:
  • <table>: 게시글 목록 테이블.
  • <div class="write-btn">: 작성 버튼 또는 로그인 안내.
• 템플릿 엔진: <% %>를 사용한 동적 렌더링.

4. CSS 스타일링 (board.css)

• 기능:
  • 레이아웃 및 디자인 제공.
  • 주요 스타일:
    • body: 기본 배경과 글꼴 설정.
    • .board-list: 게시판 레이아웃 정의.
    • .btn-red: 버튼 스타일 정의.
• 사용성:
  • 테이블, 버튼, 폼 등 모든 요소에 반응형 디자인 적용.

📘 Meeting

트러블 슈팅

🔥안건

• "상품 정보"가 없어서 현재 구현 정도의 한계점이 발생
• ERD기반 연결이 되지 앟아 페이지 오류
• SQL 테이블명 확인하면서 코딩

  🔎 해결방안

  1. ERD, SQL을 기준으로 코딩

  

  2. 상품 정보 크롤링이 오래 걸릴 경우 실시간 크롤링 방식을 이미지 가져오기 방식으로 변경하기로 결정했다.

⚙️ 기술적 보완점

1. 배포하기
   • AWS 배포 과정에서 원인 불명의 오류가 계속 발생.
   • Leader의 도움을 받아야함.
2. 게시글
   • 게시글 목록 페이징 처리.
3. DB 쿼리
   • DB 쿼리에 인덱스 추가.
4. UI/UX 개선
   • 모바일 사용자를 위한 반응형 디자인 추가.
   • 게시글 검색 및 필터링 기능.
5. 보안 강화
   • 현재 로그인을 하면 입력 값에 대한 보안사항 부재.
   • 입력 값에 대한 유효성 검사 추가해 "글 내용" 충실하게 개선

🌱 편의점 제품 리뷰 웹 페이지

• 프로젝트 GitHub 공용 폴더 연결
• 개인 PC에 git 폴더 연결, branch 설정
• 프로젝트 세부 일정 계획

  💡 Meeting

• 본격적인 코딩을 하기 전, 세부 규칙을 정해 팀 프로젝트를 진행한다.

  ✨ 코딩 규칙

1. 데이터 요청 방식 결정
   • 논의 내용: 프로젝트에서 axios와 fetch 중 어떤 라이브러리를 사용할지 결정.
   • axios 사용,
2. 인증 방식 결정
   • 논의 내용: 인증 및 세션 관리 방식을 세션과 JWT 중 선택.
   • 결론: 세션 사용.
3. 커밋 및 브랜치 컨벤션 설정
   • 논의 내용: 커밋 메시지 및 브랜치 네이밍 컨벤션.
   • 개인 브런치, 날짜, 내용
   • 결론: 커밋 메시지 예시: [backend]/FEAT: (241212) 로그인기능 추가
     • 커밋 메시지 예시: [backend]/FEAT: (241212) 로그인기능 추가
4. JSdocs 사용 여부
   • 논의 내용: 코드 문서화를 위해 JSdocs를 사용할지 여부.
   • 결론: 오류 발생 가능성으로 인해 사용하지 않기로 결정.
5. 식별자 및 CSS 클래스 네이밍 규칙
   • 논의 내용: 식별자와 CSS 클래스 이름 규칙.
   • 결론: 식별자: camelCase 사용. CSS 클래스 이름: 동일하게 camelCase 적용.
6. root.css 사용 여부
   • 논의 내용: root.css 파일을 활용한 기본 스타일 변수 설정.
   • 결론: 사용하기로 결정.
7. 서버 함수 관리 방식
   • 논의 내용: 서버에서 사용하는 함수들을 Utils 폴더로 관리할지, 또는 controller에 작성할지 여부.
   • 결론: Utils 폴더를 따로 관리하여 코드 수정에 대응 관리.
8. 비밀번호 암호화 방식
   • 논의 내용: 암호화 방식 선택 (예: salt 사용 여부에 따른 테이블 구조 변화).
   • 결론: 추후 결정.
9. 기획 및 일정 설정
   • 논의 내용: 발표일 전까지 주요 기능 및 일정 초안 마련.
   • 결론: 추후 공유 예정.
10. 반응형 디자인
    • 논의 내용: 반응형 웹의 지원 디바이스의 제작 범위
    • 결론:지원 디바이스: 모바일, 태블릿, 컴퓨터.

      💻 추후 과제

• 비밀번호 암호화 방식 최종 결정.
• 주요 기능 및 발표일까지의 세부 일정 공유.
• 반응형 디자인 적용 계획 검토 및 디테일 추가.

  📘 Meeting

  트러블 슈팅

  🔥 프로젝트 안건

  1. 아직 결정 되지 않은 문제에 대해서 논의를 해야하는데, 서로 가진 정보가 불투명해서 논의가 성립되지 않는다.
  2. 구현 아이디어는 좋으나 세부 일정이 정해지지 않았다.

     🔥 GitHub 안건

  3. GitHub에 각자 작업물 업로드 충돌 방지
  4. GitHub에 업로드 후 리뷰 요청 슬랙에 업로드

     🔎 해결방안

• 전체적인 구성원 간 소통 부족이 나타났다. 필수적으로 충돌 생기지 않게 공용 폴더는 건들지 않도록 한다.
• 업무 현황 [시작, 과정, 종료] 상호 연락 작업물 GIT 프로젝트 공유 후 승인 요청은 댓글로 작성
• 구현 아이디어의 실현 방법은 Leader에게 의견을 물어 본 뒤에 결정하자.

  ⚙️ 다음 회의 준비

  편의점의 상품을 보여주는 기능이 구현 되기 위해 먼저 자료가 있어야한다. 굳이 크롤링을 해야하는가 필요성이 문제시 되었지만, 크롤링 기능을 구현하는 것도 중요한 기획이라고 결론냈다.
• 자료수집 우선적으로 작업할 것
• 코딩 후 결과물 GitHub에 업로드

암호화 bcrypt

• bcrypt는 비밀번호 암호화에 자주 사용되는 라이브러리
• 해시 함수를 활용하여 강력한 보안을 제공한다.
• 중요한 요소
  • 단방향 암호화를 사용하여 저장된 비밀번호를 보호하고, 해시값 비교를 통해 비밀번호 검증을 수행한다.

bcrypt란?

• bcrypt는Blowfish암호화 알고리즘 기반의 단방향 암호화 라이브러리
• 특히 bcrypt는 실제 애플리케이션에서 쉽게 구현할 수 있으며, 보안 강화를 위한 필수적인 도구로 사용하고 있다.

과정

• 보안성이 높은 해시 함수로, 솔트(Salt)를 적용하여 무작위 해시값을 생성 -> 반복 연산을 통해 해시 생성 속도를 조절 = 결과적으로 해킹을 어렵게 만들어 준다.

bcrypt 구성

1. 비밀번호 해싱
   • hashSync: 비밀번호를 해시화
2. 비밀번호 검증
   • compareSync: 입력한 비밀번호와 저장된 해시값을 비교하여 일치 여부를 검증

사용한 코드

bcrypt 코드 예제

const bcrypt = require("bcrypt");

const saltRounds = 10; // 솔트 라운드 설정

// 비밀번호 해싱 함수
// 설명: 입력된 비밀번호를 솔트를 포함하여 해시화합니다.
function hashPw(pw) {
  return bcrypt.hashSync(pw, saltRounds);
}

// 비밀번호 검증 함수
// 설명: 입력된 비밀번호와 저장된 해시값을 비교합니다.
function comparePw(inputPw, hashedPw) {
  return bcrypt.compareSync(inputPw, hashedPw); // true 또는 false 반환
}

// 테스트용 코드
const originalPw = "1234"; // 원본 비밀번호
const hashedPw = hashPw(originalPw); // 해시화된 비밀번호
console.log("암호화된 비밀번호", hashedPw);

// 비밀번호 검증
const isMatch = comparePw("1234", hashedPw); // 올바른 비밀번호
const isMatch2 = comparePw("12345", hashedPw); // 틀린 비밀번호

console.log("비밀번호 일치? >>", isMatch); // true
console.log("비밀번호 일치? >>", isMatch2); // false

코드 설명

1. 비밀번호 해싱:
   • hashSync(pw, saltRounds): 비밀번호를 입력받아 솔트 라운드를 적용하여 해시값을 생성
   • 솔트 라운드가 높을수록 해시값 생성 시간이 증가 -> 보안 수준 강화
2. 비밀번호 검증:
   • compareSync(inputPw, hashedPw): 사용자가 입력한 비밀번호를 해시화한 후 저장된 해시값과 비교하여 일치 여부를 반환
   • 올바른 비밀번호는 true를 반환
   • 잘못된 비밀번호는 false를 반환

결론

• bcrypt 모듈을 활용한 암호화 학습

핵심 요약

1. 단방향 암호화를 통해 복호화가 불가능한 강력한 해시값을 생성
2. 솔트와 반복 연산을 사용하여 외부 공격을 어렵게 만든다.
3. 비밀번호 검증 기능을 제공하여 안전하게 로그인 프로세스를 구현할 수 있다.

암호화 crypto

• 암호화는 데이터를 보호하기 위해 특정 알고리즘을 사용하여 원본 정보를 변환하는 과정이다.
• 이를 통해 데이터는 외부 접근으로부터 안전하게 보호되며, 허가된 사용자 만이 정보를 복호화할 수 있다.

crypto란?

• crypto는 Node.js에서 제공하는 내장 모듈 : 암호화와 복호화 기능을 제공
• 주요 기능 : 해싱, 단방향 암호화, 양방향 암호화

crypto 구성

1. 단방향 암호화

   • createHash: 해시 함수를 사용하여 암호화 (복호화 불가)
   • pbkdf2Sync: 솔트와 반복을 통해 강력한 해시 암호화 구현

2. 양방향 암호화

   • createCipheriv: 암호화 기능 제공
   • createDecipheriv: 복호화 기능 제공

사용한 코드

단방향 암호화 코드 예제

const crypto = require("crypto");

// createHash 예제
const createHashPW = (pw) => {
  return crypto.createHash("sha512").update(pw).digest("base64");
};

console.log(createHashPW("1234"));

// pbkdf2Sync 예제
function saltAndHashPw(pw) {
  const salt = crypto.randomBytes(16).toString("base64");
  const iterations = 100;
  const keylen = 64;
  const algorithm = "sha512";

  const hash = crypto
    .pbkdf2Sync(pw, salt, iterations, keylen, algorithm)
    .toString("base64");
  return { salt, hash };
}

console.log(saltAndHashPw("1234"));

// 비밀번호 검증
function checkPw(inputPw, savedSalt, savedHash) {
  const iterations = 100;
  const keylen = 64;
  const algorithm = "sha512";

  const hash = crypto
    .pbkdf2Sync(inputPw, savedSalt, iterations, keylen, algorithm)
    .toString("base64");

  return hash === savedHash;
}

const data = saltAndHashPw("qwer1234");
console.log(checkPw("qwer1234", data.salt, data.hash));

양방향 암호화 코드 예제

const key = crypto.randomBytes(32);
const iv = crypto.randomBytes(16);
const algorithm = "aes-256-cbc";
const originalMessage = "hello, world!";

// 암호화
function encrypt(text) {
  const cipher = crypto.createCipheriv(algorithm, key, iv);
  let encrypted = cipher.update(text, "utf8", "base64");
  encrypted += cipher.final("base64");
  return encrypted;
}

// 복호화
function decrypt(encryptedText) {
  const decipher = crypto.createDecipheriv(algorithm, key, iv);
  let decrypted = decipher.update(encryptedText, "base64", "utf8");
  decrypted += decipher.final("utf8");
  return decrypted;
}

const encryptedMessage = encrypt(originalMessage);
console.log("암호화된 문장", encryptedMessage);
const decryptedMessage = decrypt(encryptedMessage);
console.log("복호화된 문장", decryptedMessage);

결론

• crypto 모듈을 활용한 단방향 및 양방향 암호화 학습

  핵심 요약

  • 단방향 암호화는 비밀번호 저장과 같은 데이터 검증에 유용하다. (해시 생성 및 검증)
  • 양방향 암호화는 데이터를 전송하거나 저장할 때 암호화 및 복호화가 필요할 때 유용하다.

• 암호화는 데이터를 보호하기 위해 원본 정보를 특정 알고리즘을 사용하여 변환하는 과정
• 데이터는 외부의 접근으로부터 안전하게 보호되며, 허가된 사용자만이 원본 정보와 접촉 가능

암호화 종류

암호화에는 다양한 방식이 존재하며, 대표적으로 crypto와 bcrypt가 사용됩니다.

• crypto:
  • 빠른 속도와 높은 보안성을 제공하는 암호화 모듈
  • 주로 양방향 암호화에 사용
• bcrypt:
  • 해시 기반의 단방향 암호화 모듈
  • 비밀번호 저장에 주로 사용
  • 높은 보안성

단방향 암호화

특징

• 한 번 암호화된 데이터는 복호화가 불가능
• 주로 비밀번호 저장에 사용

해시(Hash)

• 해시(Hash)란 해시 함수에 의해 얻어지는 고정된 크기의 데이터 값
  • 해시 함수 (Hash Function) : 임의의 크기의 데이터를 고정된 크기로 변환하는 알고리즘
  • 키(Key) : 매핑 전 원본 데이터 값
  • 해시 값(Hash Value) : 매핑 후 변환된 데이터 값
  • 해싱(Hashing) : 데이터를 변환하는 과정

양방향 암호화

특징

• 암호화된 데이터를 원본으로 복호화 가능
• 보안성과 성능의 균형을 고려한 암호화 방식

대칭키 암호화 알고리즘

• 암호화와 복호화에 동일한 키를 사용
• 키가 외부에 노출될 경우 보안이 한번에 위험해 질 수 있다.

1. JWT란?

• JWT(JSON Web Token)는 클라이언트와 서버 간의 안전한 정보 교환을 위한 토큰 기반 인증 메커니즘
• JWT는 사용자 인증 및 정보 전송 시 신뢰성을 보장해준다.

  JWT 작동방식

  

  2. JWT 구성

• Header: 토큰의 타입과 해시 알고리즘 정보가 포함
• Payload: 실제 정보 데이터가 포함되며, 클레임(claim)이라 불리는 키-값 쌍으로 이루어져 있음
• Signature: 토큰의 무결성을 검증하기 위한 서명 부분으로, Header와 Payload의 조합에 비밀 키를 사용해 생성

3. 코드 설명

3.1 서버 코드(app.js)

const express = require("express");
const jwt = require("jsonwebtoken");
const app = express();
const PORT = 8080;
const SECRET = "rMaRSWeDfz2NDB7H"; // 보안 강화를 위해 .env 파일에 저장 권장

app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

const userInfo = {
  id: "cocoa",
  pw: "1234",
  name: "코코아",
  age: 18,
};

app.get("/", (req, res) => res.render("index"));
app.get("/login", (req, res) => res.render("login"));

app.post("/login", (req, res) => {
  const { id, pw } = req.body;
  if (id === userInfo.id && pw === userInfo.pw) {
    const token = jwt.sign({ id }, SECRET);
    res.send({ result: true, token });
  } else {
    res.send({ result: false, message: "로그인 정보가 올바르지 않습니다." });
  }
});

app.post("/token", (req, res) => {
  const token = req.headers.authorization?.split(" ")[1];
  if (token) {
    try {
      const auth = jwt.verify(token, SECRET);
      if (auth.id === userInfo.id) {
        res.send({ result: true, name: userInfo.name });
      }
    } catch {
      res.status(401).send({ result: false, message: "인증된 회원이 아닙니다." });
    }
  } else {
    res.redirect("/login");
  }
});

app.listen(PORT, () => console.log(`http://localhost:${PORT}`));

3.2 로그인 페이지(login.ejs)

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>login</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <h1>로그인</h1>
  <form name="login-form">
    <input type="text" id="id" placeholder="ID를 입력하세요" />
    <input type="password" id="pw" placeholder="비밀번호를 입력하세요" />
    <button type="button" onclick="login()">로그인</button>
  </form>
  <script>
    async function login() {
      const form = document.forms["login-form"];
      const response = await axios.post("/login", {
        id: form.id.value,
        pw: form.pw.value,
      });
      const { result, token, message } = response.data;
      if (result) {
        localStorage.setItem("login", token);
        document.location.href = "/";
      } else {
        alert(message);
        form.reset();
      }
    }
  </script>
</body>
</html>

3.3 메인 페이지(index.ejs)

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>JWT</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <h1>JWT</h1>
  <div id="info"></div>
  <script>
    (async function () {
      const token = localStorage.getItem("login");
      const info = document.getElementById("info");
      let data;
      if (!token) {
        data = '<a href="/login">로그인</a>';
      } else {
        const response = await axios.post("/token", {}, {
          headers: { Authorization: `Bearer ${token}` },
        });
        if (response.data.result) {
          data = `<p>${response.data.name}님 환영합니다!</p>
                  <button onclick="logout();">로그아웃</button>`;
        }
      }
      info.innerHTML = data;
    })();

    function logout() {
      localStorage.clear();
      document.location.reload();
    }
  </script>
</body>
</html>

4. 실행 및 동작 원리

1. 사용자는 로그인 페이지에서 ID와 비밀번호를 입력
2. 서버는 사용자 정보를 검증한 후, JWT를 생성하여 클라이언트에 전달
3. 클라이언트는 JWT를 로컬 스토리지에 저장
4. 이후 요청 시, JWT를 헤더에 추가하여 서버로 전송
5. 서버는 JWT의 유효성을 검증하고 사용자 정보를 반환
6. 클라이언트는 인증 성공 여부에 따라 페이지를 렌더링하거나 로그아웃을 처리

5. 결론

• JWT는 보안성과 효율성 면에서 강력한 인증 방식
• 다양한 웹 애플리케이션에서 사용한다.

1. 실습 내용

• 이번 실습에서는 Node.js의 Express 프레임워크를 이용하여 세션(session)을 활용한 로그인 및 로그아웃 기능을 구현
• 세션을 통해 사용자의 로그인 상태를 관리하며, 일정 시간이 지나면 자동으로 세션이 만료되도록 설정하는 기능을 학습

2. 실습 결과

1. 사용자 로그인 여부에 따라 페이지에 다른 메시지를 출력.
2. 로그인 시 세션을 생성하여 상태를 유지.
3. 로그아웃 시 세션을 삭제하여 상태 해제.
4. UI는 EJS 템플릿 엔진을 활용하여 구현.
5. Bootstrap을 이용한 간단한 네비게이션 바 추가.

3. 사용한 코드 및 기능 설명

3.1 app.js

• 기능: 서버 초기화, EJS 설정, 정적 파일 제공, 페이지 렌더링, 로그인/로그아웃 처리 준비.

  const express = require("express");
  const app = express();
  const PORT = 8080;
  

app.set("view engine", "ejs"); app.use("/static", express.static(__dirname + "/static"));

// 세션 설정, 10분 뒤 세션 종료하도록

// 홈 페이지 렌더링 app.get("/", (req, res) => { res.render("index"); // 홈 화면 렌더링 });

// 로그인 페이지 렌더링 app.get("/login", (req, res) => { res.render("login"); // 로그인 화면 렌더링 });

const userInfo = { userId: "cocoa", userPw: "1234", };

// 로그인 요청 처리 app.post("/login", (req, res) => { // 로그인 로직 (세션 추가 예정) });

// 로그아웃 요청 처리 app.get("/logout", (req, res) => { // 로그아웃 로직 (세션 삭제 예정) });

// 서버 실행 app.listen(PORT, () => { console.log(http://localhost:${PORT}); });

### 3.2 index.ejs
- **기능:** 홈 화면 구성 및 로그인 여부에 따른 메시지 표시.
```html
<!DOCTYPE html>
<html lang="ko">
<head>
  <%- include('include', {title: 'Home'}) %>
</head>
<body>
  <%- include('header') %>
  <h1>실습. Session 연습</h1>
  <p>여기는 Home 입니다! 🏡</p>

  <%# if (로그인 되었다면) { %>
  <p>~~~ 님 환영합니다 🙌🏻</p>
  <%# } else { %>
  <p>로그인을 아직 하지 않으셨군요! 로그인을 진행해보세요!</p>
  <%# } %>
</body>
</html>

3.3 login.ejs

• 기능: 로그인 폼 제공 및 로그인 요청 전송.

  <!DOCTYPE html>
  <html lang="ko">
  <head>
  <%- include('include', {title: 'Login'}) %>
  <link rel="stylesheet" href="/static/login.css" />
  </head>
  <body>
  <div class="login-box">
    <h1>로그인</h1>
    <p>
      참고! 정답 아이디는 <b>cocoa</b> 이고<br />
      비밀번호는 <b>1234</b> 입니다.
    </p>
  
    <!-- 로그인 폼 -->
    <form action="/login" method="POST">
      <div class="input-group mb-3">
        <span class="input-group-text" id="id">ID</span>
        <input type="text" class="form-control" name="id" />
      </div>
      <div class="input-group mb-3">
        <span class="input-group-text" id="pw">PW</span>
        <input type="password" class="form-control" name="pw" />
      </div>
  
      <button type="submit" class="btn btn-dark">Login</button>
      <br />
      <a href="/">Home 이동하기</a>
    </form>
  </div>
  </body>
  </html>

3.4 header.ejs

• 기능: 네비게이션 바 생성 및 로그인 상태에 따라 메뉴 항목 변경.

  <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Codingon</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myHeader">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="myHeader">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="#">Menu1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Menu2</a>
        </li>
        <%#if (로그인 되었다면) { %>
        <li class="nav-item">
          <a class="nav-link active" href="/logout">Logout</a>
        </li>
        <%# } else { %>
        <li class="nav-item">
          <a class="nav-link active" href="/login">Login</a>
        </li>
        <%# } %>
      </ul>
    </div>
  </div>
  </nav>

4. 결론

• 기본적인 세션 관리 개념과 사용법 중점으로 실습
• Express 프레임워크를 사용하여 세션 기반 로그인 상태를 유지하거나 종료하는 기능을 구현

실습 - Cookie

실습 내용

• 쿠키를 이용하여 특정 조건을 만족할 경우 팝업창을 숨기는 기능을 구현
• 사용자가 '오늘 그만 보기'를 체크한 후 닫기 버튼을 클릭하면, 해당 정보가 쿠키에 저장 -> 브라우저를 새로고침하거나 다시 실행해도 팝업창이 나타나지 않도록 설정

실습 결과

1. 페이지에 접속하면 광고 팝업 창이 뜬다.
2. '오늘 하루 보지 않음'을 체크하고 닫기 버튼을 클릭하면 쿠키가 생성
3. 브라우저를 재시작하거나 새로고침해도 쿠키가 유지되면 팝업이 나타나지 않음
4. 쿠키를 삭제한 경우에는 페이지를 새로고침하면 팝업창이 다시 나타난다.

사용한 코드

app.js

const express = require("express");
const app = express();

const PORT = 8080;

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

// 쿠키 미들웨어 설정 예정
app.get("/", (req, res) => {
  res.render("index");
  // 쿠키값 가져오기 및 index.ejs에 보내기
  // res.render("index", {popup:쿠키값});
});

app.post("/set-cookie", (req, res) => {
  // 쿠키 생성 구현 예정
  res.send("쿠키 생성 성공!!!");
});

app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

index.ejs

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>실습</title>

    <!-- Bootstrap 및 Axios 라이브러리 포함 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <h1>실습. Cookie 연습</h1>
    <p>
      페이지 접속했을 때 팝업 창이 보이며, '오늘 그만 보기'를 체크 후 닫기를 하면 창이 다시 나타나지 않도록 구현합니다.
    </p>

    <!-- Modal: 팝업창 -->
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">cookie 실습</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            광고! 쿠키 실습입니다.
            <div class="text-end mt-3">
              <input type="checkbox" id="cookie" />
              <label for="cookie">오늘 하루 보지 않음.</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeModal();">닫기</button>
          </div>
        </div>
      </div>
    </div>

    <script>
      const myModal = new bootstrap.Modal("#exampleModal");
      myModal.show(); // 팝업창 보임

      async function closeModal() {
        const isChecked = document.getElementById("cookie").checked;
        if (isChecked) {
          await axios.post("/set-cookie");
        }
        myModal.hide(); // 팝업창 닫기
      }
    </script>
  </body>
</html>

코드 설명

1. app.js에서는 Express를 사용하여 서버를 설정하고, 쿠키를 관리하는 기능을 추가할 예정
2. index.ejs에서는 Bootstrap을 사용하여 팝업 모달 창을 생성하고, JavaScript 코드로 쿠키 설정 및 팝업 동작을 관리

결론

쿠키를 활용하여 브라우저에서 상태를 유지하는 방법 실습.

1. Session이란?

• Session(세션)은 클라이언트와 서버 간의 상태를 유지하기 위해 사용

2. Session의 동작 방식

• 세션 생성: 클라이언트가 서버에 처음 접속할 때 세션 ID가 생성되며, 이 ID는 클라이언트의 쿠키에 저장
• 세션 확인: 클라이언트가 서버에 요청을 보낼 때, 저장된 세션 ID를 사용하여 서버는 클라이언트의 상태 정보를 확인
• 세션 삭제: 일정 시간 동안 활동이 없거나 로그아웃 시 세션은 삭제

3. 코드 설명

사용한 코드: session.js

const express = require("express");
const session = require("express-session");
const app = express();
const PORT = 8080;

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

// session 미들웨어 등록
app.use(
  session({
    secret: "secret Key",
    resave: false,
    saveUninitialized: false,
    cookie: {
      httpOnly: true,
      maxAge: 10 * 60 * 1000, // 10분짜리 세션 쿠키
    },
  }),
);

app.get("/", (req, res) => {
  res.render("session");
});

// 세션 설정
app.get("/set", (req, res) => {
  req.session.name = "allie";
  res.send("session 설정 완료");
});

// 세션 확인(가져오기)
app.get("/get", (req, res) => {
  console.log(req.session);
  res.send({ id: req.sessionID, name: req.session.name });
});

// 세션 삭제
app.get("/destroy", (req, res) => {
  req.session.destroy((err) => {
    if (err) throw err;
    res.send("세션 삭제 완료");
  });
});

app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

코드 설명

1. 세션 미들웨어 등록:

   • secret: 세션 데이터를 암호화할 때 사용되는 키값.
   • resave: 세션이 수정되지 않으면 저장하지 않음.
   • saveUninitialized: 저장할 데이터가 없어도 세션을 초기화.
   • cookie: 세션 쿠키의 옵션 설정 (HTTPOnly, 만료 시간 등).

2. 세션 설정:

   • /set: 클라이언트의 세션에 name: allie 값을 저장.

3. 세션 확인:

   • /get: 세션 ID와 저장된 데이터를 조회.

4. 세션 삭제:

   • /destroy: 세션 데이터를 삭제.

4. 실습 결과

사용한 코드: session.ejs

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>session</title>
  </head>
  <body>
    <h1>session 확인하기</h1>
    <a href="/set">세션 설정</a>
    <a href="/get">세션 확인</a>
    <a href="/destroy">세션 삭제</a>
  </body>
</html>

설명

• 세션 설정 버튼: /set 경로로 이동하여 세션 설정.
• 세션 확인 버튼: /get 경로로 이동하여 현재 세션 확인.
• 세션 삭제 버튼: /destroy 경로로 이동하여 세션 삭제.

5. 결론 및 학습 포인트

학습 포인트

1. 세션을 활용하여 클라이언트의 상태 정보를 유지하고 관리할 수 있음.
2. 세션 미들웨어 설정을 통해 보안 및 성능을 최적화할 수 있음.
3. 세션의 설정, 조회, 삭제를 코드로 구현하고 테스트함.

결론

세션 관리 시스템을 활용하면 사용자 로그인 상태나 일시적인 데이터 저장 등을 쉽게 구현할 수 있다.

Cookie란?

• 쿠키(Cookie)는 웹 서버가 사용자의 웹 브라우저에 저장하는 작은 데이터 조각
• 쿠키는 사용자 인증, 세션 관리, 사용자 맞춤 설정 등을 위해 사용
• 브라우저가 서버에 HTTP 요청을 보낼 때 쿠키 데이터를 함께 전송

Cookie의 동작 방식

1. 사용자가 웹사이트에 방문하면 서버가 쿠키를 생성
2. 서버는 HTTP 응답을 통해 쿠키를 클라이언트(브라우저)에 전송
3. 브라우저는 쿠키를 저장하고 이후 해당 웹사이트에 재접속할 때 요청에 쿠키를 포함
4. 서버는 전송된 쿠키를 읽어 사용자를 식별하거나 이전 설정을 복원

pip 설치 명령어

npm install express cookie-parser

실습결과

• Node.js와 Express를 사용하여 쿠키 생성, 조회, 삭제의 기능을 구현
• 암호화되지 않은 쿠키와 암호화된 쿠키의 설정과 관리 방법을 비교하며 학습

사용한 코드

cookie.js

const express = require("express");
const cookieParser = require("cookie-parser");
const app = express();
const PORT = 8080;

// 암호화된 쿠키 사용
app.use(cookieParser("secret Key"));

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

const cookieConfig = {
  maxAge: 10 * 60 * 1000, // 10분
  httpOnly: true, // 브라우저에서 접근 불가
  signed: true, // 암호화 적용
};

const cookieConfig2 = {
  maxAge: 10 * 60 * 1000,
  httpOnly: true,
  path: "/abc",
};

app.get("/abc", (req, res) => {
  res.cookie("abc-page", "abc page cookie", cookieConfig2);
  res.render("cookie-another");
});

app.get("/", (req, res) => {
  res.render("cookie");
});

app.get("/getCookie", (req, res) => {
  console.log("암호화된 쿠키", req.signedCookies);
  res.send(req.signedCookies);
});

app.get("/setCookie", (req, res) => {
  res.cookie("myCookie", "cookie~~~", cookieConfig);
  res.send("set cookie 완료, 응답 종료!");
});

app.get("/clearCookie", (req, res) => {
  res.clearCookie("myCookie", "cookie~~~", cookieConfig);
  res.send("clear cookie, 응답 종료!");
});

app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

cookie.ejs

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>cookie</title>
  </head>
  <body>
    <h1>쿠키 확인하기</h1>
    <a href="/setCookie">쿠키 설정</a>
    <a href="/getCookie">쿠키값 가져오기</a>
    <a href="/clearCookie">쿠키 삭제</a>
    <script>
      console.log("document.cookie", document.cookie);
    </script>
  </body>
</html>

cookie-another.ejs

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>다른 페이지에서 쿠키 확인할 수 있는지 보기</h1>
  </body>
</html>

주요 기능 정리

1. 쿠키 설정
   • 암호화되지 않은 쿠키 및 암호화된 쿠키 설정 가능.
   • 쿠키 수명, 접근 제한, 경로 제한 등 다양한 옵션 제공.
2. 쿠키 조회
   • 저장된 쿠키 정보를 콘솔에 출력.
   • 암호화된 쿠키는 req.signedCookies를 통해 확인.
3. 쿠키 삭제
   • 특정 조건에 맞는 쿠키 삭제 기능 구현.

학습 요약

• 쿠키의 기본 개념과 동작 원리를 이해함.
• Node.js의 cookie-parser 미들웨어를 활용하여 쿠키 관리 기능을 구현함.
• 암호화된 쿠키를 통해 보안성을 강화함.

1. Cookie와 Session의 개요

Cookie

• 정의: 클라이언트(브라우저)에 저장되는 데이터.
• 특징:
  • 키-값 구조.
  • 브라우저 종료 후에도 설정된 유효기간 내에 유지.
  • 클라이언트 측에서 관리되므로 서버 자원을 소모하지 않음.
• 사용 예시:
  • 사용자 로그인 정보 저장.
  • 최근 본 상품 기록.
  • 사용자 설정 유지(테마, 언어 등).

Session

• 정의: 서버에 저장되는 사용자 정보.
• 특징:
  • 각 사용자에 대해 고유 세션 ID 발급.
  • 서버 측에서 관리되므로 클라이언트가 직접 접근할 수 없음.
  • 브라우저 종료 시 기본적으로 삭제.
• 사용 예시:
  • 로그인 상태 유지.
  • 쇼핑몰 장바구니 정보 저장.
  • 보안이 필요한 데이터 처리.

2. 속도와 보안 비교

속도

• Cookie:
  • 클라이언트 측 저장으로 서버 부하가 적음.
  • 처리 속도가 빠름.
  • HTTP 요청 시 자동으로 쿠키 데이터가 전송되므로 네트워크 트래픽 발생 가능.
• Session:
  • 서버 측 관리로 데이터 처리에 시간이 더 소요될 수 있음.
  • 보안 처리가 강화되어 있음.

보안

• Cookie:
  • 보안에 취약(클라이언트에서 접근 가능).
  • 암호화 및 보안 설정(HTTPOnly, Secure) 필요.
• Session:
  • 서버 측 저장으로 보안이 강화됨.
  • 세션 ID 도난 방지를 위한 관리 필요.

3. Cookie와 Session의 활용 분야

• Cookie:
  • 가벼운 데이터 저장.
  • 장기적인 사용자 설정 유지.
• Session:
  • 민감한 데이터 관리.
  • 보안이 중요한 작업(로그인, 결제 등).

4. 요약

결론

• Cookie는 빠른 데이터 접근과 간단한 정보 저장에 적합.
• Session은 보안이 중요한 정보 관리에 적합.
• 상황에 따라 두 가지를 혼합하여 사용할 수 있음.

🌱 project1의 시작

기간

• 2024.12.11~ 2024.12.30
• 총 20일

  구성원

• 김연준, 얀진람, 임진우, 최윤석, 한예나

💡 Meeting

팀 이름 정하기

• 푸룬(Puleus) : 우리의 프로젝트 새싹처럼 푸릇푸릇 자라나자는 의미

  임무 분담

  이름	분야	페이지	세부	GitHub
  김연준	FE&BE	상품 목록 및 리뷰	제품 DB 수집, 제품 상세	GitHub
  얀진람	FE&BE	회원가입 및 로그인	ERD구성, 회원가입, 탈퇴, 로그인	GitHub
  임진우	FE&BE	메인 및 검색	광고, 이메일 이벤트, 검색	GitHub
  최윤석	FE&BE	자유게시판	노션 관리(회의록, API 명세서), 호스팅 배포(AWS)	GitHub
  한예나	FE&BE	마이페이지	자기가 쓴 리뷰, 글/댓글, 좋아요	GitHub

웹 구성 개발환경

IDE : Visual Studio Framework : Express.js ORM = Sequelize

기술

Server : AWS EC2 DataBase : Mysql

✨ 기능 회의 내용

• 핵심 내용 : 사용자에게 시각적인 효과와 다양한 정보를 제공할 수 있는 웹페이지를 구상 하는 것이 목표

  서비스 페이지 기능

• 주요 기능 : 사용자 정보 제공과 사용자간 상호작용 목적

💻 1차 아이디어

1. 김연준 : API 생성 웹 페이지 내용 : ChatGPT를 사용해 챗봇 UI를 제작하여 사용자 맞춤 API를 생성하는 웹 페이지 구현
2. 임진우 : 부동산 정보 제공 웹 페이지 내용 : LH, SH 등의 부동산 정보를 사용자에게 제공하는 웹 페이지 구현
3. 얀진람 : 화장품 추천 웹 페이지 내용 : 사용자의 피부 상태를 입력하면 최적의 제품을 제공하는 웹 페이지 구현
4. 최윤석 : 비플페이(제로페이) 가맹점 모음 웹 페이지 내용 : 창동역 인근 식당 중 비플페이(제로페이)가 사용 가능한 식당을 나타내는 웹 페이지 구현
5. 한예나 : 컨셉 커뮤니티 웹 페이지 내용 : 특정 컨셉을 주제로 모인 사람들이 의견을 공유 할 수 있는 웹 페이지 구현

   1차 주제 회의 결과

   기업가치 리뷰 웹 페이지 구현

   사용자가 코스피 100의 기업을 대상으로 특정 기업을 선택 시 기업 가치 리뷰 웹 페이지 구현해보자.

   서비스 페이지 기능

• 100의 기업을 "조회"
• 기업의 간략한 소개
• 과거 주가, 거래량 그래프 시각화
• 현재 가격, 최고가, 최저가 최신 정보 업데이트
• 기업가치에 대한 의견을 나눌 수 있는 방명록(댓글 or 사진)

  데이터

• 코스피 100의 주식 데이터

📘 Meeting

트러블 슈팅

🔥안건

• 주제 회의 결과 학습한 내용을 100% 활용하지 못하는 한계점 지적 받았다.

1. 배운 것의 일부분만 사용하는건 project 의의에 맞지 않다.
2. 평가자(동료,리더)의 공감을 얻기에 주제가 부적합하다.

   🔎 해결방안

   주제 회의 결과 학습한 내용을 100% 활용하지 못하는 한계점 지적 받았다. 결과적으로 사용 경험이 많은 편의점의 제품을 비교 정보제공, 사용자간의 의견을 교류하는 웹 페이지를 제작하는 것으로 결정

💻 2차 주제 회의 결과

편의점 제품 리뷰 웹 페이지 구현

편의점 업체 소수를 지정해 [도시락, 샐러드, 샌드위치, 김밥] 4개 품목에 대한 가격 비교와 할인 정보 제공 웹 페이지 구현

서비스 페이지 기능

• 편의점의 대상 품목 "조회"
• 대상 품목의 세부 정보(가격, 사진, 이름) 제공
• 12월 할인 품목 한 눈에 시각화
• 공통 제품 간 가격 비교
• 로그인 기능(게시글 업로드 허가)
• 제품에 대한 의견을 나눌 수 있는 방명록(댓글 or 사진) 업로드 기능(로그인)

  데이터

• 편의점 대상 품목 수집

⚙️다음 회의 준비

• 코딩을 위한 협업 규칙
• 웹 페이지 디자인 회의
• 사용자의 상호작용(클릭, 호버, 입력) 위치와
• 각자 웹 페이지 그림 그려 올 것!

Relationship의 내용

관계 정의

1. Player - Profile 관계: 1:1 관계를 통해 선수와 그의 세부 정보를 연결. 선수 삭제 시 프로필도 함께 삭제됨.
2. Team - Player 관계: 1:N 관계를 통해 팀과 소속 선수들을 연결.
3. Team - Game 관계: M:N 관계를 통해 중개 테이블인 TeamGame을 사용해 팀과 경기의 관계를 정의.

Sequelize를 활용한 모델 관계 설정

• Player 모델과 Profile 모델 간 관계 정의:

  PlayerModel.hasOne(ProfileModel, {
    onDelete: "CASCADE",
    onUpdate: "CASCADE",
    foreignKey: "player_id",
  });
  ProfileModel.belongsTo(PlayerModel, {
    foreignKey: "player_id",
  });

• Team 모델과 Player 모델 간 관계 정의:

  TeamModel.hasMany(PlayerModel, {
    foreignKey: "teamid",
    sourceKey: "team_id",
  });
  PlayerModel.belongsTo(TeamModel, {
    foreignKey: "teamid",
    targetKey: "team_id",
  });

• Team 모델과 Game 모델 간 M:N 관계 정의:

  TeamModel.belongsToMany(GameModel, {
    through: TeamGameModel,
    foreignKey: "team_id",
  });
  GameModel.belongsToMany(TeamModel, {
    through: TeamGameModel,
    foreignKey: "game_id",
  });

실습결과

성공적으로 구현된 기능

1. Player CRUD:

   • 전체 선수 조회
   • 특정 선수와 프로필 정보 조회 (JOIN 활용)
   • 새로운 선수 추가
   • 특정 선수의 팀 변경
   • 특정 선수 삭제

2. Team 검색 및 정렬:

   • 이름순 정렬
   • 키워드 검색

3. Team - Player JOIN:

   • 특정 팀의 선수 정보 조회

4. Database 연결 성공:

   • Sequelize ORM을 통해 MySQL 데이터베이스와 성공적으로 통신.

폴더 구조와 코드의 역할

폴더 구조

15_MCV-sequelize
├── config/
│   ├── config.js
├── controller/
│   ├── Cmain.js
├── models
│   ├── Game.js
│   ├── Player.js
│   ├── Team.js
│   ├── TeamGame.js
│   ├── index.js
│   ├── profile.js
├── routes
│    ── index.js
├── node_modules/
│   ├── 다양한 파일
├── views/
│   ├── index.ejs
├── app.js
├── init.sql
├── package-lock.json
└── package.json

코드별 역할

config/config.js

• 환경변수에서 데이터베이스 설정을 가져와 Sequelize에 전달.

controller/Cmain.js

• 주요 역할: 요청 처리 및 데이터베이스와 상호작용.
  • 선수 CRUD.
  • 팀 검색, 정렬 및 선수 조회.
  • 복잡한 조건 검색 및 정렬 처리.

models/index.js

• 주요 역할: Sequelize 초기화 및 모델 관계 설정.

models/*.js

• 각 데이터베이스 테이블을 나타내는 모델 정의.
• Game.js, Player.js, Team.js, TeamGame.js, profile.js 모델은 테이블 구조 및 데이터 타입을 명시.

routes/index.js

• 요청 URL에 따라 컨트롤러와 라우트 매핑.

views/index.ejs

• HTML 템플릿으로 사용자 인터페이스 제공.

app.js

• Express 서버 설정 및 Sequelize와 연결.
• 전체 애플리케이션의 진입점.

코드 내용

GitHub 링크 바로가기

app.js

const express = require("express");
const app = express();
const PORT = 8080;
const { sequelize } = require("./models");
// db={sequelize:~~~~, Sequelize: ~~~~}
// const {sequelize} =db;

// set middleware
app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

// router 설정
const indexRouter = require("./routes");
app.use("/", indexRouter);

sequelize
  .sync({ force: false })
  .then(() => {
    console.log("db connection success!");
    app.listen(PORT, () => {
      console.log(`http://localhost:${PORT}`);
    });
  })
  .catch((err) => {
    console.log("db connection Err!");
    console.log(err);
  });

• Relationship은 데이터베이스에서 테이블 간의 연관성을 정의한 개념
• 테이블 간의 관계를 설정하여 데이터의 일관성을 유지하고 효율적으로 데이터를 처리할 수 있게 한다.
• 관계형 데이터베이스에서는 주로 외래 키(Foreign Key)를 사용하여 관계를 설정한다.

JOIN 종류와 생성방법

1대 1 관계 (One-to-One)

• 각 행이 서로 다른 테이블의 행 하나와만 연결되는 관계.
• 예시: 사용자 테이블(User)과 사용자 프로필 테이블(Profile)

설정 방법:

1. 한 테이블의 기본 키(Primary Key)를 다른 테이블의 외래 키(Foreign Key)로 설정.

1대 다수 관계 (One-to-Many)

• 한 테이블의 한 행이 다른 테이블의 여러 행과 연결되는 관계.
• 예시: 카테고리 테이블(Category)와 제품 테이블(Product)

설정 방법:

1. 한 테이블의 기본 키를 다른 테이블의 외래 키로 설정.

다수 대 다수 관계 (Many-to-Many)

• 여러 행이 다른 테이블의 여러 행과 연결되는 관계.
• 예시: 학생 테이블(Student)과 수업 테이블(Class)

설정 방법:

1. 중간 테이블(Bridge Table)을 생성하여 두 테이블 간의 관계를 설정.

JOIN은 두 개 이상의 테이블을 연결하여 데이터를 검색하는 SQL의 기능입니다. 이를 통해 관계형 데이터베이스의 여러 테이블에 분산된 데이터를 통합적으로 조회할 수 있습니다.

JOIN 종류

1. INNER JOIN

   • 공통된 값을 가진 행만 반환

2. LEFT JOIN (또는 LEFT OUTER JOIN)

   • 왼쪽 테이블의 모든 데이터를 반환하며, 오른쪽 테이블에 일치하는 데이터가 없으면 NULL로 표시

3. RIGHT JOIN (또는 RIGHT OUTER JOIN)

   • 오른쪽 테이블의 모든 데이터를 반환하며, 왼쪽 테이블에 일치하는 데이터가 없으면 NULL로 표시

4. FULL JOIN (또는 FULL OUTER JOIN)

   • 양쪽 테이블의 모든 데이터를 반환하며, 일치하지 않는 데이터는 NULL로 표시

JOIN 예시

1. INNER JOIN

   SELECT employees.name, departments.department_name
   FROM employees
   INNER JOIN departments ON employees.department_id = departments.id;

2. LEFT JOIN

   SELECT employees.name, departments.department_name
   FROM employees
   LEFT JOIN departments ON employees.department_id = departments.id;

3. RIGHT JOIN

   SELECT employees.name, departments.department_name
   FROM employees
   RIGHT JOIN departments ON employees.department_id = departments.id;

4. FULL JOIN

   SELECT employees.name, departments.department_name
   FROM employees
   FULL JOIN departments ON employees.department_id = departments.id;

• MVC 패턴을 활용하여 Sequelize ORM과 MySQL 데이터베이스를 연결한 프로젝트

  실습 결과

• 회원가입, 로그인, 회원정보 수정 및 삭제 기능을 정상적으로 구현.
• 데이터베이스와의 연결을 통해 데이터를 안전하게 CRUD(Create, Read, Update, Delete) 처리.
• View 단에서 EJS 템플릿을 활용하여 동적 웹 페이지 생성.

  MVC와 MySQL의 연결 내용

• MySQL 데이터베이스와의 연동
  • Sequelize의 sync 메소드를 통해 데이터베이스 테이블을 자동으로 생성하거나 업데이트.

폴더 구조와 코드의 역할

15_MCV-sequelize
├── config/
│   ├── config.js   // 환경 변수로부터 DB 연결 정보를 가져오는 설정 파일.
│   ├── config.json // 기본 DB 설정 정보 (dotenv를 통해 대체).
├── controller/
│   ├── Cuser.js    // 사용자 관련 로직 처리 컨트롤러.
├── models
│   ├── User.js     // 사용자 모델 정의.
│   ├── index.js    // Sequelize 초기화 및 모델 등록.
│   ├── 기존 User.js // MySQL 직접 쿼리 작성했던 코드.
├── routes
│    ── user.js      // 사용자 관련 라우트 정의.
├── node_modules/   // 프로젝트 의존성 파일.
├── views/
│   │   ├── include/
│   │   │   ├── include.ejs // 공통 헤더 파일.
│   ├── 404.ejs     // 404 에러 페이지.
│   ├── index.ejs   // 메인 페이지.
│   ├── profile.ejs // 회원 정보 페이지.
│   ├── signin.ejs  // 로그인 페이지.
│   ├── signup.ejs  // 회원가입 페이지.
├── .env            // 환경 변수 파일.
├── app.js          // Express 애플리케이션 초기화 및 설정.
├── package-lock.json
└── package.json    // 프로젝트 메타 정보.

코드별 내용

GitHub 링크 바로가기

1. config.js

• 환경 변수에서 데이터베이스 설정 정보를 가져와 Sequelize의 설정을 제공

  2. Cuser.js (Controller)

• 사용자 관련 요청을 처리하는 컨트롤러로, View와 Model 사이의 비즈니스 로직을 수
• 주요 기능:

1.회원가입: User.create() 2.로그인: User.findOne() 3.회원정보 수정: User.update() 4.회원 탈퇴: User.destroy()

3. User.js (Model)

• Sequelize를 통해 정의된 사용자 모델로, 테이블 컬럼과 속성 정의

  4. User.js (기존)

• 직접 SQL 쿼리를 작성했던 코드를 포함합니다. Sequelize로 대체

  5. Routes

• 라우트 설정 파일로, 요청 URL과 컨트롤러를 연결

  6. EJS Views

  각 페이지의 템플릿을 정의하며, 동적 데이터 렌더링을 지원합니다.
• index.ejs: 메인 페이지.
• signup.ejs: 회원가입 폼.
• signin.ejs: 로그인 폼.
• profile.ejs: 회원정보 수정/삭제.
• 404.ejs: 에러 페이지.

  7. app.js

  Express 애플리케이션의 초기 설정 및 실행 파일.
• 미들웨어 구성 (body-parser, 라우트 등).
• Sequelize sync를 통해 DB 연결 확인.

• Sequelize는 Node.js에서 사용하는 ORM(Object-Relational Mapping) 라이브러리
• ORM은 관계형 데이터베이스를 객체지향적으로 다룰 수 있게 해주는 기술이다. SQL 쿼리를 직접 작성하지 않고도 JavaScript 객체를 이용하여 데이터베이스와 상호작용할 수 있게 해준다.

  sequelize 학습

  

Model

• Model은 Sequelize ORM을 사용하여 데이터베이스와의 연결을 설정하고, 데이터베이스의 테이블을 정의

  View

• 프론트엔드와 관련이 있으며, 사용자에게 데이터를 어떻게 표시할지를 결정

  Controller

• 클라이언트의 요청을 처리하고, 적절한 모델을 호출하여 데이터를 가져오거나 수정

  전체적인 흐름

1. 사용자가 웹 애플리케이션에 요청을 전달
2. Controller가 요청을 받아 처리
3. Controller는 Model을 호출하여 데이터베이스에서 필요한 데이터를 가져온다.
4. 가져온 데이터를 View로 전달하여 사용자에게 표시

   결론

-MCV-Sequelize는 모델-뷰-컨트롤러 패턴과 Sequelize ORM을 결합한 구조로, 데이터베이스와의 상호작용을 효율적으로 처리하면서 깔끔한 아키텍처를 유지, 관리 할 수 있게 해준다.

MVC와 MySQL의 연결 내용

• MVC(Model-View-Controller) 패턴을 기반으로 Express.js와 MySQL을 연결하여 회원가입, 로그인, 프로필 수정 및 삭제 기능 구현

실습 결과

1. 회원가입

   • 유효한 ID, 비밀번호, 이름 입력 시 데이터베이스에 성공적으로 저장되고, JSON 응답을 통해 성공 여부 반환.
   • 이미 존재하는 ID로 가입을 시도하면 실패 응답 처리.

2. 로그인

   • 유효한 자격증명(ID 및 비밀번호)으로 로그인하면 사용자 정보를 반환하며, 프로필 페이지로 리디렉션.
   • 잘못된 자격증명으로 로그인 시도 시 실패 응답 처리.

3. 회원정보 수정 및 탈퇴

   • 이름 및 비밀번호 수정 시 데이터베이스에 반영되며, 수정 성공 여부 반환.
   • 탈퇴 시 해당 사용자가 데이터베이스에서 삭제되고, 성공 여부 반환.

4. 뷰 렌더링 및 페이지 이동

   • 각각의 뷰 파일이 요청에 따라 정상적으로 렌더링되며, 경로에 따른 페이지 이동이 원활히 작동.

   ---

   폴더 구조와 코드의 역할

   MVC_MySQL_release
   ├── controller/
   │   ├── Cuser.js
   ├── model/
   │   ├── User.js
   ├── node_modules/
   │   ├── 다양한 파일
   ├── routes/
   │   ├── user.js
   ├── views/
   │   │   ├── include/
   │   │   │   ├── include.ejs
   │   ├── 404.ejs
   │   ├── index.ejs
   │   ├── profile.ejs
   │   ├── signin.ejs
   │   ├── signup.ejs
   ├── .gitignore
   ├── app.js
   ├── init.sql
   ├── package-lock.json
   └── package.json

• controller/

  • Cuser.js 주요 기능 : 회원가입 처리, 로그인 처리, 회원 정보 수정, 회원 탈퇴.

• model/

  • User.js 주요 기능 : 주요 기능: 유저 데이터 삽입, 조회, 수정, 삭제.

• routes/

  • user.js 주요 기능 : 사용자 관련 요청 경로(/user)를 정의하고 컨트롤러와 연결
  • 주요 라우트 : 회원가입(/signup), 로그인(/signin), 프로필 수정(/profile/edit), 프로필 삭제(/profile/delete).

• views/

  • index.ejs: 회원가입 및 로그인 페이지로 이동할 수 있는 링크 제공
  • signup.ejs: 회원가입 페이지, 사용자로부터 ID, 비밀번호, 이름을 입력
  • signin.ejs: 로그인 페이지, 사용자로부터 ID와 비밀번호를 입력
  • profile.ejs: 로그인 후 유저 정보를 수정, 탈퇴 페이지
  • 404.ejs: 에러 페이지입니다.

코드별 내용

controller/Cuser.js

const User = require("../model/User");

// 회원가입 처리
exports.signup = (req, res) => {
  const { userid, name, pw } = req.body;
  User.signup({ userid, name, pw }, (result) => {
    if (result) {
      res.status(201).json({ success: true, message: "회원가입 성공" });
    } else {
      res.status(500).json({ success: false, message: "회원가입 실패" });
    }
  });
};

// 로그인 처리
exports.signin = (req, res) => {
  const { userid, pw } = req.body;
  User.signin({ userid, pw }, (user) => {
    if (user) {
      res.status(200).json({ success: true, user });
    } else {
      res.status(401).json({ success: false, message: "로그인 실패" });
    }
  });
};

// 회원정보 수정
exports.editProfile = (req, res) => {
  const { id, name, pw } = req.body;
  User.update({ id, name, pw }, (result) => {
    if (result) {
      res.status(200).json({ success: true, message: "정보 수정 성공" });
    } else {
      res.status(500).json({ success: false, message: "정보 수정 실패" });
    }
  });
};

// 회원탈퇴 처리
exports.deleteProfile = (req, res) => {
  const { id } = req.body;
  User.delete(id, (result) => {
    if (result) {
      res.status(200).json({ success: true, message: "회원 탈퇴 성공" });
    } else {
      res.status(500).json({ success: false, message: "회원 탈퇴 실패" });
    }
  });
};

model/User.js

const mysql = require("mysql2");

const connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "3144",
  database: "sesac",
});

connection.connect();

// 회원가입
exports.signup = (data, callback) => {
  const query = "INSERT INTO user (userid, name, pw) VALUES (?, ?, ?)";
  connection.query(query, [data.userid, data.name, data.pw], (err, result) => {
    if (err) {
      console.error(err);
      return callback(false);
    }
    callback(true);
  });
};

// 로그인
exports.signin = (data, callback) => {
  const query = "SELECT * FROM user WHERE userid = ? AND pw = ?";
  connection.query(query, [data.userid, data.pw], (err, results) => {
    if (err) {
      console.error(err);
      return callback(null);
    }
    callback(results[0]);
  });
};

// 회원정보 수정
exports.update = (data, callback) => {
  const query = "UPDATE user SET name = ?, pw = ? WHERE id = ?";
  connection.query(query, [data.name, data.pw, data.id], (err, result) => {
    if (err) {
      console.error(err);
      return callback(false);
    }
    callback(true);
  });
};

// 회원탈퇴
exports.delete = (id, callback) => {
  const query = "DELETE FROM user WHERE id = ?";
  connection.query(query, [id], (err, result) => {
    if (err) {
      console.error(err);
      return callback(false);
    }
    callback(true);
  });
};

routes/user.js

const express = require("express");
const router = express.Router();
const Cuser = require("../controller/Cuser");

// 회원가입 페이지 렌더링 (GET /signup)
router.get("/signup", (req, res) => {
  res.render("signup", { title: "회원가입" });
});

// 회원가입 처리 (POST /signup)
router.post("/signup", Cuser.signup);

// 로그인 페이지 렌더링 (GET /signin)
router.get("/signin", (req, res) => {
  res.render("signin", { title: "로그인" });
});

// 로그인 처리 (POST /signin)
router.post("/signin", Cuser.signin);

// 회원정보 수정 (POST /profile/edit)
router.post("/profile/edit", Cuser.editProfile);

// 회원탈퇴 처리 (DELETE /profile/delete)
router.delete("/profile/delete", Cuser.deleteProfile);

module.exports = router;

뷰 파일 (views/)

404.ejs

<!DOCTYPE html>
<html lang="ko">
  <%- include('include/include', { title: '404 Error' })%>
  <body>
    <h1>🚨404 Error</h1>
    <p>죄송합니다. 해당 URL은 접근할 수 없는 주소입니다.</p>
    <!-- TODO: href 속성값 설정하기 -->
    <a href="/">HOME</a>
  </body>
</html>

index.ejs

<!DOCTYPE html>
<html lang="ko">
  <%- include('include/include', { title: '실습 | 회원가입/로그인 구현' })%>
  <body>
    <h1>실습. 회원가입과 로그인 DB 연동</h1>
    <!-- TODO: href 속성값 설정하기 -->
    <a href="/user/signup">회원가입</a>
    <a href="/user/signin">로그인</a>
  </body>
</html>

profile.ejs

<!DOCTYPE html>
<html lang="ko">
  <%- include('include/include', { title: '회원 정보' })%>
  <body>
    <h1>회원 정보</h1>
    <!-- TODO: href 속성값 설정하기 -->
    <a href="#">HOME</a>
    <p>ID 수정 불가능, Password, Name 수정 가능</p>

    <!-- TODO: 각 input의 value 값을 로그인 한 사람의 정보로 채우기 -->
    <form name="form_profile">
      <label for="userid">ID</label>
      <input type="hidden" id="id" value="" />
      <!-- readonly: userid는 수정 불가능 (조건임) -->
      <input
        id="userid"
        type="text"
        name="userid"
        value="<%= user.userid %>"
        readonly
      />
      <label for="password">Password</label>
      <input
        id="password"
        type="password"
        name="pw"
        value="<%= user.pw %>"
        required
      />
      <label for="name">Name</label>
      <input
        id="name"
        type="text"
        name="name"
        value="<%= user.name %>"
        required
      />
      <button type="button" onclick="profileEdit();">Edit</button>
      <button type="button" onclick="profileDelete();">Delete</button>
    </form>

    <script>
      // TODO: [Login] 버튼 클릭시 서버에 회원 정보 수정 요청하기
      // POST /user/profile/edit
      function profileEdit() {}

      // TODO: [Login] 버튼 클릭시 서버에 회원 정보 삭제 요청하기
      // POST /user/profile/delete
      function profileDelete() {}
    </script>
  </body>
</html>

signin.ejs

<!DOCTYPE html>
<html lang="ko">
  <%- include('include/include', { title: '로그인' })%>
  <body>
    <h1>로그인</h1>
    <script>
      function login() {
        const data = {
          userid: document.getElementById("userid").value,
          pw: document.getElementById("password").value,
        };

        axios.post("/user/signin", data).then((response) => {
          if (response.data.success) {
            // 로그인 성공 시 사용자 정보를 form에 삽입 후 제출
            document.forms["form_info"].userid.value =
              response.data.user.userid;
            document.forms["form_info"].submit();
          } else {
            // 로그인 실패 시 알림 및 입력값 초기화
            alert("로그인 실패");
            document.forms["form_login"].reset();
          }
        });
      }
    </script>

    <form name="form_info" action="/user/profile" method="POST">
      <input type="hidden" name="userid" />
    </form>

    <form name="form_login">
      <label for="userid">ID</label>
      <input id="userid" type="text" name="userid" required /><br />
      <label for="password">Password</label>
      <input id="password" type="password" name="pw" required /><br />
      <button type="button" onclick="login();">Login</button>
    </form>

    <!-- 회원가입 페이지로 이동 -->
    <a href="/user/signup">Register</a>
  </body>
</html>

signup.ejs

<!DOCTYPE html>
<html lang="ko">
  <%- include('include/include', { title: '회원가입' })%>
  <body>
    <h1>회원가입</h1>
    <script>
      function register() {
        const data = {
          userid: document.getElementById("userid").value,
          pw: document.getElementById("password").value,
          name: document.getElementById("nickname").value,
        };

        axios.post("/user/signup", data).then((response) => {
          if (response.data.success) {
            // 회원가입 성공 시 로그인 페이지로 이동
            alert("회원가입 성공");
            document.location.href = "/user/signin";
          } else {
            // 회원가입 실패 시 알림 표시
            alert("회원가입 실패");
          }
        });
      }
    </script>

    <form name="form_register">
      <label for="userid">ID</label>
      <input id="userid" type="text" name="userid" required /><br />
      <label for="password">Password</label>
      <input id="password" type="password" name="pw" required /><br />
      <label for="nickname">Name</label>
      <input id="nickname" type="text" name="name" required /><br />
      <button type="button" onclick="register();">Register</button>
    </form>

    <!-- 로그인 페이지로 이동 -->
    <a href="/user/signin">Login</a>
  </body>
</html>

app.js

const express = require("express");
const app = express();
const PORT = 8000;

// 라우터 파일 불러오기
const userRouter = require("./routes/user");

// EJS 설정
app.set("view engine", "ejs");
app.set("views", "./views");

// 정적 파일 경로 설정
app.use("/static", express.static(__dirname + "/static"));

// body-parser 기능 (JSON 데이터 및 URL-encoded 데이터 파싱)
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// 기본 경로 처리
app.get("/", (req, res) => {
  res.redirect("/user/signin");
});

// 라우팅 설정
app.use("/user", userRouter);

// 404 에러 처리
app.use((req, res) => {
  res.status(404).render("404", { title: "404 Error" });
});

// 서버 실행
app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

핵심 내용

• 동적폼 로그인 실습 문제를 MVC 패턴으로 변경해보기
• 기존 'app.js'에서 변수로 'id'와 'pw'를 선언했던 부분 'model/User.js'로 이동 후 'exports'
• 기존에 하나의 파일에서 관리되던 코드 구조를 역할별로 분리하여 유지보수성과 재사용성을 높이는 것이 목표이다.

MVC의 사용

• Model (User.js)

  • 사용자 데이터를 관리하는 부분입니다. 사용자 정보(realId, realPw)를 담고 있으며, 이를 외부에서 접근할 수 있도록 exports.userInfo() 메서드로 제공하였습니다.

• View (index.ejs)

  • 사용자 인터페이스를 담당하는 부분입니다. 로그인 폼을 제공하며, 유효성 검증 및 Axios를 사용하여 데이터를 Controller로 전송합니다.

• Controller (Cuser.js)

  • Model과 View를 연결하는 역할을 합니다. View에서 전달받은 요청 데이터를 Model과 비교하여 결과를 반환하는 로직을 포함하고 있습니다.

간략한 폴더 구조

project-MVC
├── controller/
│   ├── Cuser.js
├── model/
│   ├── User.js
├── routes/
│   ├── user.js
├── views/
│   ├── index.ejs
└── app.js

app.js 실행 결과

1. 홈 화면
- 경로에 접속하면 로그인 폼이 표시

2. 로그인 기능

   • 사용자가 아이디와 비밀번호를 입력한 후 "로그인" 버튼을 클릭하면, 입력된 데이터가 /login 경로로 POST 요청됩니다.
   • Controller(Cuser.js)는 Model(User.js)의 사용자 정보를 이용하여 입력값과 비교합니다.
   • 로그인 성공 시 {"isSuccess": true, "userId": "apple"} 형식의 JSON 데이터를 반환하고, 실패 시 {"isSuccess": false} 데이터를 반환합니다.

3. 결과 표시

   • 로그인 성공 or 실패 메시지가 표시됩니다.

사용한 주요 기능

1. Express를 이용한 서버 구성

   • app.js에서 Express를 사용하여 미들웨어와 라우팅을 설정하고, 서버를 실행합니다.

2. EJS 템플릿 엔진

   • set("view engine", "ejs")를 통해 EJS를 템플릿 엔진으로 설정하였습니다.
   • index.ejs를 이용하여 로그인 폼을 작성하였습니다.

3. Axios

   • View에서 데이터를 Controller로 전송하기 위해 Axios를 사용하였습니다.
   • 비동기 요청을 통해 사용자 입력값을 /login 경로로 POST 요청합니다.

4. MVC 구조화

   • Model: User.js에서 사용자 정보를 관리.
   • View: index.ejs에서 UI 렌더링 및 사용자 인터랙션 관리.
   • Controller: Cuser.js에서 로직 처리 및 응답 제어.

5. 데이터 검증 및 응답

   • Controller에서 사용자 입력값과 Model 데이터를 비교하여 결과를 반환.
   • 성공 시 사용자 ID와 성공 메시지 반환, 실패 시 실패 메시지 반환.

사용한 코드

app.js

const express = require("express");
const app = express();
const PORT = 8080;

// 미들웨어 설정
app.set("view engine", "ejs");
app.set("views", "./views");

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

// 라우터 연결
const userRouter = require("./routes/user");
app.use("/", userRouter);

// 포트 열기
app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
}); 

index.ejs

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MVC 실습</title>
  </head>
  <body>
    <h3>동적폼 로그인 실습문제를 MVC 패턴으로 변경해보기</h3>
    <form name="login">
      <label for="userId">
        <span>아이디</span>
        <input type="text" name="userId" id="userId" required />
      </label>
      <br />
      <label for="userPw">
        <span>비밀번호</span>
        <input type="password" name="userPw" id="userPw" required />
      </label>

      <br />
      <button type="button" onclick="clickLogin()">로그인</button>
    </form>
    <div class="login-result"></div>
  </body>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    function clickLogin() {
      const form = document.forms["login"];
      const loginResult = document.querySelector(".login-result");
      const data = {
        userId: form.userId.value,
        userPw: form.userPw.value,
      };

      console.log(data);
      // 유효성 검증
      console.log(form.userId.checkValidity());
      console.log(form.userPw.checkValidity());
      if (!form.userId.checkValidity() || !form.userPw.checkValidity()) {
        loginResult.innerText = "아이디와 비밀번호는 필수입니다.";
        return;
      }

      axios({
        url: "/login",
        method: "post",
        data: data,
      }).then((res) => {
        console.log(res.data);
        // {isSuccess: false}
        // {isSuccess: true, userId: 'banana'}
        if (res.data.isSuccess) {
          loginResult.textContent = `${res.data.userId}님 로그인 성공~!😊`;
          loginResult.classList.add("success");
          loginResult.classList.remove("error");
        } else {
          loginResult.textContent = "아이디 또는 패스워드 오류입니다🥺";
          loginResult.classList.add("error");
          loginResult.classList.remove("success");
        }
      });
    }
  </script>
</html>

user.js

const express = require("express");
const router = express.Router();
const controller = require("../controller/Cuser");

// GET /
router.get("/", controller.main);

// POST /login
router.post("/login", controller.login);

module.exports = router;

User.js

exports.userInfo = () => {
  return {
    realId: "apple",
    realPw: "12345",
  };
};

Cuser.js

const User = require("../model/User");

exports.main = (req, res) => {
  res.render("index");
};

exports.login = (req, res) => {
  console.log(req.body);
  const { realId, realPw } = User.userInfo();

  if (realId === req.body.userId && realPw === req.body.userPw) {
    res.send({ isSuccess: true, userId: req.body.userId });
  } else {
    res.send({ isSuccess: false });
  }
};

학습 - Windows 환경에서 MVC 구조 이해 및 학습

MVC란 무엇인가?

정의

• MVC (Model-View-Controller):
  소프트웨어 설계 패턴 중 하나로, 애플리케이션의 구조를 분리하여 유지보수성과 확장성을 높이는 데 초점
  • Model: 데이터 및 비즈니스 로직을 담당
  • View: 사용자에게 보여지는 화면 담당
  • Controller: 사용자 입력을 처리하고 Model과 View 간의 연결 담당

MVC의 이점

1. 역할 분리:
   각각의 구성 요소가 독립적으로 동작하도록 설계
2. 유지보수 용이:
   특정 기능 변경 시 관련된 부분만 수정 가능
3. 재사용성:
   View와 Model이 분리되어 다양한 View에서 같은 데이터를 활용 가능

Windows 환경에서 MVC 구현

준비물

1. Node.js 설치

2. 확장자 설치: ``` [Nod.js]

3. 터미널 실행

1.터미널 위치 조정 cd [작업할 폴더 경로] Ex) cd C:\Users\Administrator\Desktop\SeSAC\00_MVC 학습

2.패키지 초기화 및 설치 [Node.js]

1. 기본값 : npm init -y ="package.json"게 생성된다.

2. 이름지정 : npm install [패키지 이름]

3. package-lock.json 생성 npm install ejs

4.Express/의존성 설치(웹 구현 준비) npm install express --save 이거 있어야함. ''' express '''

5.[.gitignore] 파일 작성(package-lock.json이 너무 커서 따로 분류해야함) 꼭 안에 ''' /node_modules package-lock.json ''' 를 적어 넣어야 사용 할 수 있다.

3. **실행**  
   - node 파일 이름.js
   - Ex) node missing.js


#### 프로젝트 초기화 및 구조 생성
1. **MVC 폴더 구조 생성**
- node에서 설치 하는 방법도 있지만 익숙하지 않을 때는 직접 설치 해도 좋다.
- 폴더는 따로 생성 해주면 편하다.
- 내부 [ .js ] 또한 경로에 맞게 만들어주면 편함.
   ```plaintext
   my-mvc-app/
   ├── controller/
   │   └── Cuser.js
   ├── model/
   │   └── User.js
   ├── routes/
   │   └── user.js
   ├── views/
   │   └── index.ejs
   ├── app.js
   └── package.json

MVC 주요 파일 작성

1. app.js (앱 초기화 및 기본 설정)

   const express = require('express');
   const app = express();
   const userRouter = require('./routes/user');
   
   app.set('view engine', 'ejs');
   app.set('views', './views');
   
   app.use(express.json());
   app.use(express.urlencoded({ extended: true }));
   
   app.use('/user', userRouter);
   
   app.listen(3000, () => {
       console.log('Server is running on http://localhost:3000');
   });

2. routes/user.js (라우팅 설정)

   const express = require('express');
   const router = express.Router();
   const userController = require('../controller/Cuser');
   
   router.get('/', userController.getUsers);
   router.post('/', userController.createUser);
   
   module.exports = router;

3. controller/Cuser.js (컨트롤러 정의)

   const User = require('../model/User');
   
   exports.getUsers = (req, res) => {
       const users = User.getAll();
       res.render('index', { users });
   };
   
   exports.createUser = (req, res) => {
       const newUser = req.body;
       User.add(newUser);
       res.redirect('/user');
   };

4. model/User.js (데이터 관리)

   let users = [];
   
   exports.getAll = () => users;
   
   exports.add = (user) => {
       users.push(user);
   };

5. views/index.ejs (화면 구성)

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>User List</title>
   </head>
   <body>
       <h1>User List</h1>
       <ul>
           <% users.forEach(user => { %>
               <li><%= user.name %></li>
           <% }); %>
       </ul>
       <form action="/user" method="POST">
           <input type="text" name="name" placeholder="Enter user name">
           <button type="submit">Add User</button>
       </form>
   </body>
   </html>

학습 포인트

1. Express.js를 사용한 서버 생성:
   • 기본적인 라우팅 및 미들웨어 사용
2. EJS를 활용한 동적 View 구성:
   • 데이터를 View에 전달하여 동적으로 렌더링
3. Model-Controller 간의 데이터 전달:
   • Model에서 데이터를 가져오고 Controller에서 View로 전달
4. 폼 데이터를 처리하고 사용자 추가 기능 구현:
   • express.urlencoded를 사용하여 POST 요청 처리

코드를 입력하세요