반응형

사이트 바로가기 : http://playhost.shop

 

이번 23년 11월 15일부터 12월 8일 대략 3주간 팀 프로젝트를 진행하였습니다.

 

팀원은 총 6명이 진행하였으며 팀당 2명씩 역할 분담을 나누어 사이트를 제작하였습니다.

 

📝 프로젝트 선정배경

프로젝트 선정배경은 프로젝트 주제 선정과정에서 강의 시간에 배웠던 API를 활용한 사이트을 제작하기로 회의 때 이야기를 하였고, 그 중 게임 소프트웨어 유통망 사이트인 Steam(스팀)의 API를 활용한 게임 판매 사이트를 제작하기로 결정하였습니다.

 

📝 프로젝트 목표

저희 playhost 사이트의 목표는 다음과 같습니다.

  • 직관적이고 한눈에 보기 쉬운 사이트 일 것
  • 스팀 API를 활용한 다양한 게임 조회 기능 구현
  • 사이트 관리자가 직접 판매할 게임을 추가/삭제할 수 있는 기능 구현
  • 포인트 구매 기능 구현

제작 기간은 23년 11월 15일 ~ 12월 08일 약 3주간 진행되었습니다.

📝 담당 역할

저는 사이트 프론트 + 백엔드 부분을 담당하였고 상세 기능은 아래와 같이 기능을 구현하였습니다.

  • 구매한 게임을 담을 수 있는 장바구니 기능 구현
  • 토스페이먼츠 API를 활용한 결제 시스템 구현
  • 게임 뉴스를 게시할 수 있는 News 페이지 기능 구현
  • 팀원 소개 및 사이트 소개 페이지 구현

📝 프로젝트에 사용한 기술

프로젝트에서 사용한 기술은 다음과 같습니다.

🔶 개발 툴

1) intellij IDEA - 백앤드 부분

2) VSCode - 프론트앤드 부분

3) Github - 형상관리

4) Oracle DB - DB

5) 배포 - 아마존 AWS

📝 시스템 구성도

📝 ERD Table

 

📝 로그인 기능

 

먼저 사이트 로그인 기능입니다.

로그인은 이메일, 비밀번호를 입력하여 로그인을 할 수 있습니다.

회원가입의 경우 이름, 이메일, 비밀번호, 비밀번호 재입력을 통해 회원가입을 합니다.

 

회원가입을 진행하면 회원가입시 입력한 이메일로 인증번호가 전송되며 전송된 인증번호를 입력하여 회원가입을 진행합니다.

 

비밀번호 찾기 기능은 가입시 입력한 이메일을 입력하면 이메일 주소로 인증번호가 전송됩니다.

그 인증번호를 입력하여 일치하면 비밀번호 변경 부분으로 넘어가게 되고, 새로운 비밀번호로 변경이 가능합니다.

 

소셜로그인 부분입니다.

 

소셜로그인은 구글, 카카오로 로그인이 가능하며 별도 회원가입 없이 구글과 카카오에 로그인이 되어있으면 다이렉트로 로그인이 진행됩니다.

 

📝 메인페이지

메인페이지는 사이트 처음 접속시 보이는 페이지입니다.

  • 추천게임 목록 부분은 관리자 페이지에서 해당 상품에 이미지를 업로드 한 경우 메인 화면에 표시가 됩니다.
  • 금주의 할인 게임은 관리자 페이지에서 판매 제품에 할인율을 적용할 경우 할인 게임 탭 부분에 표시가 됩니다.

📝 상세 조회

상세 조회 페이지부분은 게임 태그별(액션, 어드벤처 등...) 게임 목록들을 보여주는 페이지입니다.

쇼핑몰로 치면 카테고리별로 상품을 보여주는 부분이라 생각하시면 됩니다.

📝 게임 상세조회

게임 목록에서 해당 게임을 선택하면 보이는 페이지 입니다.

화면 상단에는 썸네일 이미지 + 타이틀이름 + 리뷰 상태를 표시하며

화면 중간 부분에는 게임 스크린샷, 게임 트레일러 영상 등이 표시됩니다.

스크롤을 내리면 게임 설명부분과 사이드바 부분으로 나누어져 있으며 장바구니 추가 버튼이 존재합니다.

 

