COOKPING

항해99 9기 C반 11조 미니프로젝트 2022.09.19 - 2022.09.22

프로젝트 소개 👩‍🏫

굽기만 하는 요리에 지쳤어요...!😖
캠핑가서 다른 사람들은 멋있고 다양한 요리 하던데 어떻게 하는지 모르겠어요 😓
캠핑 요리 고수입니다!🧐 알고 있는 정보를 공유하고 싶어요 😎

쿡핑은 다양한 캠핑 요리 레시피를 손쉽게 공유하고 찾아볼 수 있는 사이트 입니다. Youtube 링크를 공유해 보세요! 🎬

프로젝트 S.A ✏️

younseo1016 미니프로젝트 S.A
와이어프레임 이미지를 구상하고, 설계하는 과정이 재미있었다.

프로젝트 시연 영상 🎬

YOUTUBE
유튜브에 업로드 하기 위해서 새로 채널도 개설했다.
이런식으로 영상으로 기록하는 것도 좋은 방법일 것 같다!
Youtube 썸네일은 photoshop으로 빠르고 간단하게(ㅋㅋ) 만들었다.

기술스택 🔨

HTML / CSS / JavaScript / Python / Flask / mongoDB / Jinja2 /JQuery / Linux / AWS

API TABLE 🖥

구현 기능 💻

✔ Login Page 로그인

▪ JWT 방식으로 구현
▪ 회원가입 버튼 클릭 시 회원가입페이지로 이동

✔ Register Page 회원가입

▪ 아이디 입력 후 중복확인 버튼을 클릭하면 중복아이디 및 아이디 유무 체크
▪ 아이디, 비밀번호 표준 기준 사용 | 조건에 맞지 않을 시 반환
▪ 비밀번호, 비밀번호 재입력 칸의 내용이 일치하지 않으면 계정이 생성되지 않음

✔ Main Page 메인화면

▪ User들이 작성한 글들을 보여주는 페이지
▪ 토글아이콘 클릭시 네비게이션이 나타남 (모바일, 또는 화면 사이즈가 작을 경우)
▪ 내비게이션 바의 로그아웃 버튼 클릭 시 로그인 페이지로 이동
▪ 네비게이션 바에서 텍스트 클릭시 해당 페이지로 이동
▪ 글쓰기 화면에서 생성한 게시물이 화면에 나타남
▪ 글쓰기 페이지에 youtube url을 입력하면 자동으로 썸네일 사진 + youtube 링크 연결됨

✔ Posting Page 글쓰기화면

▪ 글제목, 코멘트, URL을 입력할 수 있는 input란
▪ 유튜브 URL 작성 시, 해당 유튜브 영상의 썸네일과 링크가 메인 페이지에 나타남
▪ 작성 버튼 클릭시 DB에 해당 글이 저장됨

✔ About Page 소개화면

▪ 웹사이트의 구성을 표현해보고 싶어 만든 페이지
▪ 우리 사이트의 간단한 설명과 team member들의 이름과 이메일을 표기하였다
▪ Footer는 메인페이지에도 있음
▪ footer의 쿡핑레시피-메인페이지 / 쿡핑이란?-소개페이지 / Starting Assignment-S.A작성페이지 / Github-Github링크 / Discord-디스코드 링크로 각각 연결되어 있음

Github 주소

Github.com/Younddo

첫 미니 프로젝트

내가 기능구현한 부분

1. 전체적인 HTML, CSS

나는 Spring 공부하여 백앤드 개발자로 일하고 싶다. 하지만 프론트앤드도 너무 재미있다. 내가 원하는대로 표현하고 꾸미고 구성해 나갈 수 있다는 점이 흥미롭다.
우리 프로젝트는 HTML Codex에서 무료로 제공하는 템플릿을 사용하였다. 프론트앤드가 재미있고 흥미롭지만, 프로젝트를 완성해야 하는 78시간 동안 모든 페이지의 html과 css를 처음부터 구성하는 것은 무리가 있다고 생각했다.

# [로그인 API]
# id, pw를 받아서 맞춰보고, 토큰을 만들어 발급합니다.
@app.route('/api/login', methods=['POST'])
def api_login():
    id_receive = request.form['id_give']
    pw_receive = request.form['pw_give']

    # 회원가입 때와 같은 방법으로 pw를 암호화합니다.
    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()

    # id, 암호화된pw을 가지고 해당 유저를 찾습니다.
    result = db.user.find_one({'id': id_receive, 'pw': pw_hash})

    # 찾으면 JWT 토큰을 만들어 발급합니다.
    if result is not None:
        # JWT 토큰에는, payload와 시크릿키가 필요합니다.
        # 시크릿키가 있어야 토큰을 디코딩(=풀기) 해서 payload 값을 볼 수 있습니다.
        # 아래에선 id와 exp를 담았습니다. 즉, JWT 토큰을 풀면 유저ID 값을 알 수 있습니다.
        # exp에는 만료시간을 넣어줍니다. 만료시간이 지나면, 시크릿키로 토큰을 풀 때 만료되었다고 에러가 납니다.
        payload = {
            'id': id_receive,
            'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=180)
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')

        # token을 줍니다.
        return jsonify({'result': 'success', 'token': token})
    # 찾지 못하면
    else:
        return jsonify({'result': 'fail', 'msg': '아이디/비밀번호가 일치하지 않습니다.'})

2. 로그인/회원가입 기능

JWT 방식을 이용하여 로그인하는 기능을 구현하였다. 처음해보는 방식이라 신기했고, 솔직히 아직 명확하게 어떤 방식인지 어떤 메커니즘으로 이게 돌아가는건지에 대한 완벽한 이해는 하지 못했다.
회원가입기능은 크게 중복확인과 비밀번호확인 일치여부, 조건에 맞는 입력값을 받았는지 이 세가지가 큰 것 같다.

# [회원가입 API]
# id, pw, nickname을 받아서, mongoDB에 저장합니다.
# 저장하기 전에, pw를 sha256 방법(=단방향 암호화. 풀어볼 수 없음)으로 암호화해서 저장합니다.
@app.route('/api/register', methods=['POST'])
def api_register():
    id_receive = request.form['id_give']
    pw_receive = request.form['pw_give']
    nickname_receive = request.form['nickname_give']

    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()

    db.user.insert_one({'id': id_receive, 'pw': pw_hash, 'nick': nickname_receive})

    return jsonify({'result': 'success'})

나중에 항해99 수료하고 나서 다시 이 페이지를 되돌아 볼 때, 내가 얼마나 성장했는지 그때가서 보면 지금 기능구현한 것이 어느정도의 수준이었는지 다시 느껴보고 싶다.