Colin's Blog
React.js로 구현한 온라인 포트폴리오 웹 사이트 만들기

소개

이번 글에서는 React.js를 사용하여 온라인 포트폴리오 웹 사이트를 만드는 방법에 대해 알아보겠습니다. React.js는 자바스크립트 라이브러리로, 동적인 사용자 인터페이스를 구축하는 데 매우 효과적입니다. 포트폴리오 웹 사이트는 자신의 작업물을 소개하고 전문성을 보여줄 수 있는 좋은 방법입니다.

시작하기 전에

React.js를 사용하기 위해 Node.js와 npm이 설치되어 있어야 합니다. Node.js는 JavaScript 런타임 환경을 제공하고, npm은 패키지 관리자로 필요한 라이브러리를 설치하고 관리하는 데 사용됩니다.

또한, React.js 크립트를 생성하기 위해 Create React App을 사용할 것입니다. Create React App은 React 개발에 필요한 설정과 구조를 자동으로 생성해주는 편리한 도구입니다.

프로젝트 설정

  1. 먼저 터미널을 열고 원하는 디렉토리로 이동한 다음, 다음 명령어를 실행하여 Create React App을 설치합니다:

    npx create-react-app portfolio

  2. 설치가 완료되면 다음 명령어를 실행하여 생성된 프로젝트 폴더로 이동합니다:

    cd portfolio

  3. 이제 프로젝트 폴더가 준비되었으므로 다음 명령어를 실행하여 React 앱을 실행합니다:

    npm start

    이제 포트폴리오 웹 사이트를 개발하기 위한 로컬 서버가 실행될 것입니다.

컴포넌트 생성하기

React에서는 모든 UI 요소를 컴포넌트로 나누어 관리합니다. 이번 예제에서는 Header, ProjectList, Footer 등의 컴포넌트를 생성합니다.

  1. src 폴더에 components 폴더를 생성합니다.

  2. components 폴더 안에 Header.js, ProjectList.js, Footer.js 파일을 생성합니다.

  3. 각 파일에 해당 컴포넌트의 코드를 작성합니다.

    // Header.js
import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>나의 포트폴리오 웹 사이트</h1>
    </header>
  );
};

export default Header;

    // ProjectList.js
import React from 'react';

const ProjectList = () => {
  return (
    <section>
      <h2>프로젝트 목록</h2>
      <ul>
        <li>프로젝트 1</li>
        <li>프로젝트 2</li>
        <li>프로젝트 3</li>
      </ul>
    </section>
  );
};

export default ProjectList;

    // Footer.js
import React from 'react';

const Footer = () => {
  return (
    <footer>
      <p>&copy; 2022 My Portfolio</p>
    </footer>
  );
};

export default Footer;

  4. 이제 각 컴포넌트를 사용하고자 하는 파일에서 import하여 JSX 내에서 사용할 수 있습니다.

포트폴리오 웹사이트 구성하기

  1. src 폴더 안에 App.js 파일을 생성하고 다음 내용을 작성합니다:

    import React from 'react';
import Header from './components/Header';
import ProjectList from './components/ProjectList';
import Footer from './components/Footer';

const App = () => {
  return (
    <div>
      <Header />
      <ProjectList />
      <Footer />
    </div>
  );
};

export default App;

    이제 App 컴포넌트에서 생성한 Header, ProjectList, Footer 컴포넌트가 포함됩니다.

  2. src 폴더 안에 index.js 파일을 열고 다음 내용을 수정합니다:

    import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

    이제 React 앱이 public/index.html 파일의 root 엘리먼트에 렌더링될 것입니다.

실행하기

  1. 터미널에서 다음 명령어를 실행하여 React 앱을 실행합니다:

    npm start

  2. 브라우저에서 http://localhost:3000을 엽니다.

안내한 내용을 따라오셨다면, React.js를 사용하여 온라인 포트폴리오 웹 사이트를 만드는 과정을 마칠 수 있을 것입니다. 이제 여러분의 작업물을 보여줄 준비가 되었습니다!

더 자세한 내용은 공식 React 문서를 참조해주세요.

#React #WebDevelopment

© 2018 Colin. All rights reserved.