본문 바로가기

전체 글

 (908)
[번역] Vue3 Coding Better Composables : 옵션 객체 파라미터 활용하여 컴포저블 잘 만들기 컴포저블을 잘 활용하여 클린한 Vue3 코드를 작성해 봅시다. 해당 게시물에서는 파라미터를 잘 설계하는 방법을 다룹니다. 컴포저블이란? 상태 저장 로직을 캡슐화하고 재사용하기 위해 Vue Composition API를 활용하는 함수 모든 반응성이 필요한 코드 컴포저블 Vue 3 앱에서 비즈니스 로직을 합성하는 가장 좋은 방법 작은 코드 조각을 함수로 추출하여 반복적으로 쉽게 재사용 코드를 쉽게 작성할 수 있음 코드를 읽기 쉬움 옵션 객체 파라미터 대부분의 컴포저블에는 하나 또는 두 개의 필수 입력이 있습니다. 그런 다음 컴포저블 동작 방식을 설정하는 데 도움이 되는 일련의 선택적 인수가 있습니다. 컴포저블을 구성할 때 긴 인수 목록을 전달하는 대신 옵션 객체를 전달할 수 있습니다. // Using an ..
Vue Router : URL 파라미터 활용하기 Vue Router 라이브러리 사용 시 URL 파라미터를 활용하는 방법을 알아봅니다. (컴포지션 API에 기반하여 설명합니다.) URL에서 쿼리 파라미터 읽기 예를 들어 페이지네이션을 작성할 때 다음과 같은 URL이 있을 수 있습니다. http://example.com/events?page=4 컴포넌트에서 page 쿼리 파라미터에 어떻게 접근할까요? You are on page {{ route.query.page }} URL에서 Path Variables(Page) 읽기 라우터에서 아래와 같이 Path Variable(:page)설정해줌 const routes = [ ... { path: '/events/:page', component: Events }, ] 탬플릿에서 다음과 같이 엑세스 You are ..
Vue3 딥 다이브 : Virtual DOM과 코어 Module 알아보기 뷰 마스터리의 무료 강의를 요악 정리한 내용입니다. 무료 인트로 강의 치고 배울 점이 굉장히 많습니다. https://www.vuemastery.com/courses/vue3-deep-dive-with-evan-you/vue3-overview Vue 3 Overview - Vue 3 Deep Dive with Evan You | Vue Mastery Gregg Pollack introduces how Vue 3's core modules work together, to prep you to dive deep into Vue 3 concepts with Evan You. www.vuemastery.com DOM이란? 브라우저 화면에 보이는 것을 변경하기 위한 프로그래밍 인터페이스. 개발자는 DOM을 통해 ..
[번역] 웹 애플리케이션의 메모리 누수 진단하고 고치기 다음과 같은 화면을 본 적 있나요? 크롬은 위와 같이 해당 페이지에서 메모리 누수가 발생했음을 알려줍니다. 메모리 누수가 뭔가요? 메모리 누수는 자원 할당을 잘못 관리하여 컴퓨터 프로그램이 더 이상 필요하지 않은 메모리를 해제하지 않아 성능 저하를 초래하는 것을 말합니다. 실행되는 동안 지속적으로 더 많은 메모리를 소비합니다. 거의 모든 프로그래밍 언어의 메모리 생명 주기는 메모리를 할당하고, 사용하고, 해제하는 방식으로 작동합니다. JS 메모리 누수가 문제가 되는 이유 스마트폰 출시와 모바일 앱의 확산 이후 웹 개발자는 이에 영감을 받아 웹 페이지를 디자인하고 구성하는 방식을 변경하기 시작했습니다. 오래 전 웹 개발 환경은 Java/JSP, PHP, ASP 및 Ruby와 같은 서버측 기술을 사용하는 M..
[번역] 자바스크립트 디버깅 완벽가이드 Chrome Devtool을 사용한 디버깅 방법을 마스터해 봅니다. 아래 글을 번역한 글입니다 : https://dev.to/atapas/the-definitive-guide-to-javascript-debugging-2021-edition-116n The definitive guide to JavaScript Debugging [2021 Edition] Introduction As developers, we’ve traditionally rooted out errors in our programs (we’ll c... dev.to 들어가며 개발자인 우리는 전통적으로 로그 문을 사용해 프로그램의 오류를 근절했습니다. JavaScript에는 이를 위한 유명한 console.log() 메서드가 있습니다. c..
[타입스크립트] Object vs object vs {} 해당 스택오버플로우 게시물을 보고 요약한 글입니다. https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript Difference between 'object' ,{} and Object in TypeScript Trying to figure out the difference between these 2 types in TypeScript: foo: object and bar: {} and type: Object ? Example: trying to assign an object to the variable that suppose to handle headers stackoverflow.com..
[번역] Rehydration(재수화)의 위험과 문제 해결하기 React의 Rehydration에 대한 놀라운 깨달음 TL; DR 서버사이드 렌더링은 두 가지 관점에서 생각해야 한다. 보편적으로 먼저 만들 수 있는 것들 (상자의 포장) 클라이언트 별로 달라질 수 있는 것들 (상자의 내용물과 유통기한) 재수화시 리액트는 서버 사이드 렌더링 결과와 클라이언트에서 렌더링한 결과가 동일할 것으로 예상한다. 렌더링 로직에 결과가 클라이언트 측, 서버 측에서 다를 수 있는 부분이 들어가 있다면 오류가 발생한다. useHasMount와 같이 클라이언트에서만 동작 가능한 상태 로직을 포함한 훅을 사용하면 된다. next13의 리액트 서버 컴포넌트, 리믹스를 사용하는 것도 하나의 방법이다. next13을 이용하면 코드의 변경을 최소화 / 제거하며 CSR, SSR, ISR 등을 쉽..
[Vue3] 일반적인(intrinsic한) 컴포넌트 만들기 with typescript 리액트를 사용하는 경우 해당 링크의 예제처럼 일반적인 컴포넌트를 만듭니다. 아토믹 디자인을 활용한 디자인 시스템 도입기 카카오엔터테인먼트 FE 기술블로그 fe-developers.kakaoent.com 그런데 Vue3는 아무리 찾아봐도 해당 패턴이 없더라구요? 아마 암시적인 Fallthrough Attribute 기능 때문인 것 같습니다. $attrs 객체는 컴포넌트의 props 또는 emit 옵션(예: 클래스, 스타일, v-on 리스너 등)에 의해 선언되지 않은 모든 속성을 포함합니다. (주 : props 필터링을 통해 서브 컴포넌트의 계층화, 관심사의 분리에도 활용 가능) 해당 $attrs 객체의 typing을 지원한다면, 좀 더 쉽게 구현을 가이드할 수 있지 않을까요? Vue3은 runtime-d..

티스토리툴바