typescript7 [TS]@types 목차 @types란타입스크립트 프로젝트에서 외부 라이브러리의 타입 정보를 제공하기 위해 사용되는 타입 정의 패키지의 표준 네임스페이스.타입스크립트는 타입 정보를 포함하지 않는 일반 자바스크립트 라이브러리로도 사용할 수 있는데, 이 때 타입 정보를 @types 패키지로 별도로 제공하여 타입 안정성을 유지할 수 있게 해준다. @types의 역할과 사용 방식 1. 타입 정의 제공@types 패키지는 DefinitelyTyped라는 오픈 소스 프로젝트를 통해 관리되며, 타입스크립트 커뮤니티가 유지 보수한다.@types 네임스페이스 하위에는 유명한 자바스크립트 라이브러리들의 타입 정의 파일들이 들어 있으며, 라이브러리명과 동일한 이름을 가진다.예를 들어, lodash라는 자바스크립트 라이브러리를 타입스크립트에서.. 2024. 11. 2. [Next.js, React] TodoList 만들어보기 목차 폴더구조 Next.js를 사용하였으며 /todolist 경로 이동시 사용할 page.tsx와 containers/TodoList를 사용하였다. 파일 내용 /src/app/todolist/page.tsximport TodoList from '@/containers/TodoList/TodoList';export default function Page() { return ;} /todolist 경로에서 보여줄 컨테이너 /src/containers/TodoList/TodoList.styles.tsimport styled from 'styled-components';const StyledTodoList = styled.div` display: flex; flex-direction: column.. 2024. 6. 4. [Next.js, TS,Zustand] 페이지 이동전 로딩효과 추가하기 목차 Next.js 14이상 app라우터에서 페이지 로딩효과 추가하기Next.js 에서 app라우터로 개발을 하는 도중 라우터 이동전 로딩효과를 주는게 필요하였습니다. 사용 버전react : ^18zustand : ^4.5.2next : 14.1.0 진행과정 loadingStore.ts 추가/src/store/loadingStore.ts파일을 만들어줍니다.import { create } from 'zustand';interface LoadingState { isLoading: boolean;}interface LoadingActions { setLoading: (loading: boolean) => void;}const useLoadingStore = create((set) => ({ isLoadi.. 2024. 5. 30. [Next.js,TS] 특정폴더에만 Eslint 적용하기 목차 왜 특정 폴더에만 Eslint를 적용하나요?기존 만들어진 프로젝트에서 airbnb세팅 이랑 여러 커스텀 eslintrc를 넣었을때 바꿔야 할 부분이 너무 많아서 도중 build가 안되는 현상이 일어났다.그당시 .eslintrc.json전체 규칙을 적용한 모습{ "extends": [ "next/core-web-vitals", "airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended" ], "plugins": ["@typescript-eslint", "prettier"], "parser": "@typescript-eslint/parser", "parse.. 2024. 5. 30. [React,TS]React.lazy와 Suspense로 코드 스플리팅 구현하기 목차 개요현대 웹 애플리케이션은 점점 더 복잡해지고, 초기 로딩 시간을 줄이는 것은 사용자 경험을 향상시키는 중요한 요소이다.React에서는 'React.lazy'와 'Suspense'를 통해 코드 스플리팅을 쉽게 구현할 수 있는 방법을 제공한다.이번 글에서는 'React.lazy'와 'Suspense'를 사용하여 동적 컴포넌트를 로드하는 방법을 알아보려고 한다. 코드 스플리팅이란?코드 스플리팅은 애플리케이션을 여러 개의 작은 청크(chunk)로 나누어, 필요한 순간에 해당 청크를 로드하는 기술이다.이를 통해 초기 로딩 시간을 줄이고, 사용자가 필요한 기능을 사용할 때만 관련 코드를 로드하여 성능을 최적화 할 수 있다. React.lazy'React.lazy'는 React에서 컴포넌트를 동적으로 임포.. 2024. 5. 28. [React,TS] 라우팅 코드 컨벤션 목차 라우팅 코드 컨벤션이 왜 필요한가?Next.js와 다르게 React는 라우팅을 직접 지정해줘야한다. 그래서 효율적인 코드 컨벤션으로 관리가 되면 좋기때문에 글을 남기려고 한다. 사용 버전"dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.97", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "eslint": "^8.57.. 2024. 5. 28. Next.js + TypeScript + @reduxjs/toolkit 사용하기 < 1 / 2 > 개인기록 목차 상태라이브러리인 redux를 Next.js + TypeScript에서 써보자 진행과정store.ts 생성 src/libs 위치에 store.ts파일을 생성해준다. 그리고 아래 코드처럼 작성을해준다.import { Action, configureStore, ThunkAction } from "@reduxjs/toolkit";import { counterReducer } from "./features/counter";import { authReducer } from "./features/auth/slices/auth.slice";export const makeStore = () => { return configureStore({ reducer: { counter.. 2024. 5. 22. 이전 1 다음
