본문 바로가기
반응형

전체 글259

무료 호스팅 추천: Vercel 대안으로 마이크로서비스 0원에 배포하기 유튜브 RSS 생성기 같은 토이 프로젝트, 서버비 아끼는 3가지 방법간단한 기능인데 Vercel 유료 결제는 부담스럽다면?"유튜브 RSS 주소 생성기", "간단한 환율 계산기"처럼 기능이 딱 하나뿐인 마이크로서비스(Microservices)를 여러 개 만들고 싶으신가요? 보통 가장 먼저 떠오르는 건 Vercel입니다. 사용하기 편하고 배포가 빠르기 때문이죠. 하지만 프로젝트가 하나둘 늘어나고 트래픽이 조금씩 생기다 보면, 무료 플랜의 한도(Serverless Function 실행 시간 등)에 걸리거나 상업적 이용 제한 때문에 망설여지게 됩니다. "고작 이런 간단한 기능 때문에 매달 $20를 내야 하나?"이런 고민을 하고 계신 분들을 위해, 2025년 11월 기준 가장 확실하고 비용 효율적인(사실상 0원인.. 2025. 11. 27.
GSAP ScrollTrigger로 만드는 인터랙티브 웹 완전 정복 : 웹사이트에 '애플 감성' 한 스푼 웹사이트를 구경하다 보면, 스크롤을 내릴 때마다 글자가 페이드인 되거나, 이미지가 커지고, 배경색이 부드럽게 바뀌는 '애플(Apple)' 스타일의 웹사이트를 본 적이 있으실 겁니다. "이거 어떻게 만든 거지? CSS만으로는 불가능할 것 같은데..." 맞습니다. 단순 CSS로는 한계가 있고, 바닐라 자바스크립트로 구현하려면 수학 공식을 써가며 스크롤 위치를 계산해야 해서 머리가 터집니다. 이때 등장하는 구세주가 바로 GSAP(GreenSock Animation Platform), 그중에서도 ScrollTrigger 플러그인입니다. 오늘은 프론트엔드 개발자의 필수 스킬, GSAP ScrollTrigger의 기초부터 실전 꿀팁까지 완벽하게 정리해 드립니다. 1. GSAP ScrollTrigger가 뭔가요.. 2025. 11. 23.
그래서 폴더 구조는 어떻게? Custom Hooks로 깔끔하게 정리하기 (완결) 지금까지 우리는 useQuery로 데이터를 가져오고, useMutation으로 수정하고, 캐싱을 이해했습니다. 기능적인 건 다 배웠습니다.하지만 실무 프로젝트는 혼자 만드는 게 아니죠. 컴포넌트마다 axios.get... 주소가 적혀있고, 쿼리 키 문자열('todos')이 여기저기 흩어져 있다면? 유지보수 지옥이 시작됩니다. 이번 글에서는 실무 개발자들이 사용하는 "깔끔한 폴더 구조와 커스텀 훅 패턴"을 전수해 드립니다. 이것만 적용해도 코드가 주니어 티를 벗고 전문가스러워집니다.1. 지금 당신의 코드가 위험한 이유 🚨혹시 컴포넌트 안에 이런 코드가 들어있지 않나요?// ❌ 나쁜 예: 컴포넌트가 너무 많은 일을 함function TodoList() { // 1. API 주소 하드코딩 // 2. 쿼리.. 2025. 11. 23.
사용자를 기다리게 하지 마라! Optimistic Updates(낙관적 업데이트) 구현하기 React Query 기초 시리즈 5편입니다. 이번 편은 조금 어렵지만, 적용하는 순간 여러분의 앱을 '네이티브 앱' 수준의 퀄리티로 끌어올려 줄 비기입니다. 바로 "낙관적 업데이트(Optimistic Updates)"입니다. 이름부터 거창해 보이지만, 원리는 간단합니다. "일단 성공했다고 치자!" 라는 마인드죠.인스타그램에서 '좋아요(❤️)'를 눌러보세요. 인터넷이 느려도 하트가 즉시 빨간색으로 바뀝니다. 서버 응답을 기다리지 않기 때문입니다. 반면, 우리가 만든 앱은 어떤가요? 버튼 클릭 -> (0.5초 멍때림) -> 서버 응답 도착 -> UI 변경. 이 0.5초의 딜레이가 앱을 느리고 답답하게 만듭니다. 오늘은 서버의 허락을 구하지 않고, UI부터 먼저 바꿔버리는 고급 기술을 배워봅시다.1. 낙관.. 2025. 11. 23.
좋아요 눌렀는데 새로고침 해야 하나요? useMutation과 invalidateQueries 이제 데이터를 가져오는 것(Read)은 마스터했습니다. 하지만 앱은 데이터를 보기만 하는 게 아니죠. 글을 쓰고, 수정하고, 지우고, '좋아요'도 눌러야 합니다.이번 글에서는 데이터를 변경(Write)하는 방법과, 변경 후 화면을 자동으로 갱신하는 마법을 배웁니다.시판을 만들었다고 상상해 봅시다. 새 글을 작성하고 '등록' 버튼을 눌렀습니다. DB에는 잘 저장됐는데, 게시글 목록에는 내 글이 안 보입니다. F5(새로고침)를 눌러야만 그제야 나타나죠."아, 사용자가 매번 새로고침을 하게 해야 하나?" 🤦‍♂️아닙니다. React Query의 useMutation과 invalidateQueries 콤보를 쓰면, 등록 버튼을 누르는 순간 목록이 자동으로 '착' 하고 갱신됩니다. 그 원리를 알아봅시다.1. u.. 2025. 11. 23.
왜 자꾸 데이터를 다시 받아와요? staleTime vs gcTime 차이점 종결 초보자가 React Query를 포기하게 만드는 가장 큰 진입 장벽, '캐싱(Caching)의 원리'를 아주 쉽게 풀어드립니다.이 글을 읽고 나면, 더 이상 네트워크 탭을 보며 "왜 또 호출해?!"라고 화내지 않게 될 것입니다.지난 글에서 useQuery로 데이터를 멋지게 가져왔습니다. 그런데 앱을 테스트하다 보니 뭔가 이상합니다."페이지를 갔다가 뒤로 가기 했는데... 왜 또 로딩이 뜨죠?""분명 캐싱된다고 했는데, 왜 API 요청을 계속 보내죠?"이게 다 고장 난 게 아닙니다. React Query가 "너무 부지런해서" 생기는 일입니다. 오늘은 React Query의 핵심 두뇌인 staleTime과 gcTime을 완벽하게 이해해 보겠습니다.1. 사과로 이해하는 데이터의 생애 🍎React Query는.. 2025. 11. 23.
반응형

티스토리툴바