TypeScript
React에서 브라우저 창 제어하기: 새 창 열기부터 URL 추적까지
React 애플리케이션에서 특정 URL을 새 창으로 열고, 그 창의 변화를 추적하는 기능이 필요한 경우가 있습니다. 이 글에서는 새 창 열기, URL 가져오기, 리디렉션 감지 등 브라우저 창 제어와 관련된 다양한 방법을 알아보겠습니다.새 창 열기 기본 방법React에서 새 창을 여는 가장 기본적인 방법은 window.open() 메서드를 사용하는 것입니다.function OpenWindowButton() { const openNewWindow = () => { window.open('https://example.com', '_blank'); }; return ( 새 창에서 열기 );}window.open() 메서드는 다음과 같은 매개변수를 받습니다:첫 번째 매개변수: ..
Next.js에서 cookies-next로 쿠키 관리하기
# 설치npm install cookies-next# 또는yarn add cookies-next# next.js 버전이 12.2~14.x 인 경우 npm install cookies-next@4.3.0 로 설치Next.js 애플리케이션에서 사용자 상태 관리나 인증 정보 저장을 위해 쿠키는 필수적입니다. cookies-next 라이브러리는 Next.js의 클라이언트와 서버 컴포넌트 모두에서 쿠키를 손쉽게 다룰 수 있게 해주는 유용한 도구입니다. 이 글에서는 cookies-next의 주요 기능과 실제 활용 방법을 살펴보겠습니다.cookies-next의 주요 기능cookies-next는 다음과 같은 핵심 기능을 제공합니다:쿠키 설정 (setCookie)쿠키 가져오기 (getCookie)쿠키 삭제 (delete..
tailwind CSS : 유틸리티 기반 CSS 프레임워크
# 설치npm install tailwindcssnpx tailwindcss initTailwind CSS는 유틸리티 클래스를 기반으로 한 혁신적인 CSS 프레임워크입니다. 미리 정의된 클래스를 조합하여 HTML 내에서 직접 스타일을 구성할 수 있어 생산성을 크게 높일 수 있습니다. 2017년에 Adam Wathan에 의해 만들어진 이 프레임워크는 CSS 작성 방식에 혁명을 가져왔으며, 현재 많은 기업과 개발자들이 채택하고 있습니다.기본 설정// tailwind.config.jsmodule.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [],}/* main.css */@tailwind base;@..
Zod: TypeScript 스키마 검증
# 설치npm install zod기본 사용법import { z } from "zod";// 기본 스키마 정의const userSchema = z.object({ name: z.string(), age: z.number().min(0), email: z.string().email(), website: z.string().url().optional()});// 타입 추론type User = z.infer;// 데이터 검증try { const user = userSchema.parse({ name: "John", age: 30, email: "john@example.com" });} catch (error) { console.error(error);}고급 스키마 정의const a..
React Hook Form: 폼 상태 관리
React Hook Form은 고성능의 유연한 폼 유효성 검사를 제공하는 라이브러리입니다. 불필요한 리렌더링을 최소화하고, 사용하기 쉬운 API를 제공합니다.기본 설치 및 사용법npm install react-hook-formimport { useForm } from 'react-hook-form';interface FormInputs { email: string; password: string;}function LoginForm() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data: FormInputs) => { console.log(data); }; return ( ..
Node-Cache : 서버 성능 최적화
Node-Cache는 Node.js 애플리케이션에서 메모리 캐싱을 구현할 수 있게 해주는 간단하고 강력한 모듈입니다. 데이터베이스 쿼리 결과나 API 응답을 캐싱하여 애플리케이션의 성능을 향상시킬 수 있습니다.기본 설치 및 설정const NodeCache = require('node-cache');// 기본 캐시 인스턴스 생성const cache = new NodeCache({ stdTTL: 600, // 기본 TTL 10분 checkperiod: 120 // 만료된 항목 점검 주기 2분});기본적인 캐시 사용법// 데이터 저장cache.set('user:123', { name: 'John', age: 30 });// 데이터 조회const data = cache.get('user:123');/..
React : map
React에서 map은 배열의 각 요소를 순회하며 새로운 JSX 요소를 생성하는 데 사용되는 필수적인 메서드입니다. 이를 통해 반복적인 UI 요소를 효율적으로 렌더링할 수 있습니다.기본적인 map 사용법const numbers = [1, 2, 3, 4, 5];function NumberList() { return ( {numbers.map(number => ( {number} ))} );}객체 배열 다루기const users = [ { id: 1, name: 'John', email: 'john@example.com' }, { id: 2, name: 'Jane', email: 'jane@e..
React useEffect 의존성 경고
더보기React Hook useEffect has a missing dependency: ''. Either include it or remove the dependency arrayReact의 useEffect Hook을 사용할 때 자주 마주치는 경고 메시지에 대해 알아보고, 이를 올바르게 해결하는 방법을 살펴보겠습니다.경고가 발생하는 일반적인 상황const [data, setData] = useState([]);const fetchData = async () => { const response = await api.getData(); setData(response.data);};// 경고 발생: fetchData가 의존성 배열에 없음useEffect(() => { fetchData()..