project concept summary

Sung Hyun Hong (Jenny)·2022년 1월 25일

final project mini project mini2 project week2 advanced project week2 basic project

# mini 1 project
Theme: Ecoenergy

# 전기차 충전소 리뷰

환경에 대해 조금 더 친숙하게 생각하고, 흔히 찾기도 어려운 전기차 충전소의 장소를 간단한 동, 구의 입력만으로도 어디에 있는지 검색하고, 그곳의 리뷰들은 어떠한지 직접적으로 작성해 보세요

## 1. 제작 기간 & 팀원 소개

2021.09/13 ~ 09/18
4인 1조 팀 프로젝트
- 박기남 : backend review, charge의 CRUD, 5번 항목의 모든 오류 해결
- 이도행 : charge_detail 반응형 css, 웹 서버 배포
- 황유정 : user 정보와 로그인 기능 구현, 추가적인 css
- 홍성현 : 충전소 목록 동적 웹페이지 구조 작성과 css

## 2. 사용 기술

Backend
- Python 3
- Flask 2.0.1
Frontend
- jinja
- bulma
- bootstrap
DB
- MongoDB
- selenium

## 3. 실행화면

https://youtu.be/dmZZtIEX5YM

## 4. 핵심기능

로그인, 회원가입
- JWT를 이용하여 로그인과 회원가입을 구현하였습니다.
- 아이디와 닉네임의 중복확인이 가능합니다.
자동차 충전소 지역별 검색
- 크롤링을 통해 서울지역 내 모든 충전소들을 DB에 미리 저장하였습니다.
- 사용자는 자동차 충전소를 지역 검색을 통해 찾을 수 있습니다.
- 간편한 페이징기능 탑제, 6개의 항목 이상의 데이터는 페이징 기능을 통하여 다음 페이지로 이동할 수 있습니다.
1개의 자동차 충전소에 관한 리뷰글 CRUD
- 자신의 생각을 담아 리뷰글을 작성가능합니다.
- 다른 유저의 리뷰글을 조회할 수 있습니다.
- 권한인증을 통하여, 자신의 리뷰글을 수정가능하며, 다른 유저의 리뷰글은 수정이 불가능합니다.
- 권한인증을 통하여, 자신의 리뷰글을 삭제가능하며, 다른 유저의 리뷰글은 삭제가 불가능합니다.

## 5. 해결한 문제 정리해보기

frontend
- login.html
  - 문제, 회원가입 시 id 중복확인을 통과 후, 중복된 id 입력 후 회원가입이 되는 문제
    - 해결, onChange 이벤트를 이용하여 onChange 시 class를 'is-danger'로 자동변경과 안내 문구 출력
