본문 바로가기
728x90
반응형

분류 전체보기104

로그인 페이지 및 라우터 연결 - LoginPage 지금까지 회원가입 기능까지 잘 구현했고 로그인 기능을 구현 하려 한다.앞서 백엔드에 로그인 라우터 ( /api/auth/login )가 있고 authController.js에서 로직 처리도 해 놓았다. 이제, 로그인 폼 화면을 만들고 라우터를 추가해 접근이 가능하게 하기 위한 작업이다. | Login 페이지 기본 작성 frontend/src/pages/LoginPage.js// src/pages/LoginPage.jsimport React, { useState } from 'react';import axios from 'axios';const LoginPage = () => { const [formData, setFormData] = useState({ email: '', password: '' });.. 2025. 5. 3.
HTTP 보안 메커니즘 - CORS (Cross-Origin Resource Sharing) | CORS (Cross-Origin Resource Sharing)다른 출처(origin) 간의 자원 요청을 허용할지 말지를 웹 브라우저가 판단하도록 도와주는 HTTP 보안 메커니즘으로 Express용 미들웨어이다. 브라우저는 보안상의 이유로, 웹 페이지가 **다른 도메인(Origin)**의 서버에 요청하는 것을 기본적으로 차단한다. 예를들어,프론트엔드 주소 : http://localhost:3000백엔드 주소 : http://localhost:5000이 둘은 "포트 번호가 다르므로" 다른 origin 으로 간주되고 요청을 보내면 브라우저가 CORS 정책 위반으로 에러를 일으킨다.(Origin : 프로토콜 + 도메인 + 포트번호 조합) 해결방법은 백엔드에서 허용을 해주는 것이다. | CORS설치np.. 2025. 5. 2.
백엔드 프론트엔드 서버를 한번에 실행하기 - concurrently | concurrently 모듈 설치concurrently는 두 개 이상의 npm 스크립트를 동시에 실행할 수 있게 해주는 Node.js 기반 유틸리티이다.react (프론트엔드)와 node.js (백엔드) 서버를 동시에 실행하게 하는 것 외에도 다양하게 활용할 수 있다. npm install concurrently --save-dev | 기본 사용법 package.json"scripts": { "server": "nodemon server.js", "client": "cd frontend && npm start", "dev": "concurrently \"npm run server\" \"npm run client\""} package.json파일에서 scripts에 위 처럼 설정하고 n.. 2025. 5. 2.
회원가입 폼 백엔드로 데이터 전송 - axios설치, RegisterPage작성 앞서 준비 작업을 마쳤다면 회원가입 폼의 입력값을 백엔드 API로 전송해서 실제 회원가입 처리를 해야한다. | Axios 설치하기 React에서 백엔드 API 호출을 위해 가장 많이 사용되는 라이브러리중 하나인 axios가 필요하다.frontend 디렉터리에서 아래 명령어로 설치한다.npm install axios axios 더 자세히 알기> | RegisterPage.js 수정 axios를 사용해 POST /api/auth/register 요청을 보내는 로직을 추가한다. // frontend/src/pages/RegisterPage.jsimport React, { useState } from 'react';import axios from 'axios';function RegisterPage() { .. 2025. 5. 1.
Frontend 기본 라우팅 및 페이지 구성 처음 이 프로젝트 구조를 만들때 backend와 frontend 부분으로 나누어 작업했다.지금까지 백엔드에서 회원가입, 로그인 기능을 만들었고 게시판 라우트까지 구성해 두었으니 프론트엔드에서 연결하는 작업을 해야한다. > 프로젝트 폴더 구성 살펴보기 | 디렉터리 구조 확인 더 많은 구조를 갖겠지만 지금은 회원가입, 로그인 페이지부터 하려한다. 아래 구조로 페이지 작업 시작이다.frontend/├── src/│ ├── pages/│ │ ├── RegisterPage.js│ │ └── LoginPage.js│ ├── App.js│ └── index.js | React Router 설치 라우터 설정을 위해서 react-router-dom 패키지가 필요하다. frontend 디렉.. 2025. 5. 1.
사용자 검증 미들웨어 기능 구현 - authMiddleware 사용자의 인증 상태를 검사하고 인증된 경우 req.user에 사용자 정보를 저장한다. 게시글 작성, 댓글 작성, 프로필 수정, 비공개 페이지 접근 등 로그인한 사용자만 이용 가능한 API에서 사용할 수 있다.클라이언트에서 로그인을 했어도 실제로는 서버에서 검증할 방법이 필요하다.토큰이 유효하면 컨트롤러에서 req.user로 사용자 정보 활용이 가능하도록 한다. backend/middleware/authMiddleware.jsconst jwt = require('jsonwebtoken');const User = require('../models/User');const protect = async (req, res, next) => { let token; // 토큰이 헤더에 있는지 확인 (Bearer .. 2025. 5. 1.
게시판 로직 - Post, postController, postRoutes | Post 모델 스키마 정의 backend/models/Post.js// backend/models/Post.jsconst mongoose = require('mongoose');const postSchema = new mongoose.Schema({ title: { type: String, required: true, }, content: { type: String, required: true, }, author: { type: mongoose.Schema.Types.ObjectId, // 유저 참조 ref: 'User', required: true, }}, { timestamps: true }); // createdAt, updatedAt 자동 생성m.. 2025. 4. 30.
NodeJS, MongoDB, react 회원가입, 로그인, 게시판 구현 플로우 Node.js / MongoDB / React를 활용한 프로젝트를 만들어 보려 한다.회원가입을 하고 로그인을 하면 게시판 글쓰기가 가능한 기본적인 기능을 시작으로 점진적으로 기능을 추가해 볼 예정이다. 1. 프로젝트 폴더 및 구조 구성 2. backend, frontend 구성 및 설치 3. backend 1) 서버 시작 파일 작성 및 환경변수 파일 작성 ( server.js, .env ), nodemon설정 2) MongoDB 연결 및 서버 실행 ( db.js, errorHandler.js )3) 회원가입, 로그인 로직 작성 ( User.js, authController.js, authRoutes.js, generateToken.js )4) 게시글 로직 작성 ( Post.js, postControll.. 2025. 4. 30.
회원가입, 로그인 로직 - User, authController, authRoutes | User 모델 스키마 정의데이터 스키마를 정의하고 DB와 연결된 구조를 제공한다. backend/models/User.jsconst mongoose = require('mongoose');const bcrypt = require('bcryptjs');const userSchema = new mongoose.Schema({ username: { type: String, required: true, unique: true }, email: { type: String, required: true, unique: true }, password: { type: String, required: true }}, { timestamps: true });userSchema.pre('save', async fu.. 2025. 4. 30.
MongoDB연결 파일 작성 및 서버 실행하기 앞서 server.js 파일을 작성 했다면 다음으로 db연결을 하고 서버를 실행해보자. 여기에서는 MongoDB를 로컬에서 설치해서 사용하는 방법으로 한다. ( 아직 미설치시 )설치가 되었다고 보고 진행한다. | MongoDB 연결backend/config/db.js // backend/config/db.jsconst mongoose = require('mongoose');const connectDB = async () => { try { const conn = await mongoose.connect(process.env.MONGO_URI); console.log(`✅ MongoDB Connected: ${conn.connection.host}`); } catch (error) { .. 2025. 4. 29.
728x90
반응형