Front-End: Web (176) 썸네일형 리스트형 [Next.js 13] next/image에서 width와 height를 유동적으로 설정하는 방법 방법 1) width, height 속성 = 0width={0}, height={0} ➡️ 이미지 고정 크기 제공 안함 (즉, next/image의 고정 레이아웃 무효화)style.width ➡️ 이미지의 실제 css 너비 결정 (500px)style.height ➡️ auto로 설정하면 비율 유지하면서 높이 자동 계산됨결과적으로 너비는 원하는 크기로, 높이는 자동으로 맞춰지면서Next.js가 최적화된 이미지 사이즈를 선택해서 렌더링해줍니다. 방법 2) fill 속성import Image from "next/image";export default function Example() { return ( );}fill 을 쓰면 Image 컴포넌트는 부모 요소를 기준으로 absol.. [TypeScript] type이 없는 모듈을 사용할 때 발생하는 에러 해결하기 에러 원인: @rumess/react-flip-countdown은 type을 제공하지 않기 때문 해결 방법 방법-1 tsconfig.json에 noImplicitAny 를 추가하면 해결. "noImplicitAny": false noImlicitAny 암묵적으로 any 타입을 가지는 것을 허락하지 않음. false로 설정하는 경우? 기존 자바스크립트 프로젝트를 타입스크립트로 마이그레이션 하는 경우. 이를 제외하면 true로 설정하는 것이 좋다. 위의 이유에 따라서 noImlicitAny는 사용하지 않는 것이 좋다고 판단. 방법-2 node_modules/@rumess/react-flip-countdown/dist에 index.d.ts 파일을 생성하고, declare module '@rumess/react.. zustand: subscribeWithSelector로 subscribe하기 특정 state가 바뀌었을 때마다 어떤 action을 해야하는 경우 (subscribe), subscribeWithSelector 미들웨이를 사용하면 된다. subscribeWithSelector subscribe(selector, callback, options?: { equalityFn, fireImmediately }): Unsubscribe 사용법 미들웨어 사용 import { subscribeWithSelector } from 'zustand/middleware' const useDogStore = create( subscribeWithSelector(() => ({ paw: true, snout: true, fur: true })) ) subscribe 작성 // 'paw'가 변경되었는지 감시.. 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들을.. [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.. 이전 1 2 3 4 5 6 ··· 22 다음
