본문 바로가기
안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요.

전체 아티클146

T 복기하기 보호되어 있는 글 입니다. 2025. 4. 5.
vue3에서 pinia를 선호하는 이유는 무엇일까? 목차· 시작하며· pinia와 vuex의 차이점· pinia와 vuex의 실제 사용 사례시작하며pinia와 vuex는 vue에서 상태 관리를 위해 사용되는 라이브러리예요, vuex는 vue의 공식 상태 관리 라이브러리로 오랫동안 사용되어져 왔지만, vue3 도입 이후 pinia가 새롭게 등장하면서 많은 개발자들이 pinia를 선호하게 되었어요. vuex에서 pinia로 전환하게 된 주요 이유는 아래와 같아요. · 간결한 API : 더 간결하고, 직관적인 API를 제공해요. 이를 통해 개발자는 상태 관리를 더 쉽게 이해하고 사용할 수 있어요.· 타입스크립트 지원 : 타입스크립트를 더 잘 지원해요. 타입 안정성을 높여주고, 타입스크립트를 사용하는 개발자들에게 더 좋은 경험을 제공할 수 있어요.· 성능 : 성.. 2025. 3. 27.
AbortController로 비동기 웹 요청을 부분적으로 제어하기 목차· AbortController 사용해보기· AbortController로 fetch 취소해보기· AbortSignal.timeout· AbortController로 cleanup 함수를 한번에 처리할 수 있다고?프론트엔드 개발에서는 서버와 통신하기 위해 비동기 웹 요청을 사용해요. 하지만 비동기 웹 요청은 응답 시간과 결과 값을 예측하기 어렵기도 하고, 사이드 이펙트를 발생시키는 제어하기 힘든 요소 중 하나이기도 합니다. 이때 AbortController 객체를 사용하면 이러한 비동기 웹 요청을 부분적으로 제어할 수 있어요. AbortController는 브라우저 Web API로 비동기 웹 요청을 중단할 수 있는 기능을 제공해요. 응답 시간이 오래 걸리거나, 응답이 더 이상 필요하지 않은 경우 요청.. 2025. 3. 18.
다른 사람들도 쉽게 알 수 있게 노드 버전을 세팅해보세요 목차· nvm 설치로 노드 버전 관리 간소화하기· .nvmrc로 프로젝트 노드 버전 관리하기· windows 환경에서 .nvmrc 세팅 시 주의할 점항상 사이드 프로젝트에 중간 합류를 하게 되면 개발 환경 세팅으로 인해 골머리를 앓는 경우가 있는데요, 이때 개발자의 글로벌 노드 버젼과 프로젝트 자체의 노드 버젼이 달라서 프로젝트가 실행되지 않는 경우가 있는데 프로젝트를 생성한 사람에게 노드 버젼을 물어보는 경우가 생겨요. 프로젝트에서 버전 문제가 발생하여 실행을 못한다거나, 일부 라이브러리를 사용하지 못했던 경험이 있으시지 않으신가요? 예전 리액트 프로젝트를 처음 접했을 때, 시니어 개발자 분이 .nvmrc 파일을 계속 생성하시는 것을 보고 "저 파일은 대체 뭘까.." 라는 생각을 했었는데, 실제로 여러.. 2025. 3. 16.
N 복기하기 보호되어 있는 글 입니다. 2025. 3. 8.
브라우저 또는 다른 탭에서 동일한 데이터로 동기화하기 사용자가 탭을 전환하거나 페이지 가시성이 변경된 경우, 동일한 세션의 사용자가 있다고 가정을 해보아요.사용자가 A와 B의 브라우저 또는 탭을 동시에 켜놓았을 때 A의 브라우저 서비스의 데이터를 업데이트 할 경우, B로 접근할 때 새로고침을 하지 않는 이상 동기화된 데이터를 얻을 수 없어요. 이 경우, 만약 사용자가 데이터를 혼동하여 기존 B 데이터를 이용하여 전체 데이터를 수정하고 업데이트 하는 경우에는 잘못된 데이터 동기화 현상이 발생하게 됩니다. 이러한 상황을 방지하고자 사용자가 탭을 전환하거나 페이지 가시성이 변경된 후 다시 페이지로 돌아왔을 때 최신화된 데이터를 확인하고 싶거나, 혹은 서로 다른 브라우저에서 동일한 데이터를 동기화해서 확인하고 싶을 때 아래와 같은 윈도우 이벤트를 사용하여 동기화 .. 2025. 3. 8.

티스토리툴바