해당 게임에 대한 리뷰도 작성이 가능합니다. 단, 게임을 구매한 경우에만 리뷰 작성이 가능하도록 설정되어 있습니다.

📝 장바구니 기능

 

장바구니 부분은 게임 상세조회에서 장바구니 탭 부분에 금액이 적힌 버튼을 누르게 되면 장바구니에 추가가 됩니다.

 

장바구니 페이지로 넘어가게 되면 해당 장바구니에 담긴 개수 표시와 장바구니에 담긴 제품 상세 표시, 주문하기 버튼으로 구성되어 있습니다.

 

📝 결제 페이지

위의 장바구니 페이지에서 결제하기 버튼을 누르면 결제 페이지로 넘어가게 됩니다.

 

결제 페이지부분은

유저의 주문내역 부분과 포인트 영역, 토스페이먼츠 API를 이용한 결제 선택창이 표시됩니다.

토스페이먼츠 API를 이용하여 실제 결제는 되지 않고 테스트 결제가 되어 결제가 진행됩니다.

 

구매완료시 해당 계정 이메일로 구매내역을 전송합니다.

 

 

 

다음시간에는 그 외 기능을 포스팅하겠습니다~🙋‍♂️

반응형
저작자표시 비영리 변경금지 (새창열림)

'Project > Team Project' 카테고리의 다른 글

웹 개발 프로젝트 (3) 학사관리시스템 개발  (0) 2024.03.28
웹 개발 팀 프로젝트 (2) 도서관 플랫폼 BookHub  (2) 2024.03.16
반응형

읽기전용(read only)

 // TODO: 1) 읽기 전용(readonly) : 값 수정 불가
    interface IHello {
        readonly name: string
    }

    let val: IHello = { name: "hello"}; // 초기값 정의
    // val.name = "hello2"; // 변경불가 (readonly)

 

read only 변수에 값을 변경할 수 없음

튜플(tuple)

 // TODO: 2) 튜플(tuple) : 정해진 자료형의 고정된 크기의 배열
    let tuple: [string, number] = ["a", 1];
    console.log("tuple", tuple);
    // tuple = ["a", 1, 2]; // 값이 3개가 들어와서 에러
    // tuple = [1, "a"]; // 자료형 순서가 맞지 않음 에러

결과값
값이 3개가 들어와서 에러가 발생함
자료형 순서가 맞지 않는 경우

 

 

enum : 열거형, 상수를 대체해서 사용

  // TODO: enum : 열거형, 상수를 대체해서 사용함
  // TODO: 아래 상수에 자동으로 0 ~ n 1씩 증가되어 저장됨, 값도 직접 지정 가능
  enum Week {
    Sun,        // Sun = 0을 할당함
    Mon,        // Mon = 1
    Tue,        // Tue = 2
    Wed = 5,    // Wed = 5 (개발자가 강제로 값을 저장)
    Thu,        // Thu = 6
    Fri,        // Fri = 7
    Sat,        // Sat = 8
  }
  console.log("Week", Week);
  console.log("Week", Week.Sun);

 

사용자지정 타입

  • 여러 타입을 변수에 저장해서 사용자지정 타입으로 만들기
// TODO: 4) 별명 붙이기
  // TODO: 사용법 : type 별명 = 자료형 | 자료형2 ...
  // TODO: let 변수명 : 별명 = 값;
  type aliasUser = string | number;
  let person : aliasUser = "hong";
  console.log(person);

타입추론

// TODO: 5) 타입추론 : 모든 변수에 자료형을 지정하지않아도 값으로 추론하는 기능을 부여

  // TODO: (1) 변수의 초기값 : 생략가능
  let num = 10;     // 사용가능

  // TODO: (2) 기본값이 있는 매개변수 : 생략가능
  // 모던자바스크립트 사용법 : function 함수명(매개변수, 매개변수2 = 0){}
  // 함수의 사용 : 함수명(1) => 함수명(1, 0)    
  function add(a:number, b = 0):number {
    return a + b;
  }

  // TODO: (3) 리턴자료형은 함수에서 생략가능
  function add2(a:number, b = 0) {
    return a + b;
  }

 

