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

전체 아티클148

4월이 되서야 하는 프론트엔드 회고 목차· 개발자를 꿈꾸게 해준 회사로의 입사· 엊그제 입사했는데 DAU 2000 이상인 블로그를 리뉴얼하라구요?· 안랩에서의 1년 동안· 신기한 경험들이 많았던 지난 1년들· 세 번의 디프만 그리고 성장의 연속· 회고를 마치며개발자를 꿈꾸게 해준 회사로의 입사안랩에서 자그마치 1년을 넘게 다녔어요. 생각보다 인력 규모도 너무 컸고, 인프라 구조가 너무 방대하다보니 아직도 이해를 못하는 것들 투성입니다. 그래도 지금 제가 개발하고 있는 도메인에는 어느 정도 적응을 하기 시작을 했던 것 같아요. 안랩 안에서도 스타트업 같은 TF에서 새롭게 신설된 팀의 프론트엔드 개발자로 배치받으면서, 여러 도전적인 업무들을 많이 받게 되었어요. 물론 성장을 하고 있는 조직이라 개발이 아니어도 다양한 업무 배분받긴하지만(?) .. 2025. 4. 22.
Vue의 Composable · React의 Custom Hook을 사용하는 이유와 분리 기준 목차· 로직을 Composable · Custom Hook으로 나눠 사용을 하는 이유는 무엇일까?· 그러면 어떤 기준으로 분리를 해요?· Composable · Custom Hook과 유틸함수의 차이는 무엇일까?회사에서 개발을 하다보면 공통된 로직이나 다양한 관심사를 가진 로직이 존재한다면 무의식적으로 쪼개는 버릇이 생겼어요. 몸이 이에 적응되어 어느샌가부터 이유도 모르고 쪼개는 버릇이 생기다보니 근본적으로 어떤 기준으로 관심사 분리를 해야하는지, 그리고 더 근본적으로 가다보니 왜 관심사 분리를 해야할까에 대한 생각들이 들더라구요. 그래서 오늘은 커스텀 훅을 사용하는 이유와 더불어 분리하는 기준에 대해서 한번 복기 차 포스팅을 해보려고 해요.로직을 Composable · Custom Hook으로 나눠 사.. 2025. 4. 17.
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.
우리도 IT 컨퍼런스 한번 열어보자! 목차· 우아콘처럼 멋진 컨퍼런스를 만들어보고싶어!· 디프만에서는 어떤 인사이트들을 제공해줄 수 있을까?· 공통 트랙을 만들어서 아이디어에 대한 길잡이를 제공해주면 어떨까?· 너무 멋진 분들을 초청해버린 썰· 온라인 컨퍼런스 홀을 위한 게더 그라운드 만들기· 모두가 같은 이해 관계 속에서 진행하기 위한 디프콘 가이드 만들기· 디프콘 행사의 본격적인 시작· 디프콘을 마치며  · 과연 성공적이었을까?우아콘처럼 멋진 컨퍼런스를 만들어보고싶어!디프만이라는 IT 커뮤니티 및 연합 동아리에서 두 차례 프론트엔드 개발자로 활동을 하고, 이번년도에는 커뮤니티를 리드하게 되었어요. 리드를 진행하면서 가장 먼저 해보고 싶었던 이벤트는 "디프만 구성원 모두를 위한 컨퍼런스를 열어보는 것" 이었어요. 사실 학생 때 얕은 지식을.. 2025. 2. 10.

티스토리툴바