오늘은 AWS의 CloudFront를 사용하다가 소액이긴 하지만과금됐던 경험이 있어 다른 사람들도 나와 같은 실수를 하지 않았으면 해서 경험을 공유하려고 한다. 📕1. 문제 발생 동기들과 여행을 위해 버스 타고 가고 있었는데,갑자기 메일로 해외결제가 발생해서 급하게 메일을 들어갔더니아마존에서 약 3천 원이 결제된 것을 확인할 수 있었다. 나는 AWS의 1년 짜리 프리티어를 사용 중이고프리티어에 해당하는 S3랑 CloudFront만 사용 중이었기 때문에 과금될 일이 없었다. 물론 프리티어의 할당량을 초과했을 수도 있지만,배포한 사이트는 아무에게도 노출되지 않았을 것이기에누군가 악의적으로 테러하지 않는 이상 할당량을 넘기지 않았을 것이라 생각했다. 깜짝 놀라서 AWS 홈페이지에 들어가 비용이 발생한 부..
오늘은 Tailwind CSS를 사용하면서 반응형 디자인을 적용했던 방법을 공유해보려 한다. 기존의 CSS에서 반응형을 구현하려면 @media와 같은 미디어 쿼리를 사용해서 코드량이 증가하게 되는데,Tailwind CSS는 자체적으로 Breakpoint prefix를 제공해서 반응형 디자인을 수월하게 구현할 수 있다. 테일윈드 CSS에서는 기본적으로 sm, md, lg, xl, 2xl와 같이 5개의 prefix를 제공하는 것을 알 수 있다.'sm'의 경우 가로너비가 640px 이상인 경우를,'lg'의 경우 1024px 이상인 경우를 의미한다.그리고 아무 접두사도 붙이지 않는 경우 전체 너비에 적용된다. 위의 코드를 예시로 들면,기본적으로 w-16을 적용하고md, 즉 가로가 768px 이상일 때는 w-..
어제 낮부터 오늘 새벽까지 문제를 해결하기 위해 삽질했던 경험을 소개해보려고 한다.같은 문제로 고생하는 사람들의 시간을 줄여주는데 도움이 되면 좋겠다. 📕 1. 문제 발견 그동안 취업 준비를 하며 틈틈이 페어로 진행했던 토이 프로젝트가 어느 정도 완성되어서 배포를 하게 됐다.Next.js를 사용해 개발을 진행했기에 넥스트에 친화적인 Vercel을 이용해 배포를 진행했는데,배포를 하고 보니 로컬에선 엄청 빠르게 렌더링 되던 이미지들이배포 환경에서는 최초로 이미지를 불러올 때 3초씩 걸리는 문제가 발생했다. 최초 1회만 불러오는 데 느리고, 그 이후부터는 캐시된 이미지를 사용하기 때문에 빠르긴 했으나로컬에서는 멀쩡하다가 배포하고 난 뒤에 이런 현상이 발생한 것에 대해 의문이 생겨 해결하고자 몇 시간을 쏟아..
오늘은 사이드 프로젝트 구현 중, useRef를 활용하여 동적으로 움직이는 랜딩 페이지를 구현한 경험을 공유하려고 한다.useRef에 대해서는 이전에 작성한 게시글을 참고하면 좋을 것 같다.2024.04.29 - [🎬Project] - [React] useRef 훅에 대해 이해하기 ( + useState와 let과의 차이점 ) [React] useRef 훅에 대해 이해하기 ( + useState와 let과의 차이점 )리액트를 사용해 개발을 하다 보면, 'useState' 나 'useEffect' 같은 훅을 많이 사용하게 된다.하지만 저 둘에 비해 'useRef' 훅은 자주 사용하지 않았었는데이번에 동적인 랜딩 페이지를 구현하면서 사soondububu.tistory.com 📕 1. 랜딩 페이지를 구현하..
리액트를 사용해 개발을 하다 보면, 'useState' 나 'useEffect' 같은 훅을 많이 사용하게 된다.하지만 저 둘에 비해 'useRef' 훅은 자주 사용하지 않았었는데이번에 동적인 랜딩 페이지를 구현하면서 사용하게 되었다.사용해 본 김에 확실히 정리하여 다음번에 사용할 때 안 까먹기 위해 글로써 정리해보려 한다. 📕 1. useRef 란? 리액트 공식문서에 따르면, useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React 훅이라고 설명되어 있다.여기서 "렌더링에 필요하지 않은 값"이 무슨 말인지 내가 이해한 방식대로 설명해 보겠다. 예를 들어 + 버튼을 누르면 숫자가 1씩 증가하는 버튼이 있다고 상상해 보자.이 버튼을 눌렀을 때 사용자가 1씩 증가하는 것을 직접적으로 확인할 수..
오늘은 사이드 프로젝트를 진행하다가 발견한 'API Key값 노출 문제'를 해결해 본 경험을 기록해보려고 한다. 📕 1. 문제 발견 현재 진행 중인 사이드 프로젝트에서 챗봇 기능이 필요해, OpenAI의 API를 이용하여 간단한 '챗봇'을 만들어보았다. 챗봇 모델을 직접 구현하는 것도 아니고 이미 존재하는 API를 사용하여 설계하면 되는 거라 금방 구현에 성공했으나 이렇게 OpenAI API를 사용하여 클라이언트와 OpenAI가 직접적으로 통신하고 나면, 아래 스크린 샷처럼 개발자 도구의 네트워크 창에 Request URL과 API KEY값이 노출되는 문제를 발견했다. [ Request URL 노출 ] [ API KEY값 노출 ] 리퀘스트 헤더를 나타내는 이 부분에서 Authorization을 살펴보면 ..
오늘은 사이드 프로젝트를 진행하며 만났던 '이미지 렌더링 이슈'를 AWS S3와 next/image를 사용한 이미지 최적화 방식으로 해결해 본 경험을 설명해보려고 한다. 📕 1. 문제 발생 사이드 프로젝트를 진행하는 과정에서 위의 사진처럼 간단한 테스트들을 토대로 사용자들에게 음식 메뉴를 추천해 주는 기능을 구현했다. 하지만 왼쪽 사진에서 오른쪽 사진으로 넘어갈 때, 질문이 먼저 바뀌고, 이미지는 살짝 늦게 바뀌는 현상이 발생했다. 서비스를 이용하는 데는 큰 지장은 없지만 사용자 입장에서는 렉처럼 보여 UX가 저하될 수도 있겠다는 생각이 들어 이 문제를 해결하기 위해 많은 고민을 했다. 📕 2. 문제 원인 기존의 내가 구현한 방식에서는 테스트에 관한 질문과 답변, 그리고 이미지 URL들을 최초 렌더링시에..
📕0. 글을 쓰기에 앞서 : SSAFY 공통, 특화 프로젝트 그리고 신한은행에서 진행한 해커톤 대회. 무려 3번의 프로젝트에서 모두 PWA를 사용했기 때문에 한 번쯤은 글로 정리해보고 싶었다. 📕1. PWA, 프로그래시브 웹 앱이란? : HTML, CSS, 자바스크립트(JavaScript)와 같은 웹 기술로 만드는 앱 📕2. PWA를 쓰는 이유 • 네이티브 언어를 따로 배울 필요 없이 기존에 사용하던 언어로 개발 가능. : 어플을 만들기 위해서 안드로이드는 코틀린, ios는 스위프트라는 다른 언어를 배워야 하지만, PWA는 기존에 사용하던 언어로 개발이 가능하다는 장점이 있음. • 다양한 앱스토어에 출시하기 위해서 복잡한 프로세스를 거치지 않아도 된다. : 이 점에서 구글이나 애플에게 앱 중개 수수료를 ..
