리엑트

[카테고리:] 참고자료

  • SVG 애니메이션 효과 버튼

    React와 SVG 버튼으로 인터랙티브한 UI 만들기 React에서 인터랙티브한 버튼을 만드는 방법은 다양하지만, SVG를 활용하면 더 세밀하고 독특한 디자인을 만들 수 있습니다. react-svg-buttons 라이브러리는 이러한 SVG 버튼을 React 애플리케이션에서 쉽게 구현할 수 있게 도와주는 유용한 도구입니다. 1. react-svg-buttons란? react-svg-buttons는 React 컴포넌트로 SVG 그래픽을 이용해 아름답고 반응형인 버튼을 만들 수 있게 해주는 라이브러리입니다. 이 라이브러리는 SVG의 장점을 활용하여 확장 가능하고,…

  • SCSS 무엇인가?

    SCSS(Sassy CSS)는 CSS의 확장 문법을 제공하는 스타일시트 언어인 Sass(Syntactically Awesome Style Sheets)의 “.scss” 문법을 가리킵니다. 한마디로, 기존 CSS 문법을 그대로 쓰되 그 위에 변수, 중첩, 믹스인, 함수, 상속 같은 프로그래밍적 기능을 추가해 줍니다. 주요 특징 변수(Variables) 중첩(Nesting) 믹스인(Mixins) & 함수(Functions) 상속(Extend/Inherit) 분할 관리(Partials & Import) SCSS 사용 흐름 Webpack, Gulp, Parcel 같은 빌드 도구나 Next.js,…

  • webpack 이란?

    webpack은 최신 웹 애플리케이션 개발에서 널리 사용되는 모듈 번들러(module bundler) 입니다. 주요 역할 왜 필요한가요? 어떻게 동작하나요? webpack은 여러 소스 파일을 효율적으로 관리하고, 최적화된 번들 파일로 만들어주는 도구입니다. 대규모 프론트엔드 프로젝트에서 거의 필수적으로 사용됩니다.

  • React, Next 개발자가 알아야할 소프트웨어 및 기술

    React와 Next.js 개발자가 알아야 할 주요 소프트웨어 및 기술을 소개합니다. 이 기술들은 프론트엔드 개발을 효율적으로 진행하는 데 필수적이고, 최신 웹 개발 환경에 적합한 도구들입니다. 1. 프론트엔드 개발 필수 소프트웨어 및 기술 1.1. 코드 편집기 및 IDE Visual Studio Code (VS Code) React 및 Next.js 개발에 가장 많이 사용되는 코드 편집기입니다. 다양한 플러그인과 확장 기능을 제공하여…

  • TypeScript, ESM(ECMAScript Modules)

    TypeScript 자체는 모듈 시스템을 제공하는 언어이지만, ESM(ECMAScript Modules) 또는 CommonJS와 같은 모듈 시스템 중 하나를 선택하여 사용할 수 있습니다. TypeScript는 ESM 모듈과 CommonJS 모듈을 모두 지원합니다. 중요한 점은 TypeScript가 자체 모듈 시스템을 가지고 있지는 않지만, 컴파일된 JavaScript 코드가 어떤 모듈 시스템을 사용할지를 설정할 수 있다는 것입니다. TypeScript에서 ESM을 사용하는 방법: TypeScript에서 ESM(ECMAScript Modules)을 사용하려면 tsconfig.json…

  • 리엑트 UI 디자인 참고/라이브러리

    Material UI와 비슷한 React UI 킷으로는 Ant Design, React-Bootstrap, Fluent UI, Carbon Design System, Tailwind CSS, Semantic UI, Foundation, Chakra UI, Bulma, Styled Components, PrimeReact 등이 있습니다. 이들은 모두 다양한 구성 요소와 디자인 철학을 제공하여, 기업용 응용 프로그램부터 디자인 중심의 프로젝트까지 다양한 프로젝트 요구에 맞출 수 있습니다. Here are some React UI kits similar to…