React를 사용하여 Fylo 클라우드 스토리지 웹사이트 구축

소개

이 블로그 게시물에서는 React를 사용하여 기능이 풍부한 클라우드 스토리지 웹사이트를 만드는 방법을 살펴보겠습니다. Fylo에서 영감을 받은 이 사이트는 홈, 기능, 작동 방식, 사용후기 및 바닥글과 같은 섹션을 제공합니다. 그 과정에서 이 완전한 반응형 웹사이트를 구축하는 데 사용되는 구조, 구성 요소 및 스타일에 대해 논의할 것입니다.

---

프로젝트 개요

이 프로젝트는 클라우드 스토리지 서비스를 선보이기 위한 여러 섹션으로 구성됩니다. 각 섹션은 모듈화 및 유지 관리 용이성을 위해 React 구성 요소로 구축되었습니다. 다음 섹션을 다루겠습니다:

• 탐색바
• 홈
• 특징
• 작동 방식
• 사용후기
• 바닥글

---

특징

• 반응형 디자인: 웹사이트는 다양한 화면 크기에 맞게 조정됩니다.
• 모듈식 구성 요소: 웹 사이트의 각 섹션은 별도의 React 구성 요소이므로 유지 관리 및 확장이 쉽습니다.
• 재사용 가능한 자산: 이미지 및 기타 자산은 한 번 가져오면 구성 요소 전체에서 재사용됩니다.
• CSS 스타일링: 웹사이트는 맞춤 CSS를 사용하여 각 구성 요소의 스타일을 지정합니다.

---

사용된 기술

• React: 구성요소 기반 프런트엔드 라이브러리
• CSS: 레이아웃과 모양을 스타일링합니다.
• JavaScript: React 구성요소의 핵심 로직
• SVG 이미지: UI 개선을 위한 아이콘과 그래픽에 사용됩니다.

---

프로젝트 구조

fylo-cloud-storage-website/
│
├── public/
│   ├── index.html
│
├── src/
│   ├── assets/
│   │   ├── images/
│   │   │   ├── icon-access-anywhere.svg
│   │   │   ├── icon-security.svg
│   │   │   ├── illustration-intro.png
│   │   │   └── ...
│   ├── components/
│   │   ├── Navbar.js
│   │   ├── Home.js
│   │   ├── Features.js
│   │   ├── Working.js
│   │   ├── Testimonials.js
│   │   └── Footer.js
│   ├── App.js
│   ├── App.css
│   └── index.js

---

설치

1. 저장소 복제:

   git clone https://github.com/abhishekgurjar-in/fylo-cloud-storage.git

1. 종속성 설치:

   cd fylo-cloud-storage-website
   npm install

1. 애플리케이션 실행:

   npm start

웹사이트는 http://localhost:3000/에서 이용 가능합니다.

---

코드 설명

1. App.js

다른 모든 구성 요소(Navbar, Home, Tools, Working, Testimonials, Footer)를 가져오고 렌더링하는 루트 구성 요소입니다.

import "./App.css"
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import Features from "./components/Features";
import Working from "./components/Working";
import Testimonials from "./components/Testimonials";
import Footer from "./components/Footer";

const App = () => {
  return (
    <>
      <Navbar />
      <Home />
      <Features />
      <Working />
      <Testimonials />
      <Footer />
    </>
  );
};

export default App;

2. Navbar 구성 요소

탐색 모음에는 로고와 세 개의 클릭 가능한 링크(기능, 팀, 로그인)가 포함되어 있습니다.

import logo from "../assets/images/logo.svg";

const Navbar = () => {
  return (
    <div className="navbar">
      <div className="logo">
        <img src={logo} alt="" />
      </div>
      <div className="header">
        <a href="">Features</a>
        <a href="">Team</a>
        <a href="">Sign In</a>
      </div>
    </div>
  );
};

export default Navbar;

3. 홈 구성 요소

홈 섹션에서는 눈길을 끄는 배경 이미지와 '시작하기' 버튼으로 서비스를 소개합니다.

import bgHome from "../assets/images/illustration-intro.png";

const Home = () => {
  return (
    <div className="home">
      <div className="home-image">
        <img src={bgHome} alt="" />
      </div>
      <div className="home-text">
        <h1>All your files in one secure location, accessible anywhere.</h1>
        <p>
          Fylo stores all your most important files in one secure location.
          Access them wherever you need, share and collaborate with friends
          family, and co-workers.
        </p>
        <div className="button">
          <h4>Get Started</h4>
        </div>
      </div>
    </div>
  );
};

export default Home;

4. 기능 구성요소

이 구성요소는 클라우드 서비스의 네 가지 주요 기능을 해당 아이콘과 설명과 함께 강조합니다.

import AccessImage from "../assets/images/icon-access-anywhere.svg";
import SecurityImage from "../assets/images/icon-security.svg"
import collaborationImage from "../assets/images/icon-collaboration.svg"
import storageImage from "../assets/images/icon-any-file.svg"

