포트폴리오를 만들기

김영수 2024. 11. 26. 23:03

2024. 11. 26. 23:03

기능:
1.게시판 기능
2.중고거래 (결제 기능은 dev 모드로 연동예정)
3.숏폼 영상
4.채팅
5.소셜 로그인, 관리자 로그인

Creating a portfolio
Features
1.Bulletin Board Features
2.Second-hand trading (payment feature will be integrated in dev mode)
3.Shortform video
4.chat
5.Social login, admin login

Creating a full portfolio project with all the mentioned features is a significant task. Below, I'll outline a project structure and demonstrate key components for each feature. However, a full implementation will require more detail and effort.

언급된 모든 기능이 포함된 전체 포트폴리오 프로젝트를 만드는 것은 중요한 작업입니다. 아래에서는 프로젝트 구조의 개요와 각 기능에 대한 주요 구성 요소를 보여드리겠습니다. 그러나 전체 구현에는 더 많은 세부 사항과 노력이 필요합니다.

Tech Stack:

Frontend: React (with Vite), TailwindCSS
Backend: Spring Boot or Nest.js (REST/GraphQL API)
Database: PostgreSQL / MongoDB
Authentication: OAuth2 (social login), JWT for admin login
Video: AWS S3 for video storage
Chat: WebSocket with Spring or Nest.js, Apollo Client for GraphQL
Deployment: AWS (EC2, S3, RDS)

기술 스택:
프론트엔드: React(Vite 포함), TailwindCSS
백엔드: Spring Boot 또는 Nest.js(REST/GraphQL API)
데이터베이스: PostgreSQL/MongoDB
인증: OAuth2(소셜 로그인), 관리자 로그인용 JWT
비디오: 비디오 스토리지용 AWS S3
채팅: Spring 또는 Nest.js가 포함된 WebSocket, GraphQL용 Apollo 클라이언트
배포: AWS(EC2, S3, RDS)

Project Structure

프로젝트 구조

/portfolio-project
├── /frontend
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── App.js
│   │   └── index.js
├── /backend
│   ├── src/main/java/com/portfolio/
│   │   ├── controller/
│   │   ├── service/
│   │   ├── model/
│   │   ├── repository/
│   │   └── config/
│   └── src/main/resources/
├── README.md
├── docker-compose.yml
└── package.json

Feature Highlights

1. Bulletin Board (Backend)

기능 주요 내용
1. 게시판(백엔드)

@RestController
@RequestMapping("/api/posts")
public class PostController {
    @Autowired
    private PostService postService;

    @GetMapping
    public List<Post> getAllPosts() {
        return postService.getAllPosts();
    }

    @PostMapping
    public ResponseEntity<Post> createPost(@RequestBody Post post) {
        return new ResponseEntity<>(postService.createPost(post), HttpStatus.CREATED);
    }
}

2. Second-Hand Trading

Add an e-commerce model with items, orders, and payments.

2. 중고 거래
품목, 주문, 결제가 포함된 전자상거래 모델을 추가하세요.

@RestController
@RequestMapping("/api/trade")
public class TradeController {
    @PostMapping("/payment")
    public String initiatePayment(@RequestBody PaymentRequest request) {
        // Payment logic (e.g., Stripe API integration)
        return "Payment successful for " + request.getItemId();
    }
}

3. Shortform Video (Frontend)

3. 쇼트폼 비디오(프론트엔드)

import React, { useState } from 'react';

function VideoUpload() {
    const [file, setFile] = useState(null);

    const handleUpload = async () => {
        const formData = new FormData();
        formData.append("file", file);

        await fetch('/api/upload', {
            method: 'POST',
            body: formData,
        });
    };

    return (
        <div>
            <input type="file" accept="video/*" onChange={e => setFile(e.target.files[0])} />
            <button onClick={handleUpload}>Upload Video</button>
        </div>
    );
}

export default VideoUpload;

4. Chat (WebSocket)

Backend: Spring WebSocket or Nest.js Gateway

4. 채팅(웹소켓)
백엔드: Spring WebSocket 또는 Nest.js 게이트웨이

@Controller
public class ChatController {
    @MessageMapping("/chat")
    @SendTo("/topic/messages")
    public ChatMessage sendMessage(ChatMessage message) {
        return message;
    }
}

Frontend: Use Socket.io or Stomp.js for WebSocket.

프론트엔드: 웹소켓에 Socket.io 또는 Stomp.js를 사용합니다.

import SockJS from 'sockjs-client';
import { Stomp } from '@stomp/stompjs';

const socket = new SockJS('/ws');
const stompClient = Stomp.over(socket);

stompClient.connect({}, () => {
    stompClient.subscribe('/topic/messages', message => {
        console.log(JSON.parse(message.body));
    });
});

stompClient.send('/app/chat', {}, JSON.stringify({ content: 'Hello!' }));

5. Social Login, Admin Login

Backend: Spring Security with OAuth2 or Nest.js Passport

5. 소셜 로그인, 관리자 로그인
백엔드: OAuth2 또는 Nest.js 패스포트를 사용한 Spring 보안

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.oauth2Login().and().authorizeRequests()
            .antMatchers("/admin/**").hasRole("ADMIN")
            .anyRequest().authenticated();
    }
}

Frontend: Use a library like react-google-login for social login.

프론트엔드: 소셜 로그인에는 react-google-login과 같은 라이브러리를 사용하세요.

import { GoogleLogin } from 'react-google-login';

const responseGoogle = (response) => {
    console.log(response.profileObj);
};

<GoogleLogin
    clientId="GOOGLE_CLIENT_ID"
    buttonText="Login with Google"
    onSuccess={responseGoogle}
    onFailure={responseGoogle}
    cookiePolicy={'single_host_origin'}
/>;

Deployment with Docker Compose

Docker Compose를 사용한 배포

version: '3.8'
services:
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    environment:
      SPRING_DATASOURCE_URL: jdbc:postgresql://db:5432/portfolio
      SPRING_DATASOURCE_USERNAME: user
      SPRING_DATASOURCE_PASSWORD: password
  db:
    image: postgres:13
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"

This portfolio can be expanded with more features and fine-tuned for your specific requirements.

이 포트폴리오는 더 많은 기능으로 확장할 수 있으며 특정 요구 사항에 맞게 미세 조정할 수 있습니다.

bdshi-tec