FrontEnd/React 3

[React] React + Tailwind CSS 시작하기

이전에 리액트 프로젝트를 진행할 때는 주로 SCSS를 사용해왔습니다.SCSS는 CSS를 확장한 기능으로 가독성이 좋고 재사용 가능한 스타일링에 유용했지만이제는 프로젝트에서 많이 사용하는 Tailwind를 도입해보기로 했습니다.1. SCSS vs Tailwind CSS1) SCSSSCSS는 가독성 높은 코드와 변수, 믹스인, 중첩 규칙으로 유연한 스타일링이 가능합니다.하지만 큰 프로젝트에서는 스타일이 충돌할 수 있고 관리가 어렵습니다.2) Tailwind CSS테일윈드는 클래스를 통해 스타일을 빠르게 작성할 수 있습니다.하지만 초기 학습이 필요하고 클래스 네이밍이 길어질 수 있습니다.이러한 SCSS 대신 Tailwind를 사용하여 생산성을 높이고 유지보수를 간편히 할 수 있을 것이라 생각해 이번 프로젝트에..

FrontEnd/React 2025.01.05

[Next.js] Next.js 설치 오류 code EEXIST, npm cache verify으로 해결

1. 오류상황 프로젝트에서 Next.js를 쓰기로 하여 급하게 배우려던 중,갑자기 EEXIST 오류를 맞닥뜨렸다. 하라는 대로 npx create-next-app tutorial를 입력했는데 왜 안되는 걸까...npm ERR! code EEXISTnpm ERR! syscall renamenpm ERR! path /Users/seon/.npm/_cacache/tmp/3ee0a393npm ERR! dest /Users/seon/.npm/_cacache/content-v2/sha512/06/d8/20f3d7409ea0f8bd5ed1de19703b182aa1b5102a0c77326ad0462d3261bb3f3f4ca6f17a33200964a958a53ea1d0c17b387bd4dfeb7aeb0a0979f0170..

FrontEnd/React 2024.05.14

[React] 이미지 슬라이더 만들기(자동, 무한반복)

프로젝트에서 메인 페이지와 상세 페이지 상단에 이미지 슬라이더를 넣기로 했다. 조건은 두 가지. 1. 화살표 버튼을 눌렀을 때 이동이 가능할 것. 2. 시간이 지나면 자동으로 다음 이미지로 넘어갈 것. - 옆으로 넘어가는 장면 useState와 useEffect가 필요하다.import { useState, useEffect } from 'react'; react-icons를 설치하여 화살표 아이콘을 가져온다.import { IoIosArrowForward, IoIosArrowBack } from 'react-icons/io'; 이미지 슬라이드에 들어갈 이미지들은 배열 형태로 외부에서 props로 받아오도록 한다.export default function ImageSlider({ slides }) 우선 이..

FrontEnd/React 2024.02.01