- chargeList.html
  - 문제 1, 이미지가 없을 경우 견본이미지 9장 중 1장을 보이게 해야하는 문제
    - 해결, janja의 if문을 통하여 img tag를 교체하고, src 속성도 jinja를 이용하여 동적으로 연결
  - 문제 2, 견본이미지 9개 종류중 한 개만 나오는 문제
    - 해결, for문을 통해 idx 변수를 만들고 이 idx로 default_charge{idx} 처럼
      여러 종류의 견본이미지를 불러오도록 해결
  - 문제 3, jinja 템플릿은 파이썬 방식의 for문이며, iterator의 사용이 불가능하며, 최신 버전의 jinja는 idx = idx + 1 사용이 불가능하다.
    - 해결, idx를 list로 선언하고, loop마다 append(1)후, idx의 {{idx|length}}를 통해 idx를 가져옴
    - 참고,
      [https://stackoverflow.com/questions/1465249/get-lengths-of-a-list-in-a- jinja2-template](https://stackoverflow.com/questions/1465249/get- lengths-of-a-list-in-a-jinja2-template)
  - 문제 4, 리스트의 사진 클릭시 charge_detail.html로 routing 기능을 넣으며, 그 항목의 chargeId를 주어야 하는 문제
    - 해결 1, for문을 통하여 각 충전소 element에 id 값을 jinja로 설정 후 method의 파라미터에 this.id로 id를 보내주어 해결
      -참고,
      [https://stackoverflow.com/questions/23655009/how-to-set-the-id- attribute-of-a-html-element-dynamically-with-angularjs-1-x] (https://stackoverflow.com/questions/23655009/how-to-set-the-id- attribute-of-a-html-element-dynamically-with-angularjs-1-x)
    - 해결 2, 간단히 method의 파라미터에 jinja를 통하여 id값을 보내주어 해결
- charge_detail.html
  - 문제 1, 리뷰 수정 시 modal 창을 통해 입력, modal 창을 열때 그 리뷰글의 리뷰id 값을 저장하여 backend로 보내야하는 문제
    - 해결 1, js를 통하여 modal 클릭시 변수에 id 값을 저장하도록 설정, 모든 리뷰 글은 modal을 클릭 해야하는 전제조건이 있으므로 가능하다.
backend
- 문제 1, mongodb의 id 값은 ObjectId('12312123') 형식이며 이를 전처리하여 frontend로 보내야 하는 문제
  - 해결, str() 함수를 통하여 해결, 데이터가 배열인 경우에는 새로운 파이썬 리스트를 선언 하고 데이터를 저장하여 보내도록 해결
  - 참고, [https://stackoverflow.com/questions/11280382/object-is-not-json- serializable](https://stackoverflow.com/questions/11280382/object-is-not- json-serializable)
- 문제 2, mongodb의 insert, find, delete, update 등 db 조작 중 Exception 처리
  - 해결, Exception e 문구를 통해 해결
  - 참고,
    [https://stackoverflow.com/questions/60066390/pymongo-insert-one-exception- error-handling](https://stackoverflow.com/questions/60066390/pymongo-insert- one-exception-error-handling)
- 문제 3, review 글의 수정 삭제 시 내 review글만 삭제, 수정하도록 제한해야하는 문제
  - 해결, 수정, 삭제 실행 전 권한 체크 함수를 만들고 review 작성자의 id와 토큰을 통한 로그인 id를 비교하여 권한을 체크할 수 있도록 수정
- 문제 4, 지역 검색시 find가 아닌 like query문을 사용해야하는 문제
  - 해결, 구글링을 통하여 like 함수 작성
  - 참고,
    https://stackoverflow.com/questions/10018730/how-use-sql-like-in-pymongo
- 문제 5, 충전소 리스트를 db에서 불러올 때 페이징네이션으로 잘라서 가져와야하는 문제
  - 해결, 구글링을 통하여 함수 작성
  - 참고, https://journeytosth.tistory.com/31

# mini2 basic project
Term: Sept 23 to Sept 29, 2021

전체 게시글 목록 조회 페이지
- 제목, 작성자명, 작성 날짜를 조회하기
- 작성 날짜 기준으로 내림차순 정렬하기
- 특정 게시글을 클릭할 경우 게시글 조회 페이지로 이동하기
게시글 작성 페이지
- 제목, 작성자명, 비밀번호, 작성 내용을 입력하기
- "글쓰기" 버튼을 클릭하면 전체 게시글 목록 조회 페이지로 이동하고, 최신 게시글이 최상단에 위치함을 확인하기
게시글 조회 페이지
- 제목, 작성자명, 작성 날짜, 작성 내용을 조회하기
  (검색 기능이 아닙니다. 간단한 게시글 조회만 구현해주세요.)
게시글 수정 페이지
- 작성 페이지와 동일한 폼. 수정하기 버튼을 클릭하면 작성되었던 게시글이 미리 입력되게 하기
- 비밀번호란은 비워두기
- "글쓰기" 버튼은 없고 "수정 완료", "삭제하기" 버튼만 만들기
- "수정완료" 버튼을 누를 때 입력된 비밀번호를 비교하여 동일할 때만 글이 수정되게 하기
- "삭제하기" 버튼을 누를 때 입력된 비밀번호를 비교하여 동일할 때만 글이 삭제되게 하기

✅ AWS 배포

EC2 배포
- Ubuntu EC2 를 구매한 뒤, 노드 포트(3000)를 80번 포트로 포워딩해서 포트 번호 없이도 서비스에 접속 가능하도록 하기 → 수업시간에 배웠던 iptable을 사용하기
- mongoDB를 EC2 내부에 설치해서 연결하기

➕ 과제를 다 하셨다면?

XSS, CSRF에 대해 알아보기
- XSS, CSRF란 무엇이며, 어떻게 해결할 수 있는지 알아보기
- 내 블로그에 필터 라이브러리 적용하기

#Week2 advanced project
Term: Sept 30 to Oct 8, 2021

회원 가입 페이지
- 회원가입 버튼을 클릭하기
- 닉네임, 비밀번호, 비밀번호 확인을 입력하기
- 닉네임은 최소 3자 이상, 알파벳 대소문자(a~z, A~Z), 숫자(0~9)로 구성하기
- 비밀번호는 최소 4자 이상이며, 닉네임과 같은 값이 포함된 경우 회원가입에 실패로 만들기
- 비밀번호 확인은 비밀번호와 정확하게 일치하기
- 데이터베이스에 존재하는 닉네임을 입력한 채 회원가입 버튼을 누른 경우 "중복된 닉네임입니다." 라는 에러메세지를 프론트엔드에서 보여주기
- 회원가입 버튼을 누르고 에러메세지가 발생하지 않는다면 로그인 페이지로 이동시키기
로그인 페이지
- 로그인, 회원가입 버튼을 만들기
- 닉네임, 비밀번호 입력란 만들기
- 로그인 버튼을 누른 경우 닉네임과 비밀번호가 데이터베이스에 등록됐는지 확인한 뒤, 하나라도 맞지 않는 정보가 있다면 "닉네임 또는 패스워드를 확인해주세요"라는 메세지를 프론트엔드에서 보여 주기
- 로그인 버튼을 눌러서 에러 메세지가 발생하지 않는다면 전체 게시글 목록 조회 페이지로 이동 시키기
로그인 검사
- 아래 페이지를 제외하고 모두 로그인 한 경우만 볼 수 있도록 하기
  - 회원가입 페이지
  - 로그인 페이지
  - 게시글 목록 조회 페이지
  - 게시글 조회 페이지
- 로그인을 하지 않거나 올바르지 않은 경로로 접속한 사용자가 로그인이 필요한 경로에 접속한 경 우 "로그인이 필요합니다." 라는 메세지를 프론트엔드에서 띄워주고 로그인 페이지로 이동시키기
- 로그인 한 사용자가 로그인 페이지 또는 회원가입 페이지에 접속한 경우 "이미 로그인이 되어있습 니다."라는 메세지를 띄우고 전체 게시글 목록 조회 페이지로 이동시키기
게시글 조회 페이지 > 댓글 목록 조회
- 로그인 하지 않은 사용자도 댓글 목록 조회가 가능하도록 하기
- 현재 조회중인 게시글에 작성된 모든 댓글을 목록 형식으로 볼 수 있도록 하기
- 댓글 목록 위에 댓글 작성란 만들기
  - 댓글 작성에 관한 기능은 5번 요구사항으로 연결하기
- 댓글 목록 중, 내가 작성한 댓글인 경우 댓글 수정, 댓글 삭제 버튼 만들기
  - 댓글 수정 버튼을 누르면 6번 요구사항으로 연결하기
  - 댓글 삭제 버튼을 누르면 7번 요구사항으로 연결하기
- 제일 최근 작성된 댓글을 맨 위에 띄우기
게시글 조회 페이지 > 댓글 작성
- 로그인 한 사용자만 댓글 작성이 가능하도록 하기
- 게시글 조회 페이지 하단에 댓글 내용을 입력할 수 있는 댓글 작성 버튼 만들기
- 로그인 하지 않은 사용자가 댓글 작성란을 누르면 "로그인이 필요한 기능입니다." 라는 메세지를 띄우고 로그인 페이지로 이동시키기
- 댓글 내용란을 비워둔 채 댓글 작성 버튼을 누르면 "댓글 내용을 입력해주세요" 라는 메세지를 띄우기
- 댓글 내용을 입력하고 댓글 작성 버튼을 누른 경우 작성한 댓글을 추가하기
게시글 조회 페이지 > 댓글 수정
- 내가 작성한 댓글만 수정 가능하도록 하기
- 댓글 본문이 사라지고, 댓글 내용, 저장 버튼 생성하기
- 댓글 내용에는 이전에 입력했던 댓글 내용을 기본 값으로 채우기
- 수정할 댓글 내용은 비어 있지 않도록 하기
- 저장 버튼을 누른 경우 기존 댓글의 내용을 새로 입력한 댓글 내용으로 바꾸기
게시글 조회 페이지 > 댓글 삭제
- 내가 작성한 댓글만 삭제 가능하도록 하기
- "정말로 삭제하시겠습니까?" 메세지를 띄우고, 확인/취소 버튼 중 "확인" 버튼을 누른 경우 목록 에서 해당 댓글을 삭제하기
- 취소를 누른 경우 삭제되지 않고 그대로 유지하기
회원가입 테스트 코드 작성
- 회원가입시 구현한 아래 조건을 검사하는 테스트 코드를 작성하기
  - 닉네임은 최소 3자 이상, 알파벳 대소문자(a~z, A~Z), 숫자(0~9)로 이루어져 있어야 합 니다.
  - 비밀번호는 최소 4자 이상이며, 닉네임과 같은 값이 포함된 경우 회원가입에 실패합니다.
  - 비밀번호 확인은 비밀번호와 정확하게 일치해야 합니다.
  - 데이터베이스에 존재하는 닉네임을 입력한 채 회원가입 버튼을 누른 경우 "중복된 닉네임입 니다." 라는 에러메세지가 발생합니다.
- 테스트 코드 실행 시 실제로는 데이터베이스에 연결되지 않도록 하기
- 각 조건 별로 2개 이상의 테스트 케이스가 존재하도록 하기

# Mini2 project

(Oct 11 ~ Oct 16, 2021)

# Front-Backend 미니 프로젝트

# 1. Project: 할로핼로윈

이번 할로윈은 안전하게 집에서!

사람들의 만남과, 할로윈의 즐거움을 나눌수 있는 작은 모임 프로젝트입니다

할로할로윈은 10월에 다가오는 할로윈 행사에 대해 정보를 알고, 친숙하게 다가가고자 생각한 프로젝트입니다.

자신만의 할로윈을 어떻게 독특하게 보냈는지, 게시판 형식의 모임 프로젝트입니다

# 2.Meeting At…

# Code/DataBase Rule

## Code 명명 규칙

Tab Space: 2
CamelCase
함수는 동사가 먼저 나오도록(예 : 삭제: delete, 유저조회: findUser)

### prettier

{
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80
  }

## 데이터베이스 테이블 규칙

테이블명은 영문 대문자로 사용함
의미있는 테이블명은 2단어까지 사용할 수 있음
단어와 단어 사이는 ‘_’로 구성함
각 단어는 최대 8자리까지 사용함

표기방식

예) 유저테이블 : USER
예) 게시글의 댓글 테이블 : POSTING_REPLY

# 3. Step

## FrontEnd:

~월요일 9pm: 화면단 기본구성
화요일~목요일 9pm: 기본적 화면 구현 및 axios를 통한 백앤드통신 테스트
목~금: 미비한 기능 구현, 시간적 여유를 보며 추가적인 기능 구현 및 테스트
토요일: 마무리 작업 및 동영상 제작

## BackEnd:

~월요일 9pm: 데이터베이스 구성, 데이터베이스의 종류 선택
화요일~수요일 9pm: API구현 및 axios를 통한 프론트 앤드 통신테스트
목~금: 추가적인 기능 구현 및 테스트
토요일 마무리 작업 및 동영상 제작

# 4. Project Stack:

Stack

library

# 5. 필요기능:

필요한 기능(API)들에 대한 설명입니다

### Main - 필수적인 API입니다

회원가입
로그인
로그아웃
로그인 정보 가져오기
토큰
게시글 불러오기
게시글 등록
게시글 수정
게시글 삭제

**### More - 기본적인 기능이 끝난후 구현해야할 기능들입니다

**

댓글 불러오기
댓글 등록
댓글 수정
댓글 삭제

### Advanced - 시간적 여유가 존재할때 구현할 기능들입니다.

게시글 태그 추가
태그로 게시글 검색

# 와이어 프레임

## 와이어 프레임

메인페이지@3x.png

소개페이지@3x.png

포스팅페이지@3x.png

모달띄우기@3x.png

모달2개@3x.png

회원가입@3x.png

팀원정보@3x.png

로그인@3x.png

# API List

# DataSchema

# 6. Work Flow

# 6. Members:

# final project

# 렛츠끼리

## ❓ 프로젝트 개요 ❓

현대 사회에서 '책상' 은 단순히 책을 올려놓고 공부하도록 하는 도구, 그 이상의 이미를 가집니다.

책상의 의미가 확장됨에 따라 'deskterior' 라는 신조어가 생겨나고, 책상과 관련된 악세서리들이 생겨나고 있습니다.

책상에 앉아서 공부하는 사람들이 자신만의 집중 공간을 꾸미고 이를 공유 함으로서, 자기 표현의 욕구충족, 다른 사람들의 집중공간을 참고하여 자신의 공간을 더 잘 꾸밀 수 있도록 하는 것 이 우리의 프로젝트 목표입니다.

## 🎁 프로젝트 아키텍처 🎁

https://img.shields.io/badge/passport-0.5.0-34E27A?style=for-the-badge&logo=Passport&logoColor=white&link=/doc/skill-book/passport.md

https://img.shields.io/badge/sequelize-6.8.0-52B0E7?style=for-the-badge&logo=Sequelize&logoColor=white&link=./doc/skill-book/sequelize&mysql/sequelize&mysql.md

https://img.shields.io/badge/Swagger-4.1.6-85EA2D?style=for-the-badge&logo=Swagger&logoColor=white&link=./doc/skill-book/swagger.md

https://img.shields.io/badge/MySQL-2.3.2-4479A1?style=for-the-badge&logo=MySQL&logoColor=white&link=./doc/skill-book/sequelize&mysql/sequelize&mysql.md

https://img.shields.io/badge/docker-3.0.0-2496ED?style=for-the-badge&logo=docker&logoColor=white&link=./doc/skill-book/prometheus_and_grafana/prometheus_and_grafana.md

https://img.shields.io/badge/prometheus-2.32.0-E6522C?style=for-the-badge&logo=prometheus&logoColor=white&link=./doc/skill-book/prometheus_and_grafana/prometheus_and_grafana.md

https://img.shields.io/badge/grafana-8.2.4-E6522C?style=for-the-badge&logo=grafana&logoColor=white&link=./doc/skill-book/prometheus_and_grafana/prometheus_and_grafana.md

### 기술서

### refactoring-history

Daily-refactoring-history

Sung Hyun Hong (Jenny)

오늘 하루도 열심히!

이전 포스트

Dec 7-17, 2021

다음 포스트

project concept summary

**

Dec 7-17, 2021

Nov 18, 2021

0개의 댓글