프론트엔드10 [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. [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. [React,TS] React프로젝트 TS세팅 하기 목차 설치 명령어npx create-react-app my-app --template typescript 2024. 5. 28. [React,TS] airbnb eslint prettier적용 목차 React + TS에서 airbnb형식 적용하기 설치방법npm install --save-dev eslint prettier eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import .eslintrc.json{ "extends": [ "airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "pl.. 2024. 5. 28. [React,Next] forwardRef사용하기 ( 개인기록 ) 목차 forwardRef는 무엇인가?'forwardRef'는 React에서 부모 컴포넌트가 자식 컴포넌트의 DOM 요소 또는 클래스 인스턴스에 'ref'를 전달할 수 있도록 해주는 고차 함수이다. 기본적으로 'ref'는 부모 컴포넌트가 자식 컴포넌트의 특정 DOM 요소에 접근할 수 있게 한다.하지만 일반적인 컴포넌트에서는 'ref'를 직접 전달할 수 없기 때문에 'forwardRef'를 사용하여 문제를 해결해야한다. 왜 'forwardRef'를 사용해야 하는가?React컴포넌트는 기본적으로 'ref'를 직접 전달받을 수 없다. 하지만 'forwaredRef'를 사용하면 부모 컴포넌트가 자식 컴포넌트의 특정 DOM 요소에 접근할 수 있게 된다. 이는 다음과 같은 경우에 유용하다.DOM 조작 : 특정 D.. 2024. 5. 27. Next.js + TypeScript + @reduxjs/toolkit 사용하기 < 2 / 2 > 개인기록 reduxToolKit 사용해보기아래 사진은 src/libs폴더입니다. 이중 예제에 사용하기좋은 counter를 이용해서 redux 를 사용해보려고합니다.counter.actions.ts// baseimport { createAction } from "@reduxjs/toolkit";// defaultexport const COUNTER = "counter";export const COUNTER_SLICE_NAME = `${COUNTER}Slice`;// actionconst INCREMENT = `${COUNTER}/increment`;const DECREMENT = `${COUNTER}/decrement`;const INCREMENT_BY_AMOUNT = `${COUNTER}/incrementByAm.. 2024. 5. 22. 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. [React] useCallback 이란? 목차 useCallback 이란? useCallback은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React 훅이다. 코드import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); 매개변수와 반환값 매개변수 fn캐시하려는 함수 값. 어떤 인자도 받을 수 있고 어떤 .. 2024. 5. 20. [React] useMemo란? 목차 useMemo란 무엇인가?useMemo는 리렌더링 사이의 계산 결과를 캐시할 수 있는 React 훅이다. const cachedValue = useMemo(calculateValue, dependencies)컴포넌트 최상단에서 useMemo를 호출하여 리렌더링 사이의 계산 결과를 캐시한다.import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} 매개변수calculateValue캐시하려는 값을 계산하는 함수이다. 이때 함수는 순수함수 여야하며, 인자를 받지 않고, 반.. 2024. 5. 20. 이전 1 다음
