하수도키의 성장일기

개발일기/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를 설치하고 실행하면 다음과 같은 화면이 나타난다.여기서 보이는 단축키를 살펴보자..

책일기

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

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

책일기

[북리뷰] 기술면접대비 CS전공 핵심요약집

비전공자 출신 개발자로서 항상 CS 지식 부족한게 개발하면서 마음에 걸렸다. 정보처리기사 자격증도 공부해서 취득했지만 역시 시간이 지나면서 벼락치기형식으로 공부한것들이 모두 머리속에서 소멸되었다. 백엔드, DB 관련 지식들은 얼핏 듣긴하지만 실제 작업을 하는 경우가 없어 간단한 지식만 아는 정도다. 최근들어 디자이너보다 백엔드 개발자들과 이야기를 많이 하게 되었는데 이 책이 참 많은 도움이 되었다. 사실 인터넷 검색을 통해 모르는 부분들은 충분히 알 수 있다. 하지만 내가 어떤 영역 어디를 정확히 모르는지에 대한 인지없이 모르는것들이 나올때마다 검색으로 그 부분을 메꾸기에는 너무 많은 시간과 노력이 낭비가 된다. 그에 따른 가지치기 형식으로 계속 모르는것들이 나올텐데 파고 들어가다보면 처음에 검색하고 깨..

책일기

그림으로 이해하는 네트워크와 구조와 기술 리뷰

자바스크립트, 리액트, 뷰 라이브러리, 프레임워크들을 주로 사용하고, 애플리케이션을 만들 때 필요한 것들만 공부하고 사용하고 있습니다. 빨리빨리 결과물을 만들어 내는 세상입니다. ChatGPT, 코파일럿 등 코드를 작성할 때 생산성을 높여주는 도구들이 많이 등장했고, 또 많이 사용하고 있습니다. 덕분인지 모르겠지만 언어의 기초를 배우거나, 네트워크 등 깊게 알지 못해도 개발을 할 수 있습니다. 하지만, 입문자, 초보자, 중급, 고급 경력이 쌓일수록 기초가 중요하게 되는 시점은 반드시 옵니다. 언제 올지는 모르지만 대비는 해야 합니다. 구현에 머물지 않고 성능 최적화, 비용 절감 등을 하기 위해서는 네트워크 공부가 필수입니다. 데브옵스라는 직군이 별도로 존재하지만, 그들과 대화를 원활하게 하기 위해서는 네..

책일기

