dev_story

box-sizing이란? CSS의 box-sizing 속성은 요소의 너비와 높이가 어떻게 계산되어야 하는지를 결정합니다. 기본적으로, CSS는 content-box 값을 사용하는데, 이는 요소의 너비와 높이가 내용(content)의 크기만을 포함하고, padding, border, margin은 제외한다는 것을 의미합니다. 반면, box-sizing을 border-box로 설정하면, 요소의 너비와 높이가 padding과 border를 포함하여 계산됩니다. 이는 레이아웃을 더 예측 가능하게 만들고, CSS 코드를 더 간결하게 작성할 수 있게 합니다. box-sizing 속성의 종류 content-box: 기본 CSS 박스 모델을 따릅니다. 요소의 너비와 높이는 오직 내용의 크기만을 포함하며, padding..

Prettier와 ESLint : 코드 품질을 높이는 두 마법사 프론트엔드 개발에서 코드의 일관성과 품질은 매우 중요합니다. 이를 위해 Prettier와 ESLint와 같은 도구를 사용해 코드의 품질을 검사할 수 있습니다. 이번 포스트에서는 Prettier와 ESLint의 개념과 적용 방법을 각각 자세히 알아보고, 둘을 함께 사용하는 방법을 다루겠습니다. # 1. Prettier 1. Prettier란? Prettier는 JavaScript와 관련된 코드의 형식을 일관되게 유지하는 역할을 합니다. 들여쓰기, 공백, 따옴표 등을 자동으로 조정하여 일관된 스타일의 코드를 보장해줍니다. 2. Prettier 적용 npm install --save-dev --save-exact prettier # 또는 yarn..

리액트 프론트엔드 개발에서 eslint-disable 사용하기 리액트 프로젝트를 개발하며 종종 eslint를 사용하여 코드의 품질 유지 및 향상에 도움을 받습니다. 그러나 때때로 eslint의 경고가 개발 작업을 방해할 수 있는데, eslint-disable을 사용해 특정 라인, 파일 혹은 전체 코드 블록에 대해 eslint의 검사를 비활성화할 수 있습니다. 하지만 eslint-disable을 남용한다면, 코드 품질에 악영향을 끼칠 수 있으므로 주의가 필요합니다. 💪🏼 #1 라인 단위로 eslint-disable 사용하기 가장 간단한 방법은 특정 라인에 eslint-disable 주석을 추가하는 것입니다. 이것은 특정 규칙을 그 라인에만 적용하지 않도록 합니다. // eslint-disable-next-..

이미지/동영상 비율을 임의로 설정하려면? Aspect Ratio(비율)은 웹 디자인에서 중요한 요소 중 하나입니다. 이것은 이미지와 비디오의 화면 비율을 나타내며, 웹 페이지의 레이아웃 및 사용자 경험에 큰 영향을 미칩니다. 이 글에서는 Aspect Ratio의 개념을 자세히 알아보고, 웹 디자인에서의 활용 방법과 다양한 예시를 살펴보겠습니다. 😁 #1 Aspect Ratio란? Aspect Ratio는 이미지나 비디오의 너비와 높이 사이의 비율을 나타냅니다.보통 가로:세로 의 형태로 표현되며, 너비를 높이로 나눈 값입니다. 가장 흔한 Aspect Ratio는 16:9로, 넓은 화면 비율을 가진 비디오 포맷입니다! #2 왜 중요한가? Aspect Ratio는 웹 페이지의 레이아웃을 결정하는 데 매우 중요..