[항해99] 웹개발 미니 프로젝트

고정원·2021년 3월 7일

아무튼,프로젝트완성!

목록 보기

1/3

🚩 프로젝트 소개 (Team2)

환경오염을 해결하기 위해 작은 것부터 하나씩 함께 실천해 나가보아요!
#제로웨이스트챌리지 에 참여하는 인스타그램 게시물 중 마음에 드는 게시물을 북마크하여 저장하고, 나는 어떻게 하면 좋을지 더 좋은 아이디어를 생각하여 추가로 메모해 봅니다.

📍 구현한 기능

1. 회원가입

이름, 아이디, 비밀번호 입력 후 회원가입
아이디 중복확인
회원가입 완료 alert → 로그인 페이지로 이동

2. 로그인

아이디, 비밀번호 입력 후 로그인
로그인 완료 alert → 탐색하기 탭으로 이동

3. 모아보기

[탐색하기]탭에서 북마크한 게시물 카드 출력
카드구성 → 북마크한 게시물의 img,게시자ID, 북마크 아이콘, [+]버튼
북마크 아이콘 해제하면
[+]버튼 클릭 → texst area에 추가로 메모 작성하여 '저장' 가능

4. 탐색하기

인스타그램에서 #제로웨이스트 태그가 걸린 게시물 스크래핑해오기
스크래핑한 게시물은 img, 게시자ID, 북마크 아이콘 출력
마우스오버 → 해당 게시물의 설명(게시글) 출력
북마크 아이콘 클릭 → 게시물이 저장되어 [모아보기]탭에서 확인 가능

5. 마이페이지

로그인 한 회원 아이디 출력
프로필 수정 textarea에서 이름과 자기소개 수정
로그아웃

📌 필수 포함 사항을 구현하였는가?

[필수포함사항]
1. 쿠키/세션 방식으로 로그인을 구현하고 → JWT인증방식으로 바꿔보기(등장 배경)
JWT인증방식과 쿠키/세션 대비 JWT의 장점은?
: JWT는 토큰 기반 인증 방식으로 토큰 자체에 유저 정보를 담아서 HTTP 헤더로 전달하기 때문에 유저 세션을 유지할 필요가 없고 가볍게 데이터를 주고 받을 수 있습니다.
세션은 서로의 세션id를비교해서 검증하지만, 토큰은 쿠키 속 토큰의 signature만 검증 하면 되므로 서버에 부하를 주지 않습니다. 서버가 많아도 토큰 검증만 하면 되므로 확장성에 용이합니다.

2. Jinja2템플릿 엔진을 이용한 서버사이드 렌더링 (어떤 장점이 있을까?)
서버사이드 렌더링의 장점은?
: 초기 렌더링 속도가 매우 빠르고, 검색엔진 최적화가 가능합니다.
자바스크립트파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용할 수 있습니다. 서버에서 DB 혹은 API에서 가져온 데이터를 jinja2템플릿 엔진을 이용하면 미리 정의 된 템플릿에 넣어 HTML을 그려줍니다.

🎮 사용한 기술

1. 파이썬
: DB구축과 서버는 Flask를 사용하였다.
2. 셀레니움
: 인스타그램 게시물을 실시간으로 받아오는 것에는 어려움이 있어 범규튜터님의 조언을 듣고, 미리 게시물을 크롤링해서 DB에 저장하였다. 팀원의 설명에 의하면, 인스타그램은 Js로 구축되어 일반적인 bs4방식으로는 크롤링 할 수 없었다. 그래서 셀레니움으로 자동화 봇을 만들어 타겟페이지가 전부 로딩이 되면 bs4를 이용해 크롤링 해주기로 했다.
.find 엘리먼트와 send_keys()함수를 이용해 로그인을 자동화 해주었고 time()함수를 이용해 크롬 로딩으로 인한 지연에 유휴시간을 안배하였다. 이후에는 우선 썸네일 사진과, 현재 로딩된 게시물의 전체 url을 긁어와 url을 사용가능한 url로 재가공 해준뒤 for문을 돌면서 가져온 url 하나 하나 마다 접근해줬다.
그렇게 하나의 게시물에 접근한뒤 bs4로 긁어오고 time으로 시간안배를 해주고 다음 게시물로 넘어가는 식으로 db를 구축 했다.
3. JWT토큰
: 로그인방식 구현
4. jinja2
: jinja2를 기반으로 서버사이드렌더링으로 작성했다.