타입(자료형) 단언

  // TODO: 6) 타입(자료형) 단언 :
  // TODO: 활용 : 컴퓨터는 알 수 없으나 개발자는 확실히 그 변수의 자료형을 확신하면 사용가능
  // TODO: 사용법 : 변수 as 자료형
  function someFunc(val: string | number, isNumber: boolean) {
    // 가정 : isNumber 가 true이면 무조건 val 값은 정수가 된다고 확신
    if (isNumber === true) {
      (val as number).toFixed(2);
    }
  }
반응형
저작자표시 비영리 변경금지 (새창열림)

'React > 이론' 카테고리의 다른 글

typescript - 함수  (0) 2023.09.06
typescript  (0) 2023.09.06
메모이제이션  (0) 2023.09.02
State(useState)  (0) 2023.08.31
리액트의 조건문 : 삼항연산자를 사용한 예제  (0) 2023.08.31
반응형

VS code에서 타입스크립트 프로젝트 생성방법

  • 폴더 생성 후 폴더 안에서 터미널 실행
  • 터미널에 npx create-react-app 프로젝트명 --template typescript 명령어 입력
  • 생성이 완료되면 리액트 서버 실행명령어 입력 npm start

프로젝트 생성완료가 되고 리액트 서버를 실행하면 위의 메시지가 출력됩니다.

typescript?

자바스크립트는 자료형을 정의하지 않고 자유롭게 변수에 값을 넣어 코딩이 가능합니다. 즉, 코딩이 간략하고 코딩생산성이 증가하지만 코딩시 에러를 잡지 못하고 서비스때 심각한 오류가 발생합니다.

 

즉 자바스크립트의 자료형을 명시해서 코딩하게 해주는 JS의 확장 언어를 타입스크립트라 합니다.

 

// Basic.tsx : 자식 컴포넌트(typescript 적용된 버전)
// rfce
import React, { useState } from 'react'
// 새로운 객체타입(자료형) 정의한 파일 import
import IObject from './../types/IObject';

function Basic() {
    // TODO: 타입스크립트 기본 사용법 익히기
    // 타입스크립트 바인딩 변수
    // 사용법 : let [변수명, set변수명] = useState<자료형>(초기값);
    let [message, setMessage] = useState<string>("바인딩 변수 출력입니다.");
    let [num, setNum] = useState<number>(0);
    let [bflag, setBflag] = useState<boolean>(true);
    let [obj, setObj] = useState<IObject>({id: null, name:"green"});
    let [arr, setArr] = useState<Array<number>>([1, 2, 3, 4, 5]);
    let [objArr, setObjArr] = useState<Array<IObject>>([{id: null, name: "green"}]);
   
    // TODO: 1) 기본자료형 : 문자열(string), 숫자(number), 참/거짓(boolean), 객체(따로정의)
    // 타입스크립트 일반 변수 정의
    // 사용법 : let 변수명: 자료형 = 값;
    let message2: string = "일반 변수 출력입니다."; // 문자열
    let num2: number = 1; // 숫자형(실수, 정수 모두 포함)
    let bflag2: boolean = false; // 참/거짓(bool, boolean)

    // TODO: 객체는 자료형을 개발자가 따로 정의해서 사용함
    // 사용법 let 변수명: 정의한객체파일명 = {속성:값...};
    // IObject = {id?: any(null제외한 어떤 자료형도 가능) | null, name: string(문자열만 가능)}
    // id는 모든 자료형 허용 또는 null 자료형도 허용 / name은 문자열만 허용
    let obj2: IObject  = {id: null, name:"green2"};   // 객체(object)

    // TODO: 2) 유니온 사용법 : let 변수명: 자료형(type) | 자료형2 ...
    let num3: number | string = 1;
    let num4: number | string = "hello";
    // let num5: number | string = true; // 에러 발생

    // TODO: 3) 옵셔널(?) : 객체의 속성이나 함수의 매개변수에 사용가능
    // TODO: 사용하면 오류없이 실행되게 함(자료형 | undefined 더 붙은 것과 같은 의미)
    function hello(name?: string) {
        console.log(`안녕하세요 ${name}`);
    }

    // 함수의 사용
    hello("홍길동"); // 안녕하세요 홍길동
    hello();        // 안녕하세요

    // TODO: 4) 배열 : let 변수: Array<자료형 | 자료형2 ...>
    // TODO: 변수 및 함수 사용 시 반드신 정의된 자료형의 값으로 사용하게 강제함
    let arr2: Array<string> = ["a", "b", "c"];     // 문자열 배열
    let arr3: Array<any> = [1, 2, 3];              // 모든 자료형 사용가능
    let arr4: Array<number> = [1, 2, 3];           // 숫자형 사용가능
   
    // TODO: 객체 배열
    let objArr2: Array<IObject> = [{ id: 1, name: "green2"}]; // JSON 문서 형태(객체배열)

  return (
    <div>
        문자(일반) : {message2}<br/>
        문자(바인딩) : {message}<br/>

        숫자형(일반) : {num2}<br/>
        숫자형(바인딩) : {num}<br/>

        boolean형(일반) : {bflag2? "참":"거짓"}<br/>
        boolean형(바인딩) : {bflag? "참":"거짓"}<br/>

        객체형(일반) : {obj2.name}<br/>  
        객체형(바인딩) : {obj.name}<br/>  

        배열(일반) : {arr2}<br/>  
        배열(바인딩) : {arr}<br/>

        {/* 객체배열은 반복문으로 출력 : .map((value, index)=>{}) */}
        객체배열(일반) : {objArr2.map((value)=>value.name)}<br/>  
        객체배열(바인딩) : {objArr.map((value)=>value.name)}<br/>  



    </div>
  )
}

