React.js를 이용한 온라인 포트폴리오 웹사이트 제작 방법

09 Nov 2023

reactjs

React.js는 현대적인 웹 개발에 많이 사용되는 인기있는 프론트엔드 라이브러리입니다. 이 글에서는 React.js를 사용하여 온라인 포트폴리오 웹사이트를 제작하는 방법을 소개하겠습니다.

React.js란?

React.js는 페이스북에서 개발된 UI 라이브러리로, 컴포넌트 기반으로 동작합니다. React.js는 가상 돔(Virtual DOM)을 사용하여 효율적으로 페이지를 업데이트할 수 있으며, 단방향 데이터 흐름을 통해 코드의 유지보수를 용이하게 합니다.

프로젝트 설정

React.js를 사용하기 위해 Node.js와 npm을 먼저 설치해야 합니다. 설치 후 터미널에서 다음 명령어를 입력하여 새로운 React 프로젝트를 생성합니다.

npx create-react-app portfolio

프로젝트 폴더로 이동한 후 다음 명령어로 개발 서버를 실행합니다.

cd portfolio
npm start

개발 서버가 성공적으로 실행되면 브라우저에서 localhost:3000으로 접속하여 React 애플리케이션을 확인할 수 있습니다.

컴포넌트 만들기

React.js에서는 재사용 가능한 컴포넌트를 만들 수 있습니다. 예를 들어, 포트폴리오 웹사이트의 각각의 섹션을 위한 컴포넌트를 생성하고, 이를 App 컴포넌트에서 사용할 수 있습니다.

// src/components/About.js
import React from 'react';

const About = () => {
  return (
    <div>
      <h2>About Me</h2>
      <p>안녕하세요! 저는 개발자입니다.</p>
    </div>
  );
}

export default About;

// src/App.js
import React from 'react';
import About from './components/About';

const App = () => {
  return (
    <div>
      <h1>My Portfolio</h1>
      <About />
    </div>
  );
}

export default App;

컴포넌트를 생성한 후에는 해당 컴포넌트를 App 컴포넌트에서 사용할 수 있도록 import하고 JSX 형식으로 렌더링합니다.

데이터 관리

포트폴리오 웹사이트에서는 사용자의 정보를 저장하는 데이터베이스와 연동할 수 있습니다. 이를 위해 React.js에서는 상태(State)와 속성(props)을 사용합니다.

// src/components/Portfolio.js
import React, { useState, useEffect } from 'react';

const Portfolio = () => {
  const [projects, setProjects] = useState([]);

  useEffect(() => {
    fetchProjects(); // 데이터 가져오기
  }, []);

  const fetchProjects = async () => {
    // 데이터베이스에서 프로젝트 목록을 가져옴
    const response = await fetch('/api/projects');
    const data = await response.json();
    setProjects(data);
  }

  return (
    <div>
      <h2>My Projects</h2>
      <ul>{projects.map(project => <li key={project.id}>{project.name}</li>)}</ul>
    </div>
  );
}

export default Portfolio;

위의 예제에서는 useState 훅을 사용하여 projects라는 상태를 정의하고, useEffect 훅을 사용하여 컴포넌트가 처음으로 렌더링될 때 fetchProjects 함수를 호출하여 데이터베이스에서 프로젝트 목록을 가져옵니다.

스타일링

React.js에서는 CSS 모듈, Styled-components 등 여러가지 방법으로 스타일링할 수 있습니다. 예를 들어, CSS 모듈을 사용하여 포트폴리오 웹사이트의 스타일을 적용할 수 있습니다.

// src/components/Header.module.css
.container {
  background-color: #333;
  color: white;
  padding: 16px;
}

.title {
  font-size: 24px;
}

// src/components/Header.js
import React from 'react';
import styles from './Header.module.css';

const Header = () => {
  return (
    <header className={styles.container}>
      <h1 className={styles.title}>My Portfolio</h1>
    </header>
  );
}

export default Header;

CSS 파일을 생성한 후 해당 파일의 클래스를 import하여 컴포넌트에 적용합니다.

배포

React.js로 개발한 포트폴리오 웹사이트를 실제 서버에 배포하려면, 빌드 과정을 거쳐 정적 파일을 생성해야 합니다. 다음 명령어를 사용하여 프로젝트를 빌드하고 정적 파일을 생성합니다.

npm run build

빌드가 완료되면 build 폴더에 정적 파일이 생성됩니다. 이 파일들을 웹 서버에 업로드하여 배포하면 됩니다.

마무리

이제 React.js를 이용하여 온라인 포트폴리오 웹사이트를 제작하는 방법에 대해 알아보았습니다. React.js는 강력한 기능과 높은 생산성으로 웹 개발을 할 수 있도록 도와줍니다. 관심 있는 분들은 공식 문서를 참고하시기 바랍니다.

#ReactJS #프론트엔드

목차

React.js란?

프로젝트 설정

컴포넌트 만들기

데이터 관리

스타일링

배포

마무리