하수도키의 성장일기

책일기

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

이 포스팅은 제이펍 서평 이벤트에 당첨되어, 책을 제공받아 작성된 서평입니다. 책을 받자마자 인상 깊게 눈에 딱 들어온 표지, 바로 공룡이다.제이펍 도서 설명에 가보면 "거대 괴수가 되어버린 자바스크립트 웹 개발로부터 살아남는 방법"이라는 설명이 있다. 프론트엔드 개발하면서 처음에는 한 페이지로 시작되었다가 점점 페이지가 추가되고, 기능이 추가되면서 스파게티 코드가 되는 경우가 많다.그럴 경우 대부분, 성능 저하 및 유지보수에 어려움을 느꼈다. 이 책을 위와 같은 어려움을 이해하고 극복하는 방법을 전반적으로 다루고 있다. 그리고 다음으로 인상 깊었던 건 에디 오스마니(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를 설치하고 실행하면 다음과 같은 화면이 나타난다.여기서 보이는 단축키를 살펴보자..

책일기

[북 리뷰] 타입스크립트 교과서

이 포스팅은 길벗 출판사로부터 무료로 제공받은 책을 읽고 본인의 솔직한 생각과 평가를 기록한 것임을 밝힙니다. 현재 프론트엔드 개발자 채용 공고를 보면 리액트와 더불어 타입스크립트는 필수로 적혀져 있다. 타입스크립트는 간단히 설명하자면 자바스크립트에 타입 구문이 추가된 언어이다. 타입스크립트 사용하는 이유는 타입스크립트 공식사이트에서 참고해서 간략히 설명하겠다. 자바스크립트로 만드는 프로그램의 규모가 점점 커지고, 방대한 코드를 타입 없이 작성하려니 타입 관련 오류, 오타가 많이 발생했다. 타입스크립트를 사용함에 따라 오류, 오타를 줄이고 프로그램 안정성과 더불어 생산성도 증가 시키는 목적이다. 타입스크립트 여러 책을 읽었지만, 대부분 번역책이어서 역시 개발 번역 퀄리티와 기초부터 알려주거나, 가독성이 ..