[리액트] gh-pages 배포 후 새로고침시 404 오류

깃허브 페이지에 리액트 프로젝트를 배포한 후 404 오류가 뜨는 경우가 있다. 루트 디렉토리가 아니라 서브 디렉토리(ex. https://mygithub.github.io/example/서브디렉토리)로 최초 진입하거나, 진입 후 새로고침 할 때 이 현상이 발생하는 것 같다. 해결 방법 1: public 디렉토리에 404.html 생성 해결 방법 2: index.html 내 스크립트 추가 해결 방법 3: Hash router 사용 이는 SEO 최적화에 좋지 않기에 패스.

[git] 깃 명령별(pull, merge, commit, add) 취소하고 되돌리기

git pull 취소하고 되돌리기 git reset --hard ORIG_HEAD git merge 취소하고 되돌리기 git reset --merge ORIG_HEAD git commit 취소하고 되돌리기 git reset --hard HEAD git add 취소하고 되돌리기 git reset HEAD

[타입스크립트] 배열 내용으로 중복 코드 없이 타입 정의하기

// 특정한 나라 이름으로 이루어진 배열 type TCountry = "한국" | "태국" | "페루" | "뉴질랜드" | "포르투갈"; const countries = ["한국", "태국", "페루", "뉴질랜드", "포르투갈"]; 위와 같이 특정 값으로 이루어진 배열이 있을 때, 이 배열을 위한 타입을 작성하면 중복 문자열이 생긴다. 이럴 때 아래와 같이 작성하면 중복 문자열을 줄일 수 있다. // 특정한 나라 이름으로 이루어진 배열 const countries = ["한국", "태국", "페루", "뉴질랜드", "포르투갈"] as const; // 배열 내의 나라 이름들로만 만드는 type type TCountry = (typeof countries)[number]; countries 배열을 as ..

[자바스크립트] 배열 안에 배열이 있을때 flat한 배열로 만들기

1. 최신 자바스크립트 API인 flat() 사용 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat Array.prototype.flat() - JavaScript | MDN The flat() method of Array instances creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. developer.mozilla.org 2. 직접 메소드 작성해보기 // arr: 배열, d: 차원 const flatDeep = (arr: any[], d = 1..

[리액트] react-daum-postcode 우편번호 검색 컴포넌트 예시

import { Button, Container, ModalBody, ModalFooter, Row, } from "@doar/components"; import { Dispatch, SetStateAction, useState } from "react"; import DaumPostcode from "react-daum-postcode"; import { Address } from "react-daum-postcode/lib/loadPostcode"; interface IFindAddress { setAddress: Dispatch; onClose: () => void; } const FindAddress = ({ setAddress, onClose }: IFindAddress) => { const s..

[자바스크립트] 이미지 URL을 File 또는 FileList로 변환하기

1개의 이미지 URL을 File 또는 FileList로 변환하기 export const convertImageUrlToFileList = async ( imageUrl: string ): Promise => { const response = await fetch(imageUrl); if (!response.ok) { throw new Error("이미지를 받을 수 없습니다."); } const data = await response.blob(); const ext = imageUrl.split(".").pop() || ""; const filename = imageUrl.split("/").pop() || ""; const metadata = { type: `image/${ext}` }; const fi..

[리액트] 컴파운드 컴포넌트 패턴으로 작성하는 모달 컴포넌트 (+ dialogue 태그 활용)

문제 발견: 기존 모달 컴포넌트의 중복 코드 양산 리액트 프로젝트에서 모달 컴포넌트를 만들어 두고 사용할 때마다 매번 아래처럼 모달 상태를 위한 코드들이 양산되었다. // 모달을 보여줄 것인지 아닌지의 boolean 상태 const [show, setShow] = useState(false); // 필요시 모달 상태 핸들러까지... const modalHandler = () => { setShow((prev: boolean) => !prev); }; return ( 모달 내용(children) ) 위처럼, Modal 컴포넌트로 props를 내려주기 위해서 모달을 사용하는 상위 컴포넌트마다 모달 상태 관련 코드를 중복 작성해야 하는 것이다. 이런 컴포넌트 작성 패턴을 '렌더 프롭스 패턴(Render Pro..

[타입스크립트] 웹뷰 인터페이스 브릿지

// index.d.ts // Window 객체에 각 네이티브별 인터페이스와 메서드 정의 declare global { interface Window { webkit?: { messageHandlers: { iOSInterfaceGoToScheme: { postMessage: (message: string) => void; }, iOSInterfaceCloseWebview: { postMessage: (message: string) => void; }; }; }; AndroidInterface?: { goToScheme: (data: string) => void; closeWebview: (message: string) => void; }; } } // aos, ios 각각 해당 인터페이스가 있는지 확인..

[JS] 클로저란?

클로저란? 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 뜻한다. 자바스크립트만의 고유한 개념이 아니라, 여러 함수형 프로그래밍 언어에서 공통적으로 발견되는 특성이다. 클로저의 핵심은, 스코프를 이용하여 변수의 접근 범위를 닫는 폐쇄성이다. 스코프를 이해해야 클로저를 이해할 수 있다. https://is-this-it.tistory.com/134 [JS] 스코프(Scope)란? 스코프란? 식별자 접근 규칙에 따른 유효 범위를 말한다. 변수, 함수, 클래스 등의 식별자에 접근할 수 있는 범위가 존재하는데, 이 범위는 중괄호(블록)-Block Scope- 또는 함수-Function Scope-에 의해 is-this-it.tistory.com 클로저 스코프 체인 모든 클로저에는 세가지 스코프(범위..

[JS] 스코프(Scope)란?

스코프란? 식별자 접근 규칙에 따른 유효 범위를 말한다. 변수, 함수, 클래스 등의 식별자에 접근할 수 있는 범위가 존재하는데, 이 범위는 중괄호(블록)-Block Scope- 또는 함수-Function Scope-에 의해 나눠진다. 특이사항으로, 자바스크립트에서 화살표 함수는 블록 스코프로 취급된다. 규칙 1. 안쪽 스코프에서 바깥쪽 스코프로만 접근 할 수 있다. (반대는 불가능) 2. 스코프는 중첩이 가능하다. 3. 가장 바깥 쪽의 스코프를 전역 스코프(Global Scope), 그 외의 스코프는 모두 지역 스코프(Local Scope)다. 4. 지역 변수는 전역 변수보다 우선 순위가 높다. 변수 선언 키워드 - var, let, const var 키워드로 선언한 변수는 블록 스코프를 무시하고 스코프..