분류 전체보기 (432) 썸네일형 리스트형 shallow로 zustand 최적화하기 Intro 최상단에 Home 컴포넌트가 있고, 하위로 다양한 컴포넌트가 있는 구조가 있다고 하자. 그럼 하위 컴포넌트에서 상태값이 바뀔 때마다 Home 컴포넌트도 리렌더링된다. Home |-- Memo |-- Summary |-- Dialog ㄴ-- ... 이를 방지하고자 zustand에서는, shallow를 제공한다. shallow 기본적으로 zustand는 엄격한 비교(old === new)로 변경사항을 감지한다. 그래서 state가 변경될 때마다 컴포넌트가 리렌더링된다. const nuts = useBearStore((state) => state.nuts) const honey = useBearStore((state) => state.honey) 만약 state가 하나의 객체에서 일부 state들을.. ky란? ky fetch 보다 API를 훨씬 간편하게 불러올 수 있음 메서드를 짧게 쓸 수 있음(ky.post()) redirect해보고, 2xx가 아닌 상태 코드는 모두 오류로 처리함 request에 실패하면 재요청함 JSON 옵션 시간 초과 지원 URL prefix 옵션 default 값을 커스텀할 수 있음 hooks 예시 import ky from 'ky'; const json = await ky.post('', {json: {foo: true}}).json(); console.log(json); //=> `{data: '🦄'}` 위의 코드를 fetch 로 나타내면 이렇게 작성해야 한다. class HTTPError extends Error {} const response = await fetch('', {.. [React-Query] createJSONStorage createJSONStorage 스토리지 종류 선택 default값은 localStorage 세션 스토리지를 사용하고 싶은 경우엔, sessionStorage를 입력한다. import { create } from 'zustand' import { persist, createJSONStorage } from 'zustand/middleware' const useFishStore = create( persist( (set, get) => ({ fishes: 0, addAFish: () => set({ fishes: get().fishes + 1 }), }), { name: 'food-storage', // unique name **storage: createJSONStorage(() => sessionSto.. _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.. Express.js에서 정적 파일 제공하기 express.static() express의 미들웨어 모듈 이를 이용하면 정적 파일을 직접적으로 제공할 수 있다. 예로 들면, 아래 코드를 작성하면 public이라는 이름의 디렉터리에 포함된 이미지, css 파일 및 js 파일을 url로 제공하게 된다. app.use(express.static('public')); 다음과 예와 같이 /static 경로를 통해서 public 디렉터리에 포함된 파일을 로드할 수 있다. app.use('/static', express.static('public')); http://localhost:3000/css/style.css http://localhost:3000/images/logo.css http://localhost:3000/js/main.js http://loc.. Express.js에서 에러 처리하기 기본 에러 처리 express에서는 자동으로 에러 코드 및 에러 정보를 클라이언트로 응답해준다. 에러 처리 - 방법1 라우터에서 에러가 발생하면, express가 알아서 클라이언트로 500 에러 코드와 에러 메시지를 전달한다. app.get('/example', (req, res) => { throw new Error('에러 발생'); }); 에러 처리 - 방법2 콜백 인수 next를 이용하여 에러 발생 코드와 정보를 전달한다. app.get('/example', (req, res, next) => { next(new Error('에러 발생')); }); 에러 처리 핸들러 미들웨어 함수로 에러 처리 에러 처리 핸들러 미들웨어 함수를 이용하면, 앱에서 발생한 모든 에러를 한군데서 처리할 수 있다. 주의해야.. 이전 1 2 3 4 5 6 ··· 54 다음
