반응형

※ 기본 타입

let test: string = 'hello';
let num: number = 0;
let isFemale: boolean = true;

 

※ 참조형 타입

let like: string[] = ['game', 'music', 'youtube'];
let dislike: Array<string> = ['study', 'homework'];
let odd: number[] = [1, 3, 5];
let even: Array<number> = [2, 4, 6];
let abc: boolean[] = [true, false, true];
let bbc: Array<boolean> = [true, false, true];

 

※ Tuple : 배열에 들어가는 자료형이 다를 때 배열의 순서마다 타입지정

let arr1: [number, string] = [3, '3'];

 

※ 객체 타입지정

    - interface : 객체처럼 자료의 구조가 복잡한 경우 직접 커스터마이징된 타입을 생성

type Score = 'A' | 'B' | 'C' | 'D' | 'F'; //정해져있는 특정값을 그룹으로 묶어서 커스텀 타입 지정 가능

interface Student {
	name: string;
	age: number;
	readonly isFemale: boolean; //readonly : 해당 property는 읽기전용으로 변경 불가
	address?: string; //? : 해당 property는 optional하게 적용 (있을 수도 있고 없을 수도 있고)
	// [grade: number]: string; //property명을 산정할 수 없을 때 대괄호로 묶어서 타입지정 가능
	[grade: number]: Score; //특정 그룹의 값을 묶어서 커스텀 타입 지정 가능
}

//Student라는 커스텀 인터페이스 타입이 지정된 객체
let student1: Student = {
	name: 'David',
	age: 20,
	isFemale: false,
	1: 'C',
	//address: 'Seoul',
};

let student2: Student = {
	name: 'Emily',
	age: 30,
	isFemale: true,
	2: 'B',
};

//student2[2] = 'Z';는 할 수가 없음 (Score에 없음)

 

'IT > TypeScript' 카테고리의 다른 글

[TypeScript] Generic 정리  (0) 2023.09.05
[TypeScript] VS Code에서 기본 세팅  (0) 2023.09.01
반응형

※TypeScript 기본 세팅
    1) 설치 명령어
        - npm i typescript -g
    2) 버전 확인
        - tsc -v
    3) TypeScript init (초기화)
        - tsc --init
    4) VS Code에서 자동 변환 (es5)
        - tsc -w 변환활파일명.ts
    5) VS Code에서 자동 변환 (es6)
        - tsc -w 변환할파일명.ts --target es6

'IT > TypeScript' 카테고리의 다른 글

[TypeScript] Generic 정리  (0) 2023.09.05
[TypeScript] 자료형 타입 정리  (0) 2023.09.04
반응형

- next 동작 형식 ssg, isr 방식으로 프리랜더되서 만들어지는 페이지는 프리렌더링 방식으로 구현되어 있는 페이지들은 이벤트가 발생하지 않더라도 라우터 설정되어 있는 메뉴에 호버하면 해당 데이터를 확인할걸로 예측해서 미리 prefetching 처리

- 해당 페이지 컴포넌트가 route명이 변경되서 unmount될때마다 이다음에 prefetch할 데이터 용량을 최소화하기 위해서 style노드를 제거

- Framer-motion AnimatePresence를 이용해서 모션이 끝날때까지 이전 컴포넌트의 언마운트 시점을 강제로 holding하고 있으면 이미 스타일 제거된 지저분한 페이지가 화면에 계속 출력이 되는 문제 발생

- 정적인 스타일은 상관없지만 자바스크립트 동적으로 제어하는 moudle.scss. style-component, tailwidnCSS에는 모두 위와 같은 문제 발생

@해결방법
- 라우터가 변경되는 시점마다, unmount되서 스타일이 날아가기 직전에 해당 스타일 노드를 head에서부터 복사한 다음에 next 고유 속성명 제거
- 복사한 style node를 다시 강제로 head에 삽입
- 이렇게 복사가 된 style 노드는 next가 제거할 수 없으므로 router가 변경되더라도 복사된 style이 유지되므로 스타일도 유지
- transition이 끝나서 이전 페이지 컴포넌트가 언마운트 되는 시점에 강제 복사했던 스타일 노드를 다시 제거
- 해당 기능을 함수로 만들어서 루트 컴포넌트에서 라우트가 변경 될때마다 호출

