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..
label, input처럼 함께 있어야하는 짝꿍 요소이지만 화면에서 안보이게 하고 싶을 때 - display:none처럼 화면에서 완전히 없애거나 - visibility: hidden처럼 자리 차지하지 않고 화면에 존재는 하지만 공간 배정을 없앰 .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; } * 참고 github visually-hidden 2023.04.17
이미지 파일 미리보기 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(() =..
타입스크립트 Typescript 자바스크립트에 타입을 부여한 언어. 브라우저에서 실행하기 위해 컴파일(compile. 파일 변환) 해주어야 함 타입스크립트를 사용하는 이유 에러를 사전에 방지할 수 있음 정의되지 않은 값을 사용하는 경우 에러 발생 코드 가이드 및 자동 완성 vscode 사용 시 해당하는 타입에 대한 메서드를 바로 볼 수 있음 Jsdoc 기본 문법을 이용한 타입 정의(in JS) // @ts-check // 타입 스크립트 에러 체크 /** * @typedef {object} Address * @property {string} street * @property {string} city */ /** * @typedef {object} User * @property {string} name * ..