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

전체 아티클151

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.
[톺아보기 시리즈] 리액트 훅을 통해 메모이제이션하기 목차· 메모이제이션이란?· 리액트에서 제공하는 메모이제이션 방법· useCallback과 useMemo와 같은 메모이제이션 훅을 많은 곳에 사용하면 되는거 아니예요?리액트는 컴포넌트 기반 아키텍처를 제공하여 개발자가 재사용 가능한 코드를 작성하고, 이를 통해 보다 편안한 사용자 경험을 제공할 수 있어요. 다른 기술과 마찬가지로 이를 잘 활용한다면 코드를 효율적이고, 사용하기 쉽게 만드는데 도움이 될 수 있어요. 리액트에서는 재사용이라는 강력한 특징을 제공하고 있는데, 이 재사용이 사용되지 않아도 되는 곳에도 재사용이 과도하게 사용되는 거라면 이는 리소스의 낭비로도 이어질 수 있어요. 오히려 비효율적인 방법이 될 수도 있는거죠. 효율적인 재사용을 하기 위해  리액트에서는 내부적으로 성능을 최적화할 수 있도.. 2025. 1. 17.
[톺아보기 시리즈] 낙관적 업데이트에 대해서 알고계세요? 목차· 낙관적 업데이트란?· 좋은 사용성을 위해 낙관적 업데이트를 많이 사용해도 되나요?· 낙관적 업데이트는 어떻게 사용해요?낙관적 업데이트란?낙관적 업데이트는 성공적인 상태 업데이트가 이뤄질거라는 가정 하에 서버 응답 이전에 UI를 미리 업데이트하는 방법을 의미해요, 사용자 요청을 서버가 성공적으로 처리할 것이라고 미리 예상하고, 유저 인터페이스를 즉각적으로 변경하여 사용자에게 빠른 반응을 보여줍니다. 나관적 업데이트의 대표적인 예시로 좋아요 기능을 들 수 있어요. 예를 들어 사용자가 좋아요 버튼을 클릭하면 서버 응답을 기다리지 않고, 화면에 바로 좋아요 클릭에 대한 상태를 보여주는거예요. 서버 응답이 성공적으로 돌아오면 그대로 두고, 혹시나 실패한다면 유저 인터페이스에서 해당 좋아요 상태를 다시 해제.. 2025. 1. 14.
useEffect isLoading · tanstack isLoading · suspenseQuery 의 차이점 목차· useState의 state를 이용한 로딩과 Suspense fallback 로딩의 차이· tanstack useQuery의 isLoading를 이용한 로딩과 useSuspenseQuery를 이용한 Suspense fallback 로딩의 차이useState의 state를 이용한 로딩과 Suspense fallback 로딩의 차이useState의 state를 이용한 로딩 방식Suspense와 기존 로딩 상태 관리 방식은 useEffect와 loading state는 로딩 상태를 관리하는 방식에서 근본적인 차이가 있어요. 기존 방식에서는 데이터를 불러올 때 useEffect 훅을 사용하고, 로딩 상태를 관리하기 위해 loading이라는 별도의 상태 변수를 만들어야 해요. 예를 들어 데이터를 불러오는 .. 2025. 1. 12.

티스토리툴바