코드를 위한 기록

stopPropagation 부모 요소 이벤트 전달 막기 (자식 요소가 부모 요소 이벤트를 실행하지 않도록 막기) ex. 모달, 카드와 카드 내부 버튼 onClick={(event) => event.stopPropagation()} preventDefault 이벤트 실행 막기 ex. form 태그의 submit 이벤트 onSubmit={(e) => e.preventDefault()} 2023.04.19

1. 빌드 난독화 2. 특정 경로 바로 접근 시 나타나는 404 → index.html로 대체하기 3. 페이지 주소 설정 4. react-router-dom basename 설정 5. 배포용 브랜치 생성 후 빌드 폴더만 푸시하기 # package.json "scripts": { "build": "GENERATE_SOURCEMAP=false react-scripts build", #1 "postbuild": "cp build/index.html build/404.html", #2 }, "homepage": "https://myusername.github.io/my-app", #3 // react-router-dom을 사용하는 경우 router에 basename 추가 #4 import { Route, cre..

이미지 파일 미리보기 1. 인풋 요소(type="file")에서 파일이 첨부되면(onInput 이벤트) imgInput 상태에 저장시키면 2. 리렌더링으로 인해 useEffect 실행 - 파일이 있으면 파일을 FileReader의 readAsDataURL 메서드로 base64로 만든 후 imgInputBuffer에 저장 - 파일이 없으면 imgInputBuffer를 비워줌 3. imgInputBuffer를 원하는 태그에 할당해줌 - img면 src - 다른 태그면 background 속성 const [imgInput, setImgInput] = useState(null); const [imgInputBuffer, setImgInputBuffer] = useState(null); useEffect(() =..

switch문 표현식과 일치하는 case값에 만난다면 그 라인부터 마지막 코드까지 실행 → break를 써줘야함 case 값이 다른데 같은 코드를 실행해줘야 할 경우 break 없이 코드를 붙여주면 됨 case와 일치하지 않는 경우 default 실행(선택) switch (표현식) { case value1: 실행할 코드; break; case value2: 실행할 코드; break; case value3: case value4: 실행할 코드; break; default: 실행할 코드; } * 참고 javascipt.info switch 2023.04.14

Optional chaining ?. 참조가 nullish(null 또는 undefined)하면 에러 대신 undefined를 리턴 참조가 누락될 가능성이 있는 경우 사용 * 참조 mdn optional chaining 2023.04.14