-
react-query 설치, 사용
React query는 react App 에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 비동기 로직을 지원하는 라이브러리이다. server state 의 메모리를 관리하고 garbage collection 을 지원하고, 동일 데이터를 여러번 요청하면 알아서 한번만 요청한다. 사용법이 react 의 hook 과 비슷하다. pagination 및 lazy loading 에 최적화 되어있고, 인피니트 스크롤을 손쉽게 만들 수 있다. 설치 yarn add @tanstack/react-query QueryClient react query 를 사용하기 위해 클라이언트를 생성... Read More
-
vite 로 react 프로젝트 생성하기
javascript 는 처음에 간단한 동작만을 구현하는 것이 목적이었기 때문에 크기가 작아 모듈 관련된 표준 문법이 없었다. 하지만 프로젝트가 커지고 코드가 복잡해지면서 모듈 단위로 개발할 필요가 있었고 이 모듈을 관리해 주는 것이 번들러이다. 번들러는 의존성이 있는 모듈 코드를 하나이상의 파일로 만들어 주는 도구로, 브라우저 환경에서 잘 실행될 수 있도록 가공해 주는 역할을 한다. 대표적으로 webpack 이 있으며 Create React App 으로 리액트 프로젝트를 생성하면 webpack 을 이용하여 파일 로더, 빌드 툴, ES6, Eslint 등으로 개발을 할 수 있도록 한다. vite 는 go언... Read More
-
next.js 환경에서 recoil 로 상태관리
recoil 은 상태관리 라이브러리이다. react-redux 에 비해 코드가 간결해서 사용하기 쉽다. 설치 npm i recoil atoms.js atom 이라는 전역 객체를 만들어서 데이터를 관리한다. import { atom } from 'recoil'; export const 데이터Atom = atom({ key: 'key 지정', default: undefined, // 기본값 지정 }) _app.js _app.js 에서 컴포넌트를 RecoilRoot 로 감싸 recoil 데이터를 전역으로 전달한다. import { RecoilRoot } from 'recoil'; ... Read More
-
next.js 기초 Head, fetch, rewrites, 환경변수 생성
next.js 사용법 정리 청약닷컴 에서 기존에 router 로 작업하던 것을 next.js 로 수정했다. Head next.js 는 Head 태그로 페이지의 head 를 설정할 수 있다. HeadInfo 컴포넌트를 별도로 생성해 title 등의 정보를 props 로 전달받아 사용하면 편리하다. import Head from 'next/head'; export default function HeadInfo({title}){ return ( <Head> <title>{title}</title> </Head> ); } 각 페이... Read More
-
유튜브 영상별 썸네일 주소
청닷에서 유튜브 썸네일 사용하면서 정리 스크린샷 `http://i.ytimg.com/vi/${youtubeId}/0.jpg` `https://img.youtube.com/vi/${youtubeId}/0.jpg` 처음, 중간, 끝 사이즈 : 120x90 `http://i.ytimg.com/vi/${youtubeId}/1.jpg` `http://i.ytimg.com/vi/${youtubeId}/2.jpg` `http://i.ytimg.com/vi/${youtubeId}/3.jpg` `https://img.youtube.com/vi/${youtubeId}/1.jpg` `https://img.youtube.... Read More
-
next.js 설치, pages, Link, useRouter, style jsx
next.js 사용법 정리 청약닷컴 에서 기존에 router 로 작업하던 것을 next.js 로 수정했다. 설치 프로젝트 폴더에서 아래 명령어로 next.js 기반의 app을 생성한다. npx create-next-app@latest . 이때 typescript 와 ESLint 의 사용여부를 묻는데 프로젝트에 맞춰서 선택한다. ESLint 는 Javascript 의 문법을 확인해 주는 도구이다. CRA 로 app 생성시에는 ESLint 가 자동으로 설치된다. app 을 생성하면 기존 CRA 로 생성한 것과 다르게 pages 와 styles 폴더, next.config.js 가 있다. 프로젝... Read More
-
타입스크립트 overload, this, 접근제한자, generic
Overload 동일한 매개변수이지만 갯수나 타입에 따라 다른 타입의 return 값이 반환될 때 overload 처리한다. interface User { name: string; age: number; } function memberDB(name: string, age: number | string): User | string { if (typeof age === 'number') return {name, age}; else return 'age 는 숫자 형식이야 합니다.' } const David: User = memberDB('David', 20); const Emily: string ... Read More
-
타입스크립트 type, interface
기본 타입 문자열 let text: string = 'text'; text = 3; // error 숫자 let num: number = 1; num = 'text'; // error 불리언 let isBoolean: boolean = true; isBoolean = 'boolean'; // error null let empty: null = null; empty = 'null'; // error undefined let errors: undefined = undefined; errors = 'undefined'; // error 배열 const... Read More
-
map으로 리스트 출력 중 return시 발생 문제
오늘의 삽질일기. 리스트를 동적으로 출력하기 위해 map() 을 돌 때, 조건에 따라 일부 값을 나타내고 싶지 않을 수 있다. 그래서 처음에는 아래와 같이 조건을 주어 빈값을 return 시켰다. 리스트.map((데이터, 인덱스)=>{ if (조건) return; return ( 데이터출력 ) }) 그러나 JSX에서 작성한 코드이기 때문에 돔 요소를 return 시켜야 했고, 그래서 빈 요소를 return 시켰다. 리스트.map((데이터, 인덱스)=>{ if (조건) return <></>; return ( 데이터출력 ) }) ... Read More
-
Next.js Typescript에서 svg를 컴포넌트로 불러오기
react로 만든 app에 typescript를 적용했다. 그 과정에서 svg 파일이 컴포넌트 형태로 import 되지 않아, 어제 아래 방법으로 해결했다. svg 컴포넌트 import src 폴더에 아래 코드로 custom.d.ts 파일을 생성한다. declare module '*.svg' { import React = require('react'); export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>; const src: string; export default src; } tsconfi... Read More