Front-End: Web (163) 썸네일형 리스트형 _app와 _document Recap _app과 _document Next.js의 기본 페이지 페이지에 공통적으로 적용될 내용들을 작성 _app은 로적, 전역 스타일 등 컴포넌트에 공통 데이터를 다룸 _document는 공통적으로 적용할 HTML 마크업을 중심으로 다룸 _app 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트 페이지에 적용할 공통 레이아웃의 역할을 함 주 사용 목적 모든 컴포넌트에 공통적으로 적용할 속성 관리 function MyApp({ Component, pageProps }) { return } export default MyApp 규칙 Component 속성값 → 서버에서 요청한 페이지 ex. localhost:3000/home 접속 시, Component는 home 컴포넌트임 pageProps 는 .. "ElementRef"로 useRef 타입을 더 강력하게 지정하기 기본 요소에서 useRef 를 사용하는 것은 다소 어려울 수 있다. 왜냐하면 대상 요소의 타입을 지정해야만 하는데, 어떤 타입을 사용해야하는지 명확하지 않기 때문이다. import { useRef } from "react"; const Component = () => { // What goes here? const audioRef = useRef(null); return Hello; }; 간단한 해결법으로는 ref 타입에 마우스를 올리고, 어떤게 들어갈 수 있는지 체크해보는 것이 있다. 근데 더 쉬운 방법이 있다! ElementRef 가 뭘까? 리액트에서 타입 도우미로 ElementRef를 사용할 수 있는데, ElementRef를 사용하면 대상 요소에서 타입을 쉽게 추출할 수 있다. import { us.. crypto로 비밀번호 암호화하기 crypto? js 내장 모듈. 여러 해시 함수를 통한 암호화 기능 제공함 전에 스마게 강의에서 사이드 플젝 정도면 SHA-256 사용하면 적당하다고 해서 이거 사용할 것임 utils/createHashedPassword.ts import crypto from "crypto"; const createHashedPassword = (password: string) => { return crypto.createHash("sha256").update(password).digest("base64"); }; export default createHashedPassword; auth.ts import mysql from "mysql"; import dbconfig from "../config/database"; i.. TypeError: relativeURL.replace is not a function url을 넣어줘야하는 부분에 객체를 넣어줘서 생긴 문제였다. 객체에서 url을 꺼내서 다시 넣어주니 에러가 해결되었다. Uncaught TypeError: Cannot add property current, object is not extensible (feat. forwardRef) 문제점 이전의 PR들을 모두 merge하고, /@me 에 접속하였더니 에러가 뜬다. 오류의 원인을 찾아보니 useGetFriendList.tsx 부분이 문제였다. import { useQuery } from "@tanstack/react-query"; import friendApi from "@api/friend"; const useGetFriendList = (options: any = {}) => { const { data, isSuccess } = useQuery( ["friendList"], friendApi.getAll, options ); return { data: data?.data.data, isSuccess }; }; export default useGetFriendList; 여기서 re.. Lazy loading을 쓸 때는 Suspense를 사용합시다! !!!!!!!!!!! Lazy loading을 사용할 때, Suspense와 함께 사용해야 한다! 이걸 몰라서 에러 잡는데 시간 꽤 걸렸다.. lazy를 쓸때는 suspense 를 사용합시다.. 참고 자료 React.lazy 사용해보기 FE Lazy Loading 적용기 - 트렌비 기술블로그 useRef 란? (feat. RefObject) useRef useRef? React Hook의 일종 인자로 넘어온 초기값을 useRef 객체의 .current property에 저장한다. 사용 용도 DOM 객체에 직접 접근하여 내부 값을 변경할 때 focus() 메서드를 사용해야할 때 값이 변경되어도 컴포넌트에 리렌더링이 일어나지 않도록 할 때 useRef 는 내용이 변경되어도 변경되었다는 사실을 알려주지 않는다. .current property를 변경시키면 리렌더링을 발생시키지 않음. 그래서 로컬 변수 용도로도 사용할 수 있다. ex. Input과 같은 태그에서 값을 입력할 때마다 컴포넌트에 리렌더링이 일어나지 않도록 하고 싶은 경우 그저 함수의 초기값을 .current에 저장한다고 보면 된다. useRef의 반환 타입 종류인 MutableReOb.. useMutation 사용 시 컴포넌트 리렌더링 줄이기 문제점? 로그인페이지에서 로그인 버튼을 누르면 모든 컴포넌트가 리렌더링되는 문제가 발생한다. useMutation의 반환값들 export interface MutationResult { data?: TData | null; error?: ApolloError; loading: boolean; called: boolean; client: ApolloClient; } 이 중에서 loading 이 리렌더링을 발생시킨다. 따라서 useMutation을 작성한 컴포넌트 내에서 무조건 리렌더링이 발생한다. 컴포넌트의 리렌더링을 줄이고 싶다면, props를 전달해서 하위 컴포넌트에서 useMutation을 실행시키자. 프로젝트 적용하기 이전 코드 여기서 onLogin을 내려주는게 아니라, refs와 setErrorM.. 이전 1 2 3 4 5 ··· 21 다음