반응형

※ Debounce이란?

- 이벤트를 호출 시 연속적으로 여러번 호출 되는 것이 아닌 일정한 시간 동안 지연 시간을 주어 반복 횟수를 제어하는 것 입니다.

 

import { useRef, useState } from 'react';

export const useDebounce = (value) => {
	const [DebouncedVal, setDebouncedVal] = useState(value);
	const eventBlocker = useRef(null);

	//Timeout을 초기화 시켜줍니다.
	clearTimeout(eventBlocker.current);

	//일정 시간 동안 지연을 시켜줍니다.
	eventBlocker.current = setTimeout(() => {
		setDebouncedVal(value);
	}, 500);

	return DebouncedVal;
};

 

 

 

반응형

- Next에서는 Autoplay, Pagination, Navigation 기능을 활성화하기 위해 SwiperCore.use 사용

SwiperCore.use([Autoplay]);

<Swiper
    className={clsx(styles.swiper)}
    modules={[Autoplay]}
    autoplay={{ delay: 2000, disableOnInteraction: true }}
    loop={true}
    grabCursor={true}
    slidesPerView={1}
    spaceBetween={100}
    centeredSlides={true}
    breakpoints={{
        1200: {
            slidesPerView: 3,
            spaceBetween: 50,
        },
    }}
>
반응형

※ 컴포넌트 렌더링 흐름

1. _app.js에서 공통의 layout 템플릿 컴포넌트를 가져와서 전체 Component를 Wrapping
2. _app.js에 있는 Component는 page 폴더 안쪽에 있는 각각의 페이지 컴포넌트를 의미
3. 모든 페이지 Component에는 Layout Component의 공통의 구조가 적용 됨
4. 각각의 페이지 컴포넌트에서 페이지별로 들어갈 컨텐츠 추가

 

_app.js

import Layout from '@/components/templete/Layout';
import '@/styles/globals.scss';
import axios from 'axios';

export default function App({ Component, pageProps }) {
	return (
		<Layout>
			<Component {...pageProps} />
		</Layout>
	);
}

 

Layout.jsx

import Head from 'next/head';
import Header from '../organisms/Header';
import styles from './Layout.module.scss';
import clsx from 'clsx';

function Layout({ children }) {
	return (
		<>
			<Head>
				<meta name='description' content='Generated by create next app' />
				<meta name='viewport' content='width=device-width, initial-scale=1' />
				<link rel='icon' href='/favicon.ico' />
			</Head>
			<main className={clsx(styles.main)}>
				<Header />
				{children}
			</main>
		</>
	);
}

export default Layout;

 

 

반응형

※ Atomic Design Pattern

- 컴포넌트를 원자처럼 최소 단위로 쪼개서 재활용 가능하게 처리
- 단점 : 컴포넌트 간에 의존성이 생김, 특정 원자단위의 컴포넌트에서 문제가 발생하면 상위 컴포넌트까지 다 에러가 발생 소지

Atoms (원자)
     - 버튼, 메뉴, 제목, 글자, 폼요소, 썸네일
Molecules (분자)
     - 검색바 (폼,버튼), 메뉴(버튼)
Organisms (유기체)
     - GNB (메뉴를 그룹화)
Templates (템플릿)
     - 유기체들이 모여있는 기능 덩어리
Pages (페이지)
     - 템플릿들로 구성되어 있는 하나에 페이지

반응형

※ uncontrolled input이라는 에러 문구

    - 해당 value값에 값이 없을 때에 대한 대비책이 없을 때 뜨는 오류 문구
    - 해결방법 : 값이 없을 때 빈 문자를 대신 적용

 

<input type='text' value={UserName || ''} />

 

+ Recent posts