[북리뷰] 프론트엔드 성능 최적화 가이드 정리(#2)

2023.02.09 - [책일기] - [북리뷰] 프론트엔드 성능 최적화 가이드 정리(#1) [북리뷰] 프론트엔드 성능 최적화 가이드 정리(#1) 크롬 LightHouse Mode와 Categories 항목 값 소개 Mode Navigation: Lighthouse의 기본값으로, 초기 페이지 로딩 시 발생하는 성능 문제를 분석 Timespan: 사용자가 정의한 시간 동안 발생한 성능 문제를 분석 Snapsho hasudoki.tistory.com 이미지 파일 SVG와 같은 벡터이미지가 아닌 비트맵 이미지 포맷들 PNG JPG(JPEG) WebP PNG는 무손실 압축 방식 원본 훼손하지 않고 알파 채널을 지원 알파채널이란 투명도 의미 JPG는 PNG와 다르게 압축 과정에서 정보 손실이 발생 그만큼 이미지를 ..

책일기

[북리뷰] 프론트엔드 성능 최적화 가이드 정리(#1)

크롬 LightHouse Mode와 Categories 항목 값 소개 Mode Navigation: Lighthouse의 기본값으로, 초기 페이지 로딩 시 발생하는 성능 문제를 분석 Timespan: 사용자가 정의한 시간 동안 발생한 성능 문제를 분석 Snapshot: 현재 상태의 성능 문제를 분석 Categories Perfomance: 웹 페이지의 로딩 과정에서 발생하는 성능 문제를 분석 Accessibility: 서비스의 사용자 접근성 문제를 ㅂ누석 Best Practices: 웹사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 두고 분석 SEO: 검색 엔진에서 얼마나 잘 크롤링 되고 검색 결과에 표시되는 분석 Progressive Web App: 서비스 워커와 오프라인 동작 등, PWA와 관련된..

개발일기/Nuxt.js

[Nuxt] Nuxt란? (Nuxt 메인 페이지 분석)

열심히 글 쓴 게 날아가서 후다닥 씁니다... 후아... Nuxt3 정식 배포된 기념으로 튜토리얼 형식으로 공식문서 격파 포스팅! 여기부터 Nuxt 메인 페이지에 있는 내용들 정리(구글 번역, 심각한 수준의 의역) 틀린 거 있으면 알려주세요! https://nuxt.com/ Nuxt: The Intuitive Web Framework Global Maintainers Summit Event 2021 globalmaintainersummit.github.com nuxt.com Nuxt란? 직관적인 웹 프레임워크라고 공식 홈페이지에 대문짝 하게 걸려있다. Build your next Vue.js application with confidence using Nuxt. An open source framewor..

책일기

[북리뷰] 모던 자바스크립트로 배우는 리액트 입문

오랜만에 책 리뷰로 돌아왔습니다. 이번 리뷰는 모던 자바스크립트로 배우는 리액트 입문입니다. 우선 저자가 일본인이다. 자케(오카다 다쿠미)!! 표지 일러스트부터 애니메이션 느낌이 나면서 딱딱한 일반 개발 서적과는 다른 느낌이다. 제목에도 입문이 들어가니 더 쉽고 가볍게 읽을 수 있는 느낌이다. 마지막으로 컬러북이다! 다른 책들과 마찬가지로 모던 자바스크립트(ES6)를 먼저 설명하고 그다음 리액트를 알려준다. 하지만, 다른 점은 표지에 있던 일러스트들의 인물들이 등장한다. 등장인물들이 회사에서 일어나는 에피소드를 바탕으로 공부하게 만든다. 만화책 읽듯이 쉽게 배울 수 있다. 여러 리액트책을 읽어봤지만, 이 책으로 시작한 다음 흥미를 느끼고 더 전문적인 책을 보는 것을 추천한다. 책에서 본 간단하고 이해하기..

책일기

[북리뷰] 혼자 공부하는 컴퓨터구조 + 운영체제

한빛미디어에서를 통해 책을 지원받아 작성한 리뷰입니다. 이번 리뷰할 책은 혼자 공부하는 컴퓨터 구조 + 운영체제입니다. 한빛미디어에서 출시했고 강민철 님이 저자입니다. 이전 리뷰도 혼자 공부하는 시리즈였는데 이번에도 같은 시리즈입니다. 2022.06.25 - [책일기] - [북리뷰] 혼자 공부하는 얄팍한 코딩 지식(비전공자도 1:1 과외하듯 배우는 IT 지식 입문서) [북리뷰] 혼자 공부하는 얄팍한 코딩 지식(비전공자도 1:1 과외하듯 배우는 IT 지식 입문서) 한빛미디어에서를 통해 책을 지원받아 작성한 리뷰입니다. 이번에 리뷰할 책은 혼자 공부하는 얄팍한 코딩 지식(비전공자도 1:1 과외하듯 배우는 IT 지식 입문서)입니다. 한빛미 hasudoki.tistory.com 이 시리즈는 색상이 들어가는 컬러..

책일기

[북리뷰] 혼자 공부하는 얄팍한 코딩 지식(비전공자도 1:1 과외하듯 배우는 IT 지식 입문서)

한빛미디어에서를 통해 책을 지원받아 작성한 리뷰입니다. 이번에 리뷰할 책은 혼자 공부하는 얄팍한 코딩 지식(비전공자도 1:1 과외하듯 배우는 IT 지식 입문서)입니다. 한빛미디에서 출시했고 고현민님이 지은이입니다. 이미 이책 이전에 고현민님의 인프런에 올리신 깃 강의를 통해 미리 접했습니다.(https://www.inflearn.com/course/%EC%A0%9C%EB%8C%80%EB%A1%9C-%ED%8C%8C%EB%8A%94-%EA%B9%83) 강의를 쉽고 정말 재밌게 해주셔서 이번 책도 엄청 기대되면서 보게되었습니다. 전체적으로 한번 보고 나서는 단점이 없었습니다. 그래서 제가 볼때 좋았던 점들을 나열하면서 글을 써보겠습니다. 혼자 공부하는 얄팍한 코딩 지식의 좋았던 점들 1. 가독성이 매우 좋습..