하수도키의 성장일기

책일기

[북리뷰] 요즘 개발자를 위한 시스템 설계 수업 - 기초 개념부터 X·인스타그램·구글 독스·넷플릭스 사례 학습과 면접 대비까지

출판에서 도서를 제공받았음 개발 관련 커뮤니티, 카카오톡 오픈 채팅 개발방에서 자주 이야기가 나온 책이다.이미 구매해 놓은 책들 다 읽고 나면 구매하려고 준비 중에 있는 상태에서 좋은 기회가 찾아왔다. 요즘 들어, 프론트엔드 개발 영역보다 더 깊은 영역을 공부하고 알아보고 싶은 욕구가 많아졌다.최근 네트워크 책을 봤고 이어서 이 책을 보니 개념들이 머릿속에서 정리됐다. 시스템 설계를 실제로 해본 적이 없고 대신 책에 나오는 개념들은 꾸준하게 공부하고 접했던 탓에 책을 다행히 어느 정도 이해 할 수 있었다. 책에 있는 내용을 그대로 가져왔다. 이 책은 다음 세 가지 핵심 주제를 중심으로 구성되어 있다.시스템 설계의 기본 개념과 원칙현대 분산 시스템에서 사용되는 핵심 구성 요소와 기술실제 시스템 설계 사례와..

책일기

[북 리뷰] 객체지향 시스템 디자인 원칙

출판사에서 도서를 제공받았음 객체 지향 디자인에 대한 책은 이미 많이 나온 상태였지만,이 책은 약 200페이지 정도 되는 분량이므로 객체 지향에 대해 정리하기에 딱 좋았다. 이 책은 객체지향 디자인을 두 가지 구체적인 각도에서 탐구한다.시스템의 복잡도가 급격히 증가하는 것을 방지하는 방법과 이 정도면 충분한 디자인을 이루는 방법을 알려준다. 객체지향 디자인 시스템 원칙에서는 디자인 복잡성을 제어할 수 있도록 도와주는 원칙들을 제시한다.다시 말해, 디자인을 단순하게 유지한다는 것이다.작은 코드 단위일관성 있는 객체적절한 의존성 관리좋은 추상화올바르게 처리된 인프라잘 모듈화된 디자인일관성 있는 객체 대상 독자들은 초급자가 아닌 클래스, 다형성, 인터페이스 같은 객체지향 개념에 대한 기본적인 지식을 갖춰야 한..

책일기

[북 리뷰] 나만의 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의 높이가 화면의..