TIL 2022.05.03 클론코딩 팀프로젝트(BE) - 1 (hashlib, JWT, git)

오늘은 본격적으로 인스타그램을 백엔드까지 클론코딩하는 팀프로젝트를 시작했다.

첫날인 만큼 기획을 짜는 데 하루를 전부 투자하였고 진행방식, 진행일정, 구현기능 정리, 업무분담, DB설계를 마치고

목표로 향할 방향을 잡았다. 역시 팀프로젝트는 처음 밑그림을 그리는데 어렵다고 생각이 든다. 이게 맞나? 라는 생각이 계속해서 들기도하고 부족한 것은 없나 고민해보게된다. 하지만 무엇보다 처음에 계획을 짜는게 나중에 어떠한 사양이 변경된다거나 문제가 생기는 등에 있어 보다 유동적으로 대처할 수 있게 되는 중요한 시간이라고 생각한다.

 

그래도 다들 적극적이고 아는 것도 많으셔서 오히려 빠르고 정확하게 계획이 잡힌 것 같기도하다.

오히려 내가 쓸떼없는 지식이 있어서 지금하는 작업 툴들과는 많이 다른 환경에서 해보았던 작업들이라 이것저것 물어보느라 시간을 들였지만 긴가민가 했었던 부분도 얘기를 나눌 수 있어서 좋았다.

 

내가 우선 맡은 작업은 로그인과 회원가입을 구현하는 부분을 맡았다. 

추가로 hash와 JWT에 대해서 배워서 그래도 나름 제대로 한다는 느낌이 든다. 비밀번호를 암호화하고 로그인 유지 방식도 세션에 그냥 무식하게 저장해두는 게 아니고 토큰을 생성해서 토큰으로 로그인 유지를 시키는 방식을 사용하니 나름 신선하고 해보는데 보람이 있을 것 같다.

1. 기간 

2022.05.03 (화) ~ 2022.05.11 (수)

 

2. 팀 구성

김선민, 김민기, 박재현, 황신혜 

 

3. 프로젝트 진행 방식

• Figma 활용 구현 화면 관리 : 링크
• Git Issue 기반 프로젝트 관리 : https://github.com/SeonminKim1/lucky-seven/issues

 

4. 프로젝트 진행 일정

4.1 Instgram 화면 조사 / 기능 구현 범위 정의 (2022.05.03 화 )

화면	화면 이름	기능
	회원가입	필수기능: 회원가입, 로그인 추가기능: 아이디/비밀번호 찾기, Facebook 로그인
	메인(피드) 페이지	필수기능: 포스팅 헤더(프로필) 게시물(포스팅 글) 조회 댓글 조회 및 작성 좋아요 , 더보기 모달 aside: 팔로워/팔로잉 추가기능: 북마크, 무한스크롤페이지네이션 DM, 검색기능
	마이페이지	필수기능: 호버: 포스트 위 마우스 좋아요 정보 포스트 클릭 시 해당 포스팅 띄우기 추가 기능 :  팔로워, 팔로잉 프로필 클릭시 이미지 변경 프로필 편집 계정 설정
	nav 헤더바	필수 기능 : 아이콘 링킹 - 홈 아이콘 링킹 - 새 게시물 작성 아이콘 링킹 - 게시물 활동 조회 아이콘 링킹 - 마이페이지(프로필) 아이콘 링킹 - 마이페이지(로그아웃) 추가 기능 : 유저 검색
· · ·	· · ·	· · ·
Figma 링크 :

4.2 DB 예시 설계도 작성 (2022.05.03 화 )

mongoDB

4.3 기능 세부 작성

• 로그인페이지
  • 회원가입 : ID, PW, 성명 정보 받아서 몽고DB 저장 (json형식)
  • 로그인 : 몽고 DB 정보와 Validation 피드 페이지로 Redirect

 

• 피드 페이지
  • 게시물 조회 (DB 조회)
  • 게시물 헤더 (특정 유저 프로필화면 이동 => USER DB 로 이동)
  • 게시물 댓글 (Reply) - 댓글 게시 : db에 UPDATE (FEED에 REPLY 항목)
  • 게시물 좋아요 (DB UPDATE)
  • 게시물 더보기 모달 ( ··· )

 

