솔직히 말해서 2024는 매일같이 "내가 이 정도인 건 아닌데, 이것보다 더 잘할 수 있는데"라는 생각을 했던 해였던 것 같다. 올해를 요약하자면 아래와 같다.Jen-Feb: 공모전 참여24년도의 첫 시작이자 마지막 겨울 방학은 내내 GDSC에서 진행하는 프로젝트인 Google Solution Challenge 2024를 위한 개발을 하면서 모든 시간을 보냈다. 사실 이 프로젝트는 내가 진행했던 것 중 가장 독특한 프로젝트가 아닌가 한다. Wearable 기기, 그것도 AI를 적용한 프로젝트를 진행한 게 처음이었기 때문에 재미도 있었고 정말 예상치 못한 어려움도 있었다. 또한 구글이 요구하는 빡빡한 조건들을 모두 맞춰서 프로젝트 개요를 쓰느라 정말 힘들기도 했고, 프로젝트 기획서를 제대로 써보는 소중한 ..

Refresh Token을 왜 구현해야 하는가?우리는 일반적으로 한번 로그인한 사이트에서는 어느 정도 계속 로그인이 유지되길 바란다. 특히 자주 방문하는 웹사이트를 매번 로그인해야 한다면 정말 번거로운 일이 된다. 하지만 이를 위해서 Access Token의 유효기간을 매우 길게 설정한다면, 악의적인 공격자가 이 Access Token을 탈취해서 사용할 수 있는 위험성이 커진다.이를 해결하기 위해서 Access Token 자체의 유효기간은 짧게 설정(예: 한 시간)하되, Access Token이 expired될 경우 로그인 없이 새롭게 발급받을 수 있게 도와주는 토큰이 Refresh Token이다. Refresh Token은 더 긴 유효기간을 가지고 있으며, (예: 일주일) 이 유효기간 동안 Expire..

Presigned URL이란?일반적으로 사진과 같은 미디어는 S3 버킷으로 업로드되고, 해당 사진의 엔드포인트(url)만 RDB에 저장된다. 이때 사진 파일은 굉장히 많은 트래픽을 소모하므로, 프론트엔드→백엔드→ S3로 전달하는 것보다 프론트엔드→S3로 전달하는 것이 더 효율적이다. 또한 이미지를 조회할 때도 S3→백엔드→프론트엔드보다는 S3→프론트엔드로 전달하는 게 서버의 과부화를 막을 수 있다.여기서 문제는 AWS 리소스인 S3에 접근하기 위해서는 엑세스 키처럼 권한이 필요한데, 이 키를 프론트엔드가 직접 사용할 수는 없다는 것이다. 프론트엔드는 사용자가 접근 가능한 영역이므로, 프론트엔드에 키를 줄 경우 유출 문제가 생길 수 있다.이 문제를 해결하기 위해서 사용하는 것이 바로 presigned ur..

Tailwind CSS란?HTML와 CSS 파일을 별도로 두지 않고, HTML 코드 내에서 관리할 수 있도록 돕는다. 또한, 클래스 명에 대해서 고민할 필요가 없기 개발할 수 있도록 돕는다. 이게 가능한 이유는 Tailwind CSS 내부에 이미 정의된 유틸리티 클래스가 있는 Utility-First Fundamentals이기 때문이다. dark: 를 통해서 다크모드에 대한 스타일링 정의를 할 수 있고, md:등의 수식어로 빠르게 반응형을 만들 수도 있다. first-child, last-child, required, invalid, disabled 등의 다양한 수식어 또한 적용 가능하다.Tailwind CSS 설치하기난 패키지 매니저로 pnpm을 사용하고 있기 때문에 다음과 같이 설치해주었다. 여기서 ..

시나리오가비아로 구매한 도메인을 버셀로 배포된 프론트와 EC2에 배포된 백과 연결하려고 한다. 이때 프론트는 www.도메인.com의 서브 도메인일 때, 백은 api.도메인.com의 서브 도메인일 때 전달되어야 한다. 또한, 버셀에서는 http로 API 연결하는 게 불가능하므로 백은 https로 배포되어야 한다. 그림으로 따지자면 아래와 같은 상황이 된다.작업 0: 도메인 발급 및 배포가비아에서 도메인 구매, 버셀에서 프론트 배포, 그리고 EC2에 백 배포는 이미 되어 있다고 가정한다.작업 1: Route53 생성먼저 Route53을 생성해야 한다. Route53은 클라우드 도메인 이름 시스템(DNS) 서비스로, 도메인 이름을 AWS 내부/외부 서비스로 매핑하기 위해서 사용된다. Route53에서 호스팅 ..