게으른 나에게

변화하지 않는 변수 선언const myBirthday = '01.12.32'; 대문자 상수기억하기 힘든 값 변수에 할당해 별칭으로 사용하는 것대문자 명명밑줄 명명const COLOR_RED = "#F00";// 별칭 사용let color = COLOR_REDalert(color); // #F00 장점기억하기 쉬움오타 낼 확률 적음유의미코드 가독성 증가 일반적인 방식으로 상수를 명명 vs 대문자를 사용해 명명'상수’는 변수의 값이 절대 변하지 않음을 의미코드가 실행되기 전에 이미 그 값을 알고 있는 상수런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수=> 대문자 상수, ‘하드 코딩한’ 값의 별칭 바람직한 변수명간결명확 변수 명명 시 참고하기 좋은 규칙남이 읽을 수 있는 이름 사용줄임말이..

그만 잊어버리기 위한!!!! 원격 저장소 목록 보기git remote -v새로운 원격 저장소 추가git remote add [원격이름] [저장소URL]원격 저장소 제거git remote remove [원격이름]원격 저장소 URL 변경git remote set-url [원격이름] [새URL]원격 저장소의 브랜치 내용 병합git pull [원격이름] [브랜치이름]   git add .git commit -m "커밋 메시지"git push [원격이름 [브랜치 이름]

타입스크립트에서 지원하는 유틸리티 타입무언가를 '제외'한다는 뜻 OmitType에 해당되는 객체 타입 명시Key에는 제외한 키 값 명시-> 그 키값을 제외한 타입 선언

useRef[.current 프로퍼티로 전달된 인자(initialValue)로, 초기화된 변경 가능한 ref 객체를 반환.반환된 객체는 컴포넌트의 전 생애주기를 통해 유지됨]순수 자바스크립트 객체를 반환 (.current라는 프로퍼티)이 프로퍼티는 useRef를 실행할 때 전달한 초깃값이 구성되어 있다는 의미매번 렌더링 할 때 동일한 ref 객체를 제공한다는 점리렌더링 할 때 재선언되는 문제 해결 가능값이 변경되더라도 컴포넌트 리렌더링 일어나지 않음리액트에서 DOM에 직접 접근할 때 사용 import { useRef } from 'react';const fakeId = useRef(0);const handleCreate = (newProduct: Omit) => { fakeId.current += 1; ..

TextField 컴포넌트입력 필드 컴포넌트여러 형태와 동작을 가진 입력 필드 생성 label: 입력 필드의 레이블 설정. 사용자에게 입력할 내용에 대한 안내 제공 역할fullWidth: 입력 필드를 부모 요소의 가로 폭에 맞게 확장하는지 여부 설정value: 입력 필드의 현재 값으로 컴포넌트 상태와 연결되어 동기화onChange: 입력값이 변경될 때 호출되는 콜백 함수를 설정. 이벤트 객체를 통해 입력된 값 가져와서 상태 업데이트, 다른 작업수행marign: 입력 필드 주위의 여백 설정 사용방법

로딩(Loading)시 나오는 스피너(Spinner) 화면에 불러오면 바로 불러지지 않고 일정 시간을 두고 메인화면에 렌더링공백 기간 동안 로딩 컴포넌트 보여주는 식로딩도 하나의 상태(로딩이 되었다, 안 되었다) -> Boolean 형태상태로 관리요청을 시작했을 때 로딩상태 true                     ->  컴포넌트데이터 패치가 완료되었을 때 로딩상태 false     ->    컴포넌트 import { CircularProgress} from "@mui/material";const [isLoading, setIsLoading] = useState(false);useEffect(() => { setIsLoading(true); fetch("/product") ..

. . .  Box 컴포넌트다른 컴포넌트 묶어서 스타일 및 레이아웃 적용요소 감쌈props 사용해 스타일, 레이아웃, 간격 등 설정내부 요소 묶어서 스타일 직접 지정  . . . AppBar 컴포넌트헤더 영역 표시position으로 위치를 정적(static)으로 설정 -> 페이지 스크롤과 상관없이 항상 고정된 위치 표시sx props사용자화해서 스타일 적용mb: 4 / marginBottom을 4의 단위로 설정 -> 하단에 4만큼 여백  . . . Toolbar 컴포넌트상단 네비게이션, 로고, 검색 창, 액션 버튼 등 상단 도구바(Toolbar) 생성하는데 사용sx prop..

그리드레이아웃 구성, 쉽게 만들 수 있는 기능 제공일직선의 레이아웃 쉽게 구현 가능기본적으로 가로 화면 12등분반응형 디자인 지원 그리드 개념Container(컨테이너): 그리드 컴포넌트 감싸는 최상위 컨테이너. 그리드 레이아웃 구성하는 요소 감싸는 역할.item(아이템): 그리드 컨테이너 안에 표현되는 각각 아이템 요소. 그리드 시스템 내에서 정렬되고 배치될 수 있는 단위. 아이템 크기 배치 지정xs: 가장 작은 화면 크기에서 아이템의 크기와 배치 지정. 일반적으로 모바일 기기 기준sm: 작은 화면에 크기에서 아이템의 크기와 배치 지정. 일반적으로 태블릿 기기 기준md: 중간 화면 크기에서 아이템의 크기와 배치 지정.lg: 큰 화면 크기에서 아이템의 크기와 배치 지정. 일반적으로 데스크탑 화면을 기준x..

MUI(material-UI) 라이브러리리액트 UI 도구디자인이 미리 적용되어 완성된 UI 컴포넌트 사용 가능사용자화 가능한 테마 통해 일관된 스타일 적용빈응형 디자인 지원 및 다양한 기능, 유틸리티 제공https://mui.com/ MUI: The React component library you always wantedMUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.mui.com  라이브러리 설치yarn add @mui/material @emotion/react @emotion/styled mui ..

CORS (Cross-Origin Resource Sharing)교차 출처 리소스 공유브라우저에서 발생하는 오류 출처(Origin)URL에서 프로토콜(Protocol), 도메인 이름(Domain Name), 포트(Port)          ->      "출처" =>  이것이 다르면 CORS 오류  다른 출처간의 통신을 막아놓은 이유는 보안 때문  해결 방법1. 프론트엔드에서 해결하는 방법Proxy 서버 설정 브라우저와 서버간의 통신에서 출처 교차브라우저에서 요청 -> 바로 백엔드 요청 보내는 것 X브라우저에서 요청 -> 현재 프론트엔드 서버에서 요청 O프론트엔드 서버 -> 백엔드 서버 요청package.json에서 수정"proxy": "백엔드 서버"fetch(도메인이 생략된 형태)fetch('/')  ..