Monorepo모노레포(monorepo)는 여러 개의 프로젝트를 하나의 저장소에서 관리하는 방식입니다. 일반적으로는 프로젝트마다 저장소를 따로 가져가는 식으로, 멀티레포(multirepo) 방식으로 개발을 했습니다. 모노레포는 하나의 저장소에서 여러개의 프로젝트를 관리하기 때문에, 코드 재사용성이 높아져서 코드 중복을 줄일 수 있습니다. 무조건 모노레포가 좋은것은 아니지만, 중복된 코드가 많다면 고려해보는 것이 좋습니다. 단점으로는 규모가 커져 복잡해보일 수 있고, 프로젝트마다 다른 의존성 버전을 사용하는 경우, 충돌 가능성도 발생할 수 있습니다. TuborepoTurborepo는 vercel에서 개발했으며, 모노레포를 관리하기 위해 사용합니다. 모노레포 프로젝트를 구성할 때 Lerna, Turborep..

object-fit이미지를 특정 영역에 채우려고 할때 사용할 수 있는 속성 중 object-fit이 있습니다. object-fit에는 3가지 값을 넣을 수 있는데, fill, cover, contain이 있습니다. fill, cover, containfill: 세로 길이를 늘려서 특정 영역을 채움. 특정 영역에 맞게 채우다보니 이미지 비율이 달라짐cover: 이미지가 잘리더라도, 이미지가 늘어나지 않고 영역을 채움cotain: 이미지 비율을 유지하고, 이미지도 잘리지 않고 영역을 채움 See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

레이아웃을 구성할 때 float을 사용하곤 합니다. 본 글에서는 float를 이용하여, 블록(block) 요소를 좌우로 배치하는 방법에 대해 소개합니다. float 속성현재는 flex나 grid를 사용하여 레이아웃을 많이 구성하지만, 이전에는 float를 이용하여 레이아웃을 많이 구성했습니다. float는 요소를 띄워서 값으로 left, right로 왼쪽 혹은 오른쪽으로 배치할 수 있습니다..left { float: left;}.right { float: right;} float로 좌우 배치2개의 box를 만들고, 각각 float: left와 float: right 스타일을 적용합니다. 하지만, container 요소에 border 값을 설정했는데, border를 보면 box를 감싸고 있지 ..

CSS란?CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의할 때 사용하는 언어입니다. 쉽게 말하면, CSS는 HTML 문서의 외형을 꾸미기 위해 사용합니다. CSS는 웹 문서의 색상, 글꼴, 레이아웃 등을 설정하여 페이지가 시각적으로 어떻게 보이는지를 제어합니다. HTML은 구조를 정의하고, CSS는 그 구조를 시각적으로 표현하는 데 사용됩니다. CSS 구성요소CSS는 3가지 구성 요소로 이루어져있습니다.선택자(Selector)속성(Property)값(Value)아래에서는 해당 3가지 구성 요소에 대해 설명합니다. 선택자(Selector)선택자는 스타일을 적용할 HTML 요소(Element)를 지정하는 역할을 합니다. 선택자는 Element Selector, Class Sel..

