Real Cart 프로젝트
-
3. 페이지 구성 - 3Real Cart 프로젝트 2023. 2. 19. 02:13
목차 8. 게시판 목록 9. 게시판 글쓰기 10. 게시판 수정 11. 게시판 상세보기 12. 게시판 댓글 게시판 목록 컴포넌트 목록 : - ArticleBoxTitle(컬럼명을 출력 - 번호, 제목, 작성자, 등록일, 조회수) - ArticleBox(하나의 게시글을 번호, 제목, 작성자, 등록일, 조회수 등 해당하는 컬럼명에 맞게 출력) - AppBlackButton(게시판 전용 테마 버튼) 이벤트 목록 : - 컴포넌트가 로딩되면 백엔드에 해당 게시판 전체 글 목록 요청, ArticleList 배열에 10개 단위로 분할(Pagination) - 초기에 loading true로 시작, 게시글 로딩 완료되면 false로 전환해서 ArticleBox 컴포넌트 출력 게시판 글쓰기 컴포넌트 목록 : - react..
-
2. 페이지 구성 - 2Real Cart 프로젝트 2023. 2. 19. 01:50
목차 4. 로그인 화면 5. 회원가입 화면 6. 마이페이지 화면 로그인 화면 컴포넌트 목록 : - AppForm(아이디와 비밀번호를 입력과 동시에 실시간 검증(길이, 형식)) - ArrowButton(로그인, 회원가입 화면 전용 화살표 아이콘 포함 버튼) 이벤트 목록 : - 로그인 버튼을 누르면 아이디와 패스워드를 body에 담아 백엔드에 요청, access token을 받아 로컬 스토리지에 저장, 이후 액세스 토큰을 다시 백엔드로 보내 유저 정보를 받아와 다시 로컬 스토리지에 저장 - 구글 로그인 선택 시 전 페이지로 리다이렉트 회원가입 화면 컴포넌트 목록 : - AppForm(아이디와 비밀번호, 닉네임을 입력과 동시에 실시간 검증 - 길이, 형식(정규표현식), 중복여부) - ArrowButton(로그..
-
1. 페이지 구성 - 1Real Cart 프로젝트 2023. 2. 19. 00:22
목차 1. 메인 화면 2. 관전 화면 3. 플레이 화면 메인 화면 컴포넌트 목록 : - Viewer3(미디어 서버에서 오는 Presenter3 영상 송출) - BoardTable(백엔드에 게시판 정보 요청 후 MUI Table에 표시) - Poster(게임 중이 아닐 때 Viewer를 대체하는 대기 화면) 이벤트 목록 : - 5초 간격으로 게임 진행 여부를 확인하여 Viewer 표시 여부 결정 - 비로그인 상태에서 token을 갖고 리다이렉트 되었을 때 로그인 처리(구글 로그인) 관전 화면 컴포넌트 목록 : - Viewer 1, 2, 3(미디어 서버에서 오는 영상 송출, Presenter 1, 2, 3에 대응) - Poster(게임 중이 아닐 때 Viewer를 대체하는 대기 화면) - Versus(현재 ..
-
0. 환경 설정, 개요Real Cart 프로젝트 2023. 2. 18. 23:29
1. 개발 환경 Visual Studio Code 1.75.1 npm 8.1.2 Node 16.13.2 2. 코딩 컨벤션 Airbnb JavaScript Style Guide Prettier 기본 설정 적용 방법 : Airbnb JavaScript Style Guide 적용법(Visual Studio Code - ESLint, Prettier) (1) (notion.so) Airbnb JavaScript Style Guide 적용법(Visual Studio Code - ESLint, Prettier) (1) [자바스크립트] ESLint로 소스 코드의 문제 찾기 | Engineering Blog by Dale Seo www.notion.so 3. 사용 도구 React(함수형 문법) React Router ..