본문 바로가기

프로젝트

(11)
[JWT] 토큰 인증을 제대로 설계해보자 KDT 최종 프로젝트를 진행할 때 회원 인증에 대해서 피드백을 받았을 때, 어째서 리프레시 토큰을 쿠키에 저장하는지, 액세스 토큰을 발급할 때마다 새로운 리프레시 토큰을 생성하는지에 대해서 멘토님께 설명드리지 못했습니다.그 때의 아쉬움이 남아서 같은 상황이 생기면 더 좋은 답변을 할 수 있도록 글을 작성했습니다.1. 리프레시 토큰을 사용하는 이유만약에 직원이 출입증을 잃어버렸다면 다음 절차가 이루어질 것입니다.먼저, 출입증을 재발급하고 기존에 사용하던 출입증은 정지해야 합니다.데이터베이스에 정지할 토큰을 기록하는 방법이 있지만, 이는 JWT의 이점을 흐리게 만듭니다.그래서 일반적으로 토큰의 유효기간을 짧게 설정하여 탈취당하더라도 공격자가 이용할 수 있는 시간을 제한합니다.하지만, 유효기간이 짧은 액세스 ..
[WebRTC] 이용하기 쉬운 화상 채팅 경험 제공하기 국비 교육 최종 프로젝트를 진행하면서 비디오 채팅 기능을 개발했습니다.이번 글은 비디오 채팅을 구현하기 위해서 사용한 WebRTC에 대해서 정리하고자 작성하게 되었습니다.1. WebRTC란 무엇인가요?WebRTC는 웹 브라우저 간에 실시간으로 음성과 영상 통화를 가능하게 해주는 기술입니다.별도의 플러그인이나 소프트웨어 없이 브라우저끼리 데이터를 주고 받을 수 있도록 합니다. 2. WebRTC의 구성요소2-1. 시그널링 서버시그널링 서버는 브라우저의 P2P 연결을 위해 메타데이터를 교환하는 서버입니다.SDP라는 프로토콜 정보를 전달해서 미디어 형식이나 코덱 등을 협상하고, ICE 후보를 교환해서 네트워크 정보를 교환합니다.2-2. STUN 서버공유기 등의 NAT 환경에 있는 클라이언트는 일반적으로 사설 I..
[CORS] 내 요청은 왜 차단될까? 이번 달에 진행한 프로젝트를 Glitch를 이용해서 배포했습니다.한 번에 프론트와 API 연동이 되면 좋았겠지만 혼란스럽게도 CORS 에러가 발생했습니다.오늘은 CORS가 무엇이고 왜 중요한지, 그리고 이것을 어떻게 해결했는지 알아보겠습니다.1. Origin이란 무엇인가?CORS를 이해하려면 먼저 Origin의 개념부터 알아야 합니다.웹에서 Origin은 세 가지 요소로 구성됩니다.프로토콜(http, https)호스트(도메인 이름)포트 번호같은 Origin인지 판단하려면 이 세 가지가 모두 같아야 합니다.예를 들어:https://example.com:3000http://example.com:3000위 두 URL은 프로토콜이 다르기 때문에 서로 다른 Origin으로 간주됩니다. 2. CORS는 왜 사용하는..
[What To Do] JWT 인가 미들웨어 제작하기 우리 팀은 애플리케이션에 로그인한 사용자만 추가 기능을 사용할 수 있도록 개발하고 싶었습니다.그러기 위해서는 인가 방식을 선택해야 했습니다.팀에서는 세션과 JWT 중 하나로 구현하자고 의견이 좁혀졌고,준비한 서버가 없는만큼 서버의 역할부담을 덜고 싶어, JWT를 최종적으로 채택하게 되었습니다.토큰 발급토큰은 구글의 OAuth 2.0을 통해 얻은 이메일을 데이터베이스에 생성하거나 이미 존재하면 생성합니다.const jwt = require('jsonwebtoken');const payload = { id: user.id};const options = { subject: 'user', expiresIn: '1h', issuer: process.env.JWT_ISSUER};const token = jw..
[서점 프로젝트] SQL Error [1701] 해결하기 주문 API가 배송 정보 입력, 주문 상품 입력 등을 하나의 트랜잭션으로 처리하지 않아,중간에 주문이 실패해도 데이터의 일관성이 유지되지 않았습니다.올바른 테스트를 위해 데이터베이스의 데이터를 수동으로 삭제하던 중 다음과 같은 에러를 만났습니다.❗ 원인메시지에서 외래키 제약 조건에서 참조된 테이블을 TRUCATE 할 수 없다고 안내하고 있습니다. ❗ 해결 방법TRUNCATE를 할 때 외래키 제약 조건을 해제하는 방법으로 문제를 해결할 수 있습니다.-- 외래키 비활성화SET FOREING_KEY_CHECKS = 0;-- 삭제 명령TRUNCATE order_item-- 외래키 활성화SET FOREIGN_KEY_CHECKS = 1;반드시 외래키 제약 조건을 다시 활성화하는 것을 잊지 말아야 합니다.비슷한 문제..
[서점 프로젝트] 서브 쿼리를 이용한 평점 업데이트 사용자는 책을 구매하고 그에 대한 별점을 남길 수 있습니다.별점이 남겨질 때마다 책의 평점은 변화합니다.오늘은 별점의 평균을 구해줄 서브 쿼리에 대해서 이야기해보겠습니다.🐸 서브 쿼리간단하게 설명하자면 쿼리 안에 있는 쿼리를 의미합니다.서브 쿼리는 괄호 안에 넣어서 작성하며메인 쿼리의 컬럼을 사용할 수 있습니다. 🐸 서브 쿼리의 위치서브 쿼리는 다양한 위치에서 사용할 수 있습니다.하지만 FROM 절에서 사용할 때는 AS 예약어를 사용해서 별칭을 주어야 합니다.SELECTFROMWHEREHAVINGORDER BYVALUESUPDATE 🐸 적용 예시책의 평점을 수정하는 쿼리는 간단합니다.UPDATE book SET rating = 평점 WHERE id = 1;이 평점을 우리는 서브 쿼리로 만들 수 있습..
[서점 프로젝트] Offset 페이지네이션 서비스가 커질수록 도서 데이터는 엄청 증가할 것입니다.도서 전체를 요청하면 대량의 데이터를 보내느라 서비스가 느려지는 것도 불가피해집니다.데이터의 용량을 나누기 위해서 페이지네이션을 구현하고자 하였습니다.페이지네이션에는 Offset과 Cursor 두 방법이 있습니다.이번에는 원하는 페이지를 바로 볼 수 있고 정렬에 유리한 Offset을 선택했습니다.📃 LIMIT, OFFSET기본적으로 테이블에서 제한된 양의 데이터를 출력하고 싶다면 LIMIT을 사용합니다.SELECT * FROM 테이블명 LIMIT 5; -- 가장 첫 데이터부터 5개를 출력 데이터가 시작하는 위치를 정하고 싶다면 OFFSET을 사용합니다.SELECT * FROM 테이블명 LIMIT 5 OFFSET 0; -- 0(처음)부터 데이터 5개 ..
[서점 프로젝트] 줄거리 설명 컬럼의 자료형 고민 도서 정보를 관리하는 테이블을 만들다가 고민이 생겼습니다.책의 줄거리를 설명하는 컬럼은 그 수가 1000자가 넘어가기도 합니다.찾아보니까 표현할 수 있는 방법이 VARCHAR뿐만 아니라 TEXT도 있었습니다."왜 VARCHAR로도 표현이 가능한데 TEXT가 있을까?"최대 열 사이즈공식 문서에서는 MySQL 테이블은 65535 바이트까지 행 크기를 제한한다고 나와있습니다.큰 크기의 varchar 자료형을 남발하다보면 이 제한에 금방 도달하게 됩니다.그렇다면 text 타입으로 선언하면 어떨까요?text 타입을 여러 번 선언해도 에러가 발생하지 않습니다.이 객체는 Large Object라는 별도의 영역에 저장되고 행에는 주소값만 포함되기 때문입니다. 메모리 버퍼MySQL 엔진은 메모리 포인터를 이용해서 데이터..