본문 바로가기

Front22

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.
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.
코드분할(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.
[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.
Hydrate 이해하기 Hydrate Server Side 단에서 렌더링 된, 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤 클라이언트 단에서 HTML 코드와 JS 코드를 서로 매칭시키는 과정 1. Write site in React 2. Create build for production using ReactDOMServer, a server-side React API to generate HTML from React. 3. On Initial Load HTML generated from the server is displayed 4. ReactDOM.hydrate(), hydrates the HTML page rendered from the server with JavaScript 이 과정을 이해하기 위해 Reac.. 2021. 10. 20.

티스토리툴바