팀 프로젝트 02 : 인스타 클론 코딩 3일차

팀 프로젝트 - 인스타그램 클론 코딩 3일차

 

 

- 현재까지 진행 결과

 

- 완료된 기능

• 레이아웃 완성
• 마우스 호버 기능
• 게시된 글 모달 창 기능

 

- 마우스 호버 기능 .css 파일

.hover_text {
    visibility: hidden;

    position: absolute;
    top: 40%;
    left: 35%;
    }

.mypage_post:hover {
    filter: brightness(50%);
    opacity: 0.7;
    }

.mypage_post:hover .hover_text {
    visibility: visible;
    }

• .hover_text 는 게시글에 마우스를 올리기만 했을때  나타날 이모티콘 text div 이다. 마우스 커서가 없을때는 보이지 않아야하므로 visibility: hidden 을 사용하여 평소에는 보이지 않게했다. 또한 이미지와 겹쳐져셔 떠야했기에 position: absolute를 사용했다.
• .mypage_post:hover 는 .mypage_post 인 div에 hover 했을때의 속성을 준다. filter: brightness()로 그림자 효과를 주고 밝기를 나타내므로 괄호안에 숫자가 작을수록 어두워진다.
• opacity : 요소의 투명도를 결정한다. 기본값은 1.0 이고 0.0~1.0 사이의 값이 들어간다. hover했을때 뒤에있을 게시글의 사진도 보여주기 위해 투명도를 주었다.
• .mypage_post:hover .hover_text : .mypage_post 인 div에 hover 했을때, .hover_text 의 속성이다. visibility: visibility로 보이게한다. 

 

 

- 추가할 기능

• 현재 로그인된 유저의 데이터 받아오기
• 게시글 댓글달기 기능

 

 

++ 프로젝트를 진행하며 추가로 배운것들 (주말을 이용해 더 깊게 알아봐야 한다.)

 

해시함수

 

알고리즘의 한 종류로서 임의의 데이터를 입력 받아 항상 고정된 길이의 임의의 값으로 변환해주는 함수를 말한다. 동일한 입력값은 항상 같은 결과값이 나오고, 입력값은 조금이라도 달라지면 완전히 다른 값이 나오게 됩니다. 그리고 결과값을 통해 입력값을 알아내는 것이 불가능하다는 특징이 있다.   * 해시함수 SHA256은 어떤 길이의 입력값을 넣어도 항상 256바이트의 결과값이 나온다.

 

import hashlib

해쉬함수를 사용하기 위해선 임포트 되어있어야 한다.

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

pw_receive 변수로 받은 값을 sha256인코딩하여 hex값으로 만들어서 암호화 하는것이라고 한다.

 

 

 

HTTP 요청 

 

클라이언트가 서버로 보내는 이진 데이터 패킷이다. http 요청의 구조는 

1. 요청 라인 : 요청 URL과 http 프로토콜 방법

2. 요청에 0개 이상의 요청 헤더 : 요청에 대한 추가 정보

3. 요청의 선택적 본문(body) : 서보에 필요한 추가 정보 (JSON, XML)

 

 

JWT

 

Json Web Token의 약자로 Json 객체를 사용해 정보를 안정성있게 전달하는 웹표준이다. 쉽게는 인증에 필요한 정보들을 암호화시킨 토큰으로 사이트에 접속한 사용자가 어떤 사용자인지 구분하기 위한 사이트만의 신분증 역할 이라고 보면 된다.