export default Basic

객체형의 경우 개발자가 따로 정의를 해주어야 합니다.

 

// types폴더 > IObject.ts 객체 자료형을 정의하는 파일
// TODO: 타입스크립트 파일명 종류 : .tsx(jsx표현식을 사용한 js), .ts(jsx 표현식을 사용 안 한 js파일)
// TODO: 리액트의 JSX(Javascript and XML) : {값}
// 사용법
// export default interface 객체자료형명 {
//                  속성 : 자료형 | 자료형2 ...,
//                  속성2 : 자료형
// }
// 속성? : 옵셔널(?) : 속성이 없어도 오류 없이 실행되게 해줌
// 예) let obj: IObject = { name: "홍길동"}
//    obj.id (결과는 오류로 출력되지만 에러없이 프로그램이 실행되게 해줌)
export default interface IObject {
    id?: any | null,
    name: string
}

 

연습문제

// BasicExam.tsx : 자식컴포넌트
import React from "react";
import { useState } from "react";

function BasicExam() {
  let [message, setMessage] = useState<string>(
    "안녕하세요 그린컴퓨터아카데미입니다."
  );
  let [message2, setMessage2] = useState<string>("아래는 곱셈 샘플입니다.");
  let [message3, setMessage3] = useState<string>("곱셈");
  let [num, setNum] = useState<number>(2);
  let [num2, setNum2] = useState<number>(3);
  let [result, setResult] = useState<number>(num * num2);

  return (
    <div>
      {/* 아래 처럼 바인딩 변수를 사용해서 화면 출력을 하되 타입스크립트 코드를 적용하여 출력하세요
        단, 문자는 string , 숫자는 number 를 사용해서 코딩하세요
        */}
      {/* 결과 :
                안녕하세요 그린컴퓨터아카데미입니다.
                아래는 곱셈 샘플입니다.
                곱셈
                2 * 3 = 6
               
         */}
      {message}
      <br />
      {message2}
      <br />
      {message3}
      <br />
      {`${num} * ${num2} = ${result}`}
      <br />
    </div>
  );
}

export default BasicExam;

반응형
저작자표시 비영리 변경금지 (새창열림)

'React > 이론' 카테고리의 다른 글

typescript - etc  (1) 2023.09.06
typescript - 함수  (0) 2023.09.06
메모이제이션  (0) 2023.09.02
State(useState)  (0) 2023.08.31
리액트의 조건문 : 삼항연산자를 사용한 예제  (0) 2023.08.31

+ Recent posts

티스토리툴바