728x90 반응형 티스토리챌린지14 [TIL] 11/21 2024. 11. 21. [TIL] 11/19 1. 경로 관리 - 상대경로 -> 절대경로 만들기 프로젝트를 진행하다보면 경로가 지저분하게 생기고 상대경로로 불러오기 때문에 어디서 불러오고 있는지 파악이 어려워진다. 그래서 CRACO 로 상대경로를 절대경로로 바꾸어서 보기 편하게 만들어보려고 한다. 절대경로로 바꾸어두면 보기도 편하고 디렉토리 구조가 변경되더라도 import 경로를 쉽게 유지/관리할 수 있다. 1.1. CRACO (Create React App Configuration Override) 설치npm i -D @craco/craconpm i -D craco-alias 프로젝트 폴더에 tsconfig.paths.json 파일 만들고(프로젝트 폴더명이 project 라면 project/tsconfig.paths.ts ),기존의 tscon.. 2024. 11. 19. [React.js] 6주차 - TodoList 만들기 Todo 앱 만들기 1. App 컴포넌트최상위 컴포넌트인 App 에 todos state 를 정의해놓고 사용각 todo 에는 id 가 존재하는데, id 는 ref 로 정의 -> ref 는 state 와 다르게 값이 변경되어도 렌더링 ximport './App.css'import Header from './components/Header'import Editor from './components/Editor'import List from './components/List'import { useState, useRef } from 'react'const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Dat.. 2024. 11. 18. [TIL] 11/15 -webkit-box, Ellipsis, $ 접두사, 낙관적 업데이트 1. EllipsisBox 만들기ElipsisBox 란 일반적으로 텍스트가 지정된 범위를 초과할 때 나머지 텍스트를 생략하고 말줄임표 (...) 를 표시하도록 스타일링된 컨테이너를 의미한다. 1.1. 전체 코드interface Props { children: ReactNode; linelimit: number; // 몇 줄까지 보여줄 것인지}const EllipsisBox = ({ children, linelimit }: Props) => { const [expanded, setExpanded] = useState(false); // 처음엔 확장되지 않음 return ( {children} {setExpanded(!expanded)}}> .. 2024. 11. 15. 이전 1 2 3 4 다음 728x90 반응형
