본문 바로가기

전체 글56

Vue 3 Teleport 이해하기 🎯 Teleport가 해결하는 근본적인 문제Vue 3의 Teleport는 단순한 편의 기능이 아닙니다. 모던 웹 개발에서 가장 까다로운 문제 중 하나인 컴포넌트 계층구조와 DOM 구조의 불일치를 우아하게 해결하는 혁신적인 솔루션입니다.모달, 툴팁, 드롭다운, 토스트 알림 등을 구현할 때 겪는 z-index 지옥, CSS 상속 문제, 스크롤 이슈들을 한 번에 해결할 수 있습니다. 이 포스팅에서는 Teleport의 내부 동작 원리부터 고급 활용 패턴까지, 실무에서 마주치는 모든 시나리오를 완벽하게 다룹니다.📋 목차Teleport의 핵심 개념과 동작 원리기본 사용법과 실무 적용고급 패턴: 조건부 Teleport와 동적 타겟모달 시스템 완전 구현툴팁과 드롭다운 고급 활용Teleport와 애니메이션 통합성능 .. 2025. 8. 11.
Next.js 14 Server Actions 이해하기 Next.js 14 Server Actions 풀스택 개발의 새로운 패러다임Next.js 14에서 정식 출시된 Server Actions는 React 서버 컴포넌트와 함께 풀스택 웹 개발의 패러다임을 완전히 바꾸고 있습니다. 기존의 API Routes를 대체하여 서버 사이드 로직을 컴포넌트 내부에서 직접 실행할 수 있게 해주는 이 혁신적인 기능에 대해 실무에 바로 적용할 수 있는 완벽한 가이드를 제공합니다.Server Actions는 단순히 새로운 기능을 넘어서, 개발자 경험(DX) 향상과 성능 최적화를 동시에 달성할 수 있는 게임 체인저입니다. 이 포스팅을 통해 Next.js 14의 핵심 기능을 마스터하고 현대적인 풀스택 애플리케이션을 구축해보세요.📋 목차Server Actions 기본 개념과 동작 .. 2025. 8. 8.
🚀 Claude Code /compact 고급 활용 가이드 2025.08.07 - [AI] - Claude 토큰 절약 완전 가이드 💰 Claude 토큰 절약 완전 가이드 💰Claude API를 사용하다 보면 토큰 사용량이 예상보다 높아서 비용 부담을 느끼는 경우가 많습니다. 이 글에서는 Claude 토큰을 효율적으로 사용하여 비용을 절약할 수 있는 실용적인 방법들을 정리sihus.tistory.com이전 토큰 절약 가이드에 이어서, 조금 더 상세하게 Compact를 활용하는 방법에 대한 포스팅입니다.부제 : 토큰 효율과 생산성을 동시에 잡는 법 Claude Code를 쓰다 보면, 대화가 길어지고 컨텍스트가 쌓이면서 모델의 이해도가 떨어지거나 응답 속도가 느려지는 경험을 하게 됩니다. 이럴 때 /compact 명령은 필수 무기입니다.이번 글에서는 /compac.. 2025. 8. 8.
Claude 토큰 절약 완전 가이드 💰 Claude API를 사용하다 보면 토큰 사용량이 예상보다 높아서 비용 부담을 느끼는 경우가 많습니다. 이 글에서는 Claude 토큰을 효율적으로 사용하여 비용을 절약할 수 있는 실용적인 방법들을 정리했습니다.토큰의 기본 이해토큰이란?토큰은 텍스트를 처리하기 위한 최소 단위로, 대략적으로 영어 단어의 3/4 정도, 한국어의 경우 2-3글자 정도에 해당합니다. Claude는 입력(input)과 출력(output) 토큰 모두에 대해 요금을 부과합니다.비용 구조 이해하기입력 토큰: 사용자가 Claude에게 보내는 모든 텍스트출력 토큰: Claude가 생성하는 응답 텍스트일반적으로 출력 토큰이 입력 토큰보다 더 비쌉니다1. 프롬프트 최적화 전략간결하고 명확한 프롬프트 작성❌ 나쁜 예:"안녕하세요 Claude! .. 2025. 8. 7.
Nuxt.js 이해하기 웹 개발 환경이 급속도로 발전하면서, 개발자들은 더 나은 사용자 경험과 개발자 경험을 동시에 만족시킬 수 있는 도구를 찾고 있습니다. Vue.js 생태계에서 이러한 요구를 완벽하게 충족시켜주는 것이 바로 Nuxt.js입니다.Nuxt.js는 단순한 프레임워크를 넘어서 현대 웹 개발의 복잡성을 추상화하고, 개발자가 비즈니스 로직에만 집중할 수 있도록 도와주는 메타 프레임워크입니다. 이 포스팅에서는 Nuxt.js의 모든 것을 깊이 있게 다뤄보겠습니다. Nuxt.js는 2016년 Sébastien Chopin과 Alexandre Chopin 형제에 의해 시작되었습니다.React 생태계의 Next.js에서 영감을 받았지만, Vue.js의 철학과 생태계에 맞게 독자적으로 발전해왔습니다. As the web deve.. 2025. 8. 6.
2025년, 아직도 CommonJS vs ES Modules를 비교해야 할까? 자바스크립트 개발을 하다 보면 한 번쯤은 마주치는 질문이죠."CommonJS랑 ES Modules 중에 뭘 써야 하지?" 사실 저도 이런 질문을 받으면"음... 둘 다 알아야 하는데..."라고 애매하게 답했던 적이 많습니다. 하지만 2025년 현재 상황을 보면, 답은 이미 정해져 있습니다.ES Modules가 승리했어요. 다만 현실은 그렇게 단순하지 않죠. 답은 정해졌지만 현실은 복잡해결론부터 말하면:새 프로젝트는 ES Modules로 시작하세요기존 프로젝트는 마이그레이션 계획을 세우세요하지만 당분간은 둘 다 알아야 합니다현재 상황: ES Modules가 압도적 우세 🏆 ES Modules의 승리 요인들프레임워크와 도구들의 선택React, Vue, Angular, Svelte 모두 ES Modules .. 2025. 8. 5.
[AWS EC2 인스턴스 모니터링] Node Exporter, Prometheus, Grafana (1) 이번 포스팅은 사내 모니터링 서비스 구축하며 삽질하며 겪은 경험을 공유하는 포스팅입니다. AWS EC2에서 제공하는 CloudWatch 모니터링 서비스의 비용이 부담되기 때문에 Node Exporter + Prometheus + Grafana 조합으로 EC2 인스턴스의 Health Check가 가능한 시각화 대시보드를 구성합니다. > AWS Instance Terminal sudo apt-get update wget https://github.com/prometheus/prometheus/releases/download/v2.37.0/prometheus-2.37.0.linux-amd64.tar.gz wget https://github.com/prometheus/node_exporter/releases/d.. 2022. 11. 8.
[알고리즘] 개미수열 (읽고 말하기 수열) 설명 개미수열이란, 읽고 말하기 수열 개미수열 우리나라에서는 소설 '개미'에서 소개되면서 유명해졌기 때문에 "개미 수열" 이란 이름으로 알려져 있다. 1, 11, 12, 1121, 122111, 112213, .... 이 수열은 앞의 수를 연속된 같은 수의 개수로 묶어서 읽는 방식이다. 예를 들면, - 1을 1이 1개 : 11 - 11을 1이 2개 : 12 - 12를 1이 1개 2가 1개 : 1121 - 1121을 1이 2개 2가 1개 1이 1개 : 122111 - ... 성질 - 22로 시작한 수열은 22, 22, 22, ... 로 길이가 더이상 늘어나지 않는다. - 수열에서 1, 2, 3이 아닌 수는 등장하지 않는다 개미수열과 비슷한 원리를 가진 알고리즘으로는 반복 길이 부호화(Run-length e.. 2022. 10. 6.
코드분할(Code Spliting) / 동적로딩(React.Lazy, Suspense) / 에러바운더리(Error Boundary) 프로젝트가 빌드업됨에 따라 많은 로직들과 Import 라이브러리들이 증가하게 마련이고 우리는 렌더링 최적화를 고민해야하는 시점과 마주하게 된다. 백엔드에서 진행할 수 있는 API 최적화와 별게로 프론트엔드에서도 최적화 할 수 있는 만큼은 진행하는 것이 더 좋은 사용자 경험을 제공한다. 하지만 웹서비스라는 것은 사용자가 어느정도 페이지 로딩이 지연되어도 알게모르게 이해하고 넘어가는 유저들이 많다. 이 정도 기다림 쯤이야.. (본인 포함...) 하지만 그 기다림에도 한계가 분명 있기 때문에 우리들은 개선을 해야한다. 프론트엔드 성능 측정 도구로 크롬 Lighthouse를 통해 성능지표를 확인한다. SSR 방식이 아닌 서비스는 번들링 된 자바스크립트 파일의 분할을 권고한다. 리액트에서는 Lazy, Suspen.. 2022. 9. 28.
[번역] useMemo, useCallback 제대로 알기 리액트 개발을 하다보면 useMemo, useCallback 이 두 가지 훅 사용에 대한 혼란을 겪을때가 있다. 이 포스팅은 이 훅들에 대해 정확히 알아 이 혼란을 줄이기 위해 번역하였다. 썸네일 제너레이터 - Thumbnail Generator useMemo useMemo의 기능은 렌더링 사이에서 계산된 값을 기억 하는 것이다. 리액트가 하는 주된 일은 UI를 어플리케이션 상태와 동기화 하는 것이고 이를 수행하는데 사용하는 도구가 리렌더링 이다. 각 리렌더링은 상태를 기반으로 하여 주어진 순간에 어플리케이션의 UI가 어떻게 보여야 하는지에 대한 스냅샷(*) 찍는다. *스냅샷 : 사진으로 비유하자면 각 사진은 모든 상태 변수에 대해 특정 값이 주어졌을 때, 사물이 어떻게 보이는지 포착하는 것 각 리렌더링.. 2022. 9. 23.
VanilaJS로 SPA 개발해보기 (No Framework) 프레임워크 없이 순수 바닐라JS로 SPA(Single Page Application)을 개발해보자. 포스팅 된 프로젝트는 아래 깃헙(github)에서 확인하실 수 있습니다. https://github.com/awesome-sh/vanila-spa GitHub - awesome-sh/vanila-spa: Vanila JS Single Page Application (No Framework) Vanila JS Single Page Application (No Framework). Contribute to awesome-sh/vanila-spa development by creating an account on GitHub. github.com 주요 기능 SPA의 주요 특징 중 하나가 Routing 처리라고 .. 2022. 2. 15.
썸네일 생성기 (Thumbnail Generator) 블로그 등 썸네일이 필요할 때 웹에서 간단하게 썸네일을 만들 수 있도록 도와주는 웹서비스입니다. 크기, 텍스트, 배경 설정 3가지 기본적인 기능을 제공합니다. 빌드업을 통해 추가기능 업데이트 예정입니다. 기술스택 : React 17.0.x 상태관리 : Context API - 썸네일 생성기 바로가기 https://thumbnail-generator-bay.vercel.app/ Awesome Thumbnail Generator - Blog Post, Etc. thumbnail-generator-bay.vercel.app 크기 설정 텍스트 설정 크기 / 자간 / 굵기 / 색상 / 글꼴을 설정할 수 있습니다 배경 설정 단색, 그라디언트, 이미지업로드를 통해 배경을 설정할 수 있습니다 드래그 앤 드랍 텍스트 항.. 2022. 2. 8.
[Next.js] getStaticProps, getServerSideProps SG / SSR의 개념 SG : Static Generation SSR : Server Side Rendering Next는 브라우저 렌더링 시, 기본적으로 Pre-rendering(사전렌더링)을 한다 Pre-rendering이란, 각 페이지들을 사전에 미리 HTML 문서로 생성하여 가지고 있는 것이다. 이 말을 리액트와 비교해 보자면 아래와 같다. 리액트에서 CSR 방식은 번들링 된 JS 가 클라이언트 단에서 모든 렌더링을 담당했다. 하지만, Next의 Pre-rendering 시스템에서는 `빌드타임(Build Time)` 에서 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해서 가지고 있다가 서버로 해당페이지에 대한 요청이 들어올 때 알맞은 페이지를 반환해준다. No Pre-Rendering,.. 2022. 1. 19.
트리 쉐이킹 (Tree Shaking) 이란 무엇인가 트리 쉐이킹 (Tree Shaking) 사용하지 않는 코드를 제거하는 방식을 말한다. (Rollup, Webpack에서도 찾아볼 수 있다) 나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 Tree-shaking 이라고 명명하였다고 한다. 트리 쉐이킹을 적용할 지점을 찾아보자 사용하는 모듈로부터 전체를 Import 하지 않고 사용하는 기능만 {} 부분적으로 Import 한다. import utils from 'utils-lib' let count = 0; const handlePlus = (a) => { count += a }; utils.parseResult(handlePlus(5)); // '현재까지 누적된 카운트는 : (a)' 누적값 앞뒤로 스트링 메시지가 감싸져 리턴값을 돌려주는 utils.p.. 2022. 1. 12.

티스토리툴바