HTML5는 웹 개발자들에게 다양한 새 기능을 제공합니다. 상세 내용은 아래와 같습니다. 향상된 멀티미디어 지원HTML5에서는 비디오와 오디오를 쉽게 삽입하고 재생할 수 있는 태그를 제공합니다. 태그: 비디오 파일을 직접 삽입할 수 있습니다.  태그: 오디오 파일을 삽입하고 재생할 수 있습니다. 이러한 멀티미디어 태그들은 추가적인 플러그인 없이도 브라우저에서 바로 재생 가능하며, 다양한 포맷을 지원합니다. 그래픽과 애니메이션HTML5는 2D 그래픽과 애니메이션을 지원합니다.  태그: 자바스크립트와 결합하여 동적인 그래픽을 그릴 수 있는 도구를 제공합니다. SVG(Scalable Vector Graphics): XML 기반의 벡터 그래픽을 지원합니다. (해상도에 영향을 받지 않아서, 이미지 깨짐 현상이 없..

WebRTC 개념WebRTC(Web Real-Time Communication)는 웹 브라우저와 모바일 어플리케이션을 통해 실시간으로 음성, 비디오, 데이터를 주고받을 수 있게 해주는 기술입니다. 이 기술은 플러그인이나 외부 소프트웨어 설치 없이도 동작하며, HTML5와 JavaScript API를 사용하여 구현됩니다. WebRTC를 사용하면 아래와 같은 기능을 만들 수 있습니다.화상 회의 시스템: Zoom, Google Meet과 같은 서비스와 같이, 실시간 화상 채팅이 가능한 시스템을 구현 가능실시간 게임: 멀티플레이어 게임에서 실시간 음성 대화 시스템 구현 가능파일 공유: 데이터 채널을 이용하여 브라우저 간 직접 파일을 공유할 수 있는 시스템 구현 가능 WebRTC 특징실시간 통신: WebRTC는 ..

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 데 사용되는 표준 마크업 언어입니다. 이전에는 대부분 div, span과 같은 HTML 태그를 사용했지만, 최근에는 시멘틱 태그를 사용합니다. 여기서 시맨틱(Semantic) 태그란, 그 내용이 무엇인지 브라우저와 개발자 모두에게 명확하게 설명해 주는 HTML 태그를 말합니다. 이러한 시멘틱 태그들은 웹 페이지의 가독성을 높이고, 검색 엔진 최적화(SEO)에 도움을 줍니다. 본 글에서는 HTML의 시멘틱 태그에 대해 설명합니다. 시맨틱 태그란?시맨틱 태그는 웹 페이지의 다양한 부분(헤더, 푸터, 본문 등)을 명확하게 구분짓는 데 사용되는 HTML 태그입니다. 이 태그들은 각 섹션의 의미를 명확히 하여, 웹 페이지의 구..

webpack이란? 웹팩(Webpack)은 모던 웹 개발에서 매우 중요한 도구 중 하나입니다. React나 Vue 등 요즘 대세인 javascript 프레임워크로 개발을 할때도 사용합니다. 간단하게 설명하면 javascript 기반의 프로젝트 번들링하기 위해 사용합니다. 번들링이라고 하면, 여러개의 나눠진 파일들을 하나의 파일로 묶어주는 역할을 합니다. (물론 html, scss 등 javascript가 아닌 파일들도 번들링이 가능합니다) pug란? html 코드를 좀 더 간략하게 작성할 수 있도록 도와줍니다. 파이썬과 같이 indent를 사용하여 depth를 구분하기 때문에 꺽새를 사용하는 html 코드에 비해 더 간략합니다. 코드로 예를들면, Google 위 html 을 pug로 작성하면, 아래와 같..

폰트의 굵기 웹 개발을 하면서, css로 자주 사용하는 폰트의 굵기는 normal, bold 가 있습니다. 거의 2가지 정도만 사용하지만 때때로는 수치를 입력하거나 lighter, bolder 등 부모의 상대 굵기를 사용할 수도 있습니다. 본 글에서는 굵기의 종류가 어떤게 있는지 살펴봅니다. css font-weight 기본 두께 폰트의 굵기를 표현할 때는 font-weight 속성을 사용합니다. normal 과 bold 는 아마 자주 사용하여 다들 아는 속성 값일 것입니다. font-weight: normal; font-weight: bold; 부모 요소에 대한 상대 두께 자주 사용하지는 않지만 lighter와 bolder가 있습니다. 이 2개는 부모 요소(element)에 대한 상대적인 두께를 표현할..

Gatsby 블로그에 Adsense 적용 자신의 블로그에 광고를 게시하기 위해서는 구글의 애드센스(Adsense)를 사용해야 합니다. html 코드를 에 직접 넣는 방법도 있으나 gatsby 플러그인을 사용하면 더 간단하게 적용할 수 있고, 매번 페이지를 생성할때마다 head에 넣어줄 필요가 없어서 적용 및 관리가 편하다는 장점이 있습니다. 방법 1. 개츠비 애드센스 플러그인 적용 우선 플러그인을 설치해봅시다. 아래 명령어와 같이 gatsby-plugin-google-adsense 플러그인을 npm 또는 yarn 통해 설치를 합니다. # npm npm install --save gatsby-plugin-google-adsense # 또는 yarn yarn add gatsby-plugin-google-ad..