• 마이페이지
  • USER 테이블 조회 출력 (팔로우 수, 팔로잉 수)
  • 포스트 출력 (FEED DB)
  • 마우스 호버: 포스트 위 좋아요
  • 포스트 클릭 시 해당 포스팅 띄우기

 

• NAV
  
  • NAV Bar UI 구현
  • 아이콘 링킹 - 홈, 마이페이지 (프로필, 로그아웃)
  • 아이콘 링킹 - 새 게시물 작성 (모달, FEED DB INSERT)
  • 아이콘 링킹 - 게시물 활동 (FEED DB)

 

5. 추후 진행 일정

• Flask, Mongo DB JavaScript 공부
• 기능 구현 및 이슈 작성

 

 

 

로그인 기능 구현을 위한 hash함수 & JWT(Json Web Token) 특강

hash 함수

-보안을 위해서 사용하는 함수
-암호화를 해주는게 해시 알고리즘이다.
-암호화는 가능하나 복호화가 불가능한 단일 방향 함수다.
-SHA-256 함수를 이용해서 저장을 한다
-어떤 길이의 데이터도 입력가능
-결과는 정해진 길이로 나옴
-데이터의 길이와 상관없이 256BIT로 나옴
-계산시간이 합리적으로 추정가능해야한다
-입력길이 제한이 없기때문에 최소한 입력길이에 선형적으로 비례하는 형태는 있어야한다

 

# 사용을 위해 임포트는 해와야한다.
import hashlib

hashed_pw = hashlib.sha256(pw.encode('utf-8')).hexdigest()

입력받은 값을 해싱하여 DB에 저장하고 추후 입력받은 값을 항상 해싱해서 비교

...insert_one('PWD', hashed_pw)... 이런 느낌으로 DB에 저장하여

 

그리고 나중에 hashed_pw = select_one('PWD') 으로 가져와서

if(input_pw == hashed_pw) {

            #로그인성공

            }

이런 느낌으로 사용하면 된다. 

JWT - 토큰을 생성해서 로그인 유지해주는 것

# 사용을 위해 임포트는 해와야한다.
import jwt
import datetime
SECRET_KEY = 'SPARTA'

 

payload ={'id': 'kihyeon',
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=1800) }

token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')

print(token)

decoded_token = jwt.decode(token, SECRET_KEY, algorithms=['HS256']);
print(decode_token)

생성한 토큰 decoded_token을 가지고 로그인이것 저것 판별할 때 사용 가능
그렇기 때문에 토큰을 쿠키에 저장하든 로컬리포지토리에 저장해서 로그인 여부 확인

모바일, pc 동시접속도 토큰을 발급하기 때문에 가능하게 됨(클라이언트 다양화)

 

git 특강 요약

정보수집을 하는 이유? 주어진 일이 있고 그 일을 하기 위해 찾아서 사용하기 위해서
커뮤니케이션 스킬이 중요하다! 다 의사소통 협업이다
면접에서 말이 잘통하는가? 그런걸 오히려 더 중요하게 본다!

정보수집은 전문가문의, 강의, 책, 구글링, 공식문서, 논문, 내 경험(TIL, KPT)
문제 해결한 것을 WIKI 에 정리 ex. 신택스 에러 떠서 문법을 어떻게 바꿔서 해결했다 등..

질문하는 방법 > 현재 상태가 어떤지에 대해 정보를 많이 주는게 중요!
1. 어떤 작업을 하는데 2. 어떤 오류가 발생을 했고 3. 어떤 것 까지 찾아봐서 시도해봤다.

 

commit - pull 또는 merge - push 3가지 과정에서 작업내용이 겹칠 경우! 충돌이 발생하게된다.

그러면 코드부분을 확인해서 현재 push되어 있는 코드와 내가 입력한 코드들을 보여 주면서 적용할 코드를 결정한 뒤

push를 진행해주면 되는데 merge 과정에서 충돌이 없을 경우 자동으로 push 되는 설정도 가능하다.

문제있었고 해결했던 걸 wiki에 넣어서 트러블슈팅 어떻게 하였는지 보여줄 수 있기때문에 매우 좋음
트러블 슈팅을 어떻게 했는지 발표자료에 넣는다던가 가능함

branch 전략도 중요! 기능별로 branch를 구성하여 작업을 진행함.
git hub flow / git flow / gitlab flow 구분되어있음!
다른 깃헙에 참가하는 컨퍼런스는 fork를 해와서 작업하기 때문에 > merge upstream으로 검색