분류 전체보기 (85) 썸네일형 리스트형 에러 Uncaught SyntaxError: Unexpected token '<' 보호되어 있는 글입니다. onChange event type const handleSearchInput = (e: string) => { setMall(e.target.value); }; 이런 식으로 타입 지정을 해줬는데 target에서 string' 형식에 'target' 속성이 없습니다.라는 에러가 났다. input 태그에 마우스를 대보면 (property) JSX.IntrinsicElements.input: DetailedHTMLPropsInputHTMLAttributesHTMLInputElement>, HTMLInputElement> 이런 설명을 해주는데 이거를 타입으로 지정해줘야한다!대신 핸들러는 빼줘야 한다. 결과적으로React.ChangeEvent 이걸 타입으로 지정해주면 더이상 에러가 발생하지 않는다. const handleSearch.. url 경로가 바뀔 때마다 useEffect 실행하는 방법 - usePathname(), useSearchParams() 사용하기 next.js 13버전 부터는 url 이동을 감지하기 위해서 usePathname()와 useSearchParams() 훅스를 사용하면 된다. usePathname은 현재 url 경로를 반환하고useSearchParams 현재 url의 쿼리를 반환한다. 따라서 url의 경로가 바뀔 때만 고려하면 된다면 usePathname만쿼리를 포함하고 있을 경우엔 useSearchParams도 같이 사용하면 된다. 사용하는 방법import { usePathname, useSearchParams } from "next/navigation";const pathname = usePathname();const searchParams = useSearchParams();useEffect(() => { //실행하고 싶은 .. input 아이디 비밀번호 자동완성 막기 회사 사이트에 로그인과 회원가입 등등 input을 많이 사용하였는데 크롬에 자동로그인을 설정한 경우아이디와 비밀번호가 자동으로 나오는데 로그인에서는 그런 경우가 편할지라도 회원가입 폼에서는 그걸 지우고 다시 쓰는 행위가 불편한 것 같아 일부 input은 자동완성을 막기로 하였다 처음에 autoComplete="off"를 적용해보았는데 자동완성이 계속되어 서치해보다가 autoComplete="one-time-code"를 적용했더니 자동완성이 막아졌다또한 autoComplete="new-password" 또한 자동완성이 막아진다(내 코드같은 경우 next.js를 사용하기 때문에 기존의 autocomplete의 c를 대문자로 적용하여야 했다.) *파이어폭스에선 지원이 안된다고 하여 추가적인 보완이 필요할 .. 넘치는 텍스트 줄이기 (ellipsis) 한 문장에 들어가야 할 텍스트들이 주로 서버에서 넘어오는 텍스트들이 많기 때문에 여러 줄에서 한 줄로 줄여야 할 때가 많았다.그럴 때 아주 유용하게 썼던 css가 있는데 난 scss를 사용해서 믹스인을 만들어 사용하니 편했다 overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all; overflow: hidden;: 영역에서 넘쳐난 글자들을 숨김white-space: nowrap;: 줄바꿈이 없어짐text-overflow: ellipsis;: ... 말줄임 효과word-break: break-all;: 어절이 유지되지 않고 끊어져서 줄바꿈 됨 여기서 중요한 점 width를 설정해줘야 한다!! 그래야 크기에 따.. 점 표기법 vs 대괄호 표기법 점 표기법과 대괄호 표기법 비교 점 표기법 (Dot Notation)대괄호 표기법 (Bracket Notation)속성 이름이 고정되어 있을 때 사용속성 이름이 동적으로 결정될 때 사용식별자 이름이어야 함 (유효한 변수 이름)모든 문자열 사용 가능 (공백, 특수 문자 포함)가독성이 더 좋음더 유연하며, 표현식 사용 가능 점 표기법은 객체 속성 이름이 고정되어 있을 때 사용. 속성 이름이 고정되어 있다는 의미는 속성 이름이 코드 작성 시 이미 결정되어 있고, 변경되지 않는다는 뜻점 표기법은 사용하기 간편하고 가독성 좋음 대괄호 표기법은 더 유연하며, 속성 이름이 동적으로 결정될 때 사용.대괄호 안에는 문자열이나 변수를 사용할 수 있으므로, 속성 이름을 런타임에 결정할 수 있음 10/12 보호되어 있는 글입니다. useEffect 의존성배열이 제대로 안돌아간 이유 보호되어 있는 글입니다. 08 예외처리 https://www.notion.so/Chapter-08-2d86e08edefd43fd811b761f68a2a148?pvs=4 Chapter 08 예외처리 | Notion 08-1 구문 오류와 예외 third-jumpsuit-9e6.notion.site 딥다이브 스터디를 시작하다 보호되어 있는 글입니다. 이전 1 2 3 4 ··· 9 다음 목록 더보기