Dev ; jenna

[React 리액트] 리액트에서 scss 설치 react scss install

css 로 사용하다가 scss 를 바로 import 하기로 했다 yarn add node-sass OR npm install node-sass

[Portfolio 포트폴리오] 리액트에서 heroicons 설치 react heroicons install with yarn

heroicons installyarn add @heroicons/react 사용법import { BeakerIcon } from '@heroicons/react/24/solid'function MyComponent() { return ( ... )}

[Portfolio 포트폴리오] 리액트에서 외부링크 설정 react external link setting with yarn

a 태그에 외부링크 설정하기https://developer-talk.tistory.com/862 [React]새로운 탭 띄우는 방법새로운 탭 띄우는 방법 이번 포스팅은 React에서 외부 링크를 띄우는 방법을 소개합니다. a 태그를 활용하여 새로운 탭 띄우기 첫 번째 방법으로 HTML의 기본 요소인 태그를 사용할 수 있습니다. 태developer-talk.tistory.com

[사이드 프로젝트 Side Project] 리액트에서 여러가지 레이아웃 설정 react multiple layout setting

페이지마다 레이아웃을 다르게 설정 https://www.crocus.co.kr/1814 [React] outlet을 이용한 쉬운 레이아웃 교체🔰 리액트 라우터 v6 버전에서 중첩 라우팅을 이용하면 부모 레이아웃은 그대로 두고 자식 레이아웃만 쉽게 교체할 수 있다. ✅ 중첩 라우팅 v6에서 중첩 라우팅이 컴포넌트의 children과 같은 개www.crocus.co.krhttps://hyebeen2658.tistory.com/19 리액트 라우터 outlet 사용하여 중첩된 레이아웃 구성React Router v6에서 도입된 새로운 개념으로, 중첩된 라우팅 구조를 구성할 수 있도록 해주는 컴포넌트입니다. Outlet 컴포넌트는 라우팅 컴포넌트 내부에서 사용되며, 중첩된 자식 라우트가 렌더링hyebeen265..

[Portfolio 포트폴리오] 리액트에서 스와이퍼 설치 react swiper.js install with yarn

설치yarn add swiper swiper 을 사용하기 위해 importimport { Swiper, SwiperSlide } from 'swiper/react';import 'swiper/css'; 네비게이션, 버튼 등을 사용하려면 모듈 추가import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';import 'swiper/css/navigation';import 'swiper/css/pagination';import 'swiper/css/scrollbar'; return

[Portfolio 포트폴리오] 리액트에서 타입스크립트 설치 react typescript install with yarn

프로젝트 생성 시 typescript 로 설치하는 법yarn create react-app my-app --template typescript// ORnpx create-react-app my-app --template typescript 기존 프로젝트에 typescript 를 설치하는 법yarn add typescript @types/node @types/react @types/react-dom @types/jest// ORnpm install --save typescript @types/node @types/react @types/react-dom @types/jest 기존 프로젝트에 추가했을 경우tsconfig.js 파일에 설정을 추가해야함 이 때, tsconfig.js 파일이 없다면 생성해준다np..

[Portfolio 포트폴리오] 리액트에서 tailwindcss 설치 react tailwindcss install with yarn

yarn으로 tailwindcss installyarn add -D tailwindcss postcss autoprefixer tailwind.config.js 파일 생성yarn tailwind init -p tailwind.config.js 파일에module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [],} [src] 하위 파일 중 확장자가 ".js", ".jsx", ".ts", ".tsx" 인 파일을 대상으로 함 사용할 CSS 파일에 삽입@tailwind base;@tailwind components;@tailwind utilities; CSS 파일이 여러개여도선..

[Portfolio 포트폴리오] 리액트 설치 react install with yarn

reactyarn yarn 을 사용하기 위해 설치 먼저 실행npm install -g yarn 설치 후 버전 확인yarn --version yarn 으로 create-react-app 설치하기yarn global add create-react-app yarn 으로 내 프로젝트 설치하기(create-react-app 프로젝트명yarn create-react-app: command not found에러 발생)https://create-react-app.dev/docs/getting-started/ Getting Started | Create React AppCreate React App is an officially supported way to create single-page Reactcreate-rea..