- TO-DO LIST : 오늘의 할 일 작성
- 배운 내용 요약 정리 :
1. 시간 계산
const calcTime = (timestamp) => { //DB에 입력된 Date객체 값 가져와서
const curTime = new Date().getTime() - 9 * 60 * 60 * 1000; //UTC+9 보정 9시간*60분*60초*1000밀리세컨드
const time = new Date(curTime - timestamp); //현재시각에서 데이터 입력 당시 시각 빼기
const hour = time.getHours(); //데이터 삽입시 부터 흐른 시
const min = time.getMinutes(); // " 흐른 분
const sec = time.getSeconds(); // " 흐른 초
if (hour > 0) return `${hour}시간 전`;
else if (min > 0) return `${min}분 전`;
else if (sec >= 0) return `${sec}초 전`;
else return `방금 전`;
};
2. 이미지 가져오기
//JavaScript
const res = await fetch(`/images/${obj.id}`); //서버에 obj.id를 기준으로 fetch(GET) 요청
const blob = await res.blob(); //return 값을 blob 타입으로 저장 후
const url = URL.createObjectURL(blob); //blob 타입에 대한 url 생성
img.src = url; //img url 지정
#Python
from fastapi import Response
@app.get("/images/{item_id}")
async def get_image(item_id):
cur = con.cursor() # DB에 접근하기 위해 커서 객체 생성
imgae_bytes = cur.execute(
f"""
SELECT image FROM items WHERE id={item_id}
""" # 요청한 아이디와 맞는 이미지 값 가져오기
).fetchone()[0] # 한번 호출할때 하나의 row만 가져와서 [0]은 첫번째 column의 값 가져오기
return Response(content=bytes.fromhex(imgae_bytes))
3. 배열 sort 할때 정렬 순서 지정하는 방법
//기본사용법
const numbers = [4, 2, 5, 1, 3];
numbers.sort(); // 기본적으로는 [1, 2, 3, 4, 5]와 같이 정렬됩니다.
numbers.sort((a, b) => a - b); // [1, 2, 3, 4, 5]// 정수 배열을 오름차순으로 정렬하는 예제
numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]// 정수 배열을 내림차순으로 정렬하는 예제
-----------------------------------------------------
data.sort((a, b) => b.insertAt - a.insertAt).forEach(async (obj) => {....}
//나중에 들어온 시간 값이 기준점으로부터 더 많이 흐른 값이기 때문에 값이 더 큼. 그래서 최신순으로 정렬하도록 내림차순 정렬함4. 숫자를 세자리 단위로 콤마(,) 찍는 방법
숫자.toLocaleString("ko-KR") //한국 기준1. 유저 인증 관련 기초
- 프론트엔드에서 서버로 데이터를 보내는데 해시를 통해 암호화하기
- 받아온 정보를 백엔드에서 DB에 저장하고 저장된 정보를 바탕으로 로그인하기// 어떻게 알려줄까? 상태코드
- 로그인 유지시키기(서버의 stateless 이해하기) // 세션 vs JWT(JSON Web Token)
- 브라우저가 닫혀도 로그인을 유지시키는 방법 // 로컬 스토리지 vs 세션 스토리지
- 유저에 따라 다른 화면 보여주기. 로그인 했을때만 게시글을 쓰거나 수정 등을 할 수 있도록 구현하기
2. 회원가입 흐름
1) 프론트 -> 백엔드 : 회원가입요청
2) 백엔드 : DB에 회원정보 저장
3) 백엔드 : Access Token(JWT) 발급
4) 백엔드 -> 프론트 : 응답 +Access Token
5) 프론트 -> 백엔드 : 데이터 요청 + Access Token
6) 백엔드 : Access Token 검증
7) 백엔드 -> 프론트 : 응답 + 요청 데이터
3. 회원가입 페이지 구현
<form action="/signup" method="POST"> //서버에 아이디와 패스워드를 등록해달라는 요청을 보내는 POST
<div>
<label for="id">아이디</label>
<input type="text" id="id" name="id" />
</div>
<div>
<label for="password">패스워드</label>
<input type="password" id="password" name="password" />
</div>
<div>
<button type="submit">제출하기</button>
</div>
</form>
4. 보안과 암호화
- https://coding.tools/sha256 : 해시 암호화 -> 일방향 암호화라서 복호화 불가능.
5. 암호화 해서 주고 받는 방식 구현
const formData = new FormData(form); //입력 form에서 받아온 내용을 FormData객체로 받아옴
const sha256Password = sha256(formData.get("password")); //받아온 password를 sha256함수를 이용 해시암호화
formData.set("password", sha256Password); //formData에 있는 패스워드를 암호화된 패스워드로 다시 값 설정
if (checkPassword()) { //비밀번호와 비밀번호 확인이 동일한지 체크하는 함수
const res = await fetch("/signup", {
method: "POST",
body: formData,
});# 회원가입
@app.post("/signup")
def signup(id: Annotated[str, Form()], password: Annotated[str, Form()]):
print(id, password)
return "200"
#간단하게 받아온 데이터가 암호화 되는지 print로 확인만 구현
#슈퍼코딩, #1:1관리형부트캠프, #백엔드, #backend, #백엔드공부, #개발공부, #백엔드개발자 #취준일기, #취준기록, #취뽀, #빡공, #HTML/CSS, #javascript, #react , #java, #spring