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

전체 아티클188

블로그를 이전하고 있어요 https://slashpage.com/timmy 홈 - 悠悠自適유유자적하게 포스팅하는 삼평동 연구원slashpage.com 티스토리에도 글을 작성을 계속 하고 있지만, 서서히 새로운 블로그로 옮겨가고자 합니다!이미 너무 구식으로 변해버린 글들도 존재하고, 타입스크립트 관련 글은 레퍼런스로 참조되어 많이 유입이 되곤 하지만연차가 쌓이면서 새로운 지식들을 또 새로운 공간의 느낌으로 담아보려고 해요, 괜찮으시다면 앞으로는 위에 블로그로 와주시면 좋을 것 같아요-! 2025. 12. 3.
웹 아키텍쳐는 어떻게 구성되어있을까? 목차· 글을 시작하며· 웹이 어떻게 서빙될까?· 번외 : 그러면 로컬 환경은 어떤 방식으로 찾아가는거지?· 글을 마치며글을 시작하며요 근래에는 프론트엔드 뿐만 아니라 백엔드, 인프라 등 전반적인 아키텍쳐를 배우는 것이 너무나도 즐겁다. 풀스택 개발도 한번 해보고싶어서 풀스택을 공부하면서, 웹 아키텍쳐를 복습하고 공부해보면 자연스레 내가 배워야할 길잡이 역할도 해줄 수 있을거라고 생각이 되어 한번 웹 아키텍쳐에 대해 공부를 진행해보았다.웹이 어떻게 서빙 될까?1. 브라우저는 캐싱된 DNS 기록들을 확인하고, IP 주소가 있는지 확인한다.인터넷에 있는 모든 URL들에는 고유 IP들이 존재한다. 이 IP 주소를 통해서 해당 웹사이트를 호스팅하고 있는 서버 컴퓨터에 접근할 수 있다. 이때 DNS(Domain N.. 2025. 11. 26.
tanstack query · 비즈니스 로직 글을 시작하며위협 인텔리전스 플랫폼을 개발하면서 점점 사용자이 늘어가며, 요구사항도 많이 늘어나고 있다. 그 중에 하나가 대시보드를 사용자가 알맞게 커스텀할 수 있는 기능이 필요했는데, HTTP 1.1 환경에서는 Promise가 동시에 6개까지 통신이 가능하기 때문에 이를 Lazy 하게 로딩을 해야할지 순차적으로 로딩을 해야할지 고민을 하고 있었다. 그 과정에서 매번 위젯을 볼 때마다 서버와 통신을 하는 것이 아닌 프론트엔드에서도 데이터 캐싱 처리를 통해 조금 더 효율적인 데이터 관리를 하고자 했고, tanstack-query 도입을 시작했다. tanstack-query를 사용하면 생각보다 리패치를 한다거나 캐싱에 관련된 부분들을 건드려야되는 경우가 있는데 (ex. gcTime이나 staleTime을 어.. 2025. 11. 19.
당장 타입 시스템을 도입해야된다면 @ts-check를 사용해보세요 글을 시작하며사내 일부 프로젝트에서는 타입스크립트를 사용하고 있지만, 위협 인텔리전스 플랫폼의 서비스는 자바스크립트로 이루어져있다. 자바스크립트에서 점점 프로젝트가 커지면 커질수록 코드 추적이나, 함수의 매개변수가 어떤 것들이 있는지 파악하기 어려워진다는 특징이 있는데 이 때문에 타입 정의에 대한 중요성이 상당히 크게 느껴졌다. 아마 이 포스팅은 기존 자바스크립트의 JSDOC을 활발하게 사용하고 있는 조직이나, 타입스크립트를 점진적으로 도입하고 있는 조직들에게 도움이 될만한 포스팅이라고 생각이 든다.자바스크립트의 타입 체킹에 대한 중요성이 왜 커지고 있을까?서비스가 성장하면 성장할수록 코드는 방대해지고, 또 기능이 많아질수록 의존되는 코드 또한 많아지기 마련이다. 이때 한 개발자가 여러 기능의 코드를 모.. 2025. 11. 19.
TPM (Technical Program Manager)이란? 목차· 글을 시작하며· TPM (Technical Program Manager)란?· 여러 매니저의 역할이 존재하는데 어떤 차이가 있을까?· TPM (Technical Program Manager)가 되기 위해서 필요한 역량글을 시작하며프론트엔드 개발자로 일을 하면서 최근에 넥스트 스탭에 대한 고민이 많이 생기는 시점이 다가왔어요. 인프라 구조에 대한 욕심도 생겼고, 또 어찌되었든 백엔드에 관련된 지식도 함양된 개발자가 되고자 어찌되었든 전반적인 하나의 프로덕트 사이클을 온전히 공감하고 이해하고 싶었어요. 그렇게 매니저가 될지 · 스태프 엔지니어로의 길 중 여러 대외활동과 협업 경험을 하면서 소통 중심의 프로젝트에 너무나도 재미있는 순간들이 많았기 때문에 매니저가 되고 싶다는 생각을 했어요. 그러다 우연.. 2025. 10. 30.
Copliot Context를 잘 사용하기 위한 방법들 목차· 글을 시작하며· Prompt (.prompt.md)· Custom Instruction· Copliot 기반 페어 프로그래밍을 활용해보아요글을 시작하며Copilot을 잘 사용하기 위해서는 Context를 잘 활용하는 법이 중요한데, AI는 주어진 맥락을 기반으로 동작하기 때문에 조금 더 다양한 맥락을 제공하는 것이 중요해요. Context를 위해 맞춤 설정으로 크게 세가지가 존재하는데 이때 copilot-instructions, instruction, prompt가 존재해요.copilot-instruction.md : 루트 레벨 규칙을 선언해 모든 챗 요청에 자동으로 포함되는 일반적인 코딩 규칙을 설정할 수 있다.*.instruction.md : 특정 작업이나 파일 형식에만 사용되는 코딩 규칙을 .. 2025. 10. 30.
Object.entries와 Object.fromEntries의 차이 Object.entries()는 정말 많이 사용을 해보았지만, Object.fromEntries()는 생각보다 많이 사용을 해보지 않아 이번 기회에 비교를 하고자 이렇게 포스팅을 하게 되었어요. Object.entries()와 Object.fromEntries()는 서로 상반되는 동작을 하는 메서드예요. Object.entries()는 객체를 배열로 변경해주고, Object.fromEntries()는 배열로 객체로 변경해줘요.Object.entries()먼저 Object.entries()를 활용한 예제를 확인해볼게요, Object.entries는 객체의 키-값 쌍을 배열 형태로 변환해줘요.const user = { name: 'hyeonwoo', age: 28 };const entries = Object.. 2025. 10. 23.
가변 폰트를 조금 더 효율적으로 사용하기 목차· 폰트 굵기를 변경하면 레이아웃이 변한다?· 일반 폰트와 가변 폰트의 차이· 어떻게 가변 폰트로 해결할 수 있을까?폰트 굵기를 변경하면 레이아웃이 변한다?탭과 같은 레이아웃에서 폰트 굵기를 변경하게 되면 일부 레이아웃이 움직이는 현상을 볼 수 있어요. 이를 해결하기 위해 해당 폰트 사이즈를 조금 더 넉넉히 부여를 하여 폰트 굵기가 변경되어도 다른 레이아웃에 영향이 없도록 설계를 했었는데, 이게 정말 좋은 방법일까 라는 생각을 했어요. 그러다 가변 폰트는 단순히 폰트의 다양성만을 제공할까라는 의문을 품었고, 가변 폰트를 통해 레이아웃의 변화를 최소화하면서 폰트 굵기를 변경할 수 있다는 점을 알게되었어요.일반 폰트와 가변 폰트의 차이일반 폰트는 굵기(weight), 폭(width), 기울기(slant).. 2025. 10. 20.
사내 백오피스 디자인 시스템 만들기 목차· 디자인 시스템이란?· 디자인 시스템의 주요 아젠다 및 장점· 디자인 시스템의 구성요소· 백오피스에서 왜 커스텀 컴포넌트를 만들기 시작했어요?· 스토리 북이란?· 결과물디자인 시스템이란?디자인 시스템이란 제품이나 서비스의 디자인과 개발에 사용되는 일관된 원칙, 규칙, 재사용 가능한 컴포넌트, 패턴 등을 모아 놓은 체계적인 시스템을 의미해요.디자인 시스템을 통해 디자이너와 개발팀은 통일된 기준을 유지하며 작업할 수 있고, 사용자는 브랜드 전반에 걸쳐 일관된 사용자 경험을 얻을 수 있어요.주요 고성 요소로는 컬러, 타이포그래피, 아이콘, 간격과 같은 기초적인 요소(파운데이션)와 버튼, 텍스트 필드 같은 재사용 가능한 컴포넌트, 그리고 이 컴포넌트들을 조합한 패턴 등이 있어요.디자인 시스템의 주요 아젠다.. 2025. 10. 5.

티스토리툴바