풀소유

서버에서 HTML을 생성해 웹 브라우저 쪽에 전송하는 전통 방식의 웹 개발에서는 사용자에게 데이터를 받을 때 요소를 사용한다. 이때 폼 요소는 method 속성에 HTTP 메서드를 설정하고, action 속성에는 폼 데이터를 전송한 뒤 전환할 화면의 URL을 설정하는 방식으로 사용한다. 만일 method 설정값이 POST 라면 폼 데이터를 암호화하는 다음 3가지 방식 중 하나를 encType 속성에 설정한다.application/x-www-form-urlencoded(기본값)multipart/form-datatext/plan하지만 리액트와 같은 SPA 방식은 백엔드가 API 방식으로 동작하므로 굳이 폼 요소와 속성등을 설정할 필요가 없다. 다만 관습적으로 사용자 입력을 받는 부분을 요소로 구현한다.버튼 ..

함수형 언어에서는 함수와 변수를 차별하지 않으므로 함수는 다른 함수의 입력 매개변수나 반환값으로도 사용될 수 있습니다.고차 함수는 다른 함수를 반환하는 함수를 의미한다.리액트 개발에서 고차 함수는 콜백 함수에 어떤 정보를 추가로 전달하려고 할 때 주로 사용한다.const onClick = useCallbakc((name: string) => () => alert(`${name} clicked`), []) 리액트에서 고차 함수를 구현하는 이유는 함수의 타입 불일치를 해결하기 위해서이다. onClick 이벤트 속성은 () => void 타입의 콜백 함수를 설정해야 하므로 다음 처럼 콜백 함수 내부에서 필요한 name 변수를 전달할 수 없다.() => alert(`${name} clicked`)그러나 콜백 함..

템플릿 메소드 패턴은 알고리즘의 일부 단계를 서브클래스에서 구현할 수 있으며, 알고리즘의 구조는 그대로 유지하면서 알고리즘의 특정 단계를 서브클래스에서 재정의한다.템플릿 메소드 패턴의 구성 요소AbstractClass (추상 클래스)알고리즘의 템플릿을 정의하는 클래스로, 템플릿 메소드를 포함하고 있다.템플릿 메소드는 알고리즘의 구조를 정의하고, 일부 단계는 추상 메소드나 구현된 메소드를 활용하여 구현한다.훅(Hook)을 사용하여 서브클래스에서 알고리즘의 특정 지점에 추가적인 동작을 삽입할 수 있다.ConcreteClass (구체 클래스)AbstractClass를 상속받아 템플릿 메소드에서 정의된 추상 메소드들을 구현하는 클래스이다.알고리즘의 일부 단계를 재정의하여 구체적인 동작을 제공한다.필요에 따라 후..

이중 NOT 연산자는 부울 값으로 변환하는 데 사용된다. 처음 ! 연산자는 값을 반전시키고, 두 번째 ! 연산자는 이를 다시 반전시켜 원래의 논리 상태로 돌려놓는다. 이 과정에서 해당 값이 무엇이든 명시적으로 부울 값으로 변환된다.const value = "Hello, World!";const booleanValue = !!value;const onClick = () => {}const booleanOnClick = !!onClick;console.log(booleanValue); // trueconsole.log(booleanOnClick); // true JavaScript에서는 값이 "truthy"하거나 "falsy"할 수 있다. "truthy"한 값은 조건문에서 참으로 평가되는 값이고, "fals..

PrettierPrettier는 코드 포매터로서, 코드의 스타일을 일관되게 유지하는 데 중점을 둔다. 코드의 가독성을 높이고 팀 간의 스타일 불일치를 줄여준다.자동 코드 포매팅: 저장 시 또는 명령 실행 시 코드를 자동으로 포맷팅 한다.스타일 설정: 코드 스타일 옵션을 설정할 수 있다.다양한 언어 지원: JavaScript, TypeScript, CSS, HTML 등을 포함한 여러 언어를 지원한다.설치npm install prettier --save-dev설정하기최상단 디렉토리에 .prettierrc.json 을 생성 한다.{ "printWidth": 120, // 코드 한 줄의 최대 길이를 120자로 설정 "tabWidth": 2, // 들여쓰기에서 사용할 공백 수를 2칸으로 설정 "useTabs..

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를 통해 데이터를 전달받는다. 하..