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

전체 아티클145

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.
우리도 IT 컨퍼런스 한번 열어보자! 목차· 우아콘처럼 멋진 컨퍼런스를 만들어보고싶어!· 디프만에서는 어떤 인사이트들을 제공해줄 수 있을까?· 공통 트랙을 만들어서 아이디어에 대한 길잡이를 제공해주면 어떨까?· 너무 멋진 분들을 초청해버린 썰· 온라인 컨퍼런스 홀을 위한 게더 그라운드 만들기· 모두가 같은 이해 관계 속에서 진행하기 위한 디프콘 가이드 만들기· 디프콘 행사의 본격적인 시작· 디프콘을 마치며  · 과연 성공적이었을까?우아콘처럼 멋진 컨퍼런스를 만들어보고싶어!디프만이라는 IT 커뮤니티 및 연합 동아리에서 두 차례 프론트엔드 개발자로 활동을 하고, 이번년도에는 커뮤니티를 리드하게 되었어요. 리드를 진행하면서 가장 먼저 해보고 싶었던 이벤트는 "디프만 구성원 모두를 위한 컨퍼런스를 열어보는 것" 이었어요. 사실 학생 때 얕은 지식을.. 2025. 2. 10.
[톺아보기 시리즈] 타입스크립트의 타입과 인터페이스 차이 목차· interface에 대해 알아보아요· type에 대해 알아보아요타입을 정의하는 방법에는 크게 interface · type 정의 방법이 있어요.내가 현재 사용하고 있는 inferface 또는 type이 어떤 특징들을 가지고 사용하고 계신지 알고 계신가요?interface에 대해 알아보아요interface는 객체의 형태를 확장하는데 용이한 반면에 type은 튜플, 인터섹션, 유니온 등을 이용하여 더 복잡한 타입 정의 및 조합을 표현하는데 용이해요. interface는 선언 병합을 지원하여 여러 번 선언을 할 수 있는데, 주로 객체 타입을 확장할 때 유리해요. 동일한 이름을 가진 interface를 여러 번 선언하면, 이 속성들이 자동으로 합쳐져요.interface Person { age: numbe.. 2025. 2. 3.
[톺아보기 시리즈] getElementById, getElementsByClassName, querySelector, querySelectorAll 목차· document.getElementById· document.getElementsByClassName· document.querySelector· document.querySelectorAll· 전체적으로 비교해보기· 언제 사용을 하면 좋을까요?이 네가지 모두 DOM에서 특정 요소를 선택하는 방법을 의미하지만, 동작 방식과 반환 값이 모두 사소한 차이점을 가지고 있어요.document.getElementById기능· 특정 id 값을 가진 요소 하나를 가져와요반환 값· Element 또는 null특징· 가장 빠른 선택 방법 (ID는 문서에서 유일해야하므로 빠름)· 항상 단일 요소만 반환· ID가 존재하지 않으면 null 반환const element = document.getElementById("m.. 2025. 1. 30.
[톺아보기 시리즈] 컴파운드 패턴 써보셨어요? 목차· 컴파운드 패턴이란?· 컴파운드 패턴과 일반 방식 비교해보기· 컴파운드 패턴을 언제 사용할 수 있을까?컴파운드 패턴이란?컴파운드 패턴은 React에서 관련된 여러 개의 컴포넌트를 조합하여 하나의 컴포넌트처럼 사용하는 패턴이에요. 이 패턴을 사용하면 구성 요소 간의 결합도를 낮추면서도 유연한 API를 제공할 수 있어요. 대표적인 예시로 태그 내부의 을 사용하는 것처럼, 여러 컴포넌트가 자연스럽게 조합될 수 있도록 설계하는 패턴인거죠. 컴파운드 패턴의 핵심 개념은 아래와 같아요. 1. 컨테이너 (Component Container)· 부모 컴포넌트가 자식 컴포넌트의 상태를 관리해요2. 자식 컴포넌트 (Compound Components)· 컨테이너의 상태를 활용하여 개별적으로 동작해요3. Contex.. 2025. 1. 30.

티스토리툴바