하수도키의 성장일기

책일기

[북 리뷰] 나만의 MCP 서버 만들기 with 커서 AI

하코사 책 서평 이벤트에 당첨되어 쓴 후기입니다. MCP가 나온지 꽤 되었지만 실제로 사용하지는 않았다.사용해야지 해야지 생각만 하고 VSCODE에서 MCP제공될때 시도만 해놓고 손 놓고 있는 상태였다. 서평 이벤트에 당첨되어 MCP를 알아보고 사용해봤다. VSCode, Github Copilot, ChatGPT 조합으로 꾸준히 사용중이다.Cursor 초기에 사용했는데 VSCode 설정 그대로 가져와서 세팅을 했는데 완벽하게 가져오지 못해서 초기에 세팅하다 사용하진 않았다.GPT보다 Claude가 좋다고 이야기는 많이 들었지만 GPT도 만족스러워 바꿀 생각은 하지 못했다. 책에서는 Cursor, Claude 조합으로 설명을 해서 덕분에 설치 후 사용해보았다.현재 VSCode 환경 그대로 Cursor로 잘..

책일기

[북 리뷰] 대규모 리액트 웹 앱 개발(확장 가능한 대규모 자바스크립트 웹 애플리케이션을 구축하는 방법 )

이 포스팅은 제이펍 서평 이벤트에 당첨되어, 책을 제공받아 작성된 서평입니다. 책을 받자마자 인상 깊게 눈에 딱 들어온 표지, 바로 공룡이다.제이펍 도서 설명에 가보면 "거대 괴수가 되어버린 자바스크립트 웹 개발로부터 살아남는 방법"이라는 설명이 있다. 프론트엔드 개발하면서 처음에는 한 페이지로 시작되었다가 점점 페이지가 추가되고, 기능이 추가되면서 스파게티 코드가 되는 경우가 많다.그럴 경우 대부분, 성능 저하 및 유지보수에 어려움을 느꼈다. 이 책을 위와 같은 어려움을 이해하고 극복하는 방법을 전반적으로 다루고 있다. 그리고 다음으로 인상 깊었던 건 에디 오스마니(Addy Osmani)라는 저자이다.잘 모르지만 자바스크립트 관련 책, 포스팅이나 구글 검색하다가 자주 봤던 이름이다.  책도 많이 쓰셨고..

개발일기/CSS

[CSS] 상단 고정, 하단 고정, 컨텐츠 스크롤 구현(Flex)

작업을 하다 보면 상단 고정, 가운데 영역차지하면서 Y축 스크롤 동작, 하단 고정하는 레이아웃을 만들어야 할 때가 종종 있다.이럴 때마다 바쁘면 기존 코드 또는 구글링, ChatGPT에게 물어보면서 어찌어찌 구현은 한다.같이 딸려오는 수많은 알 수 없는 스타일 또는 HTML 구조랑 같이.... 그래서 이번 포스팅은 제목 그대로 깔끔하게 구현 하고자 한다. 요구 사항1. 헤더 고정, 푸터 고정, 메인 영역 Y축 스크롤2. 메인 영역 공간은 항상 남은 공간을 다 차지3. 메인 영역이 넘칠 경우에만 스크롤 생기게 작업 설계전체 영역을 감싸주는 div요소 안에 header, main, footer로 구성할 예정전체 영역 높이를 설정하는 height: 100vh; 고정된 레이아웃 보장wrapper의 높이가 화면의..

개발일기/VSCode

[VSCode] 확장 프로그램 추천 - Toggle JS & TS inlayHints (타입 체크 가능 마우스 움직이는 시간 단축 가능)

VSCode에서 JetBrains IDE의 InlayHints 기능을 사용할 수 있습니다. 이 기능을 알기 전에는 그 용어도 몰랐고, 웹스톰과 인텔리제이에서 이 기능을 보면서 “와, 타입이 나오네, 부럽다…“라고 생각만 했습니다. 정확히 어떻게 알게 되었는지는 기억나지 않지만, 유튜브 영상을 보다가 알게 되었을지도 모릅니다. 어쨌든 이 기능을 알게 되어 기쁩니다. 생각해 보니 현재는 사용하고 있지 않지만, 코드량이 많아지면서 익숙하지 않아 빨리 껐던 것 같습니다. 이번에 다시 사용해보려고 합니다.  Toggle JS & TS inlayHints 설치 방법Toggle JS & TS inlayHints 확장 프로그램을 설치합니다.InlayHints로 검색하면 여러 확장 프로그램이 나오는데, Javascrip..

개발일기/VSCode

[VSCode] 기초 살펴보기 #1 - 기본 단축키(필수 단축키)

VSCode(Visual Studio Code) 단축키 살펴보기 #1 (기본 단축키) VSCode란?VSCode는 마이크로소프트에서 개발한 소스 코드 편집기이다. 오픈소스이며, 무료로 사용할 수 있다. VSCode는 Windows, macOS, 리눅스 용으로 제공된다. 또한, 다양한 언어를 지원하며, 확장 기능을 통해 다양한 기능을 추가할 수 있다.VSCode 설치하기VSCode 다운로드VSCode 실행 후 나오는 화면에 단축키 살펴보기VSCode를 설치하고 실행하면 다음과 같은 화면이 나타난다.여기서 보이는 단축키를 살펴보자. 첫 화면에서 보이는 단축키이므로 가장 중요하고 많이 사용하는 단축키들이니 꼭 숙지하자.VSCode를 설치하고 실행하면 다음과 같은 화면이 나타난다.여기서 보이는 단축키를 살펴보자..