풀소유

export default function A {}export const A: FC = () => {}이 둘은 JavaScript 및 TypeScript에서 함수를 정의하고 내보내는 두 가지 다른 방법이다. 이 둘은 과연 어떻게 다른 걸까? 호이스팅함수 선언 (Function Declaration)export default function A() { // 함수 본문 }호이스팅: 함수 선언은 호이스팅 되므로, 함수 선언문 이전에 호출할 수 있다.함수 표현식 (Function Expression)export const A: FC = () => { // 함수 본문 };호이스팅: 함수 표현식은 변수 호이스팅의 규칙을 따르며, 선언되기 전에 호출할 수 없다. 내보내기기본 내보내기 (Default Export)ex..

HTML 요소는 웹 페이지의 구조를 정의하는 데 사용되며, 각 요소는 다양한 속성(attributes)을 가질 수 있다. 예를 들어 input 요소는 type, value, onChange 등의 속성을 가질 수 있다.React에서는 이러한 HTML 요소들을 컴포넌트로 사용한다. TypeScript와 함께 사용할 때, HTML 요소의 속성을 타입으로 정의하여 컴포넌트의 Props를 관리할 수 있도록 DetailedHTMLProps와 HTMLAttributes를 제공한다. HTMLAttributes모든 일반적인 HTML 속성들을 포함하는 타입이다. 이 타입은 특정 HTML 요소가 가질 수 있는 모든 속성들을 정의한다. 예를 들어, div 요소의 속성을 정의하려면 HTMLAttributes 타입을 사용할 수 ..

플렉스박스 레이아웃이란 display 스타일 속성에 flex라고 설정하고 그 안에 콘텐츠 아이템을 배치한 것을 의미한다. 이때 플렉스 컨테이너는 콘텐츠 아이템의 inline과 block 성질을 완전히 무시한다. 어떤 HTML 요소에 display: flex;로 설정하면 해당 요소를 플렉스 컨테이너로 만들 수 있다. flex-direction 속성flex-direction 속성은 display 설정값이 flex일 때만 사용할 수 있다.flex-direction 설정값은 row와 row-reverse, column과 column-reverse 등 4가지가 있으며 기본값은 row이다.row는 왼쪽에서 오른쪽으로, row-reverse는 오른쪽에서 왼쪽으로, column은 위에서 아래로, column-rever..

CSS는 스타일 규칙이 "캐스케이드" 방식으로 적용된다. 캐스케이딩은 여러 스타일 규칙이 하나의 요소에 적용될 때, 어떤 규칙이 우선 적용될지를 결정하는 메커니즘이다. 이 메커니즘은 세 가지 주요 원칙을 따른다. 1. 스타일 시트의 출처(Origin)스타일 시트는 세 가지 출처에서 올 수 있다사용자 에이전트 스타일 시트(User Agent Style Sheet): 브라우저 기본 스타일 시트사용자 스타일 시트(User Style Sheet): 사용자가 정의한 스타일 시트저자 스타일 시트(Author Style Sheet): 웹 페이지의 작성자가 정의한 스타일 시트기본적으로, 우선순위는 다음과 같다. 사용자 에이전트 스타일 시트 저자 스타일 시트 사용자 스타일 시트 (사용자가 중요한 선언 !important..

PropsWithChildrenPropsWithChildren은 타입스크립트로 작성된 React 컴포넌트에서 자식 요소를 포함하는 props를 정의하는 데 사용되는 타입이다.이를 사용하면 컴포넌트의 타입 안전성을 높이고, 코드 가독성을 향상시키며, 더 유연한 컴포넌트를 만들 수 있다.리액트 17 버전까지는 children 속성을 FC 타입에 포함했지만 18 버전부터는 FC 타입에서 children 속성을 제거했다. 그리고 PropsWithChildren이라는 제네릭 타입을 새롭게 제공하여 children?: ReactNode 부분을 PropsWithChildren 타입으로 대체했다.  왜 PropsWithChildren을 사용할까?React 컴포넌트는 일반적으로 props를 통해 데이터를 전달받는다. 하..

웹 페이지를 구성하는 모든 요소는 상자(box) 형태로 표현된다. CSS의 상자 모델(Box Model)은 이 상자를 구성하는 요소와 그것이 웹 페이지에 어떻게 배치되는지를 이해하는 데 중요한 개념이다. CSS 상자 모델의 구성 요소CSS 상자 모델은 다음과 같은 네 가지 주요 구성 요소로 이루어져 있다콘텐츠(Content): 요소의 실제 내용이 들어가는 공간이다. 텍스트, 이미지, 동영상 등이 포함한다.패딩(Padding): 콘텐츠와 경계(Border) 사이의 간격이다. 패딩은 투명하며 콘텐츠 주위에 추가적인 공간을 제공한다경계(Border): 콘텐츠와 패딩 주위를 둘러싸는 테두리이다. 경계는 다양한 스타일과 색상으로 설정할 수 있다.마진(Margin): 요소의 경계와 다른 요소들 사이의 간격이다. 마..

em과 rem 단위CSS는 길이(length)를 표현할 때 픽셀 단위(px)를 사용한다. 하지만 픽셀 단위는 '몇 글자 정도의 길이'와 같은 텍스트의 표시 길이를 표현해야 할 때는 그리 적합하지 않다. 예로 '60픽셀'보다는 '문자 20개 정도의 길이'로 표현하는 것이 더 자연스럽다.따라서 CSS는 영문자 'M'의 발음 '엠'을 의미하는 em과 'root M'을 의미하는 rem이라는 단위를 제공한다. 이 단위들은 화면 크기에 따라 반응형 디자인을 구현할 때 유용하다.em 단위em 단위는 현재 요소의 폰트 크기에 상대적인 크기를 나타낸다. 예를 들어, 부모 요소의 폰트 크기가 16px이라면, 자식 요소에서 1em은 16px을 의미한다.상대적인 단위: 요소의 폰트 크기를 기준으로 크기를 계산한다.중첩 효과:..

CSS는 웹 페이지의 스타일을 정의할 때 다양한 방식으로 색상을 표현할 수 있다. 색상 모델과 함수, 불투명도(opacity), 그리고 Tailwind CSS와 같은 프레임워크에서 제공하는 색상 클래스 등을 이해하면 더욱 효과적으로 스타일을 지정할 수 있다. CSS 색상 모델CSS에서는 색상을 표현하는 여러 가지 방법을 지원한다. 주요 색상 모델로는 RGB와 HSL이 있다.RGB (Red, Green, Blue)RGB 색상 모델은 빛의 삼원색인 빨강-초록-파랑을 혼합하여 색상을 표현한다.16진수를 의미하는 # 기호 뒤에 #빨강초록파랑 방식으로 표현한다. 여기서 각각의 색상은 0~ff(즉, 0~255)까지 16진수 값 또는 0부터 1까지의 소수로 나타낼 수 있다.HSL (Hue, Saturation, Li..

Tailwind CSS테일윈드 CSS는 클래스 기반의 유틸리티 CSS 프레임워크이다. 개발자가 CSS를 작성하는 대신, 미리 정의된 클래스를 HTML에 적용하여 스타일을 지정할 수 있다. 이를 통해 스타일을 보다 모듈화 하고 유지보수하기 쉽게 만들 수 있다.테일윈드 CSS는 PostCSS 버전 8의 플러그인 형태로 동작한다.주요 특징유틸리티 클래스: 각 클래스는 하나의 CSS 속성을 담당한다.구성 가능성: 다양한 클래스를 조합하여 복잡한 스타일을 간단하게 구현할 수 있다.커스터마이징: 설정 파일을 통해 Tailwind를 프로젝트에 맞게 조정할 수 있다.Bootstrap과의 차이점 TailwindBootstrap접근 방식유틸리티 클래스 기반모든 스타일링을 작은 클래스 단위로 처리하여,필요한 스타일을 조합하..

npm audit 명령어는 2018년에 발표된 npm v6에서 처음 도입되었다. 이 명령어는 프로젝트의 의존성 트리를 검사하여 보안 취약점을 찾고, 이를 보고하는 기능을 제공한다. 이는 npm 사용자들이 프로젝트에서 사용하고 있는 패키지들의 보안 상태를 쉽게 확인하고, 필요한 경우 취약점을 수정할 수 있도록 하기 위한 중요한 기능이다. npm audit이 명령어는 프로젝트의 의존성을 검사하여 알려진 보안 취약점을 찾고, 이를 보고한다.npm audit이 명령어를 실행하면 보안 취약점이 있는 패키지 목록과 이를 수정하기 위한 권장 조치가 표시된다. npm audit fixnpm audit 명령어가 발견한 보안 취약점을 자동으로 수정하려고 시도한다. 이 명령어는 가능한 경우 취약점을 수정할 수 있는 패키지 ..