const Features = () => {
  return (
    <div className="features">
      <div className="cards">
        <div className="card">
          <img src={AccessImage} alt="" />
          <h1>Access your files, anywhere</h1>
          <p>
            The ability to use a smartphone, tablet, or computer to access your
            account means your files follow you everywhere.
          </p>
        </div>
        <div className="card">
          <img src={SecurityImage} alt="" />
          <h1>Security you can trust</h1>
          <p>
          2-factor authentication and user-controlled encryption are just a couple of the security features we allow to help secure your files.
          </p>
        </div>
      </div>
      <div className="cards">
        <div className="card">
          <img src={collaborationImage} alt="" />
          <h1>Real-time collaboration</h1>
          <p>
          Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required.
          </p>
        </div>
        <div className="card">
          <img src={storageImage} alt="" />
          <h1>Store any type of file</h1>
          <p>
          Whether you're sharing holidays photos or work documents, Fylo has you covered allowing for all file types to be securely stored and shared.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Features;

6. 사용후기 구성요소

이 섹션에는 프로필 이미지와 함께 만족한 사용자의 피드백이 포함되어 있습니다.

import satish from "../assets/images/profile-1.jpg";
import Bruce from "../assets/images/profile-2.jpg";
import Iva from "../assets/images/profile-3.jpg"

const Testimonials = () => {
  return (
    <div className="testimonials">
      <div className="t-cards">
        <div className="t-card">
          <h4>
            Fylo has improved our team productivity by an order of magnitude.
            Since making the switch our team has become a well-oiled
            collaboration machine.
          </h4>
          <div className="profile">
            <div className="profile-image">
              <img src={satish} alt="" />
            </div>
            <div className="profile-text">
              <h1>Satish Patel</h1>
              <p>Satish Patel Founder & CEO, Huddle</p>
            </div>
          </div>
        </div>
        <div className="t-card">
          <h4>
            Fylo has improved our team productivity by an order of magnitude.
            Since making the switch our team has become a well-oiled
            collaboration machine.
          </h4>
          <div className="profile">
            <div className="profile-image">
              <img src={Bruce} alt="" />
            </div>
            <div className="profile-text">
              <h1>Bruce McKenzie</h1>
              <p>Bruce McKenzie Founder & CEO, Huddle</p>
            </div>
          </div>
        </div>
        <div className="t-card">
          <h4>
            Fylo has improved our team productivity by an order of magnitude.
            Since making the switch our team has become a well-oiled
            collaboration machine.
          </h4>
          <div className="profile">
            <div className="profile-image">
              <img src={Iva} alt="" />
            </div>
            <div className="profile-text">
              <h1>Iva Boyd</h1>
              <p>Iva Boyd Founder & CEO, Huddle</p>
            </div>
          </div>
        </div>
      </div>
      <div className="contact-card">
        <h1>Get early access today</h1>
        <p>It only takes a minute to sign up and our free starter tier is extremely generous. If you have any questions, our support team would be happy to help you.</p>
        <div className="input-section">
          <div className="input-box">
            <input type="text" placeholder=" email@example.com" />
          </div>
          <div className="submit-button">
<p>Get Started For Free </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Testimonials;

7. 바닥글 구성요소

바닥글에는 연락처 정보, 소셜 링크, 사이트 탐색 기능이 포함되어 있습니다.

import Logo from "../assets/images/logo.svg" 
import Location from "../assets/images/icon-location.svg"
import phone from "../assets/images/icon-phone.svg"
import email from '../assets/images/icon-email.svg'
const Footer = () => {
  return (
   <div className="footer">
    <div className="sec-1">
     <div className="logo">
      <img  src={Logo} alt="" />
     </div>
      <div className="location">
<img src={Location} alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </div>
    </div>
    <div className="sec-2">
      <div className="phone">
        <img src={phone} alt="" />
        <p>+1-543-123-4567</p>
      </div>
      <div className="email">
        <img src={email} alt="" />
        <p>example@fylo.com</p>
 <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
    <div className="sec-3">
      <p>About Us</p>
      <p>Jobs</p>
      <p>Pres</p>
      <p>Blog</p>
    </div>
    <div className="sec-4">
      <p>Contact Us</p>
      <p>Terms</p>
      <p>Privacy</p>
    </div>
   </div>
  )
}

export default Footer

라이브 데모

여기에서 이 프로젝트의 라이브 데모를 확인할 수 있습니다.

결론

이번 게시물에서는 React를 사용하여 기능이 풍부한 반응형 웹사이트를 만들고 클라우드 스토리지 서비스를 선보였습니다. 우리는 프로젝트를 구성하고, 구성 요소를 분류하고, CSS를 사용하여 스타일을 지정하는 방법을 다루었습니다. 이러한 모듈식 접근 방식을 사용하면 필요에 따라 기능을 쉽게 추가하거나 업데이트할 수 있습니다.

크레딧

이 프로젝트는 Fylo 클라우드 스토리지 서비스 디자인에서 영감을 받았습니다.

작가

Abhishek Gurjar는 실용적이고 기능적인 웹 애플리케이션 제작에 열정을 쏟는 헌신적인 웹 개발자입니다. GitHub에서 그의 프로젝트를 더 확인해 보세요.

위 내용은 React를 사용하여 Fylo 클라우드 스토리지 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!