Projects (39) 썸네일형 리스트형 #5. 경기정보 삭제, 댓글 삭제 관리자 페이지에서 회원정보를 삭제하는 코드를 작성하였는데, 경기정보와 댓글을 삭제하는 것도 이와 유사하다. # 경기 삭제 //경기인덱스를 파라미터로 받는다 @app.route("/delMatch/", methods=['GET']) def del_match(matchIdx): //우선 matches라는 collection에 담긴 경기정보들을 정렬한다 matches = list(db.matches.find().sort('cheer_datetime', -1)) //경기정보의 id값을 문자열데이터로 바꾸어준다. for match in matches: match["_id"] = str(match["_id"]) //파라미터에 담긴 경기인덱스에 해당하는 경기를 찾아 삭제한다. db.matches.delete_one(.. #4. 상세페이지 구현 | 경기 상세정보와 댓글 # 상세 페이지 //경기인덱스를 파라미터로 받는다 @app.route("/cheer/", methods=['GET']) def cheer(matchIdx): //경기인덱스에 해당하는 경기정보를 불러온다 match = db.matches.find_one({"_id": ObjectId(matchIdx)}) //경기일정에 맞게 경기정보를 정렬한다 contents = list(db.contents.find({"match_idx": ObjectId(matchIdx)}).sort('cheer_datetime', -1)) //각 경기별 인덱스 값을 문자열로 바꾼다 for content in contents: content["_id"] = str(content["_id"]) //토큰을 꺼내서 token_receive .. #3. 관리자 페이지 | 경기정보, 회원비활성화 앞서서, 회원가입 시 유저 등급을 grade라는 항목으로 설정해주었다. 이렇게 한 이유는 일반유저와 구분되는 관리자 계정을 위해서인데, 이 관리자 계정에서는 경기정보를 입력하고, 회원 활성화/비활성화를 가능하게 하며, 글도 삭제할 수 있는 권한을 주기 위해서이다. 그렇다면, 관리자 계정에서 이러한 기능들을 어떻게 수행하는지를 확인해보자. # 관리자 페이지 //url에 파라미터를 설정하여, 각각의 기능을 수행하는 페이지로 이동하게 하였다. @app.route("/admin/", methods=['GET']) def admin(manageType): # return render_template('adminSchedule.html') //request에 담긴 토큰을 확인한다. 즉, 관리자 계정으로 접속했는지를.. #2. 회원가입 및 로그인 로그인 기능과 회원가입 기능에 대해서 정리하고자 한다. 이 두가지 기능을 위해서는 어떻게 api를 설계해야 할까. 우선, 로그인 기능에 대해, 1) 로그인페이지가 있어야 한다. 2) 로그인페이지에서 아이디와 패스워드를 입력 후 로그인 요청을 누르면 api로 post요청이 간다. 이 때, api에서 렌더링할 필요 없이, 프론트 단에서 post요청을 처리하기 위해, ajax통신이나 혹은 fetch를 사용할 수 있다. 3) api단에서는, post요청에 담긴 id와 패스워드를 DB에서 찾는다. 4) DB에서 찾았다면, 유저정보에 따른 토큰을 발급해준다. 5) 최종적으로 로그인한 유저정보, 그리고 유저정보에 따른 토큰을 같이 보내준다. 6) api에서는 렌더링해줄 필요가 없기 때문에, ajax나 fetch에서는.. #1. 홈페이지 화면 설계 먼저 홈페이지 화면을 위한 소스코드를 정리하고자 한다. 홈화면은 우선 저장된 경기정보를 띄워주는 식으로 구성되어 있다. 이를 위해선 다음과 같은 것들이 필요하다. 1) JWT방식으로 로그인이 되어 있는지 체크해야 하고, 2) index.html을 렌더링해줄 때, 경기정보를 같이 보내주어야 한다. html 파일이 짧지 않기 때문에 로직을 담당하는 파일만 살펴보고자 한다. @app.route('/') def home(): //matches라는 collection에서 응원시간의 최신순으로 데이터를 가져온다. matches = list(db.matches.find().sort('cheer_datetime', -1)) //그리고 가져온 데이터에서 id를 하나씩 꺼내 문자형 데이터로 변환해준다 for match i.. #0. 프로젝트 개요 기본 웹프레임워크는 Flask를 사용하였고, DB로는 MongoDB 커뮤니티버전을 데스크탑에 다운받아 사용하였다. 백엔드는 이렇게 구성되어 있고, 프론트에서는 Jquery의 ajax 통신을 활용해 post요청을 보내는 식으로 구현하였다. 로그인와 회원가입기능에는 JWT방식을 사용하였다. 총 프로젝트 참가인원은 3명이며, 3일간 진행하였다. 이 중에서 나는 주로 MongoDB와 백엔드 부분에서 POST요청에 대한 API 설계를 담당하였다. #9. 작성한 모든 컴포넌트를 합쳐주기 | App.js 마지막으로 그동한 작성한 모든 컴포넌트들을 App.js에 합쳐준다. function App() { const user = useSelector(selectUser); const dispatch = useDispatch(); useEffect(()=>{ auth.onAuthStateChanged((userAuth)=>{ if (userAuth) { // 로그인상태 유지 dispatch(login({ email: userAuth.email, uid: userAuth.uid, displayName: userAuth.displayName, photoUrl: userAuth.photoURL })) }else { // 로그아웃 dispatch(logout()); } }) },[]); return ( //헤더 컴포넌.. #8. 위젯 부분 구현 | Widgets.js 위젯부분은 특별한 로직이 들어가지 않는다. 다만 UI가 반복되기 때문에 이렇게 반복되는 부분을 커스텀함수로 작성한다. import React from 'react' import './Widgets.css' import InfoIcon from "@material-ui/icons/Info" import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord' function Widgets() { //본문과 내용을 인자로 받는 커스텀 함수 const newsArticle = (heading, subtitle) => ( //뉴스의 아이콘을 구성하는 부분 //뉴스의 제목과 내용을 띄워주는 부분 {heading} {subtitle} ); return (.. 이전 1 2 3 4 5 다음
