Vue와 React 초기 셋팅 방법 요약 정리

Vue.js

Vue.js를 npm을 통해 초기 설정하는 방법은 몇 단계로 나눌 수 있습니다. 이 과정을 통해 Vue.js 기반의 프로젝트를 쉽고 빠르게 시작할 수 있습니다. 여기서는 vue3를 기준으로 설명합니다.

1. Node.js와 npm 설치하기

Vue.js 프로젝트를 시작하기 전에, 시스템에 Node.js와 npm이 설치되어 있어야 합니다. Node.js는 JavaScript 런타임이며, npm은 JavaScript 프로젝트를 위한 패키지 관리자입니다. Node.js를 설치하면 npm도 함께 설치됩니다.

2. Vue CLI 설치하기

Vue CLI는 Vue.js 개발을 위한 표준 도구이며, 프로젝트 생성, 구성, 개발을 도와줍니다. Vue CLI를 전역으로 설치하기 위해 다음 명령어를 사용합니다:

npm install -g @vue/cli

3. Vue 프로젝트 생성하기

Vue CLI가 설치되면, 새 Vue.js 프로젝트를 생성할 수 있습니다. 원하는 프로젝트 폴더로 이동한 후, 다음 명령어를 실행하여 새 프로젝트를 생성합니다:

vue create {project-name}

명령어를 실행하면, 몇 가지 설정을 묻는 질문이 나타납니다. 기본 설정을 사용하거나, 필요에 따라 맞춤 설정을 선택할 수 있습니다.

4. 프로젝트 폴더로 이동 및 서버 시작하기

프로젝트 생성이 완료되면, 생성된 프로젝트 폴더로 이동합니다:

cd {project-name}

그리고 Vue 프로젝트를 실행하기 위해 다음 명령어를 사용합니다:

npm run serve

이 명령어는 개발 서버를 시작하고, 웹 브라우저에서 Vue.js 애플리케이션을 볼 수 있도록 합니다. 기본적으로 http://localhost:8080 주소에서 애플리케이션을 확인할 수 있습니다.

SEO 최적화를 위한 팁

Vue.js 프로젝트를 SEO 친화적으로 만들기 위해 몇 가지 요소를 고려할 수 있습니다:

• 서버 사이드 렌더링(SSR): Vue.js 애플리케이션은 클라이언트 사이드에서 동적으로 렌더링되므로, 검색 엔진이 콘텐츠를 제대로 인식하지 못할 수 있습니다. SSR을 사용하면 초기 페이지 로드 시 서버에서 HTML을 렌더링하여 클라이언트로 전송하므로 검색 엔진이 콘텐츠를 쉽게 크롤링할 수 있습니다.
• 메타 태그 관리: Vue.js에서는 vue-meta 같은 라이브러리를 사용하여 페이지의 메타 정보를 동적으로 관리할 수 있습니다. 이를 통해 각 페이지의 제목, 설명, 키워드 등을 설정하여 SEO를 개선할 수 있습니다.

Vue.js를 사용하여 SEO 친화적인 웹사이트를 구축하려면, 이러한 요소를 고려하여 프로젝트를 계획하고 구현하는 것이 중요합니다.

Vue 프로젝트 라우팅 설정

Vue CLI를 사용해서 새 프로젝트를 만든 후, Vue Router를 이용해 페이지 라우팅을 구현할 수 있습니다. Vue Router는 Vue.js의 공식 라우터로, 단일 페이지 애플리케이션에서 페이지 간의 라우팅을 쉽게 구현할 수 있게 해줍니다. 아래 단계에 따라 Vue 프로젝트에서 페이지 라우팅을 설정할 수 있습니다.

1. Vue Router 설치하기

프로젝트 생성 시 Vue Router를 설정하지 않았다면, 다음 명령어를 사용해 Vue Router를 프로젝트에 추가할 수 있습니다:

npm install vue-router@4

2. 라우터 설정하기

src 폴더 내에 router 폴더를 만들고, 그 안에 index.js 파일을 생성합니다. index.js 파일에서 Vue Router를 import하고, 라우터 인스턴스를 생성합니다. 다음은 기본적인 라우터 설정 예시입니다:

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";

