1주차 : [About me] 미니프로젝트 포트폴리오 업로드 웹사이트 만들기

팀원 : 최진원 김태균 강민택 김소연

1주차 - 아이디어

카페 / 음악 공유 사이트

캠핑장 정보 리뷰

반려견 일기

포트폴리오 올리는 웹사이트

 

참고를 많이 했습니다  https://cdg-portfolio.com

최덕경 포트폴리오 :: CDG's Portfolio

---

주제 : 포트폴리오 올리는 웹사이트

---

프로젝트 명 : About me 

개발자의 성장기를 시각화 하여 담아내는 포트폴리오 웹 사이트. 거쳐온 프로젝트들을 통해 발전해 나가는 우리의 모습을 한 눈에 볼 수 있습니다.

---

---

와이어프레임

1. 개발해야 하는 기능들

 

로그인 페이지

1) 회원가입 버튼 누르면 회원가입 페이지로 이동

2) 아이디, 비밀번호 바르게 입력시 로그인

3) 아이디, 비밀번호 다르면 아이디 혹은 비밀번호가 일치하지 않습니다.

4) DB만들기 아이디, 비밀번호 (비밀번호는 암호화해서 저장해야함)

 

회원가입 페이지

1) ID 중복 확인, 올바르게 입력 (영+숫자 ID 12자리까지)

2) PW 조건에 맞는지 확인 ( 특수기호, 영문, 숫자 8-20자리)

3) PW 일치 확인 

4) 회원가입 요건 충족시 가입완료 메세지, 로그인 페이지로 이동하기

 

메인페이지

1) 게스트 모드에서는 웹사이트만 보여짐

2) 상단 메뉴에서 클릭시 해당 메뉴로 이동

3) 해당 메뉴에서 맨 위로 버튼 만들기

4) 프로젝트에서 프로젝트 클릭시 커짐 or 사진첩 넘기는 기능 or 비디오 재생 or 하이퍼링크?

5) 블로그, 깃허브 하이퍼링크

6) EDIT 버튼 만들어서 로그인 페이지로 이동 후 로그인 시 에디터 모드로 변환. 플러스 아이콘 추가. 기능구현? 

 

2. API 설계

기능	Method	URL	Request	response
로그인	POST	login	{'id':id, 'pw':pw}
회원가입	POST	membership	{'id':id, 'pw':pw}	가입 완료 메세지
메뉴	GET	menu
EDIT	POST	edits	{'img':img,'comment':comment,'link':link}	수정 데이터
Identify	GET	<string:id>	{}

---

Public Github repo

 

• https://github.com/Taek2yo/About-me

GitHub - Taek2yo/About-me: " 개발자의 성장기를 시각화 하여 담아내는 포트폴리오 웹 사이트. 거쳐온

 

 

주요 키워드! 생각해보기

Jinja2 템플릿 엔진을 이용한 서버사이드 렌더링 (어떤 장점이 있을까?)

 

 

1. Jinja 템플릿 같은 경우에는 html 안에서 파이썬 코드를 작성할 수 있도록 기능을 제공해 줍니다.

 

 

2. 중복된 코드를 줄일 수 있습니다.

템플릿에서 제공하는 기능으로 html 코드의 중복을 줄이고, 반복되는 코드들을 간단하게 표현이 가능 합니다.

 

JWT 인증 방식으로 로그인 구현하기

JWT는 JSON Web Token의 약자로써 세션에 사용자 데이터를 저장하는 전통적인 쿠키 세션 방식과 다르게 json 객체에 사용자 정보의 일부를 담는다.

 

쿠키/세션 방식의 문제점

1.  저장 공간의 용량

세션은 서버의 메모리 내부에 저장이 됩니다. 유저가 한두명일때야 메모리에 무리가 가지 않겠지만 유저가 수천명인 대형 서비스에서는 세션의 양이 많아지는 만큼 메모리에 부하가 걸릴 수 있습니다.

2.  확장성의 문제

서비스의 규모가 커져서 서버를 여러대로 확장 및 분산해야 한다면 세션을 분산시키는 기술을 따로 설계해야 합니다.

 

이를 해결하기 위해 보통 JWT라는 로그인 방식을 도입한다.

1. 추가 저장소 불필요

세션/쿠키는 별도의 저장소 관리가 필요한 반면, jwt는 발급한 후 검증만 하면 되기 때문에 추가 저장소가 필요하지 않습니다. 이는stateless한 서버를 만드는 입장에서는 큰 장점입니다. stateless는 어떠한 별도의 저장소도 사용하지 않는, 즉 상태를 저장하지 않는 것을 의미합니다. 이는 서버를 확장하거나 유지, 보수하는데 유리합니다.

 

2. 뛰어난 확장성

토큰 기반으로 하는 다른 인증 시스템에 접근이 가능합니다. 예를 들어 Facebook으로 로그인, 구글 로그인 등은 모두 토큰을 기반으로 인증을 합니다. 이에 선택적으로 이름이나 이메일 등을 받을 수 있는 권한도 받을 수 있습니다.