참고 : https://tailwindcss.com/docs/installation/using-viteTailwind CSS 설치Tailwind CSS 설치 npm install tailwindcss @tailwindcss/vite 공식 문서에서는 postcss/autoprefixer 없이도 최신 플러그인만으로 충분합니다vite 플러그인 설정 vite.config.ts 파일을 열어서 플러그인에 Tailwind를 추가합니다 import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ plu..

프론트엔드 개발을 하다 보면 사용자 경험(UX)을 향상시키기 위해 시간을 직관적으로 표현해야 할 때가 있습니다. 예를 들어:방금 전3분 전1시간 전3일 전2022년 2월 16일이러한 상대적 시간 표시는 사용자가 콘텐츠의 시간적 맥락을 쉽게 이해할 수 있게 해주는 중요한 UX 요소입니다. 하지만 이를 직접 구현하려면 복잡한 날짜 계산과 다국어 지원 등 고려해야 할 사항이 많습니다.다행히도 프론트엔드 생태계에는 이미 검증된 날짜 처리 라이브러리들이 있습니다. 그중에서도 date-fns는 다음과 같은 장점으로 주목받고 있습니다:트리 쉐이킹이 가능한 모듈형 구조직관적인 API타입스크립트 지원작은 번들 사이즈date-fns를 사용하면 복잡한 날짜 로직을 몇 줄의 코드로 구현할 수 있습니다. 실제 구현 예시를 살펴..

💡public/ : 빌드 프로세스에 의해 처리되지 않는 이미지assets/ : 컴포넌트 내에서 사용되는 이미지public/ 폴더이미지를 public/폴더에 저장하고 index.html 또는 index.css 파일 내에서 직접 참조할 수 있습니다.이렇게 하는 이유는 public/에 저장된 이미지(또는 일반 파일)가 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적으로 제공되기 때문입니다. index.html과 마찬가지로, 이 파일들은 브라우저 내에서 직접 방문할 수 있으며, 다른 파일에 의해 요청될 수도 있습니다.예를 들어, localhost:5173/some-image.jpg를 불러오면 해당 이미지를 볼 수 있습니다. (public/ 폴더에 이미지가 있을 경우에 해당)src/assets/ 폴더이미지를..

리액트로 아래와 같은 입력폼을 만들겠습니다. 컴포넌트 마크업 작성여러 줄의 텍스트를 입력하므로 를 사용합니다. 아래는 request할 json 응답 형식입니다.{ "writerId": 0, "parentId": "0", "content": "Hello World" } 댓글 내용은 content로 전송되니까 name 속성에 content를 명시해주겠습니다.name: 문자열 타입. 폼과 제출되는 입력의 이름을 지정합니다. 일반적으로 모든 는 태그 안에 두게 되는데, 이렇게 하면 해당 레이블이 해당 텍스트 영역과 연관됨을 브라우저가 알 수 있습니다접근성을 위해 태그 필요, 스크린 리더에서 텍스트 영역에 포커스를 맞출 때 레이블 캡션을 읽습니다‘댓글을 남겨보세요’를 넣기 위해 placeholder 사용합니다..

리액트의 필요성리액트가 필요없는 경우?간단한 웹페이지나 많은 기능이 없는 웹을 개발할 때리액트가 필요한 경우?인터랙티브한 요소가 많은 웹페이지를 개발할 때리액트를 사용하면 작성해야 할 코드량이 줄어든다 바닐라 자바스크립트 → 명령적 방식브라우저에 단계별로 수행할 작업을 지시하는 방식리액트 → 선언적 방식화면에 표시할 UI 코드 작성이벤트 리스너와 동적 값을 HTML에 추가리액트 기능 추가(상태 정의 및 상태 활성화 조건 설정)리액트가 자동으로 브라우저 명령어 생성프로젝트 생성 도구1. Create React Apphttps://create-react-app.dev/ Create React AppSet up a modern web app by running one command.create-react-ap..