const routes = [
  {
    path: "/",
    name: "HomePage",
    component: Home,
  },
  {
    path: "/about",
    name: "AboutPage",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

이 예시에서는 두 개의 라우트(/와 /about)를 설정하고 있으며, 각각 Home.vue와 About.vue 컴포넌트를 렌더링합니다.

3. 컴포넌트 생성하기

src/views 폴더를 만들고, Home.vue와 About.vue와 같은 뷰 컴포넌트 파일을 생성합니다. 각 파일은 Vue 컴포넌트 구조를 따릅니다. 예를 들어, Home.vue 파일은 다음과 같을 수 있습니다:

<template>
  <div>
    <h1>Home Page</h1>
    <p>안녕하세요. {{ name }}입니다.</p>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "HomePage",
  setup() {
    const name = ref("Vue.js");
    return {
      name,
    };
  },
});
</script>

<template>
  <div>
    <h1>About Page</h1>
    <p>안녕하세요. {{ props.name }}입니다.</p>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  name: {
    type: String,
    default: "Vue3",
  },
});
</script>

4. 라우터를 앱에 연결하기

src/main.js 파일을 열고, 생성한 라우터 인스턴스를 Vue 인스턴스에 연결합니다. 이를 위해 router 인스턴스를 import하고, Vue 인스턴스 옵션에 추가합니다:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);
app.use(router);
app.mount("#app");

5. <router-view>와 <router-link> 사용하기

App.vue 또는 다른 컴포넌트에서 <router-view> 태그를 사용하여 현재 경로에 매칭되는 컴포넌트를 렌더링합니다. 또한, <router-link>를 사용하여 다른 경로로의 링크를 생성할 수 있습니다:

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

위와 같이 설정하면, Vue Router를 이용해 SPA에서 페이지 라우팅을 구현할 수 있습니다. 사용자가 링크를 클릭하면, Vue Router가 해당 경로의 컴포넌트를 <router-view> 위치에 렌더링하게 됩니다.

Vue에 SCSS 추가하기

Vue CLI를 사용하여 생성한 Vue 프로젝트에 SCSS를 적용하는 방법은 간단합니다.

1. SCSS 지원 추가

프로젝트 디렉토리로 이동한 후, SCSS를 사용하기 위해 필요한 패키지를 설치합니다. 대부분의 경우, sass와 sass-loader 패키지가 필요합니다.

npm install sass sass-loader --save-dev

2. SCSS 파일 생성 및 사용

이제 SCSS 파일을 생성하고 Vue 컴포넌트에서 사용할 수 있습니다. 예를 들어, App.vue 컴포넌트에 SCSS 스타일을 적용하려면 다음과 같이 할 수 있습니다.

먼저, src 폴더 내에 styles 폴더를 만들고 그 안에 main.scss 파일을 생성하세요. 그리고 간단한 SCSS 코드를 작성해봅니다:

// src/styles/main.scss
$body-color: #333;

body {
  font-family: 'Helvetica', sans-serif;
  color: $body-color;
}

그 다음, App.vue 또는 다른 Vue 컴포넌트에서 이 SCSS 파일을 임포트합니다:

<template>
  <div id="app">
    <!-- 컴포넌트 내용 -->
  </div>
</template>

<style lang="scss">
@import "@/styles/main.scss";

/* 컴포넌트 지역 스타일 */
</style>

<style> 태그에 lang="scss" 속성을 추가하여 SCSS를 사용하겠다고 명시해야 합니다. @import 구문을 사용하여 전역 스타일 파일을 임포트할 수 있으며, SCSS를 사용하면 CSS 코드를 더 효율적으로 관리할 수 있으며, 변수, 중첩 규칙, 믹스인 등 다양한 기능을 활용할 수 있습니다. 다음에는 전역 SCSS 설정을 추가하는 방법입니다.

1. 전역 SCSS 파일 생성하기

프로젝트의 src/assets 폴더 내에 전역으로 사용할 SCSS 파일을 생성합니다. 예를 들어, variables.scss 파일을 만들고 여기에 SCSS 변수나 믹스인을 정의할 수 있습니다.

// src/assets/variables.scss

$primary-color: #42b983;
$font-stack: 'Helvetica Neue', sans-serif;

2. vue.config.js 파일 설정

프로젝트 루트 디렉토리에 vue.config.js 파일을 생성하거나 편집합니다. 이 파일에서는 webpack 설정을 커스터마이즈할 수 있으며, 여기에 전역 SCSS 파일을 모든 Vue 컴포넌트에 사용할 수 있도록 설정할 수 있습니다.

// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/variables.scss";`
      },
    },
  },
};

additionalData 옵션은 각 스타일 파일이 처리되기 전에 지정된 내용을 파일에 자동으로 추가합니다. @import 문을 사용하여 전역 SCSS 파일의 경로를 지정합니다. Vue CLI는 내부적으로 @를 프로젝트의 src 디렉토리로 해석합니다.

3. 전역 SCSS 사용하기

vue.config.js에 설정을 추가한 후에는, variables.scss에 정의된 변수나 믹스인을 프로젝트 내 어느 컴포넌트의 <style> 태그에서도 바로 사용할 수 있습니다.

<style lang="scss">
.example {
  color: $primary-color;
  font-family: $font-stack;
}
</style>

React.js

React.js 프로젝트를 npm을 사용하여 초기 설정하는 과정은 간단하며, 주로 몇 단계로 나누어 집니다. 이 과정을 통해 React 기반의 프론트엔드 개발을 시작할 수 있습니다.

1. Node.js와 npm 설치하기

React 프로젝트를 시작하기 전에, 컴퓨터에 Node.js와 npm이 설치되어 있어야 합니다. Node.js는 JavaScript를 서버 사이드에서 실행할 수 있게 해주는 런타임이며, npm은 JavaScript 라이브러리와 패키지를 관리하는 데 사용되는 도구입니다. Node.js를 설치하면 npm도 함께 설치됩니다.

2. React 애플리케이션 생성하기

React 애플리케이션을 생성하는 가장 간단한 방법은 Create React App을 사용하는 것입니다. Create React App은 React 개발을 위한 환경을 제공하며, 필요한 모든 설정을 자동으로 처리해줍니다. 새 React 프로젝트를 생성하려면, 터미널이나 커맨드 프롬프트에서 다음 명령어를 실행하세요:

3. 프로젝트 폴더로 이동하기

npx create-react-app {project-name}

{project-name}은 생성하려는 프로젝트의 이름입니다. 원하는 이름으로 변경할 수 있습니다. npx는 Node.js 5.2.0 이상 버전에 포함된 도구로, npm 레지스트리에서 패키지를 실행할 수 있게 해줍니다.


위 명령어가 성공적으로 실행되면, 생성된 React 애플리케이션 폴더로 이동합니다:

#PRE
cd {project-name}

4. 개발 서버 시작하기

프로젝트 폴더 안에서 다음 명령어를 실행하여 로컬 개발 서버를 시작합니다:

npm start

이 명령어는 애플리케이션을 개발 모드로 실행하고, 기본적으로 http://localhost:3000 주소에서 애플리케이션을 볼 수 있게 해줍니다. 브라우저가 자동으로 열리고, 소스 코드에 변경 사항이 발생할 때마다 페이지가 자동으로 새로 고쳐집니다.

SEO 최적화를 위한 팁

React 애플리케이션의 SEO를 향상시키려면 몇 가지 추가 조치를 고려해야 할 수 있습니다:

• 서버 사이드 렌더링(SSR): React 앱은 기본적으로 클라이언트 사이드에서 렌더링되므로 검색 엔진이 앱의 내용을 적절하게 인덱싱하지 못할 수 있습니다. Next.js 같은 프레임워크를 사용하여 SSR을 구현할 수 있습니다.
• 메타 태그 동적 관리: React Helmet 같은 라이브러리를 사용하여 페이지의 메타 데이터(예: 페이지 제목, 설명)를 동적으로 관리할 수 있습니다.

React 기반 웹 애플리케이션의 초기 설정과 SEO 최적화는 프로젝트의 성공에 중요한 부분입니다. 이 가이드가 여러분의 프로젝트 시작에 도움이 되길 바랍니다.

React 프로젝트 라우팅 설정

React 프로젝트에서 기본적인 라우팅을 구현하기 위해서는 React Router를 사용하는 것이 일반적입니다. React Router는 SPA에서 페이지간의 네비게이션을 구현할 수 있도록 도와주는 라이브러리입니다. 여기서는 React Router v6를 기준으로 설명합니다.

1. React Router 설치하기

프로젝트 디렉토리에서 다음 명령어를 실행하여 React Router를 설치합니다.

npm install react-router-dom

2. Router 설정하기

앱의 루트 컴포넌트(대부분 App.js 또는 App.tsx)에서 BrowserRouter를 import하고 사용하여, 앱 전체에 라우팅 기능을 제공합니다.

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Navigation from "./pages/Navigation";

function App() {
  return (
    <Router>
      <Navigation />
      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 페이지 컴포넌트 생성하기

라우팅을 위해 최소 두 개의 페이지 컴포넌트(예: Home.jsx, About.jsx)를 생성합니다.

import React from "react";

function Home() {
  return <h2>Home Page</h2>;
}

export default Home;

import React from "react";

function About() {
  return <h2>About Page</h2>;
}

export default About;

4. 링크 추가하기

Link 컴포넌트를 사용하여 다른 페이지로의 링크를 추가합니다. Link는 a 태그와 유사하지만 페이지 새로고침 없이 라우트 간의 전환을 가능하게 합니다.

import { Link } from "react-router-dom";

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation;

참고하기

• React Router v6 이전 버전에서는 Switch 컴포넌트가 URL이 Route 컴포넌트 중 하나와 일치할 때 해당 컴포넌트를 렌더링합니다. URL이 여러 Route와 일치하는 경우, Switch는 첫 번째 일치하는 컴포넌트만 렌더링합니다.
• React Router v6부터는 Switch 대신 Routes 컴포넌트를 사용하고, Route 컴포넌트의 사용법도 바뀌었습니다. 해당 버전을 사용할 경우 공식 문서를 참조하시기 바랍니다.

React에 SCSS 추가하는 방법

SASS는 CSS를 확장하는 강력한 전처리기로, 복잡한 스타일시트를 쉽게 관리할 수 있게 해줍니다. create-react-app으로 생성된 프로젝트에 SASS를 추가하는 것은 매우 간단합니다.

1. Sass 설치하기

프로젝트 디렉토리로 이동한 후, 다음 명령어를 터미널에 입력하여 Sass를 설치합니다:

npm install sass

2. Sass 파일 작성하기

설치가 완료되면, .scss 또는 .sass 확장자를 가진 Sass 파일을 생성하고 스타일을 작성할 수 있습니다. 예를 들어, App.scss라는 이름의 파일을 생성하고, 다음과 같이 간단한 스타일을 추가할 수 있습니다.

// App.scss
$body-color: #333;

body {
  font-family: 'Helvetica', sans-serif;
  color: $body-color;
}

3. Sass 파일을 React 컴포넌트에 임포트하기

Sass 파일을 작성한 후, 해당 스타일을 사용하고자 하는 React 컴포넌트에서 .scss 파일을 임포트해야 합니다. 예를 들어, App.jsx에서 App.scss를 사용하려면 다음과 같이 임포트합니다:

// App.js
import './App.scss';

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

참고 하세요.

• create-react-app v2 이상부터는 별도의 설정 없이 SASS를 사용할 수 있습니다. 위의 단계대로 하면 추가적인 설정은 필요하지 않습니다.
• CSS 모듈을 사용하는 경우, 파일 이름을 [name].module.scss와 같이 지정하면, 클래스 이름이 고유하게 변환되어 스타일 충돌을 방지할 수 있습니다. 예를 들어, App.module.scss로 파일을 이름 짓고, 이를 App.js에서 임포트하여 사용할 수 있습니다.

CSS-in-JS 라이브러리로 모듈화하기

React에서 CSS-in-JS 라이브러리를 사용하여 특정 컴포넌트에만 CSS 스타일을 적용하는 것은 스타일의 모듈화와 컴포넌트 단위의 스타일 관리를 가능하게 해 줍니다. CSS-in-JS는 CSS를 JavaScript 파일 내에서 직접 작성할 수 있게 해 주며, 이 스타일은 해당 JavaScript 파일(또는 컴포넌트)에만 적용됩니다. 이 방식의 장점은 스타일의 캡슐화, 즉 컴포넌트별로 스타일이 격리되어 글로벌 스타일 충돌을 방지할 수 있다는 것입니다.

여기서는 styled-components와 @emotion/styled 두 가지 인기 있는 CSS-in-JS 라이브러리를 사용한 예시를 소개합니다.

1. styled-components 사용하기

먼저 styled-components 라이브러리를 프로젝트에 설치합니다.

npm install styled-components

styled-components를 사용하여 스타일이 적용된 컴포넌트를 생성합니다.

import styled from 'styled-components';

// 버튼 컴포넌트 생성
const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

function MyComponent() {
  return <StyledButton>Click Me</StyledButton>;
}

export default MyComponent;

2. @emotion/styled 사용하기

@emotion/styled 라이브러리를 프로젝트에 설치합니다.

npm install @emotion/styled @emotion/react

@emotion/styled를 사용하여 스타일이 적용된 컴포넌트를 생성합니다.

/** @jsxImportSource @emotion/react */
import styled from '@emotion/styled';

// Div 컴포넌트 생성
const StyledDiv = styled.div`
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
  margin: 10px 0;

  h2 {
    color: #333;
  }
`;

function MyComponent() {
  return (
    <StyledDiv>
      <h2>Styled with @emotion/styled</h2>
    </StyledDiv>
  );
}

export default MyComponent;

이러한 방식으로, 각 컴포넌트에 고유한 스타일을 적용할 수 있으며, 이 스타일은 컴포넌트 외부에 영향을 미치지 않습니다. CSS-in-JS 라이브러리를 사용하면, 스타일의 관리가 더욱 용이해지고, JavaScript와 CSS 사이의 연동을 강화할 수 있는 장점이 있습니다.

마치며

Vue와 React는 현대 웹 개발에서 가장 인기 있는 두 프론트엔드 프레임워크입니다. 각각의 프레임워크는 고유한 장점을 가지고 있으며, 프로젝트의 요구사항과 개발 팀의 선호도에 따라 선택될 수 있습니다. 초기 설정 과정을 간단하게 살펴보면, 이 두 프레임워크 모두 빠르고 효율적으로 시작할 수 있도록 설계되었습니다.

Vue.js의 경우, Vue CLI를 사용하여 프로젝트를 초기 설정하는 과정이 매우 간단합니다. 명령 한 줄로 Vue CLI를 전역에 설치한 다음, vue create project-name 명령어로 새 프로젝트를 생성할 수 있죠. 또한, Vue CLI는 프로젝트 생성 시 다양한 구성 옵션을 제공하여, 개발자가 프로젝트의 필요에 맞게 환경을 세밀하게 조정할 수 있도록 합니다. Vue는 그 구조가 직관적이며, 학습 곡선이 상대적으로 완만하여 프론트엔드 개발에 처음 접근하는 사람들에게도 좋은 대안이 될 수 있습니다.

React.js는 Create React App을 통해 비슷하게 쉽게 시작할 수 있습니다. npx create-react-app project-name 명령어를 실행하면, 복잡한 환경 설정 없이 React 기반의 프로젝트를 바로 시작할 수 있습니다. React는 컴포넌트 기반 개발에 초점을 맞추고 있으며, 대규모 애플리케이션과 복잡한 상태 관리가 필요한 프로젝트에 특히 유용합니다. 또한, 방대한 생태계와 광범위한 커뮤니티 지원을 자랑합니다.

결국, Vue와 React 모두를 사용한 초기 셋팅은 매우 간단하고, 각각의 프레임워크가 제공하는 도구들은 개발자가 손쉽게 시작할 수 있도록 도와줍니다. 선택의 기준은 프로젝트의 특정 요구사항, 팀의 기술 스택 선호도, 그리고 개발 생산성에 미치는 영향 등에 따라 달라질 수 있습니다.

Vue가 제공하는 간결하고 이해하기 쉬운 문법은 빠르게 프로토타이핑하거나 작은 규모의 프로젝트에 적합할 수 있습니다. 반면, React의 강력한 컴포넌트 시스템과 광범위한 생태계는 대규모 애플리케이션 개발에 더 적합할 수 있습니다. 따라서, 프로젝트의 요구와 팀의 선호도를 고려하여 가장 적합한 프레임워크를 선택하는 것이 중요합니다.